const { useState: useStateM, useEffect: useEffectM } = React;

/* ---------------- CAPTURE FLOW ---------------- */
function FlowSection() {
  const { eyebrow, headline, steps } = CONTENT.flow;
  const iconFor = { answer: Icon.Phone, qualify: Icon.Check, route: Icon.Route, recover: Icon.Recover, sync: Icon.Sync };

  return (
    <section id="product" className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={eyebrow} headline={headline} />

        {/* Desktop horizontal */}
        <div className="hidden md:block reveal">
          <div className="relative">
            {/* connecting line */}
            <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 h-px flow-line"
                 style={{ background: 'linear-gradient(90deg, transparent 2%, rgba(94,234,212,0.3) 10%, rgba(167,139,250,0.25) 50%, rgba(94,234,212,0.3) 90%, transparent 98%)' }}>
            </div>
            <ol className="grid grid-cols-5 gap-4 relative">
              {steps.map((s, i) => {
                const Ico = iconFor[s.key] || Icon.Circle;
                return (
                  <li key={s.key} className="glass glass-hover p-5 text-center">
                    <div className="flex items-center justify-center h-10 w-10 mx-auto rounded-full" style={{ background: 'rgba(94,234,212,0.10)', color: '#5EEAD4', border: '1px solid rgba(94,234,212,0.25)' }}>
                      <Ico size={18} />
                    </div>
                    <div className="mt-4 font-mono text-[10.5px] uppercase tracking-wider text-faint">Step 0{i+1}</div>
                    <div className="mt-1 h-display text-[20px]">{s.title}</div>
                    <div className="mt-2 text-[13px] leading-snug text-muted">{s.desc}</div>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>

        {/* Mobile vertical */}
        <ol className="md:hidden space-y-4 relative reveal">
          <div className="absolute left-[28px] top-6 bottom-6 w-px" style={{ background: 'linear-gradient(to bottom, transparent, rgba(94,234,212,0.35), transparent)' }}></div>
          {steps.map((s, i) => {
            const Ico = iconFor[s.key] || Icon.Circle;
            return (
              <li key={s.key} className="glass p-4 pl-14 relative">
                <div className="absolute left-4 top-4 flex items-center justify-center h-8 w-8 rounded-full" style={{ background: 'rgba(94,234,212,0.10)', color: '#5EEAD4', border: '1px solid rgba(94,234,212,0.25)' }}>
                  <Ico size={15} />
                </div>
                <div className="font-mono text-[10.5px] uppercase tracking-wider text-faint">Step 0{i+1}</div>
                <div className="h-display text-[18px]">{s.title}</div>
                <div className="text-[13px] text-muted">{s.desc}</div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

/* ---------------- MODULES ---------------- */
function ModulesSection() {
  const { eyebrow, headline, items } = CONTENT.modules;
  const iconFor = { shield: Icon.Shield, engine: Icon.Route, followup: Icon.Recover, interruption: Icon.Filter, stabilize: Icon.Chart };

  return (
    <section className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={eyebrow} headline={headline} />

        {/* 6-col grid: top row has 3 cards spanning 2 each; bottom row has 2 cards spanning 2 each, offset by 1 to center */}
        <div className="grid grid-cols-1 md:grid-cols-6 gap-5">
          {items.map((m, i) => {
            const Ico = iconFor[m.key] || Icon.Circle;
            const isBottomFirst = i === 3;
            return (
              <div
                key={m.key}
                className={`glass glass-hover p-7 reveal md:col-span-2 ${isBottomFirst ? 'md:col-start-2' : ''}`}
              >
                <div className="flex items-center gap-3">
                  <div className="h-9 w-9 rounded-lg flex items-center justify-center" style={{ background: 'rgba(94,234,212,0.08)', color: '#5EEAD4', border: '1px solid rgba(94,234,212,0.18)' }}>
                    <Ico size={17} />
                  </div>
                  <div className="font-mono text-[10.5px] tracking-wider uppercase text-faint">0{i+1}</div>
                </div>
                <h3 className="mt-5 h-display text-[22px]">{m.title}</h3>
                <p className="mt-2 text-[14.5px] leading-relaxed text-muted">{m.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SECURITY ---------------- */
function SecuritySection() {
  const { eyebrow, headline, copy, badges } = CONTENT.security;
  return (
    <section id="security" className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={eyebrow} headline={headline} />

        <div className="grid lg:grid-cols-2 gap-10 lg:gap-14 items-start">
          <div className="reveal space-y-5 text-[15.5px] leading-relaxed text-muted max-w-[560px]">
            {copy.map((p, i) => <p key={i}>{p}</p>)}
          </div>

          {/* Architecture diagram (glass panels) */}
          <div className="reveal relative">
            <div className="glass p-6 md:p-8">
              <div className="font-mono text-[10.5px] tracking-wider uppercase text-faint mb-5 flex items-center justify-between">
                <span>ISOLATED TENANT TOPOLOGY</span>
                <span className="flex items-center gap-1.5"><span className="h-1.5 w-1.5 rounded-full" style={{ background: '#5EEAD4' }}></span> ACTIVE</span>
              </div>
              <div className="space-y-3">
                <ClientEnv label="FIRM A — Miami, FL" color="#5EEAD4" />
                <ClientEnv label="FIRM B — Houston, TX" color="#A78BFA" />
                <ClientEnv label="FIRM C — Phoenix, AZ" color="#5EEAD4" muted />
              </div>
              <div className="mt-6 pt-5 border-t border-white/5 grid grid-cols-3 gap-3 text-center">
                <DiagramChip label="Private VPS" icon={Icon.Server} />
                <DiagramChip label="Isolated schema" icon={Icon.Lock} />
                <DiagramChip label="Unique keys" icon={Icon.Key} />
              </div>
            </div>
          </div>
        </div>

        {/* Badges */}
        <div className="mt-14 grid grid-cols-2 md:grid-cols-3 gap-3 reveal">
          {badges.map((b, i) => (
            <div key={i} className="glass px-4 py-3.5 flex items-center gap-3">
              <span style={{ color: '#5EEAD4' }}><Icon.Check size={15} /></span>
              <span className="text-[13.5px] text-ink/90">{b}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientEnv({ label, color, muted }) {
  return (
    <div className="rounded-xl border border-white/5 p-3" style={{ background: muted ? 'rgba(255,255,255,0.015)' : 'rgba(255,255,255,0.025)' }}>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full" style={{ background: color, boxShadow: `0 0 8px ${color}` }}></span>
          <span className="font-mono text-[11.5px] tracking-wider uppercase text-ink/90">{label}</span>
        </div>
        <span className="font-mono text-[10.5px] text-faint">vps-{String(Math.floor(Math.random()*900)+100)}</span>
      </div>
      <div className="mt-2.5 grid grid-cols-3 gap-2">
        {['schema', 'aes-key', 'tls-cert'].map(t => (
          <div key={t} className="rounded-md px-2.5 py-1.5 font-mono text-[10.5px] text-muted"
               style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.04)' }}>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

function DiagramChip({ label, icon: Ico }) {
  return (
    <div className="rounded-lg border border-white/5 p-3 flex flex-col items-center gap-1" style={{ background: 'rgba(255,255,255,0.02)' }}>
      <span style={{ color: '#5EEAD4' }}><Ico size={15} /></span>
      <span className="font-mono text-[10.5px] uppercase tracking-wider text-muted">{label}</span>
    </div>
  );
}

/* ---------------- STACK / LOGO ROW ---------------- */
function StackSection() {
  const { eyebrow, headline, partners, footer } = CONTENT.stack;
  return (
    <section className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6 md:px-8">
        <SectionHeader eyebrow={eyebrow} headline={headline} align="center" />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 reveal">
          {partners.map((p) => (
            <div key={p} className="glass h-20 flex items-center justify-center group cursor-default">
              <span className="logo-mark font-semibold tracking-tightish text-[15px]">{p}</span>
            </div>
          ))}
        </div>
        <p className="mt-10 text-center text-muted text-[15px] reveal">{footer}</p>
      </div>
    </section>
  );
}

Object.assign(window, { FlowSection, ModulesSection, SecuritySection, StackSection });