/* global React */
// Home page — all sections

function Home({ t, navigate, tweaks }) {
  const s = t.home;
  return (
    <main className="page-enter">
      <Hero t={t} navigate={navigate} variant={tweaks.heroVariant} />
      <Trust t={t} />
      <ServicesOverview t={t} navigate={navigate} />
      <Methodology t={t} />
      <Industries t={t} />
      <Differentiators t={t} />
      <Metrics t={t} />
      <CertsStrip t={t} navigate={navigate} />
      <FinalCTA t={t} navigate={navigate} />
      <ContactForm t={t} compact />
    </main>
  );
}

// ── Hero ─────────────────────────────────────────────────────
function Hero({ t, navigate, variant = 'editorial' }) {
  const s = t.home;
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      paddingTop: 120,
      paddingBottom: 80,
      display: 'flex',
      alignItems: 'center',
      overflow: 'hidden',
    }}>
      <div className="grid-overlay"/>
      <div className="scan-sweep"/>
      <HeroCorners />

      {/* top meta strip */}
      <div style={{
        position: 'absolute', top: 88, left: 0, right: 0,
        padding: '0 32px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontFamily: 'var(--ff-mono)',
        fontSize: 11,
        letterSpacing: '0.08em',
        color: 'var(--fg-3)',
        textTransform: 'uppercase',
      }}>
        <span>{s.heroEyebrow}</span>
        <span>LAT -23.5505 · LON -46.6333 · GMT-3</span>
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 48 }}>
          <div>
            <div className="reveal" data-delay="1" style={{ marginBottom: 32 }}>
              <div className="chip">
                <span className="chip-dot"/>
                <span>{s.heroStatus}</span>
                <span style={{ color: 'var(--fg-3)', marginLeft: 6 }}>{s.heroStatusDetail}</span>
              </div>
            </div>

            <h1 className="h-display reveal" data-delay="2" style={{ margin: 0 }}>
              <span style={{ display: 'block' }}>{s.heroTitleA}</span>
              <span style={{ display: 'block', color: 'var(--accent)' }}>{s.heroTitleB}</span>
              <span style={{ display: 'block', color: 'var(--fg-2)' }}>{s.heroTitleC}</span>
            </h1>

            <div className="reveal" data-delay="3" style={{
              marginTop: 56,
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 560px) 1fr',
              gap: 48,
              alignItems: 'end',
            }}>
              <p className="body-lg" style={{ margin: 0 }}>{s.heroSub}</p>
              <div className="hero-actions" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => navigate('contact')}>
                  {s.heroCtaPrimary} <span className="arrow">→</span>
                </button>
                <a className="btn" href="#methodology">
                  {s.heroCtaSecondary}
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom hero rail */}
        <div className="hero-rail reveal" data-delay="4" style={{
          marginTop: 96,
          paddingTop: 24,
          borderTop: '1px solid var(--line)',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24,
        }}>
          {[
            { n: '312', l: 'engagements' },
            { n: '47', l: 'CVEs published' },
            { n: '14', l: 'senior operators' },
            { n: '24h', l: 'scoping response' },
          ].map((it, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span className="mono-sm u-caps" style={{ color: 'var(--fg-3)' }}>0{i + 1} / 04</span>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{ fontFamily: 'var(--ff-display)', fontSize: 32, letterSpacing: '-0.02em' }}>{it.n}</span>
                <span style={{ color: 'var(--fg-2)', fontSize: 13 }}>{it.l}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroCorners() {
  return (
    <>
      {['tl', 'tr', 'bl', 'br'].map((pos) => {
        const style = {
          position: 'absolute', width: 40, height: 40,
          border: '1px solid var(--accent-dim)',
        };
        if (pos.includes('t')) style.top = 88; else style.bottom = 32;
        if (pos.includes('l')) style.left = 32; else style.right = 32;
        if (pos === 'tl') { style.borderRight = 'none'; style.borderBottom = 'none'; }
        if (pos === 'tr') { style.borderLeft = 'none'; style.borderBottom = 'none'; }
        if (pos === 'bl') { style.borderRight = 'none'; style.borderTop = 'none'; }
        if (pos === 'br') { style.borderLeft = 'none'; style.borderTop = 'none'; }
        return <div key={pos} style={style}/>;
      })}
    </>
  );
}

// ── Trust strip ─────────────────────────────────────────────
function Trust({ t }) {
  const s = t.home;
  return (
    <section className="section" style={{ padding: '56px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 3fr',
          gap: 48,
          alignItems: 'center',
        }} className="trust-grid">
          <div>
            <div className="eyebrow">{s.trustEyebrow}</div>
            <p className="mono-sm" style={{ color: 'var(--fg-3)', marginTop: 12, maxWidth: 240, lineHeight: 1.5 }}>
              {s.trustNote}
            </p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {s.trustTags.map((tag, i) => (
              <div key={i} className="reveal" data-delay={String((i % 5) + 1)}
                style={{
                  position: 'relative',
                  padding: '14px 18px',
                  border: '1px solid var(--line)',
                  fontFamily: 'var(--ff-mono)',
                  fontSize: 12,
                  letterSpacing: '0.04em',
                  color: 'var(--fg-2)',
                  overflow: 'hidden',
                }}>
                {/* Redaction bar overlay */}
                <span style={{
                  position: 'absolute',
                  left: 14, top: '50%',
                  transform: 'translateY(-50%)',
                  width: 80, height: 14,
                  background: 'var(--fg-3)',
                  opacity: 0.92,
                }}/>
                <span style={{ position: 'relative', paddingLeft: 92, color: 'var(--fg-2)' }}>· {tag}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Services overview ───────────────────────────────────────
function ServicesOverview({ t, navigate }) {
  const s = t.home;
  const items = t.services.items;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">{s.servicesEyebrow}</div>
            <h2 className="h-xl" style={{ margin: '12px 0 0' }}>{s.servicesTitle}</h2>
          </div>
          <p className="body-lg">{s.servicesSub}</p>
        </div>

        <div className="services-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
        }}>
          {items.map((svc, i) => (
            <ServiceCard key={svc.slug} svc={svc} index={i}
              onClick={() => navigate('services', svc.slug)} t={t}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ svc, index, onClick, t }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div className="reveal" data-delay={String((index % 4) + 1)}>
      <button
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={onClick}
        style={{
          display: 'block',
          width: '100%',
          textAlign: 'left',
          background: 'var(--bg-0)',
          padding: '48px',
          transition: 'background var(--t-fast) var(--ease)',
          position: 'relative',
          overflow: 'hidden',
          cursor: 'pointer',
        }}
        onMouseOver={(e) => e.currentTarget.style.background = 'var(--bg-1)'}
        onMouseOut={(e) => e.currentTarget.style.background = 'var(--bg-0)'}
      >
        <div style={{
          position: 'absolute',
          top: 0, left: 0, right: 0,
          height: 1,
          background: 'var(--accent)',
          transform: hovered ? 'scaleX(1)' : 'scaleX(0)',
          transformOrigin: 'left',
          transition: 'transform 500ms var(--ease-out)',
        }}/>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
          <span className="mono-sm" style={{ color: 'var(--accent)' }}>{svc.code}</span>
          <span className="mono-sm" style={{ color: 'var(--fg-3)' }}>{svc.tag}</span>
        </div>

        <h3 className="h-lg" style={{ margin: '0 0 16px' }}>{svc.k}</h3>
        <p style={{ color: 'var(--fg-1)', maxWidth: '52ch', margin: 0, fontSize: 15, lineHeight: 1.6 }}>
          {svc.d}
        </p>

        <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {svc.scopes.slice(0, 4).map((sc, i) => (
            <span key={i} style={{
              padding: '4px 10px',
              fontFamily: 'var(--ff-mono)',
              fontSize: 11,
              letterSpacing: '0.04em',
              color: 'var(--fg-2)',
              border: '1px solid var(--line-2)',
            }}>{sc}</span>
          ))}
          {svc.scopes.length > 4 && (
            <span className="mono-sm" style={{ color: 'var(--fg-3)', padding: '4px 4px' }}>
              +{svc.scopes.length - 4}
            </span>
          )}
        </div>

        <div style={{
          marginTop: 40,
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          color: hovered ? 'var(--accent)' : 'var(--fg-2)',
          fontFamily: 'var(--ff-mono)',
          fontSize: 12,
          letterSpacing: '0.06em',
          textTransform: 'uppercase',
          transition: 'color var(--t-fast)',
        }}>
          <span>{t.services.detailCta}</span>
          <span style={{ transform: hovered ? 'translateX(4px)' : 'none', transition: 'transform var(--t-fast)' }}>→</span>
        </div>
      </button>
    </div>
  );
}

// ── Methodology ─────────────────────────────────────────────
function Methodology({ t }) {
  const s = t.home;
  const [active, setActive] = useState(0);
  return (
    <section className="section" id="methodology">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">{s.methodEyebrow}</div>
            <h2 className="h-xl" style={{ margin: '12px 0 0' }}>{s.methodTitle}</h2>
          </div>
          <p className="body-lg">{s.methodSub}</p>
        </div>

        <div className="method-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 64,
          alignItems: 'start',
        }}>
          {/* Left: stepper */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {s.methodSteps.map((step, i) => {
              const isActive = i === active;
              return (
                <button key={i}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => setActive(i)}
                  style={{
                    textAlign: 'left',
                    display: 'grid',
                    gridTemplateColumns: '64px 1fr auto',
                    gap: 20,
                    padding: '24px 0',
                    borderTop: i === 0 ? '1px solid var(--line)' : 'none',
                    borderBottom: '1px solid var(--line)',
                    background: isActive ? 'var(--accent-soft)' : 'transparent',
                    transition: 'background var(--t-fast)',
                    cursor: 'pointer',
                    alignItems: 'center',
                  }}>
                  <span className="mono-sm" style={{ color: isActive ? 'var(--accent)' : 'var(--fg-3)', paddingLeft: 16 }}>
                    {step.n}
                  </span>
                  <span style={{
                    fontFamily: 'var(--ff-display)',
                    fontSize: 22,
                    letterSpacing: '-0.01em',
                    color: isActive ? 'var(--fg-0)' : 'var(--fg-1)',
                  }}>{step.k}</span>
                  <span className="mono-sm" style={{ color: 'var(--fg-3)', paddingRight: 16 }}>{step.t}</span>
                </button>
              );
            })}
          </div>

          {/* Right: detail panel */}
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="corners" style={{
              border: '1px solid var(--line)',
              background: 'var(--bg-1)',
              padding: 48,
              minHeight: 360,
              position: 'relative',
            }}>
              <span className="tl"/><span className="br"/>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: 32,
                fontFamily: 'var(--ff-mono)',
                fontSize: 11,
                letterSpacing: '0.08em',
                color: 'var(--fg-3)',
                textTransform: 'uppercase',
              }}>
                <span>PHASE {s.methodSteps[active].n} / 05</span>
                <span>{s.methodSteps[active].t}</span>
              </div>

              <h3 className="h-lg" style={{ margin: '0 0 20px', color: 'var(--accent)' }}>
                {s.methodSteps[active].k}
              </h3>
              <p style={{ color: 'var(--fg-1)', fontSize: 17, lineHeight: 1.6, margin: 0, maxWidth: '54ch' }}>
                {s.methodSteps[active].d}
              </p>

              {/* progress bar */}
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'var(--bg-3)' }}>
                <div style={{
                  width: `${((active + 1) / s.methodSteps.length) * 100}%`,
                  height: '100%',
                  background: 'var(--accent)',
                  transition: 'width 400ms var(--ease-out)',
                }}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Industries ───────────────────────────────────────────────
function Industries({ t }) {
  const s = t.home;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">{s.industriesEyebrow}</div>
            <h2 className="h-xl" style={{ margin: '12px 0 0' }}>{s.industriesTitle}</h2>
          </div>
          <p className="body-lg">{s.industriesSub}</p>
        </div>

        <div className="ind-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0,
          borderTop: '1px solid var(--line)',
          borderLeft: '1px solid var(--line)',
        }}>
          {s.industries.map((it, i) => (
            <div key={i} className="reveal" data-delay={String((i % 3) + 1)}
              style={{
                padding: 40,
                borderRight: '1px solid var(--line)',
                borderBottom: '1px solid var(--line)',
                position: 'relative',
                transition: 'background var(--t-fast)',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-1)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <div className="mono-sm" style={{ color: 'var(--fg-3)', marginBottom: 20 }}>
                0{i + 1} / 0{s.industries.length}
              </div>
              <h3 className="h-md" style={{ margin: '0 0 8px' }}>{it.k}</h3>
              <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 14 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Differentiators ──────────────────────────────────────────
function Differentiators({ t }) {
  const s = t.home;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">{s.diffEyebrow}</div>
            <h2 className="h-xl" style={{ margin: '12px 0 0' }}>{s.diffTitle}</h2>
          </div>
          <div/>
        </div>

        <div className="diff-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {s.diffs.map((it, i) => (
            <div key={i} className="card reveal" data-delay={String((i % 3) + 1)}
              style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
                display: 'flex', alignItems: 'center',
                gap: 12, color: 'var(--accent)',
                fontFamily: 'var(--ff-mono)', fontSize: 11,
                letterSpacing: '0.08em',
              }}>
                <span>0{i + 1}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
              </div>
              <h3 style={{
                fontFamily: 'var(--ff-display)',
                fontSize: 22,
                letterSpacing: '-0.015em',
                margin: 0,
                lineHeight: 1.15,
              }}>{it.k}</h3>
              <p style={{ color: 'var(--fg-2)', margin: 0, fontSize: 14, lineHeight: 1.6 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Metrics ──────────────────────────────────────────────────
function Metrics({ t }) {
  const s = t.home;
  return (
    <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="metrics-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr repeat(4, 1fr)',
          gap: 48,
          alignItems: 'end',
        }}>
          <div>
            <div className="eyebrow">{s.metricsEyebrow}</div>
            <h2 className="h-lg" style={{ margin: '16px 0 0', maxWidth: '16ch' }}>{s.metricsTitle}</h2>
          </div>
          {s.metrics.map((m, i) => (
            <div key={i} className="reveal" data-delay={String(i + 1)}
              style={{
                padding: '32px 0 0',
                borderTop: '1px solid var(--line)',
              }}>
              <div style={{
                fontFamily: 'var(--ff-display)',
                fontSize: 'clamp(48px, 5vw, 72px)',
                lineHeight: 1,
                letterSpacing: '-0.03em',
                color: 'var(--fg-0)',
              }}>{m.n}</div>
              <div style={{ marginTop: 16, color: 'var(--fg-1)', fontSize: 14 }}>{m.l}</div>
              <div className="mono-sm" style={{ color: 'var(--fg-3)', marginTop: 4 }}>{m.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Certifications strip on home ─────────────────────────────
function CertsStrip({ t, navigate }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: 64,
          alignItems: 'start',
        }} className="certs-grid">
          <div>
            <div className="eyebrow">{t.certifications.eyebrow}</div>
            <h2 className="h-xl" style={{ margin: '12px 0 24px' }}>{t.certifications.title}</h2>
            <p className="body-lg">{t.certifications.sub}</p>
            <button className="u-link" style={{ marginTop: 24 }}
              onClick={() => navigate('certifications')}>
              {t.nav.certifications} →
            </button>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 1,
            background: 'var(--line)',
            border: '1px solid var(--line)',
          }}>
            {t.certifications.items.map((c, i) => (
              <div key={i} style={{
                background: 'var(--bg-0)',
                padding: '28px 20px',
                display: 'flex', flexDirection: 'column',
                gap: 8,
                transition: 'background var(--t-fast)',
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-1)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg-0)'}>
                <div style={{
                  fontFamily: 'var(--ff-display)',
                  fontSize: 20,
                  letterSpacing: '-0.01em',
                  color: 'var(--fg-0)',
                }}>{c.k}</div>
                <div className="mono-sm" style={{ color: 'var(--fg-3)', minHeight: 28 }}>{c.d}</div>
                <div className="mono-sm" style={{ color: 'var(--accent)', marginTop: 4 }}>· {c.c}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ─────────────────────────────────────────────────
function FinalCTA({ t, navigate }) {
  const s = t.home;
  return (
    <section className="section" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="grid-overlay"/>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          textAlign: 'center',
          maxWidth: 920,
          margin: '0 auto',
        }}>
          <h2 className="h-display" style={{
            margin: 0,
            fontSize: 'clamp(40px, 6vw, 84px)',
            whiteSpace: 'pre-line',
          }}>{s.ctaTitle}</h2>
          <p className="body-lg" style={{ margin: '32px auto 0', color: 'var(--fg-1)' }}>
            {s.ctaSub}
          </p>
          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => navigate('contact')}>
              {s.ctaButton} <span className="arrow">→</span>
            </button>
          </div>
          <p className="mono-sm" style={{ color: 'var(--fg-3)', marginTop: 24 }}>
            {s.ctaAside}
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, Hero, Trust, ServicesOverview, Methodology, Industries, Differentiators, Metrics, CertsStrip, FinalCTA });
