/* global React, Icon, Btn, Reveal, useCountUp */
/* ──────────────────────────────────────────────────────────────
   tech-hero.jsx — Nav, Hero A (light), Hero B (dark), Stats
   ────────────────────────────────────────────────────────────── */
const { useState: useStateH, useEffect: useEffectH } = React;

const NAV_ITEMS = [
{ label: 'Solutions', target: 'solutions' },
{ label: 'Platform', target: 'platform' },
{ label: 'Case Studies', target: 'cases' },
{ label: 'About', target: 'about' }];


function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
}

// ── Top navigation ───────────────────────────────────────────────
const Nav = ({ onGetStarted }) => {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: scrolled ? 'rgba(10,17,30,0.88)' : 'rgba(10,17,30,0.62)',
      backdropFilter: 'saturate(180%) blur(12px)', WebkitBackdropFilter: 'saturate(180%) blur(12px)',
      borderBottom: `1px solid ${scrolled ? 'var(--border-default)' : 'transparent'}`,
      transition: 'background var(--duration-base), border-color var(--duration-base)'
    }}>
      <div className="wrap" style={{ height: 64, display: 'flex', alignItems: 'center', gap: 24 }}>
        <a onClick={(e) => {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });}}
        href="#top" style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img src="assets/technamics-logo-white.png" alt="Technamics" style={{ height: 23, display: 'block' }} />
        </a>
        <nav className="nav-desktop" style={{ alignItems: 'center', gap: 28, marginLeft: 12 }}>
          {NAV_ITEMS.map((it) =>
          <button key={it.label} className="nav-link" onClick={() => scrollToId(it.target)}>{it.label}</button>
          )}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
          <button className="nav-link nav-desktop" onClick={() => scrollToId('cta')} style={{ display: 'inline-flex' }}>Sign in</button>
          <Btn size="md" icon="arrowRight" onClick={onGetStarted} className="tbtn tbtn-primary tbtn-md">Get started</Btn>
          <button className="nav-burger tbtn tbtn-ghost tbtn-sm" onClick={() => setOpen((o) => !o)}
          style={{ padding: 9 }} aria-label="Menu"><Icon name={open ? 'x' : 'menu'} size={18} /></button>
        </div>
      </div>
      {open &&
      <div className="nav-burger" style={{ flexDirection: 'column', padding: '8px 20px 18px', gap: 4, borderTop: '1px solid var(--border-subtle)', background: 'var(--bg-surface)' }}>
          {NAV_ITEMS.map((it) =>
        <button key={it.label} className="nav-link" style={{ textAlign: 'left', padding: '12px 4px', fontSize: 16 }}
        onClick={() => {setOpen(false);scrollToId(it.target);}}>{it.label}</button>
        )}
        </div>
      }
    </header>);

};

// ── Animated code-transform visual (Hero A) ──────────────────────
const TransformVisual = () => {
  const legacy = ['IDENTIFICATION DIVISION.', 'PROGRAM-ID. LEDGER.', 'PERFORM CALC-INTEREST', '  UNTIL WS-DONE = "Y".', 'MOVE WS-BAL TO OUT-REC.'];
  const modern = ['@Service', 'class LedgerService {', '  BigDecimal accrue(Account a) {', '    return a.balance()', '      .multiply(rate);', '  } }'];
  return (
    <div style={{ position: 'relative' }}>
      <div className="dotgrid" style={{ position: 'absolute', inset: '-24px -12px', opacity: 0.55, borderRadius: 24, maskImage: 'radial-gradient(circle at 60% 40%, #000 40%, transparent 78%)', WebkitMaskImage: 'radial-gradient(circle at 60% 40%, #000 40%, transparent 78%)' }} />
      <div style={{ position: 'relative', display: 'grid', gap: 14 }}>
        {/* Legacy panel */}
        <div style={{ background: 'var(--bg-inverse)', borderRadius: 'var(--radius-lg)', padding: '16px 18px', boxShadow: 'var(--shadow-lg)', border: '1px solid rgba(255,255,255,0.06)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ width: 9, height: 9, borderRadius: 9, background: '#3a4a63' }} />
            <span style={{ width: 9, height: 9, borderRadius: 9, background: '#3a4a63' }} />
            <span className="mono" style={{ marginLeft: 6, fontSize: 11, color: '#7e8ba3' }}>ledger.cob · COBOL</span>
          </div>
          {legacy.map((l, i) =>
          <div key={i} className="mono" style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.85, whiteSpace: 'pre' }}>{l}</div>
          )}
        </div>
        {/* arrow chip */}
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', zIndex: 3,
          background: 'var(--accent)', color: '#fff', width: 46, height: 46, borderRadius: 14, display: 'grid', placeItems: 'center',
          boxShadow: 'var(--shadow-glow)', animation: 'tk-pulse 2.4s ease-in-out infinite' }}>
          <Icon name="bolt" size={22} />
        </div>
        {/* Modern panel */}
        <div style={{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', padding: '16px 18px', boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-default)', overflow: 'hidden', position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 30, background: 'linear-gradient(180deg, rgba(51,181,245,0.18), transparent)', animation: 'tk-scan 3.2s linear infinite' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ width: 9, height: 9, borderRadius: 9, background: 'var(--success)' }} />
            <span className="mono" style={{ marginLeft: 2, fontSize: 11, color: 'var(--fg-3)' }}>LedgerService.java · generated</span>
          </div>
          {modern.map((l, i) =>
          <div key={i} className="mono" style={{ fontSize: 12.5, color: i === 0 ? 'var(--accent)' : 'var(--fg-2)', lineHeight: 1.85, whiteSpace: 'pre', animation: `tk-rise .5s var(--ease-out) both`, animationDelay: `${0.3 + i * 0.12}s` }}>{l}</div>
          )}
        </div>
      </div>
      {/* floating stat chip */}
      <div style={{ position: 'absolute', right: -10, bottom: -18, background: 'var(--bg-raised)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12, animation: 'tk-float 5s ease-in-out infinite' }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--success-bg)', color: '#4ade80', display: 'grid', placeItems: 'center' }}><Icon name="check" size={18} /></div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--fg-1)', lineHeight: 1 }}>98.6%</div>
          <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2 }}>conversion accuracy</div>
        </div>
      </div>
    </div>);

};

