"use client";

import { useTranslation } from "@turbostarter/i18n";

import {
  Section,
  SectionBadge,
  SectionDescription,
  SectionHeader,
  SectionTitle,
} from "~/modules/marketing/layout/section";

// ---------------------------------------------------------------------------
// Static data
// ---------------------------------------------------------------------------

const SCORE_BANDS = [
  { range: "0–39", width: "40%", color: "#ef4444", key: "scoreCritical" },
  { range: "40–59", width: "20%", color: "#f97316", key: "scorePoor" },
  { range: "60–74", width: "15%", color: "#f59e0b", key: "scoreFair" },
  { range: "75–89", width: "15%", color: "#22c55e", key: "scoreGood" },
  { range: "90–100", width: "10%", color: "#059669", key: "scoreExcellent" },
] as const;

const VALENCE_MARKERS = [
  { symbol: "+", color: "#22c55e", bg: "bg-green-50 dark:bg-green-950/30", border: "border-green-300 dark:border-green-800", key: "valencePos" },
  { symbol: "\u2212", color: "#ef4444", bg: "bg-red-50 dark:bg-red-950/30", border: "border-red-300 dark:border-red-800", key: "valenceNeg" },
  { symbol: "0", color: "#9ca3af", bg: "bg-gray-50 dark:bg-gray-900/30", border: "border-gray-300 dark:border-gray-700", key: "valenceNeu" },
  { symbol: "\u00b1", color: "#f59e0b", bg: "bg-amber-50 dark:bg-amber-950/30", border: "border-amber-300 dark:border-amber-800", key: "valenceMix" },
] as const;

const EXPERIENCE_DOMAINS = [
  { code: "O", color: "#3b82f6", key: "domainO" },
  { code: "P", color: "#22c55e", key: "domainP" },
  { code: "J", color: "#f59e0b", key: "domainJ" },
  { code: "E", color: "#8b5cf6", key: "domainE" },
  { code: "V", color: "#f43f5e", key: "domainV" },
] as const;

const INTENSITY_LEVELS = [
  { bars: 1, key: "intensity1" },
  { bars: 2, key: "intensity2" },
  { bars: 3, key: "intensity3" },
] as const;

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export const HowToRead = () => {
  const { t } = useTranslation("marketing");

  return (
    <Section id="how-to-read">
      <SectionHeader>
        <SectionBadge>{t("howToRead.label")}</SectionBadge>
        <SectionTitle>{t("howToRead.title")}</SectionTitle>
        <SectionDescription>{t("howToRead.description")}</SectionDescription>
      </SectionHeader>

      <div className="w-full max-w-3xl space-y-4">
        {/* Score Spectrum */}
        <div className="bg-muted/20 rounded-xl border p-5">
          <h3 className="text-foreground mb-3 text-sm font-bold">
            {t("howToRead.scoreTitle")}
          </h3>
          <div className="mb-1.5 flex h-7 overflow-clip rounded-md">
            {SCORE_BANDS.map((band) => (
              <div
                key={band.range}
                className="flex items-center justify-center text-[9px] font-semibold text-white"
                style={{ width: band.width, backgroundColor: band.color }}
              >
                {t(`howToRead.${band.key}` as const)}
              </div>
            ))}
          </div>
          <div className="text-muted-foreground mb-2 flex justify-between text-[9px]">
            <span>0</span>
            <span>40</span>
            <span>60</span>
            <span>75</span>
            <span>90</span>
            <span>100</span>
          </div>
          <p className="text-muted-foreground text-xs leading-relaxed">
            {t("howToRead.scoreDesc")}
          </p>
        </div>

        {/* 2x2 Grid */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {/* Sentiment Markers */}
          <div className="bg-muted/20 rounded-xl border p-5">
            <h3 className="text-foreground mb-1 text-sm font-bold">
              {t("howToRead.valenceTitle")}
            </h3>
            <p className="text-muted-foreground mb-3 text-xs leading-relaxed">
              {t("howToRead.valenceDesc")}
            </p>
            <div className="flex flex-col gap-2">
              {VALENCE_MARKERS.map((v) => (
                <div key={v.symbol} className="flex items-center gap-2.5">
                  <span
                    className={`flex size-6 shrink-0 items-center justify-center rounded border text-sm font-bold ${v.bg} ${v.border}`}
                    style={{ color: v.color }}
                  >
                    {v.symbol}
                  </span>
                  <span className="text-muted-foreground text-xs">
                    {t(`howToRead.${v.key}` as const)}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Experience Domains */}
          <div className="bg-muted/20 rounded-xl border p-5">
            <h3 className="text-foreground mb-1 text-sm font-bold">
              {t("howToRead.domainsTitle")}
            </h3>
            <p className="text-muted-foreground mb-3 text-xs leading-relaxed">
              {t("howToRead.domainsDesc")}
            </p>
            <div className="flex flex-col gap-2">
              {EXPERIENCE_DOMAINS.map((d) => (
                <div key={d.code} className="flex items-center gap-2.5">
                  <span
                    className="flex size-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                    style={{ backgroundColor: d.color }}
                  >
                    {d.code}
                  </span>
                  <span className="text-muted-foreground text-xs">
                    {t(`howToRead.${d.key}` as const)}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Intensity Levels */}
          <div className="bg-muted/20 rounded-xl border p-5">
            <h3 className="text-foreground mb-1 text-sm font-bold">
              {t("howToRead.intensityTitle")}
            </h3>
            <p className="text-muted-foreground mb-3 text-xs leading-relaxed">
              {t("howToRead.intensityDesc")}
            </p>
            <div className="flex flex-col gap-2">
              {INTENSITY_LEVELS.map((il) => (
                <div key={il.bars} className="flex items-center gap-2.5">
                  <div className="flex w-6 shrink-0 justify-center gap-0.5">
                    {Array.from({ length: 3 }, (_, i) => (
                      <div
                        key={i}
                        className="h-3.5 w-[5px] rounded-sm"
                        style={{
                          backgroundColor: i < il.bars ? "#4285F4" : "#e2e8f0",
                        }}
                      />
                    ))}
                  </div>
                  <span className="text-muted-foreground text-xs">
                    {t(`howToRead.${il.key}` as const)}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Reading Tips */}
          <div className="bg-muted/20 rounded-xl border p-5">
            <h3 className="text-foreground mb-3 text-sm font-bold">
              {t("howToRead.tipsTitle")}
            </h3>
            <div className="flex flex-col gap-2.5">
              {(["howToRead.tip1", "howToRead.tip2", "howToRead.tip3", "howToRead.tip4"] as const).map((key, i) => (
                <div key={key} className="flex gap-2">
                  <span className="shrink-0 text-xs font-bold" style={{ color: "#4285F4" }}>
                    {i + 1}.
                  </span>
                  <span className="text-muted-foreground text-xs leading-relaxed">
                    {t(key)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};
