import type { ServiceGlyphKind } from "@/content/home";

export const glyphCaptions: Record<ServiceGlyphKind, string> = {
  allocation: "Budget moves toward channels below target CAC",
  search: "Pages built for buying intent, cited in AI answers",
  experiment: "Every test starts with a written hypothesis",
  message: "The page confirms the promise the ad made",
  pipeline: "One path from click to revenue report",
  loop: "Retention raises LTV, and LTV funds acquisition",
};

const mono = { className: "fill-muted font-mono", fontSize: 10.5, letterSpacing: "0.08em" } as const;

function Allocation() {
  const rows = [
    { label: "SEARCH", x: 206, under: true },
    { label: "SHOPPING", x: 232, under: true },
    { label: "META", x: 318, under: false },
    { label: "LINKEDIN", x: 184, under: true },
  ];
  return (
    <>
      <text x="262" y="26" textAnchor="middle" {...mono}>
        TARGET CAC
      </text>
      <path d="M262 36 V272" className="draw-path stroke-ink/50" strokeDasharray="3 4" pathLength={1000} />
      {rows.map((row, i) => {
        const y = 70 + i * 62;
        return (
          <g key={row.label}>
            <text x="0" y={y + 4} {...mono}>
              {row.label}
            </text>
            <path d={`M124 ${y} H392`} className="stroke-line" />
            <path d={`M124 ${y} H${row.x}`} className={row.under ? "draw-path stroke-signal" : "draw-path stroke-ink/40"} strokeWidth="2" pathLength={1000} />
            <circle cx={row.x} cy={y} r="6" className={row.under ? "fill-signal" : "fill-surface stroke-ink"} strokeWidth="1.5" />
            <path
              d={row.under ? `M100 ${y + 4} l5 -8 l5 8` : `M100 ${y - 4} l5 8 l5 -8`}
              className={row.under ? "fill-none stroke-signal" : "fill-none stroke-ink/50"}
              strokeWidth="1.5"
            />
          </g>
        );
      })}
      <text x="392" y="292" textAnchor="end" {...mono}>
        MARGINAL CAC →
      </text>
    </>
  );
}

function Search() {
  const queries = ["best tool for …", "x vs y pricing", "how to reduce …"];
  return (
    <>
      <text x="0" y="22" {...mono}>
        QUERIES
      </text>
      <text x="178" y="22" {...mono}>
        PAGES
      </text>
      <text x="300" y="22" {...mono}>
        AI ANSWER
      </text>
      {queries.map((query, i) => (
        <g key={query}>
          <rect x="0.5" y={50 + i * 72} width="136" height="30" rx="15" className="fill-surface stroke-line" />
          <text x="14" y={69 + i * 72} className="fill-ink-soft" fontSize="12">
            {query}
          </text>
          <path d={`M137 ${65 + i * 72} C160 ${65 + i * 72} 156 ${i < 2 ? 90 : 196} 178 ${i < 2 ? 90 : 196}`} className="draw-path fill-none stroke-ink/30" pathLength={1000} />
        </g>
      ))}
      {[60, 166].map((y, i) => (
        <g key={y}>
          <rect x="178.5" y={y + 0.5} width="94" height="72" rx="4" className={i === 0 ? "fill-surface stroke-signal" : "fill-surface stroke-line"} />
          <rect x="190" y={y + 12} width="54" height="6" rx="3" className={i === 0 ? "fill-signal" : "fill-ink/20"} />
          <rect x="190" y={y + 28} width="70" height="4" rx="2" className="fill-ink/10" />
          <rect x="190" y={y + 40} width="62" height="4" rx="2" className="fill-ink/10" />
          <rect x="190" y={y + 52} width="44" height="4" rx="2" className="fill-ink/10" />
        </g>
      ))}
      <rect x="300.5" y="40.5" width="99" height="232" rx="6" className="fill-paper-deep stroke-line" />
      {[64, 80, 96, 112, 150, 166, 182].map((y, i) => (
        <rect key={y} x="314" y={y} width={i % 3 === 2 ? 48 : 72} height="5" rx="2.5" className="fill-ink/15" />
      ))}
      <rect x="314" y="126" width="30" height="14" rx="3" className="fill-signal" />
      <text x="329" y="136.5" textAnchor="middle" className="fill-white font-mono" fontSize="9">
        [1]
      </text>
      <rect x="314.5" y="198.5" width="29" height="13" rx="3" className="fill-surface stroke-line" />
      <text x="329" y="208.5" textAnchor="middle" className="fill-muted font-mono" fontSize="9">
        [2]
      </text>
      <path d="M273 96 C292 96 290 133 314 133" className="draw-path fill-none stroke-signal" strokeWidth="1.5" pathLength={1000} />
    </>
  );
}