// ── Hero A — light split ─────────────────────────────────────────
const HeroLight = ({ onGetStarted, onSeeDemo }) =>
<section style={{ position: 'relative', paddingTop: 'clamp(24px, 4vw, 48px)', paddingBottom: 'clamp(28px, 4vw, 52px)', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -180, right: -120, width: 560, height: 560, borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(51,181,245,0.14), transparent 65%)', pointerEvents: 'none' }} />
    <div className="wrap hero-grid" style={{ position: 'relative' }}>
      <div>
        <Reveal as="div" className="overline" style={{ color: 'var(--accent)', marginBottom: 18, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'var(--primary-50)', border: '1px solid var(--primary-100)', borderRadius: 9999, padding: '5px 12px' }}>
            <Icon name="spark" size={13} /> Technamics AI Platform
          </span>
        </Reveal>
        <Reveal as="h1" delay={1} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--brand-ink)',
        fontSize: 'clamp(40px, 6.4vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.03em', margin: 0 }}>
          AI-powered<br />optimization for<br /><span style={{ color: 'var(--accent)' }}>the software lifecycle.</span>
        </Reveal>
        <Reveal as="p" delay={2} style={{ fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 520, marginTop: 22 }}>
          Transform every stage of delivery with intelligent automation — from legacy modernization and QA to mobile builds and next-gen UX design.
        </Reveal>
        <Reveal delay={3} style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 32 }}>
          <Btn size="lg" icon="arrowRight" onClick={onGetStarted}>Get started</Btn>
          <Btn size="lg" variant="ghost" icon="play" onClick={onSeeDemo}>Watch the platform</Btn>
        </Reveal>
        <Reveal delay={4} style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 30, color: 'var(--fg-3)', fontSize: 13.5 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="shield" size={16} /> SOC 2 · enterprise governance</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="globe" size={16} /> 100+ countries</span>
        </Reveal>
      </div>
      <Reveal delay={2}><TransformVisual /></Reveal>
    </div>
  </section>;


