/* HLiD — Problem, Solution, AI Layer, Workflow sections */

/* ------------ SECTION EYEBROW ------------ */
function Eyebrow({ n, label }) {
  return (
    <div className="flex items-center gap-4 font-mono text-[10px] uppercase tracking-[0.25em] text-fg-subtle mb-10">
      <span className="text-fg-faint">{n}</span>
      <span className="w-8 h-px bg-fg-faint" />
      {label}
    </div>
  );
}

/* Minimal line icons — 1.5px stroke */
const Glyph = {
  fragmented: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <rect x="3" y="4" width="12" height="16" /><rect x="19" y="4" width="10" height="10" /><rect x="33" y="4" width="8" height="14" />
      <rect x="3" y="24" width="10" height="16" /><rect x="17" y="18" width="14" height="22" /><rect x="35" y="22" width="6" height="18" />
    </svg>
  ),
  manual: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <path d="M8 36l8-16 6 8 8-16 6 12"/><path d="M4 40h36"/><circle cx="16" cy="20" r="1.5" fill="currentColor"/><circle cx="22" cy="28" r="1.5" fill="currentColor"/><circle cx="30" cy="12" r="1.5" fill="currentColor"/>
    </svg>
  ),
  bottleneck: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <path d="M4 8h36l-14 14v14l-8-4V22z"/>
    </svg>
  ),
  entry: (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
      <path d="M12 6v28M12 34l-6-6M12 34l6-6"/><path d="M28 38v-28M28 10l-6 6M28 10l6 6"/>
    </svg>
  ),
};