function PageWireframe({ x, variant }: { x: number; variant: boolean }) {
  return (
    <g>
      <rect x={x + 0.5} y="36.5" width="159" height="196" rx="6" className={variant ? "fill-surface stroke-signal" : "fill-surface stroke-line"} />
      <rect x={x + 14} y="50" width="40" height="6" rx="3" className="fill-ink/20" />
      <rect x={x + 14} y="70" width="132" height="58" rx="3" className="fill-ink/[0.06]" />
      <rect x={x + 14} y="142" width={variant ? 104 : 118} height="8" rx="4" className={variant ? "fill-ink/60" : "fill-ink/35"} />
      <rect x={x + 14} y="160" width="96" height="4" rx="2" className="fill-ink/12" />
      <rect x={x + 14} y="172" width="80" height="4" rx="2" className="fill-ink/12" />
      <rect x={x + 14} y="194" width={variant ? 80 : 64} height="24" rx="4" className={variant ? "fill-signal" : "fill-ink/25"} />
    </g>
  );
}

function Experiment() {
  return (
    <>
      <text x="20" y="22" {...mono}>
        CONTROL
      </text>
      <text x="220" y="22" {...mono}>
        VARIANT
      </text>
      <PageWireframe x={20} variant={false} />
      <PageWireframe x={220} variant />
      <path d="M20 262 H180" className="stroke-line" strokeWidth="6" strokeLinecap="round" />
      <path d="M20 262 H104" className="draw-path stroke-ink/35" strokeWidth="6" strokeLinecap="round" pathLength={1000} />
      <path d="M220 262 H380" className="stroke-line" strokeWidth="6" strokeLinecap="round" />
      <path d="M220 262 H344" className="draw-path stroke-signal" strokeWidth="6" strokeLinecap="round" pathLength={1000} />
      <text x="20" y="290" {...mono}>
        CONVERSION TO PIPELINE / ORDERS
      </text>
    </>
  );
}

function MessageMatch() {
  return (
    <>
      <text x="10" y="40" {...mono}>
        AD
      </text>
      <rect x="10.5" y="52.5" width="150" height="190" rx="6" className="fill-surface stroke-line" />
      <rect x="24" y="66" width="122" height="74" rx="3" className="fill-ink/[0.06]" />
      <rect x="24" y="156" width="104" height="8" rx="4" className="fill-signal" />
      <rect x="24" y="172" width="84" height="8" rx="4" className="fill-signal" />
      <rect x="24" y="194" width="110" height="4" rx="2" className="fill-ink/12" />
      <rect x="24" y="212" width="52" height="18" rx="3" className="fill-ink/25" />

      <path d="M172 150 H214" className="draw-path stroke-ink/40" pathLength={1000} />
      <path d="M208 144 l7 6 l-7 6" className="fill-none stroke-ink/40" />

      <text x="228" y="22" {...mono}>
        LANDING PAGE
      </text>
      <rect x="228.5" y="34.5" width="160" height="240" rx="6" className="fill-surface stroke-signal" />
      <rect x="242" y="48" width="38" height="6" rx="3" className="fill-ink/20" />
      <rect x="242" y="76" width="104" height="8" rx="4" className="fill-signal" />
      <rect x="242" y="92" width="84" height="8" rx="4" className="fill-signal" />
      <rect x="242" y="116" width="120" height="4" rx="2" className="fill-ink/12" />
      <rect x="242" y="128" width="100" height="4" rx="2" className="fill-ink/12" />
      <rect x="242" y="150" width="70" height="24" rx="4" className="fill-signal" />
      <rect x="242" y="192" width="132" height="66" rx="3" className="fill-ink/[0.06]" />
    </>
  );
}

