// Novox — "Spatial Nova" marketing site.
// Dark-first voice-infrastructure brand. Architecture:
//   Nav · Hero(split + live console) · Ticker · Platform(bento) ·
//   Product(sticky-scroll) · Why(comparison) · How(stepper) ·
//   UseCases(tabs) · CTA · Footer.
// Runtime-compiled JSX (no build step). Brand mark + animation primitives
// come from novox-mark.jsx / novox-animations.jsx (global).

const T = window.NOVOX_TOKENS;
const { useState: useS, useEffect: useE, useRef: useR,
  useMemo: useM, createContext, useContext } = React;

// ─────────────────────────────────────────────────────────────
// Theme — DARK by default; a light "starlight" mode mirrors it.
// ─────────────────────────────────────────────────────────────
const ThemeCtx = createContext(null);
function useTheme() { return useContext(ThemeCtx); }

function buildTheme(mode) {
  const dark = mode !== 'light';
  return {
    mode: dark ? 'dark' : 'light',
    // canvas (deep space ↔ starlight)
    bg:        dark ? T.space.hex       : T.paper.hex,
    bgDeep:    dark ? T.void.hex        : '#EAEEF7',
    raised:    dark ? T.spaceRaised.hex : T.paperRaised.hex,
    glass:     dark ? T.spaceGlass.hex  : '#FFFFFF',
    sunk:      dark ? T.spaceSunk.hex   : T.paperSunk.hex,
    // text
    text:      dark ? T.starlight.hex      : T.ink.hex,
    textMuted: dark ? T.starlightMuted.hex : T.inkMuted.hex,
    textSoft:  dark ? T.starlightSoft.hex  : T.inkSoft.hex,
    // structure
    hairline:       dark ? '#FFFFFF12' : T.hairlineLight.hex,
    hairlineStrong: dark ? '#FFFFFF26' : '#0C112422',
    // gold (nova-star)
    gold:      T.gold500.hex,
    goldBright: dark ? T.gold400.hex : T.gold500.hex,
    goldText:  dark ? T.gold300.hex  : T.gold700.hex,
    goldTint:  dark ? 'rgba(245,166,35,0.12)' : T.gold50.hex,
    goldBorder: dark ? 'rgba(245,166,35,0.42)' : 'rgba(245,166,35,0.55)',
    onGold:    '#1B1206',
    // nebula violet (AI / data)
    nebula:    dark ? T.nebula400.hex : T.nebula500.hex,
    nebulaText: dark ? T.nebula300.hex : T.nebula500.hex,
    nebulaTint: dark ? 'rgba(167,139,250,0.14)' : 'rgba(139,92,246,0.10)',
    // semantic
    success:   T.success.hex,
    danger:    T.danger.hex,
    // glow for the starfield
    star:      dark ? '#FFFFFF' : '#9AA6C4',
  };
}

// ─────────────────────────────────────────────────────────────
// Hooks
// ─────────────────────────────────────────────────────────────
function useReducedMotion() {
  const [r, setR] = useS(() => typeof window !== 'undefined' && window.matchMedia
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false);
  useE(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const on = () => setR(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); };
  }, []);
  return r;
}

function useViewport() {
  const [vw, setVw] = useS(() => typeof window === 'undefined' ? 1280 : window.innerWidth);
  useE(() => {
    const on = () => setVw(window.innerWidth);
    window.addEventListener('resize', on, { passive: true });
    return () => window.removeEventListener('resize', on);
  }, []);
  return vw;
}

function useActiveSection(ids) {
  const [active, setActive] = useS(null);
  useE(() => {
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const obs = new IntersectionObserver((entries) => {
      const vis = entries.filter((e) => e.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (vis[0]) setActive(vis[0].target.id);
    }, { rootMargin: '-45% 0px -50% 0px', threshold: [0, 0.3, 1] });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, [ids.join(',')]);
  return active;
}

function useInView(opts = {}) {
  const ref = useR(null);
  const [seen, setSeen] = useS(false);
  const reduced = useReducedMotion();
  useE(() => {
    if (reduced) { setSeen(true); return; }
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); obs.disconnect(); }
    }, { threshold: opts.threshold || 0.25, rootMargin: opts.rootMargin || '0px 0px -8% 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [reduced]);
  return [ref, seen];
}

// ─────────────────────────────────────────────────────────────
// Shared primitives
// ─────────────────────────────────────────────────────────────
function Container({ children, style = {}, className = '' }) {
  return (
    <div className={`nvx-container ${className}`.trim()}
      style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px', ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, color, dot = true, style = {} }) {
  const th = useTheme();
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9,
      fontFamily: '"Space Mono", monospace', fontSize: 12, letterSpacing: '0.16em',
      textTransform: 'uppercase', color: color || th.goldText, ...style }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 3, background: th.gold,
        boxShadow: `0 0 10px ${th.gold}` }} />}
      {children}
    </div>
  );
}

function H2({ children, style = {}, color }) {
  const th = useTheme();
  return (
    <h2 className="nvx-h2" style={{ fontFamily: '"Space Grotesk", ui-sans-serif',
      fontSize: 50, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.05,
      margin: 0, color: color || th.text, textWrap: 'balance', maxWidth: 760, ...style }}>
      {children}
    </h2>
  );
}

function Body({ children, style = {}, color, size = 16 }) {
  const th = useTheme();
  return (
    <p style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: size, lineHeight: 1.62,
      color: color || th.textMuted, margin: 0, maxWidth: 620, textWrap: 'pretty', ...style }}>
      {children}
    </p>
  );
}

function Mono({ children, style = {}, color }) {
  const th = useTheme();
  return (
    <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 11,
      letterSpacing: '0.12em', textTransform: 'uppercase', color: color || th.textSoft, ...style }}>
      {children}
    </span>
  );
}

function Reveal({ children, delay = 0, y = 22, blur = 0, threshold = 0.18, style = {} }) {
  const reduced = useReducedMotion();
  const ref = useR(null);
  const [shown, setShown] = useS(false);
  useE(() => {
    if (reduced || !ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); obs.disconnect(); }
    }, { threshold, rootMargin: '0px 0px -8% 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [reduced]);
  if (reduced) return <div ref={ref} style={style}>{children}</div>;
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
      filter: blur && !shown ? `blur(${blur}px)` : 'none',
      transition: `opacity 780ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 780ms cubic-bezier(.2,.7,.2,1) ${delay}ms, filter 780ms ease ${delay}ms`,
      willChange: shown ? 'auto' : 'opacity, transform', ...style }}>
      {children}
    </div>
  );
}

function ScrollProgress() {
  const [p, setP] = useS(0);
  useE(() => {
    const on = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? Math.min(1, h.scrollTop / max) : 0);
    };
    on();
    window.addEventListener('scroll', on, { passive: true });
    window.addEventListener('resize', on);
    return () => { window.removeEventListener('scroll', on); window.removeEventListener('resize', on); };
  }, []);
  return <div className="nvx-scroll-progress"
    style={{ transform: `scaleX(${p})`, opacity: p > 0.004 ? 1 : 0 }} />;
}

function Button({ children, href = '#', variant = 'gold', onClick, full = false, style = {} }) {
  const th = useTheme();
  const gold = variant === 'gold';
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    padding: '13px 22px', borderRadius: 999, fontSize: 15, fontWeight: 600,
    fontFamily: '"Space Grotesk", ui-sans-serif', letterSpacing: '-0.01em',
    textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
    border: gold ? 'none' : `1px solid ${th.hairlineStrong}`,
    background: gold ? th.gold : 'transparent',
    color: gold ? th.onGold : th.text, width: full ? '100%' : 'auto',
    transition: 'transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, background 200ms ease, border-color 200ms ease',
    ...style,
  };
  return (
    <a href={href} onClick={onClick} className="nvx-btn" style={base}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.boxShadow = gold ? `0 14px 34px -10px ${th.gold}AA` : 'none';
        if (gold) e.currentTarget.style.background = th.goldBright;
        else e.currentTarget.style.borderColor = th.gold;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = 'none';
        if (gold) e.currentTarget.style.background = th.gold;
        else e.currentTarget.style.borderColor = th.hairlineStrong;
      }}>
      {children}
    </a>
  );
}