/* ------------ 2. PROBLEM ------------ */
function Problem() {
  const { t } = useT();
  const items = [
    [Glyph.fragmented, t('problem.1.t'), t('problem.1.b')],
    [Glyph.manual,     t('problem.2.t'), t('problem.2.b')],
    [Glyph.bottleneck, t('problem.3.t'), t('problem.3.b')],
    [Glyph.entry,      t('problem.4.t'), t('problem.4.b')],
  ];
  return (
    <section id="problem" className="relative bg-bg-sunken border-t border-border">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 01" label={t('problem.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-24">
          <Reveal className="col-span-12 md:col-span-7">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.98]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('problem.h1.a')}<br />
              <span className="text-fg-subtle">{t('problem.h1.b')}</span>
            </h2>
          </Reveal>
          <Reveal delay={100} className="col-span-12 md:col-span-4 md:col-start-9 md:pt-4">
            <p className="text-[16px] md:text-[17px] text-fg-muted leading-relaxed">
              {t('problem.lede')}
            </p>
          </Reveal>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-8">
          {items.map(([icon, title, body], i) => (
            <Reveal key={title} delay={i * 100}>
              <div className="border-t border-border pt-6">
                <div className="text-steel mb-6">{icon}</div>
                <div className="font-display font-bold text-fg text-[20px] tracking-tight leading-snug mb-3">{title}</div>
                <p className="text-[14px] text-fg-muted leading-relaxed">{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------ 3. SOLUTION — PIPELINE ------------ */
function Solution() {
  const { t } = useT();
  const nodes = [
    ['01', t('solution.n1'), t('solution.n1.s')],
    ['02', t('solution.n2'), t('solution.n2.s')],
    ['03', t('solution.n3'), t('solution.n3.s')],
    ['04', t('solution.n4'), t('solution.n4.s')],
    ['05', t('solution.n5'), t('solution.n5.s')],
    ['06', t('solution.n6'), t('solution.n6.s')],
    ['07', t('solution.n7'), t('solution.n7.s')],
  ];
  return (
    <section id="solution" className="relative border-t border-border bg-bg">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 02" label={t('solution.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-16 md:mb-20">
          <Reveal className="col-span-12 md:col-span-8">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.98]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('solution.h1')}
            </h2>
          </Reveal>
        </div>

        {/* Desktop — horizontal pipeline */}
        <div className="hidden md:block relative">
          <div className="absolute top-[58px] left-0 right-0 h-px bg-border" />
          <div className="grid grid-cols-7 relative">
            {nodes.map(([n, title, sub], i) => (
              <Reveal key={n} delay={i * 70}>
                <div className="relative pr-4">
                  <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-fg-subtle mb-4">{n}</div>
                  <div className="relative flex items-center justify-start pb-4">
                    <div className="w-2 h-2 bg-fg rounded-full relative z-10 shadow-[0_0_0_4px_var(--color-bg)]" />
                  </div>
                  <div className="font-display font-bold text-fg text-[20px] leading-tight tracking-tight mb-1.5 mt-2">{title}</div>
                  <div className="font-mono text-[10.5px] uppercase tracking-[0.14em] text-fg-subtle">{sub}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* Mobile — stacked */}
        <div className="md:hidden space-y-0">
          {nodes.map(([n, title, sub], i) => (
            <div key={n} className="grid grid-cols-[56px_1fr] gap-4 py-5 border-t border-border last:border-b">
              <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-fg-subtle pt-2">{n}</div>
              <div>
                <div className="font-display font-bold text-fg text-[20px] tracking-tight mb-1">{title}</div>
                <div className="font-mono text-[10.5px] uppercase tracking-[0.14em] text-fg-subtle">{sub}</div>
              </div>
            </div>
          ))}
        </div>

        <Reveal delay={400}>
          <div className="mt-16 md:mt-24 grid grid-cols-12 gap-8">
            <p className="col-span-12 md:col-span-6 md:col-start-7 text-[15px] text-fg-muted leading-relaxed">
              {t('solution.foot')}
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ------------ 4. AI LAYER ------------ */
function AILayer() {
  const { t } = useT();
  const stats = [
    ['3–5×', t('ai.s1.label'), t('ai.s1.foot')],
    ['0',    t('ai.s2.label'), t('ai.s2.foot')],
    ['24/7', t('ai.s3.label'), t('ai.s3.foot')],
  ];
  return (
    <section id="ai" className="relative border-t border-border bg-bg-sunken">
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-32">
        <Eyebrow n="§ 03" label={t('ai.eyebrow')} />
        <div className="grid grid-cols-12 gap-8 mb-20 md:mb-28">
          <Reveal className="col-span-12 md:col-span-9">
            <h2 className="font-display font-bold text-fg tracking-tighter leading-[0.96]" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.75rem)' }}>
              {t('ai.h1.a')}<br />
              <span className="text-fg-subtle">{t('ai.h1.b')}</span>
            </h2>
          </Reveal>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-0 md:divide-x divide-border">
          {stats.map(([big, label, foot], i) => (
            <Reveal key={label} delay={i * 120}>
              <div className="md:px-10 first:md:pl-0 last:md:pr-0">
                <div className="font-display font-bold text-fg leading-[0.9] tracking-tighter" style={{ fontSize: 'clamp(4.5rem, 10vw, 9rem)' }}>
                  {big}
                </div>
                <div className="mt-5 font-mono text-[11px] uppercase tracking-[0.25em] text-fg">
                  {label}
                </div>
                <div className="mt-2 font-mono text-[11px] tracking-[0.04em] text-fg-subtle leading-relaxed">
                  {foot}
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300}>
          <div className="mt-20 md:mt-28 grid grid-cols-12 gap-8">
            <div className="col-span-12 md:col-span-6 md:col-start-7">
              <p className="text-[16px] md:text-[17px] text-fg-muted leading-relaxed">
                {t('ai.foot')}
              </p>
              <div className="mt-6 flex flex-wrap gap-2 font-mono text-[10px] uppercase tracking-[0.18em]">
                {['Pixel-traceable', 'Human-in-the-loop', 'Monthly eval', 'Per-locale holdout'].map(x => (
                  <span key={x} className="px-2.5 py-1 border border-border text-fg-muted rounded-[3px]">{x}</span>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, Solution, AILayer, Eyebrow, Glyph });