function Pipeline() {
  const sources = ["ADS", "SITE", "CRM / STORE"];
  const destinations = ["GA4", "AD PLATFORMS", "REVENUE REPORT"];
  return (
    <>
      {sources.map((label, i) => {
        const y = 62 + i * 82;
        return (
          <g key={label}>
            <rect x="0.5" y={y - 15.5} width="104" height="31" rx="4" className="fill-surface stroke-line" />
            <text x="52" y={y + 4} textAnchor="middle" {...mono}>
              {label}
            </text>
            <path d={`M105 ${y} C150 ${y} 150 144 172 144`} className="draw-path fill-none stroke-ink/30" pathLength={1000} />
          </g>
        );
      })}
      <circle cx="200" cy="144" r="28" className="fill-ink" />
      <circle cx="200" cy="144" r="6" className="fill-signal" />
      <text x="200" y="196" textAnchor="middle" {...mono}>
        SERVER-SIDE
      </text>
      {destinations.map((label, i) => {
        const y = 62 + i * 82;
        const isRevenue = i === 2;
        return (
          <g key={label}>
            <path
              d={`M228 144 C250 144 250 ${y} 292 ${y}`}
              className={isRevenue ? "draw-path fill-none stroke-signal" : "draw-path fill-none stroke-ink/30"}
              strokeWidth={isRevenue ? 1.75 : 1}
              pathLength={1000}
            />
            <rect x="292.5" y={y - 15.5} width="106" height="31" rx="4" className={isRevenue ? "fill-signal-mist stroke-signal" : "fill-surface stroke-line"} />
            <text x="345" y={y + 4} textAnchor="middle" className={isRevenue ? "fill-signal font-mono" : "fill-muted font-mono"} fontSize="10" letterSpacing="0.06em">
              {label}
            </text>
          </g>
        );
      })}
    </>
  );
}

function Loop() {
  const nodes = [
    { label: "ONBOARD", x: 200, y: 46, anchor: "middle" as const, ty: -14 },
    { label: "NURTURE", x: 304, y: 150, anchor: "start" as const, ty: 4 },
    { label: "REPEAT / EXPAND", x: 200, y: 254, anchor: "middle" as const, ty: 26 },
    { label: "WIN-BACK", x: 96, y: 150, anchor: "end" as const, ty: 4 },
  ];
  return (
    <>
      <circle cx="200" cy="150" r="104" className="fill-none stroke-line" />
      <path d="M200 46 A104 104 0 1 1 96 150" className="draw-path fill-none stroke-signal" strokeWidth="2" pathLength={1000} />
      {nodes.map((node, i) => (
        <g key={node.label}>
          <circle cx={node.x} cy={node.y} r="7" className={i === 2 ? "fill-signal" : "fill-surface stroke-ink"} strokeWidth="1.5" />
          <text x={node.x + (node.anchor === "start" ? 16 : node.anchor === "end" ? -16 : 0)} y={node.y + node.ty} textAnchor={node.anchor} {...mono}>
            {node.label}
          </text>
        </g>
      ))}
      <text x="200" y="148" textAnchor="middle" className="fill-ink" fontSize="30" fontWeight="500" letterSpacing="-0.03em">
        LTV
      </text>
      <text x="200" y="170" textAnchor="middle" {...mono}>
        COMPOUNDS
      </text>
    </>
  );
}

const glyphs: Record<ServiceGlyphKind, () => React.JSX.Element> = {
  allocation: Allocation,
  search: Search,
  experiment: Experiment,
  message: MessageMatch,
  pipeline: Pipeline,
  loop: Loop,
};

export function ServiceGlyph({ kind }: { kind: ServiceGlyphKind }) {
  const Glyph = glyphs[kind];
  return (
    <svg viewBox="0 0 400 300" className="h-auto w-full overflow-visible" role="img" aria-label={glyphCaptions[kind]}>
      <Glyph />
    </svg>
  );
}