// ── Hero B — dark command ────────────────────────────────────────
const HeroDark = ({ onGetStarted, onSeeDemo }) =>
<section style={{ position: 'relative', background: 'var(--bg-inverse)', color: '#fff', overflow: 'hidden',
  paddingTop: 'clamp(32px, 4.5vw, 60px)', paddingBottom: 'clamp(32px, 4.5vw, 60px)' }}>
    {/* animated grid */}
    <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px)', backgroundSize: '40px 40px', animation: 'tk-grid 6s linear infinite', maskImage: 'radial-gradient(circle at 50% 35%, #000 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(circle at 50% 35%, #000 30%, transparent 75%)' }} />
    <div style={{ position: 'absolute', top: -160, left: '50%', transform: 'translateX(-50%)', width: 700, height: 500, background: 'radial-gradient(ellipse, rgba(51,181,245,0.28), transparent 62%)', pointerEvents: 'none' }} />
    <div className="wrap" style={{ position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <Reveal className="overline" style={{ color: 'var(--primary-300)', marginBottom: 22 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(51,181,245,0.12)', border: '1px solid rgba(51,181,245,0.3)', borderRadius: 9999, padding: '6px 14px' }}>
          <span style={{ width: 7, height: 7, borderRadius: 9, background: 'var(--primary-400)', boxShadow: '0 0 0 4px rgba(51,181,245,0.25)', animation: 'tk-pulse 1.8s ease-in-out infinite' }} />
          Agentic automation, live
        </span>
      </Reveal>
      <Reveal as="h1" delay={1} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(42px, 7.2vw, 86px)', lineHeight: 1.0, letterSpacing: '-0.035em', margin: 0, maxWidth: 960 }}>
        Quiet machines.<br /><span style={{ background: 'linear-gradient(90deg, var(--primary-300), var(--primary-500))', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>Confident answers.</span>
      </Reveal>
      <Reveal as="p" delay={2} style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.55, color: 'rgba(248,250,252,0.74)', maxWidth: 600, marginTop: 24 }}>
        Transform your software lifecycle with intelligent automation — from legacy modernization to next-gen UX design.
      </Reveal>
      <Reveal delay={3} style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36, justifyContent: 'center' }}>
        <Btn size="lg" icon="arrowRight" onClick={onGetStarted}>Get started</Btn>
        <Btn size="lg" variant="inverse" icon="play" onClick={onSeeDemo}>Watch the platform</Btn>
      </Reveal>
      <Reveal delay={4} style={{ marginTop: 56, width: '100%', maxWidth: 920 }}>
        <DarkConsole />
      </Reveal>
    </div>
  </section>;


// compact live "agent console" for dark hero
const DarkConsole = () => {
  const lines = [
  { t: 'agent', x: 'orchestrator › routing 4 workstreams' },
  { t: 'ok', x: 'modernize ▸ 12,480 LOC translated · COBOL→Java' },
  { t: 'ok', x: 'qa ▸ 318 tests healed · 0 flaky' },
  { t: 'run', x: 'mobile ▸ generating Swift + Kotlin…' },
  { t: 'ok', x: 'ux ▸ wireframe → React · WCAG AA passed' }];

  const tone = { agent: 'var(--primary-300)', ok: '#4ade80', run: 'var(--warning)' };
  return (
    <div style={{ background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', textAlign: 'left', overflow: 'hidden', backdropFilter: 'blur(6px)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span style={{ width: 9, height: 9, borderRadius: 9, background: '#ef4444' }} />
        <span style={{ width: 9, height: 9, borderRadius: 9, background: '#f59e0b' }} />
        <span style={{ width: 9, height: 9, borderRadius: 9, background: '#22c55e' }} />
        <span className="mono" style={{ marginLeft: 8, fontSize: 11.5, color: 'rgba(248,250,252,0.5)' }}>technamics — control plane</span>
      </div>
      <div style={{ padding: '14px 16px', display: 'grid', gap: 7 }}>
        {lines.map((l, i) =>
        <div key={i} className="mono" style={{ fontSize: 12.5, color: 'rgba(248,250,252,0.82)', display: 'flex', gap: 10, animation: 'tk-rise .5s var(--ease-out) both', animationDelay: `${0.5 + i * 0.18}s` }}>
            <span style={{ color: tone[l.t], minWidth: 56 }}>{l.t === 'run' ? 'running' : l.t === 'ok' ? 'done' : 'route'}</span>
            <span>{l.x}</span>
          </div>
        )}
        <div className="mono" style={{ fontSize: 12.5, color: 'var(--primary-300)', display: 'flex', gap: 8, marginTop: 2 }}>
          <span>›</span><span style={{ width: 8, height: 15, background: 'var(--primary-300)', display: 'inline-block', animation: 'tk-blink 1s step-end infinite' }} />
        </div>
      </div>
    </div>);

};

// ── Stats bar ────────────────────────────────────────────────────
const StatItem = ({ value, suffix = '', decimals = 0, label }) => {
  const [ref, display] = useCountUp(value, { decimals });
  return (
    <div style={{ textAlign: 'center' }}>
      <div ref={ref} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px, 4.4vw, 52px)', letterSpacing: '-0.02em', color: 'var(--brand-ink)', lineHeight: 1 }}>
        {display}<span style={{ color: 'var(--accent)' }}>{suffix}</span>
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--fg-3)', marginTop: 10, fontWeight: 500 }}>{label}</div>
    </div>);

};
const StatsBar = () =>
<section style={{ borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', background: 'var(--bg-surface)', padding: 'clamp(40px, 6vw, 64px) 0' }}>
    <div className="wrap stats-grid">
      <Reveal delay={1}><StatItem value={100} suffix="+" label="Countries served" /></Reveal>
      <Reveal delay={2}><StatItem value={3} suffix="M+" label="Developers in the ecosystem" /></Reveal>
      <Reveal delay={3}><StatItem value={70} suffix="%" label="Less manual effort" /></Reveal>
      <Reveal delay={4}><StatItem value={4.9} suffix="×" decimals={1} label="Faster delivery cycles" /></Reveal>
    </div>
  </section>;


Object.assign(window, { Nav, HeroLight, HeroDark, StatsBar, scrollToId });