function ThemeToggle({ mode, setMode }) {
  const th = useTheme();
  const dark = th.mode === 'dark';
  return (
    <button onClick={() => setMode(dark ? 'light' : 'dark')}
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      style={{ width: 38, height: 38, borderRadius: 999, display: 'inline-flex',
        alignItems: 'center', justifyContent: 'center', background: 'transparent',
        border: `1px solid ${th.hairlineStrong}`, color: th.text, cursor: 'pointer',
        transition: 'all 180ms ease', padding: 0, flex: '0 0 auto' }}
      onMouseEnter={(e) => { e.currentTarget.style.background = th.glass; e.currentTarget.style.borderColor = th.gold; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = th.hairlineStrong; }}>
      {dark ? (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
          <circle cx="8" cy="8" r="3" />
          <path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1.06 1.06M11.54 11.54l1.06 1.06M3.4 12.6l1.06-1.06M11.54 4.46l1.06-1.06" />
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M13 9.5A5.5 5.5 0 1 1 6.5 3a4.5 4.5 0 0 0 6.5 6.5z" />
        </svg>
      )}
    </button>
  );
}

// Twinkling starfield — the space backdrop. Deterministic positions per mount.
function Starfield({ count = 46, style = {} }) {
  const th = useTheme();
  const stars = useM(() => Array.from({ length: count }, () => ({
    x: Math.random() * 100, y: Math.random() * 100,
    s: Math.random() * 2 + 1, d: Math.random() * 4, o: Math.random() * 0.5 + 0.18,
  })), [count]);
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'hidden',
      pointerEvents: 'none', ...style }}>
      {stars.map((st, i) => (
        <span key={i} className="nvx-twinkle" style={{ position: 'absolute',
          left: `${st.x}%`, top: `${st.y}%`, width: st.s, height: st.s,
          borderRadius: '50%', background: th.star, opacity: st.o,
          animationDelay: `${st.d}s` }} />
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Nav — floating glass pill
// ─────────────────────────────────────────────────────────────
const NAV_LINKS = [
  { id: 'platform', label: 'Platform' },
  { id: 'product',  label: 'Product' },
  { id: 'why',      label: 'Why Novox' },
  { id: 'usecases', label: 'Use cases' },
];

function Nav({ mode, setMode }) {
  const th = useTheme();
  const [scrolled, setScrolled] = useS(false);
  const active = useActiveSection(NAV_LINKS.map((l) => l.id));
  useE(() => {
    const on = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav style={{ position: 'fixed', top: 14, left: 0, right: 0, zIndex: 100,
      display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
      <div style={{ width: '100%', maxWidth: 1160, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 16, padding: '10px 12px 10px 18px',
        borderRadius: 999,
        background: scrolled ? (th.mode === 'dark' ? 'rgba(10,14,28,0.72)' : 'rgba(255,255,255,0.72)') : 'transparent',
        backdropFilter: scrolled ? 'blur(14px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
        border: `1px solid ${scrolled ? th.hairlineStrong : 'transparent'}`,
        boxShadow: scrolled ? (th.mode === 'dark' ? '0 10px 30px -16px #000000' : '0 10px 30px -18px #0C112433') : 'none',
        transition: 'background 220ms ease, border-color 220ms ease, box-shadow 220ms ease' }}>
        <a href="#top" style={{ textDecoration: 'none', display: 'inline-flex' }}>
          <NovoxLockup markSize={30} textSize={22} color={th.text} accent={th.gold} showAccent />
        </a>
        <div className="nvx-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 22,
          fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 14.5 }}>
          {NAV_LINKS.map((l) => {
            const on = active === l.id;
            return (
              <a key={l.id} href={`#${l.id}`} className="nvx-nav-link"
                style={{ color: on ? th.text : th.textMuted, textDecoration: 'none',
                  position: 'relative', paddingBottom: 3, fontWeight: 500,
                  transition: 'color 180ms ease' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = th.text; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = on ? th.text : th.textMuted; }}>
                {l.label}
                <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 1.5,
                  background: th.gold, borderRadius: 2, transformOrigin: 'left center',
                  transform: on ? 'scaleX(1)' : 'scaleX(0)',
                  transition: 'transform 280ms cubic-bezier(.2,.7,.2,1)' }} />
              </a>
            );
          })}
          <ThemeToggle mode={mode} setMode={setMode} />
          <Button href="#contact" style={{ padding: '10px 18px', fontSize: 14 }}>Book a call →</Button>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero — asymmetric split: copy left, live console right
// ─────────────────────────────────────────────────────────────
function Hero() {
  const th = useTheme();
  const reduced = useReducedMotion();
  const sectionRef = useR(null);
  const [shown, setShown] = useS(false);
  useE(() => { const id = setTimeout(() => setShown(true), reduced ? 50 : 120); return () => clearTimeout(id); }, [reduced]);

  const onMove = (e) => {
    if (reduced || !sectionRef.current) return;
    const r = sectionRef.current.getBoundingClientRect();
    sectionRef.current.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
    sectionRef.current.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
  };
  const rev = (d = 0) => ({
    opacity: shown ? 1 : 0, transform: shown ? 'none' : 'translateY(16px)',
    transition: reduced ? 'none' : `opacity 760ms cubic-bezier(.2,.7,.2,1) ${d}ms, transform 760ms cubic-bezier(.2,.7,.2,1) ${d}ms`,
  });

  return (
    <section id="top" className="nvx-section-hero" ref={sectionRef} onMouseMove={onMove}
      style={{ position: 'relative', overflow: 'hidden', background: th.bg,
        padding: '170px 0 110px' }}>
      <Starfield count={reduced ? 28 : 50} />
      <div aria-hidden style={{ position: 'absolute', top: '-12%', right: '-8%',
        width: 760, height: 760, pointerEvents: 'none' }}>
        <NovoxField accent={th.gold} base={th.mode === 'dark' ? 360 : 320}
          rings={5} glow={th.mode === 'dark' ? 0.85 : 0.4} orbit />
      </div>
      {!reduced && <div className="nvx-spotlight" />}
      <div aria-hidden style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 160,
        background: `linear-gradient(to bottom, transparent, ${th.bg})`, pointerEvents: 'none' }} />

      <Container style={{ position: 'relative', zIndex: 1 }}>
        <div className="nvx-hero-grid" style={{ display: 'grid',
          gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center' }}>
          {/* copy */}
          <div className="nvx-hero-copy" style={{ maxWidth: 600 }}>
            <div style={rev(0)}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9,
                padding: '7px 13px', borderRadius: 999, background: th.goldTint,
                border: `1px solid ${th.goldBorder}`, marginBottom: 26 }}>
                <span className="nvx-live-dot" style={{ width: 6, height: 6, borderRadius: 3, background: th.gold }} />
                <Mono color={th.goldText} style={{ fontSize: 11.5 }}>AI voice infrastructure</Mono>
              </div>
            </div>
            <h1 className="nvx-hero-h1" style={{ fontFamily: '"Space Grotesk", ui-sans-serif',
              fontSize: 'clamp(40px, 5.4vw, 68px)', fontWeight: 600, letterSpacing: '-0.035em',
              lineHeight: 1.04, margin: '0 0 24px', color: th.text, ...rev(80) }}>
              Voice agents that answer,
              understand, and{' '}
              <span className={reduced ? '' : 'nvx-shimmer-text'} style={{ color: th.goldText }}>act</span>.
            </h1>
            <Body size={18} style={{ maxWidth: 540, marginBottom: 34, ...rev(160) }}>
              Novox puts AI on your inbound and outbound phone lines — speaking natural
              Arabic and English, remembering every caller, and doing the real work a
              rep would. One console. Always on.
            </Body>
            <div className="nvx-hero-cta" style={{ display: 'flex', gap: 12, marginBottom: 34, ...rev(240) }}>
              <Button href="#contact">Book a call →</Button>
              <Button href="#platform" variant="ghost">Explore the platform</Button>
            </div>
            <div className="nvx-hero-stats" style={{ display: 'flex', flexWrap: 'wrap', gap: 28,
              ...rev(320) }}>
              {[['Inbound + Outbound', 'two-way'], ['Arabic + English', 'mid-call switch'], ['24 / 7', 'no headsets']].map((s) => (
                <div key={s[0]}>
                  <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 16,
                    fontWeight: 600, color: th.text, letterSpacing: '-0.01em' }}>{s[0]}</div>
                  <Mono style={{ fontSize: 10.5 }}>{s[1]}</Mono>
                </div>
              ))}
            </div>
          </div>
          {/* live console */}
          <div style={{ ...rev(200) }}>
            <LiveConsole />
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Live console — the animated hero centerpiece. A bilingual call
// in progress: waveform, streaming transcript with AR↔EN switch,
// sentiment, and resolved actions.
// ─────────────────────────────────────────────────────────────
const CONSOLE_SCRIPT = [
  { who: 'caller', lang: 'AR', rtl: true,  text: 'مساء الخير، عايزة أأكد معاد الكشف بكرة' },
  { who: 'novox',  lang: 'AR', rtl: true,  text: 'مساء النور أستاذة نور — معادك ٤:٣٠ مساءً. أأكده؟' },
  { who: 'caller', lang: 'EN', rtl: false, text: 'Actually, can we continue in English?' },
  { who: 'novox',  lang: 'EN', rtl: false, text: 'Of course — switching now. I’ve confirmed 4:30 PM and sent a WhatsApp reminder.' },
];

function LiveConsole() {
  const th = useTheme();
  const reduced = useReducedMotion();
  const [step, setStep] = useS(reduced ? CONSOLE_SCRIPT.length : 1);
  const [secs, setSecs] = useS(84);

  useE(() => {
    if (reduced) return;
    const id = setInterval(() => {
      setStep((s) => (s >= CONSOLE_SCRIPT.length ? 1 : s + 1));
    }, 2200);
    return () => clearInterval(id);
  }, [reduced]);
  useE(() => {
    if (reduced) return;
    const id = setInterval(() => setSecs((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [reduced]);

  const mm = String(Math.floor(secs / 60)).padStart(2, '0');
  const ss = String(secs % 60).padStart(2, '0');
  const lines = CONSOLE_SCRIPT.slice(0, step);
  const lang = CONSOLE_SCRIPT[Math.min(step, CONSOLE_SCRIPT.length) - 1].lang;

  const arFont = '"Space Grotesk", "Segoe UI", Tahoma, ui-sans-serif';

  return (
    <div className="nvx-console" style={{ position: 'relative', width: '100%', maxWidth: 480,
      marginInline: 'auto', borderRadius: 22, background: th.glass,
      border: `1px solid ${th.hairlineStrong}`, overflow: 'hidden',
      boxShadow: th.mode === 'dark' ? '0 40px 90px -40px #000000, 0 0 0 1px rgba(245,166,35,0.06)' : '0 40px 90px -50px #0C112455' }}>
      {/* glow top edge */}
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: `linear-gradient(90deg, transparent, ${th.gold}, transparent)`, opacity: 0.8 }} />
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 18px', borderBottom: `1px solid ${th.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span className="nvx-live-dot" style={{ width: 7, height: 7, borderRadius: 4, background: th.gold }} />
          <Mono color={th.text} style={{ fontSize: 11, letterSpacing: '0.14em' }}>Live call</Mono>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Mono style={{ fontSize: 11 }}>{mm}:{ss}</Mono>
          <span style={{ padding: '3px 8px', borderRadius: 6, background: th.nebulaTint,
            color: th.nebulaText, fontFamily: '"Space Mono", monospace', fontSize: 10,
            letterSpacing: '0.08em' }}>{lang === 'AR' ? 'AR ↔ EN' : 'EN'}</span>
        </div>
      </div>
      {/* caller */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px' }}>
        <div style={{ width: 38, height: 38, borderRadius: 12, flex: '0 0 38px',
          background: th.goldTint, border: `1px solid ${th.goldBorder}`, color: th.goldText,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600, fontSize: 15 }}>NA</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600,
            fontSize: 15, color: th.text }}>Nour A.</div>
          <Mono style={{ fontSize: 10.5 }}>+20 10 ··· 4471 · returning caller</Mono>
        </div>
        <NovoxWaveform bars={9} color={th.textSoft} accent={th.gold} height={26}
          width={3} gap={3} accentEvery={3} />
      </div>
      {/* transcript */}
      <div style={{ padding: '4px 18px 16px', display: 'flex', flexDirection: 'column', gap: 9,
        minHeight: 188 }}>
        {lines.map((l, i) => {
          const me = l.who === 'novox';
          return (
            <div key={i} className={reduced ? '' : 'nvx-stream-line'}
              style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start',
                animation: reduced ? 'none' : 'nvx-stream 420ms cubic-bezier(.2,.7,.2,1) both' }}>
              <div style={{ maxWidth: '82%', padding: '9px 13px', borderRadius: 13,
                borderTopLeftRadius: me ? 13 : 4, borderTopRightRadius: me ? 4 : 13,
                background: me ? th.gold : (th.mode === 'dark' ? '#FFFFFF0D' : th.sunk),
                color: me ? th.onGold : th.text,
                border: me ? 'none' : `1px solid ${th.hairline}`,
                fontFamily: l.lang === 'AR' ? arFont : '"DM Sans", ui-sans-serif',
                fontSize: 13.5, lineHeight: 1.5, direction: l.rtl ? 'rtl' : 'ltr',
                textAlign: l.rtl ? 'right' : 'left' }}>
                {l.text}
              </div>
            </div>
          );
        })}
        {!reduced && step < CONSOLE_SCRIPT.length && (
          <div style={{ display: 'flex', justifyContent: lines[lines.length - 1].who === 'novox' ? 'flex-start' : 'flex-end' }}>
            <span style={{ padding: '8px 12px', borderRadius: 12, background: th.mode === 'dark' ? '#FFFFFF0D' : th.sunk,
              border: `1px solid ${th.hairline}`, display: 'inline-flex', gap: 4 }}>
              {[0, 1, 2].map((d) => (
                <span key={d} className="nvx-blink" style={{ width: 5, height: 5, borderRadius: 3,
                  background: th.textSoft, animationDelay: `${d * 0.16}s` }} />
              ))}
            </span>
          </div>
        )}
      </div>
      {/* footer — actions + sentiment */}
      <div style={{ padding: '14px 18px', borderTop: `1px solid ${th.hairline}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        background: th.mode === 'dark' ? '#FFFFFF06' : '#0C11240A' }}>
        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
          {['✓ Appointment', '✓ WhatsApp sent'].map((c) => (
            <span key={c} style={{ fontFamily: '"Space Mono", monospace', fontSize: 10.5,
              padding: '5px 9px', borderRadius: 7, background: 'rgba(52,211,153,0.12)',
              color: th.success, border: '1px solid rgba(52,211,153,0.3)' }}>{c}</span>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <Mono style={{ fontSize: 9.5 }}>Sentiment</Mono>
          <div style={{ width: 52, height: 5, borderRadius: 3, background: th.hairline, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '88%',
              background: `linear-gradient(90deg, ${th.gold}, ${th.goldBright})` }} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Capability ticker — auto-scrolling marquee
// ─────────────────────────────────────────────────────────────
const TICKER_ITEMS = [
  'Inbound agents', 'Outbound campaigns', 'Caller memory', 'Live transcripts',
  'Sentiment scoring', 'Ticketing & CRM', 'SMS & WhatsApp', 'Arabic dialects',
  'Human handoff', 'Audit & DNC', 'Auto playbooks', 'Exportable reports',
];
function Ticker() {
  const th = useTheme();
  const run = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div style={{ background: th.raised, borderTop: `1px solid ${th.hairline}`,
      borderBottom: `1px solid ${th.hairline}`, padding: '18px 0', overflow: 'hidden',
      position: 'relative',
      WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)' }}>
      <div className="nvx-marquee-track" style={{ display: 'inline-flex', alignItems: 'center',
        gap: 0, whiteSpace: 'nowrap', willChange: 'transform' }}>
        {run.map((it, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 28, paddingRight: 28 }}>
            <span style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 16,
              fontWeight: 500, color: th.textMuted, letterSpacing: '-0.01em' }}>{it}</span>
            <svg width="12" height="12" viewBox="0 0 100 100" style={{ flex: '0 0 12px' }}>
              <path d="M50 30 Q53 47 70 50 Q53 53 50 70 Q47 53 30 50 Q47 47 50 30 Z" fill={th.gold} />
            </svg>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Platform — bento overview
// ─────────────────────────────────────────────────────────────
function Platform() {
  const th = useTheme();
  return (
    <section id="platform" className="nvx-section" style={{ background: th.bg,
      padding: '128px 0', position: 'relative' }}>
      <Container>
        <Reveal><Eyebrow style={{ marginBottom: 18 }}>The platform</Eyebrow></Reveal>
        <Reveal delay={70} blur={5}>
          <H2 style={{ marginBottom: 18 }}>One system where every call lives.</H2>
        </Reveal>
        <Reveal delay={130}>
          <Body size={17} style={{ marginBottom: 56, maxWidth: 640 }}>
            Not a chatbot widget bolted to a website. Novox is the whole floor — the agents
            that talk, the memory that follows each caller, and the console your team runs it all from.
          </Body>
        </Reveal>
        <div className="nvx-bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          gridAutoRows: 'minmax(176px, auto)', gap: 16 }}>
          <BentoTile big icon="core" title="A call center, rendered as software"
            body="Agents handle the full workflow a human rep would — transfers, callbacks, tickets, follow-ups, CRM updates — not just a scripted reply."
            span="span 4" row="span 2" />
          <BentoTile icon="voice" title="Voice agents" body="Inbound + outbound, 24/7. They talk, listen, and finish the job." span="span 2" />
          <BentoTile icon="memory" title="Caller memory" body="Every call transcribed, summarized, sentiment-scored, and tied to a profile." span="span 2" />
          <BentoTile icon="console" title="Operations console" body="Live monitoring, ticketing, CRM, roles, and audit — built for ops, not engineers." span="span 3" />
          <BentoTile icon="lang" title="Arabic & English" body="Dialect-aware, with mid-call language switching baked in." span="span 3" />
        </div>
      </Container>
    </section>
  );
}

function BentoTile({ icon, title, body, span, row, big }) {
  const th = useTheme();
  const [hov, setHov] = useS(false);
  return (
    <div className={`nvx-card ${big ? 'nvx-bento-big' : ''}`.trim()}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ gridColumn: span, gridRow: row || 'auto', position: 'relative', overflow: 'hidden',
        borderRadius: 22, background: th.glass, border: `1px solid ${hov ? th.goldBorder : th.hairlineStrong}`,
        padding: big ? '34px 32px' : '26px 24px', display: 'flex', flexDirection: 'column',
        gap: 12, transform: hov ? 'translateY(-3px)' : 'none',
        boxShadow: hov ? (th.mode === 'dark' ? '0 24px 50px -28px #000000' : '0 24px 50px -30px #0C112433') : 'none' }}>
      {big && (
        <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 240, height: 240,
          opacity: 0.5, pointerEvents: 'none' }}>
          <NovoxField accent={th.gold} base={120} rings={3} glow={0.5} orbit />
        </div>
      )}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center',
        justifyContent: 'center', width: 42, height: 42, borderRadius: 11,
        background: th.goldTint, border: `1px solid ${th.goldBorder}`, color: th.goldText }}>
        <PlatformIcon kind={icon} />
      </div>
      <div style={{ position: 'relative', fontFamily: '"Space Grotesk", ui-sans-serif',
        fontSize: big ? 26 : 19, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.12,
        color: th.text, marginTop: 6, textWrap: 'balance' }}>{title}</div>
      <Body size={big ? 15.5 : 13.5} style={{ position: 'relative', maxWidth: 460 }}>{body}</Body>
    </div>
  );
}

function PlatformIcon({ kind }) {
  const common = { width: 22, height: 22, fill: 'none', stroke: 'currentColor',
    strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'core': return (<svg viewBox="0 0 24 24" {...common}><path d="M12 3v3M12 18v3M3 12h3M18 12h3" /><circle cx="12" cy="12" r="4" /></svg>);
    case 'voice': return (<svg viewBox="0 0 24 24" {...common}><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></svg>);
    case 'memory': return (<svg viewBox="0 0 24 24" {...common}><circle cx="12" cy="12" r="8" /><path d="M12 7v5l3 2" /></svg>);
    case 'console': return (<svg viewBox="0 0 24 24" {...common}><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M7 13l2 2 3-3" /></svg>);
    case 'lang': return (<svg viewBox="0 0 24 24" {...common}><path d="M4 5h7M7.5 5v2c0 3-1.5 5-4 6M5 9c0 2 2 3.5 5 4" /><path d="M13 19l3.5-8 3.5 8M14.4 16h4.2" /></svg>);
    default: return null;
  }
}

// ─────────────────────────────────────────────────────────────
// Product — sticky-scroll feature showcase
// ─────────────────────────────────────────────────────────────
const PRODUCT = [
  { kind: 'inbound',   tag: 'Inbound', title: 'Pick up on the first ring — every time.',
    body: 'Answer 24/7 with no queue and no hold music. Agents handle inquiries, route calls, book appointments, and open tickets — in Arabic, English, or both inside one call.',
    points: ['First-ring pickup', 'Live routing & booking', 'Bilingual in one call'] },
  { kind: 'outbound',  tag: 'Outbound', title: 'Dial thousands. Sound like one person.',
    body: 'Upload a list, choose a template, schedule by timezone, and control pacing. DNC compliance and a full audit trail run quietly in the background.',
    points: ['Timezone-aware pacing', 'Templates & scheduling', 'DNC + audit automatic'] },
  { kind: 'memory',    tag: 'Memory', title: 'Every caller, remembered.',
    body: 'Returning callers are recognized instantly — name, past conversations, preferences, open tickets. The agent picks up exactly where the last call left off.',
    points: ['Caller profiles', 'Conversation history', 'Context that carries over'] },
  { kind: 'dashboard', tag: 'Console', title: 'Watch every call, live.',
    body: 'Real-time transcripts, session history, a ticketing system tied to each call, an auto-built caller CRM, and reports you can export to PDF.',
    points: ['Live transcripts', 'Tickets per call', 'Exportable reports'] },
  { kind: 'intel',     tag: 'Intelligence', title: 'Describe the job. Novox writes the script.',
    body: 'Explain a use case in plain language and Novox drafts the agent’s playbook. Every call returns a summary, a sentiment score, and the topics raised.',
    points: ['Auto-generated playbooks', 'Per-call summaries', 'Sentiment & topics'] },
  { kind: 'toolkit',   tag: 'Toolkit', title: 'The agent does the work a rep would.',
    body: 'Mid-call, agents transfer to a human, schedule callbacks, open tickets, send SMS and WhatsApp follow-ups, and pull CRM data live — without leaving the call.',
    points: ['Transfer & callback', 'Tickets & follow-ups', 'Live CRM lookups'] },
];

function Product() {
  const th = useTheme();
  const vw = useViewport();
  const reduced = useReducedMotion();
  const desktop = vw >= 1080;
  const [active, setActive] = useS(0);
  const refs = useR([]);

  useE(() => {
    if (!desktop) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const idx = Number(e.target.getAttribute('data-idx'));
          if (!Number.isNaN(idx)) setActive(idx);
        }
      });
    }, { rootMargin: '-48% 0px -48% 0px', threshold: 0 });
    refs.current.forEach((el) => el && obs.observe(el));
    return () => obs.disconnect();
  }, [desktop]);

  return (
    <section id="product" className="nvx-section" style={{ background: th.raised,
      padding: '128px 0', borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Eyebrow style={{ marginBottom: 18 }}>Product</Eyebrow></Reveal>
        <Reveal delay={70} blur={5}>
          <H2 style={{ marginBottom: 64 }}>Everything a contact-center floor does — run by AI.</H2>
        </Reveal>

        {desktop ? (
          <div className="nvx-product" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 72, alignItems: 'start' }}>
            <div>
              {PRODUCT.map((f, i) => (
                <div key={f.kind} data-idx={i} ref={(el) => (refs.current[i] = el)}
                  style={{ minHeight: '74vh', display: 'flex', flexDirection: 'column',
                    justifyContent: 'center', paddingRight: 8 }}>
                  <ProductCopy feature={f} index={i} active={active === i} />
                </div>
              ))}
            </div>
            <div style={{ position: 'sticky', top: 120, height: 'fit-content' }}>
              <DeviceFrame label={PRODUCT[active].tag}>
                <div key={active} style={{ animation: reduced ? 'none' : 'nvx-stream 420ms cubic-bezier(.2,.7,.2,1) both' }}>
                  <ProductVisual kind={PRODUCT[active].kind} />
                </div>
              </DeviceFrame>
            </div>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
            {PRODUCT.map((f, i) => (
              <Reveal key={f.kind} y={26}>
                <ProductCopy feature={f} index={i} active />
                <div style={{ marginTop: 26 }}>
                  <DeviceFrame label={f.tag}><ProductVisual kind={f.kind} /></DeviceFrame>
                </div>
              </Reveal>
            ))}
          </div>
        )}
      </Container>
    </section>
  );
}

function ProductCopy({ feature, index, active }) {
  const th = useTheme();
  return (
    <div style={{ opacity: active ? 1 : 0.42, transition: 'opacity 400ms ease' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 13, color: th.goldText }}>
          0{index + 1}
        </span>
        <span style={{ height: 1, width: 30, background: active ? th.gold : th.hairlineStrong,
          transition: 'background 400ms ease' }} />
        <Mono color={active ? th.goldText : th.textSoft}>{feature.tag}</Mono>
      </div>
      <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 'clamp(26px, 3vw, 34px)',
        fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.08, color: th.text,
        marginBottom: 16, textWrap: 'balance', maxWidth: 460 }}>{feature.title}</div>
      <Body size={16} style={{ marginBottom: 22, maxWidth: 480 }}>{feature.body}</Body>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {feature.points.map((p) => (
          <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={th.gold}
              strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 8.5 L6.5 12 L13 4.5" />
            </svg>
            <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 14.5, color: th.textMuted }}>{p}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DeviceFrame({ children, label }) {
  const th = useTheme();
  return (
    <div style={{ position: 'relative', borderRadius: 22, background: th.glass,
      border: `1px solid ${th.hairlineStrong}`, overflow: 'hidden',
      boxShadow: th.mode === 'dark' ? '0 40px 90px -50px #000000' : '0 40px 90px -54px #0C112440' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px', borderBottom: `1px solid ${th.hairline}` }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {[th.gold, th.hairlineStrong, th.hairlineStrong].map((c, i) => (
            <span key={i} style={{ width: 9, height: 9, borderRadius: 5, background: c }} />
          ))}
        </div>
        <Mono style={{ fontSize: 10 }}>novox · {label}</Mono>
      </div>
      <div style={{ padding: 18, minHeight: 320 }}>{children}</div>
    </div>
  );
}

// ── Product visuals ──────────────────────────────────────────
function ProductVisual({ kind }) {
  switch (kind) {
    case 'inbound':   return <VisualInbound />;
    case 'outbound':  return <VisualOutbound />;
    case 'memory':    return <VisualMemory />;
    case 'dashboard': return <VisualDashboard />;
    case 'intel':     return <VisualIntel />;
    case 'toolkit':   return <VisualToolkit />;
    default: return null;
  }
}

function VisualInbound() {
  const th = useTheme();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 16px',
        borderRadius: 14, background: th.goldTint, border: `1px solid ${th.goldBorder}` }}>
        <span className="nvx-live-dot" style={{ width: 9, height: 9, borderRadius: 5, background: th.gold }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600, color: th.text, fontSize: 15 }}>Incoming call</div>
          <Mono style={{ fontSize: 10.5 }}>+20 12 ··· 8830</Mono>
        </div>
        <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 11, color: th.goldText }}>0.4s answer</span>
      </div>
      <NovoxWaveform bars={22} color={th.textSoft} accent={th.gold} height={46} width={3} gap={4} accentEvery={3}
        style={{ justifyContent: 'center', padding: '8px 0' }} />
      <div style={{ display: 'flex', gap: 8 }}>
        {['Booked appointment', 'Routed to billing', 'Opened ticket'].map((c, i) => (
          <span key={c} style={{ flex: 1, textAlign: 'center', padding: '10px 6px', borderRadius: 10,
            background: th.sunk, border: `1px solid ${th.hairline}`, fontFamily: '"DM Sans", ui-sans-serif',
            fontSize: 11.5, color: i === 0 ? th.goldText : th.textMuted }}>{c}</span>
        ))}
      </div>
    </div>
  );
}

function VisualOutbound() {
  const th = useTheme();
  const rows = [
    { n: 'Renewals · AR', done: 0.78, a: '1,240' },
    { n: 'Win-back · EN', done: 0.54, a: '860' },
    { n: 'Survey · AR/EN', done: 0.33, a: '2,010' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Mono style={{ fontSize: 10.5 }}>Campaigns · live</Mono>
      {rows.map((r) => (
        <div key={r.n} style={{ padding: '14px 14px', borderRadius: 12, background: th.sunk,
          border: `1px solid ${th.hairline}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600, fontSize: 13.5, color: th.text }}>{r.n}</span>
            <Mono style={{ fontSize: 10 }}>{r.a} dialed</Mono>
          </div>
          <div style={{ height: 6, borderRadius: 3, background: th.hairline, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${r.done * 100}%`,
              background: `linear-gradient(90deg, ${th.gold}, ${th.goldBright})` }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function VisualMemory() {
  const th = useTheme();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: 12, background: th.nebulaTint,
          border: `1px solid ${th.nebula}`, color: th.nebulaText, display: 'flex',
          alignItems: 'center', justifyContent: 'center', fontFamily: '"Space Grotesk", ui-sans-serif',
          fontWeight: 600 }}>TM</div>
        <div>
          <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600, color: th.text, fontSize: 15 }}>Tarek M.</div>
          <Mono style={{ fontSize: 10.5 }}>3 prior calls · VIP · prefers Arabic</Mono>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
        {['Open ticket #4821', 'Renewal due', 'Last NPS 9'].map((t) => (
          <span key={t} style={{ padding: '6px 10px', borderRadius: 8, background: th.sunk,
            border: `1px solid ${th.hairline}`, fontFamily: '"DM Sans", ui-sans-serif', fontSize: 12, color: th.textMuted }}>{t}</span>
        ))}
      </div>
      <div style={{ padding: '12px 14px', borderRadius: 12, background: th.sunk, border: `1px solid ${th.hairline}` }}>
        <Mono style={{ fontSize: 9.5 }}>Last call · summary</Mono>
        <div style={{ marginTop: 6, fontFamily: '"DM Sans", ui-sans-serif', fontSize: 13, color: th.text, lineHeight: 1.5 }}>
          “Confirmed delivery to the new address. Asked about the annual plan — follow up next week.”
        </div>
      </div>
    </div>
  );
}

function VisualDashboard() {
  const th = useTheme();
  const reduced = useReducedMotion();
  const [ref, seen] = useInView({ threshold: 0.3 });
  const rows = [
    { name: 'Nour A.',   status: 'Live · Resolved',    s: 0.92, c: th.gold,    live: true },
    { name: 'Tarek M.',  status: 'Live · In progress', s: 0.7,  c: th.gold,    live: true },
    { name: 'Salma K.',  status: 'Queued',             s: 0.5,  c: th.textSoft, live: false },
    { name: 'Yousef D.', status: 'Closed · Positive',  s: 0.86, c: th.success, live: false },
  ];
  return (
    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 8,
        borderBottom: `1px solid ${th.hairline}` }}>
        <span className="nvx-live-dot" style={{ width: 6, height: 6, borderRadius: 3, background: th.gold }} />
        <Mono style={{ fontSize: 10 }}>Live calls · 2</Mono>
      </div>
      {rows.map((r, i) => (
        <div key={r.name} style={{ display: 'grid', gridTemplateColumns: '18px 1fr 1fr 70px',
          gap: 10, alignItems: 'center' }}>
          <div style={{ width: 18, height: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {r.live ? <NovoxLoader size={18} color={th.text} accent={th.gold} showAccent speed={1.4 + i * 0.2} />
              : <span style={{ width: 6, height: 6, borderRadius: 3, background: th.hairlineStrong }} />}
          </div>
          <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 13, fontWeight: 600, color: th.text }}>{r.name}</span>
          <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 11, color: th.textMuted }}>{r.status}</span>
          <div style={{ height: 4, borderRadius: 2, background: th.hairline, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: seen ? `${r.s * 100}%` : 0, background: r.c,
              transition: `width 900ms cubic-bezier(.2,.7,.2,1) ${i * 110}ms` }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function VisualIntel() {
  const th = useTheme();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ padding: '12px 14px', borderRadius: 12, background: th.sunk,
        border: `1px solid ${th.hairline}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: th.goldText, fontFamily: '"Space Mono", monospace' }}>›</span>
        <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 13, color: th.text }}>
          “Book dermatology appointments and confirm insurance.”
        </span>
      </div>
      <Mono style={{ fontSize: 9.5 }}>Generated playbook</Mono>
      {['Greet, confirm caller identity', 'Offer next available slots', 'Verify insurance provider', 'Confirm + send WhatsApp reminder'].map((t, i) => (
        <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',
          borderRadius: 10, background: th.glass, border: `1px solid ${th.hairline}` }}>
          <span style={{ width: 20, height: 20, borderRadius: 6, background: th.nebulaTint, color: th.nebulaText,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: '"Space Mono", monospace', fontSize: 11 }}>{i + 1}</span>
          <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 12.5, color: th.textMuted }}>{t}</span>
        </div>
      ))}
    </div>
  );
}

function VisualToolkit() {
  const th = useTheme();
  const tools = [
    { l: 'Transfer to human', i: 'M5 12h12M13 8l4 4-4 4' },
    { l: 'Schedule callback', i: 'M12 7v5l3 2M5 12a7 7 0 1 0 14 0 7 7 0 0 0-14 0' },
    { l: 'Open ticket', i: 'M12 6v12M6 12h12' },
    { l: 'Send SMS', i: 'M4 5h16v10H8l-4 4z' },
    { l: 'WhatsApp', i: 'M5 19l1.5-4A7 7 0 1 1 9 17.5z' },
    { l: 'CRM lookup', i: 'M11 11m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0M15 15l4 4' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
      {tools.map((t) => (
        <div key={t.l} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '13px 13px',
          borderRadius: 12, background: th.sunk, border: `1px solid ${th.hairline}` }}>
          <span style={{ width: 30, height: 30, borderRadius: 9, flex: '0 0 30px', background: th.goldTint,
            border: `1px solid ${th.goldBorder}`, color: th.goldText, display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d={t.i} /></svg>
          </span>
          <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 12.5, color: th.textMuted }}>{t.l}</span>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Why Novox — comparison
// ─────────────────────────────────────────────────────────────
const COMPARE = [
  { label: 'Language', them: 'English model with a translation layer bolted on',
    us: 'Arabic-first — Khaleeji, Levantine, Egyptian, MSA — with mid-sentence AR↔EN switching' },
  { label: 'Scope', them: 'A feature you graft onto an existing stack',
    us: 'A platform: ticketing, CRM, roles, audit, and analytics built in' },
  { label: 'Handoff', them: 'Dead-ends or drops the call when it gets hard',
    us: 'One-step transfer to a supervisor with the full call context preserved' },
  { label: 'Readiness', them: 'Compliance “on the roadmap”',
    us: 'Multi-tenant, recording consent, DNC, and audit trails — shipped' },
];

function WhyNovox() {
  const th = useTheme();
  return (
    <section id="why" className="nvx-section" style={{ background: th.bg, padding: '128px 0',
      borderTop: `1px solid ${th.hairline}`, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden className="nvx-aurora" style={{ position: 'absolute', top: '-30%', left: '40%',
        width: 900, height: 700, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, rgba(245,166,35,0.12), transparent 62%)' }} />
      <Container style={{ position: 'relative' }}>
        <Reveal><Eyebrow style={{ marginBottom: 18 }}>Why Novox</Eyebrow></Reveal>
        <Reveal delay={70} blur={5}>
          <H2 style={{ marginBottom: 18 }}>Built as a platform. Not bolted on.</H2>
        </Reveal>
        <Reveal delay={130}>
          <Body size={17} style={{ marginBottom: 52, maxWidth: 600 }}>
            Most “voice AI” is a thin wrapper around an English chatbot. Here’s what
            you get with infrastructure that was built for calls from day one.
          </Body>
        </Reveal>

        <div className="nvx-compare" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr',
          gap: 20, alignItems: 'stretch' }}>
          {/* them */}
          <div className="nvx-compare-them" style={{ borderRadius: 22, padding: '32px 30px',
            background: th.mode === 'dark' ? '#FFFFFF06' : th.raised,
            border: `1px solid ${th.hairline}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, background: th.hairline,
                color: th.textSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
              </span>
              <span style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600,
                fontSize: 18, color: th.textMuted }}>Bolt-on chatbots</span>
            </div>
            {COMPARE.map((c) => (
              <div key={c.label} style={{ padding: '16px 0', borderTop: `1px solid ${th.hairline}` }}>
                <Mono style={{ fontSize: 10 }}>{c.label}</Mono>
                <div style={{ marginTop: 7, fontFamily: '"DM Sans", ui-sans-serif', fontSize: 14.5,
                  color: th.textSoft, lineHeight: 1.5 }}>{c.them}</div>
              </div>
            ))}
          </div>
          {/* us */}
          <div style={{ position: 'relative', borderRadius: 22, padding: '32px 30px',
            background: th.glass, border: `1px solid ${th.goldBorder}`, overflow: 'hidden',
            boxShadow: th.mode === 'dark' ? '0 30px 70px -40px #000000' : '0 30px 70px -44px #0C112433' }}>
            <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3,
              background: `linear-gradient(90deg, ${th.gold}, ${th.goldBright}, transparent)` }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <NovoxMark size={26} color={th.text} accent={th.gold} showAccent />
              <span style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 600,
                fontSize: 18, color: th.text }}>Novox</span>
            </div>
            {COMPARE.map((c, i) => (
              <Reveal key={c.label} delay={i * 60}>
                <div style={{ padding: '16px 0', borderTop: `1px solid ${th.hairline}` }}>
                  <Mono color={th.goldText} style={{ fontSize: 10 }}>{c.label}</Mono>
                  <div style={{ marginTop: 7, display: 'flex', gap: 10 }}>
                    <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke={th.gold}
                      strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" style={{ flex: '0 0 18px', marginTop: 1 }}>
                      <path d="M3 8.5 L6.5 12 L13 4.5" /></svg>
                    <div style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 14.5,
                      color: th.text, lineHeight: 1.5 }}>{c.us}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// How it works — vertical stepper
// ─────────────────────────────────────────────────────────────
const STEPS = [
  { t: 'Connect a number', b: 'Port your existing line or spin up a new one. Novox routes calls on your terms.' },
  { t: 'Shape the agent', b: 'Describe the job in plain language — Novox drafts the playbook. Or bring your own.' },
  { t: 'Go live', b: 'Inbound and outbound at full volume. Every call transcribed, summarized, and scored.' },
  { t: 'Tune', b: 'Dashboards, session history, sentiment trends. Supervisors coach; the model learns the patterns.' },
];

function HowItWorks() {
  const th = useTheme();
  const reduced = useReducedMotion();
  const [ref, seen] = useInView({ threshold: 0.15 });
  return (
    <section id="how" className="nvx-section" style={{ background: th.raised, padding: '128px 0',
      borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Eyebrow style={{ marginBottom: 18 }}>Getting started</Eyebrow></Reveal>
        <Reveal delay={70} blur={5}>
          <H2 style={{ marginBottom: 64 }}>Live in four steps.</H2>
        </Reveal>
        <div ref={ref} style={{ position: 'relative' }}>
          {/* connecting rail */}
          <div aria-hidden style={{ position: 'absolute', left: 27, top: 10, bottom: 10, width: 2,
            background: th.hairlineStrong }} />
          <div aria-hidden style={{ position: 'absolute', left: 27, top: 10, width: 2,
            background: `linear-gradient(to bottom, ${th.gold}, ${th.goldBright})`,
            transformOrigin: 'top', height: `calc(100% - 20px)`,
            transform: `scaleY(${seen ? 1 : 0})`,
            transition: reduced ? 'none' : 'transform 1400ms cubic-bezier(.2,.7,.2,1)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
            {STEPS.map((s, i) => (
              <Reveal key={s.t} delay={i * 90}>
                <div className="nvx-step" style={{ display: 'grid', gridTemplateColumns: '56px 1fr',
                  columnGap: 28, alignItems: 'start' }}>
                  <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
                    <div style={{ position: 'relative', zIndex: 1, width: 56, height: 56, borderRadius: 16,
                      background: th.bg, border: `1px solid ${i === 0 ? th.gold : th.hairlineStrong}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: i === 0 ? `0 0 0 5px ${th.goldTint}` : 'none' }}>
                      <span className="nvx-step-num" style={{ fontFamily: '"Space Grotesk", ui-sans-serif',
                        fontSize: 22, fontWeight: 600, color: i === 0 ? th.goldText : th.textMuted }}>
                        {i + 1}
                      </span>
                    </div>
                  </div>
                  <div style={{ paddingTop: 6 }}>
                    <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 24,
                      fontWeight: 600, letterSpacing: '-0.02em', color: th.text, marginBottom: 8 }}>{s.t}</div>
                    <Body size={15.5} style={{ maxWidth: 560 }}>{s.b}</Body>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Use cases — tabbed explorer
// ─────────────────────────────────────────────────────────────
const USECASES = [
  { key: 'Inbound', desc: 'Calls coming to you — answered on the first ring, day or night.',
    items: ['Customer support', 'Appointment booking', 'Order status', 'Telemedicine triage'] },
  { key: 'Outbound', desc: 'Novox dials, qualifies, and books — at a scale a team can’t match.',
    items: ['Sales outreach', 'Collections', 'Win-back campaigns', 'Renewal calls'] },
  { key: 'AI-native', desc: 'Workflows only software can run end-to-end, in real time.',
    items: ['Lead qualification', 'Surveys', 'Reminders', 'Post-call NPS'] },
];

function UseCases() {
  const th = useTheme();
  const [tab, setTab] = useS(0);
  const c = USECASES[tab];
  return (
    <section id="usecases" className="nvx-section" style={{ background: th.bg, padding: '128px 0',
      borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Eyebrow style={{ marginBottom: 18 }}>Use cases</Eyebrow></Reveal>
        <Reveal delay={70} blur={5}>
          <H2 style={{ marginBottom: 40 }}>One platform. Every voice workflow.</H2>
        </Reveal>
        <Reveal delay={120}>
          <div className="nvx-tabbar" style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
            {USECASES.map((u, i) => {
              const on = tab === i;
              return (
                <button key={u.key} onClick={() => setTab(i)}
                  style={{ padding: '10px 18px', borderRadius: 999, cursor: 'pointer',
                    fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 14.5, fontWeight: 600,
                    whiteSpace: 'nowrap',
                    background: on ? th.gold : 'transparent', color: on ? th.onGold : th.textMuted,
                    border: `1px solid ${on ? th.gold : th.hairlineStrong}`,
                    transition: 'all 200ms ease' }}
                  onMouseEnter={(e) => { if (!on) e.currentTarget.style.borderColor = th.gold; }}
                  onMouseLeave={(e) => { if (!on) e.currentTarget.style.borderColor = th.hairlineStrong; }}>
                  {u.key}
                </button>
              );
            })}
          </div>
        </Reveal>
        <div className="nvx-tabpanel" key={tab} style={{ display: 'grid',
          gridTemplateColumns: '0.85fr 1.15fr', gap: 36, alignItems: 'center',
          animation: 'nvx-stream 460ms cubic-bezier(.2,.7,.2,1) both' }}>
          <div>
            <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 30, fontWeight: 600,
              letterSpacing: '-0.025em', color: th.text, marginBottom: 14 }}>{c.key}</div>
            <Body size={16} style={{ maxWidth: 380 }}>{c.desc}</Body>
          </div>
          <div className="nvx-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {c.items.map((it, i) => (
              <div key={it} className="nvx-card" style={{ display: 'flex', alignItems: 'center', gap: 12,
                padding: '18px 18px', borderRadius: 14, background: th.glass,
                border: `1px solid ${th.hairlineStrong}` }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = th.goldBorder; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = th.hairlineStrong; e.currentTarget.style.transform = 'none'; }}>
                <span style={{ fontFamily: '"Space Mono", monospace', fontSize: 12, color: th.goldText }}>0{i + 1}</span>
                <span style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 14.5, fontWeight: 500, color: th.text }}>{it}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CTA + Contact — dark nova panel
// ─────────────────────────────────────────────────────────────
function CTASection() {
  const th = useTheme();
  return (
    <section id="contact" className="nvx-section" style={{ background: th.bg, padding: '40px 0 128px' }}>
      <Container>
        <div className="nvx-cta-inner" style={{ position: 'relative', overflow: 'hidden',
          borderRadius: 28, background: T.space.hex, color: T.starlight.hex,
          border: `1px solid ${th.mode === 'dark' ? th.hairlineStrong : '#FFFFFF1A'}`,
          padding: '72px 64px' }}>
          <Starfield count={36} />
          <div aria-hidden style={{ position: 'absolute', top: '-40%', right: '-6%', width: 620, height: 620,
            opacity: 0.7, pointerEvents: 'none' }}>
            <NovoxField accent={T.gold500.hex} base={280} rings={4} glow={0.7} orbit />
          </div>
          <div style={{ position: 'relative', maxWidth: 880 }}>
            <Eyebrow color={T.gold300.hex} style={{ marginBottom: 20 }}>Talk to us</Eyebrow>
            <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 'clamp(34px, 4.6vw, 56px)',
              fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.04, color: T.starlight.hex,
              marginBottom: 20, maxWidth: 640, textWrap: 'balance' }}>
              Hear what 24/7 sounds like.
            </div>
            <p style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 17, lineHeight: 1.6,
              color: T.starlightMuted.hex, maxWidth: 560, marginBottom: 36 }}>
              Tell us your call volume and use case. We’ll get back within one business day —
              usually a 30-minute call and a live agent running on your number inside the week.
            </p>
            <div className="nvx-cta-row" style={{ display: 'flex', gap: 12, marginBottom: 52 }}>
              <a href="mailto:hello@novox-ai.com" className="nvx-btn"
                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  padding: '14px 24px', borderRadius: 999, background: T.gold500.hex, color: '#1B1206',
                  fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 15, fontWeight: 600,
                  textDecoration: 'none', transition: 'transform 200ms ease, box-shadow 220ms ease' }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 14px 34px -10px ${T.gold500.hex}AA`; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
                Book a call →
              </a>
              <a href="mailto:hello@novox-ai.com"
                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  padding: '14px 24px', borderRadius: 999, background: 'transparent', color: T.starlight.hex,
                  border: '1px solid #FFFFFF2E', fontFamily: '"Space Grotesk", ui-sans-serif',
                  fontSize: 15, fontWeight: 600, textDecoration: 'none' }}>
                hello@novox-ai.com
              </a>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
              <FounderCard name="Ahmed Hesham" role="Founder & CEO" email="Ahmedhesham@novox-ai.com" phone="+201025825805" />
              <FounderCard name="Karim Ayman" role="Founder & CTO" email="Karimayman@novox-ai.com" phone="+201116568965" />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function FounderCard({ name, role, email, phone }) {
  const [hov, setHov] = useS(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ position: 'relative', overflow: 'hidden', borderRadius: 16, padding: '22px 22px',
        background: hov ? 'rgba(245,166,35,0.08)' : '#FFFFFF08',
        border: `1px solid ${hov ? T.gold500.hex + '66' : '#FFFFFF1A'}`,
        transition: 'all 240ms ease', transform: hov ? 'translateY(-3px)' : 'none' }}>
      <span aria-hidden style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 3,
        background: `linear-gradient(to bottom, ${T.gold500.hex}, ${T.gold300.hex})`,
        transformOrigin: 'top', transform: hov ? 'scaleY(1)' : 'scaleY(0)',
        transition: 'transform 380ms cubic-bezier(.2,.7,.2,1)' }} />
      <div style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontSize: 19, fontWeight: 600,
        color: T.starlight.hex }}>{name}</div>
      <div style={{ fontFamily: '"Space Mono", monospace', fontSize: 10.5, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: T.gold300.hex, marginTop: 4, marginBottom: 16 }}>{role}</div>
      <a href={`mailto:${email}`} style={{ display: 'block', fontFamily: '"DM Sans", ui-sans-serif',
        fontSize: 13.5, color: T.starlight.hex, textDecoration: 'none', wordBreak: 'break-all', marginBottom: 6 }}>{email}</a>
      <a href={`tel:${phone}`} style={{ display: 'block', fontFamily: '"Space Mono", monospace',
        fontSize: 13, color: T.starlightMuted.hex, textDecoration: 'none' }}>{phone}</a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer — giant wordmark
// ─────────────────────────────────────────────────────────────
function Footer() {
  const th = useTheme();
  const cols = [
    { t: 'Product', items: ['Inbound agents', 'Outbound campaigns', 'Operations console', 'AI intelligence'] },
    { t: 'Company', items: ['About', 'Careers', 'Contact', 'hello@novox-ai.com'] },
    { t: 'Resources', items: ['Docs', 'Security', 'DNC & compliance', 'Status'] },
  ];
  return (
    <footer style={{ position: 'relative', overflow: 'hidden', background: T.void.hex,
      color: T.starlight.hex, paddingTop: 90 }}>
      <Starfield count={30} />
      <Container style={{ position: 'relative' }}>
        <div className="nvx-footer-grid" style={{ display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48, paddingBottom: 56,
          borderBottom: '1px solid #FFFFFF14' }}>
          <div>
            <NovoxLockup markSize={34} textSize={24} color={T.starlight.hex} accent={T.gold400.hex} showAccent />
            <p style={{ marginTop: 18, fontFamily: '"DM Sans", ui-sans-serif', fontSize: 14.5,
              lineHeight: 1.6, color: T.starlightMuted.hex, maxWidth: 320 }}>
              Voice infrastructure for the next billion calls. AI agents that answer, understand,
              and act — inbound, outbound, Arabic, English, 24/7.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.t}>
              <div style={{ fontFamily: '"Space Mono", monospace', fontSize: 10.5, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: T.gold300.hex, marginBottom: 16 }}>{c.t}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex',
                flexDirection: 'column', gap: 11 }}>
                {c.items.map((it) => (
                  <li key={it}>
                    <a href="#" style={{ fontFamily: '"DM Sans", ui-sans-serif', fontSize: 13.5,
                      color: T.starlightMuted.hex, textDecoration: 'none' }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = T.starlight.hex; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = T.starlightMuted.hex; }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {/* giant wordmark */}
        <div aria-hidden style={{ fontFamily: '"Space Grotesk", ui-sans-serif', fontWeight: 700,
          fontSize: 'clamp(80px, 22vw, 320px)', lineHeight: 0.9, letterSpacing: '-0.04em',
          color: 'transparent', WebkitTextStroke: `1px ${'#FFFFFF1F'}`,
          padding: '40px 0 10px', userSelect: 'none', textAlign: 'center' }}>Novox</div>
        <div className="nvx-footer-bottom" style={{ display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 12, padding: '20px 0 36px',
          borderTop: '1px solid #FFFFFF14', fontFamily: '"Space Mono", monospace', fontSize: 11,
          letterSpacing: '0.1em', textTransform: 'uppercase', color: T.starlightMuted.hex }}>
          <span>© 2026 Novox · Cairo, Egypt</span>
          <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
            <a href="/privacy.html" style={{ color: T.starlightMuted.hex, textDecoration: 'none' }}>Privacy</a>
            <a href="#top" style={{ color: T.starlightMuted.hex, textDecoration: 'none' }}>Back to top ↑</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────
function App() {
  const [mode, setMode] = useS(() => {
    try { return localStorage.getItem('novox-mode') || 'dark'; } catch (e) { return 'dark'; }
  });
  const theme = buildTheme(mode);
  useE(() => {
    try { localStorage.setItem('novox-mode', mode); } catch (e) {}
    document.documentElement.style.colorScheme = theme.mode;
    document.body.style.background = theme.bg;
    document.body.style.color = theme.text;
  }, [mode]);

  useE(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <ThemeCtx.Provider value={theme}>
      <div style={{ background: theme.bg, minHeight: '100vh', transition: 'background 240ms ease' }}>
        <ScrollProgress />
        <Nav mode={mode} setMode={setMode} />
        <Hero />
        <Ticker />
        <Platform />
        <Product />
        <WhyNovox />
        <HowItWorks />
        <UseCases />
        <CTASection />
        <Footer />
      </div>
    </ThemeCtx.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);