// Voxera marketing website — built on the Cadence brand system.
// Sections: Nav · Hero · What · Features · Why · How · Use Cases · Contact · Footer.
// Now with light/dark theming.

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

// ─────────────────────────────────────────────────────────────
// Theme system — every component pulls surface/ink/etc from here.
// Light mode uses paper; dark mode stays fully dark across all sections.
// The "rhythm" sections (Why + Contact form) use a slightly different
// shade (midnight in light mode, midnightRaised in dark) so the
// alternating cadence is preserved without flipping to light-on-paper.
// ─────────────────────────────────────────────────────────────
const ThemeCtx = createContext(null);
function useTheme() { return useContext(ThemeCtx); }

function buildTheme(mode) {
  const dark = mode === 'dark';
  return {
    mode,
    // canvas
    surface:      dark ? T.midnight.hex       : T.paper.hex,
    surfaceRaised:dark ? T.midnightRaised.hex : T.paperRaised.hex,
    surfaceSunk:  dark ? T.midnightSunk.hex   : T.paperSunk.hex,
    // text
    text:         dark ? T.inkInverse.hex      : T.ink.hex,
    textMuted:    dark ? T.inkInverseMuted.hex : T.inkMuted.hex,
    textSoft:     dark ? '#7E7E84'             : T.inkSoft.hex,
    // structural
    hairline:     dark ? '#FFFFFF1F'           : T.hairline.hex,
    hairlineStrong: dark ? '#FFFFFF33'         : '#0B0B0C1A',
    // rhythm section (Why + Contact form) — dark-on-dark in dark mode,
    // dark-on-light in light mode. Always uses light ink on a dark surface.
    rhythm:       dark ? '#16191F'             : T.midnight.hex,
    rhythmText:   T.inkInverse.hex,
    rhythmTextMuted: T.inkInverseMuted.hex,
    rhythmHairline: '#FFFFFF1A',
    rhythmInputBg: '#FFFFFF08',
    // accent stays signal blue across modes
    accent:       T.signal500.hex,
    accent400:    T.signal400.hex,
    accent50:     dark ? '#2F6BFF1A'           : T.signal50.hex,
    accent100:    dark ? '#2F6BFF33'           : T.signal100.hex,
    accentText:   dark ? T.signal400.hex       : T.signal700.hex,
    // semantic
    success: T.success.hex,
  };
}

// ─────────────────────────────────────────────────────────────
// Shared primitives
// ─────────────────────────────────────────────────────────────
function Kicker({ children, color, style = {} }) {
  const th = useTheme();
  return (
    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
      letterSpacing: '0.16em', textTransform: 'uppercase',
      color: color || th.textSoft, ...style }}>
      {children}
    </div>
  );
}

function H2({ children, style = {}, color }) {
  const th = useTheme();
  return (
    <h2 className="vox-h2" style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 64,
      letterSpacing: '-0.035em', lineHeight: 1.0, fontWeight: 400, margin: 0,
      color: color || th.text, textWrap: 'balance', maxWidth: 820, ...style }}>
      {children}
    </h2>
  );
}

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

function Container({ children, style = {}, className = '' }) {
  return (
    <div className={`vox-container ${className}`.trim()}
      style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px', ...style }}>
      {children}
    </div>
  );
}

function Reveal({ children, delay = 0, y = 18, threshold = 0.15, style = {} }) {
  const ref = useR(null);
  const [shown, setShown] = useS(false);
  useE(() => {
    if (!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();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      ...style,
    }}>{children}</div>
  );
}

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

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

function Button({ children, href = '#', primary = false, onClick }) {
  const th = useTheme();
  const styleBase = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '12px 20px', fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em',
    fontFamily: '"Inter", ui-sans-serif', textDecoration: 'none',
    border: primary ? 'none' : `1px solid ${th.hairlineStrong}`,
    background: primary ? th.text : 'transparent',
    color: primary ? th.surface : th.text,
    cursor: 'pointer', transition: 'all 180ms ease',
  };
  return (
    <a href={href} onClick={onClick} style={styleBase}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {children}
    </a>
  );
}

// ─────────────────────────────────────────────────────────────
// Theme toggle — sun/moon icon, sits in the nav
// ─────────────────────────────────────────────────────────────
function ThemeToggle({ mode, setMode }) {
  const th = useTheme();
  const dark = mode === 'dark';
  return (
    <button onClick={() => setMode(dark ? 'light' : 'dark')}
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      style={{ width: 36, height: 36, 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 }}
      onMouseEnter={(e) => { e.currentTarget.style.background = th.surfaceRaised; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
      {dark ? (
        // sun
        <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>
      ) : (
        // moon
        <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>
  );
}

// ─────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────
const NAV_LINKS = [
  { id: 'product',     label: 'Product' },
  { id: 'whyvoxera',   label: 'Why Voxera' },
  { id: 'howitworks',  label: 'How it works' },
  { 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 onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const bgScrolled = th.mode === 'dark' ? `${T.midnight.hex}E6` : `${T.paper.hex}E6`;
  return (
    <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? bgScrolled : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? `1px solid ${th.hairline}` : '1px solid transparent',
      transition: 'all 180ms ease' }}>
      <Container className="vox-nav-container"
        style={{ padding: '16px 48px', display: 'flex',
        alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ textDecoration: 'none' }}>
          <CadenceProLockup markSize={36} textSize={26} color={th.text}
            accent={th.accent} showAccent />
        </a>
        <div className="vox-nav-links"
          style={{ display: 'flex', alignItems: 'center', gap: 28,
          fontFamily: '"Inter", ui-sans-serif', fontSize: 14 }}>
          {NAV_LINKS.map((l) => {
            const isActive = active === l.id;
            return (
              <a key={l.id} href={`#${l.id}`} className="vox-nav-link"
                style={{ color: isActive ? th.text : th.textMuted, textDecoration: 'none',
                  position: 'relative', paddingBottom: 4,
                  transition: 'color 180ms ease' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = th.text; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = isActive ? th.text : th.textMuted; }}>
                {l.label}
                <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0,
                  height: 1, background: th.accent,
                  transformOrigin: 'left center',
                  transform: isActive ? 'scaleX(1)' : 'scaleX(0)',
                  transition: 'transform 280ms cubic-bezier(.2,.7,.2,1)' }} />
              </a>
            );
          })}
          <ThemeToggle mode={mode} setMode={setMode} />
          <Button href="#contact" primary>Book a demo →</Button>
        </div>
      </Container>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero — cinematic centered intro. CadenceIntro plays on mount,
// headline reveals as the wordmark settles, then the intro
// auto-replays after a 10s pause.
// ─────────────────────────────────────────────────────────────
const HERO_INTRO_MS = 2400;
const HERO_REPLAY_PAUSE_MS = 10000;

function Hero() {
  const th = useTheme();
  const vw = useViewport();
  const [revealed, setRevealed] = useS(false);
  const [introPlayId, setIntroPlayId] = useS(0);
  const [scrollY, setScrollY] = useS(0);
  const introW = vw < 480 ? 300 : vw < 768 ? 440 : vw < 1024 ? 540 : 620;
  const introH = vw < 480 ? 110 : vw < 768 ? 150 : vw < 1024 ? 180 : 210;

  useE(() => {
    const id = setTimeout(() => setRevealed(true), 1500);
    return () => clearTimeout(id);
  }, []);

  useE(() => {
    const id = setInterval(
      () => setIntroPlayId((k) => k + 1),
      HERO_INTRO_MS + HERO_REPLAY_PAUSE_MS,
    );
    return () => clearInterval(id);
  }, []);

  useE(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const reveal = (delay = 0) => ({
    opacity: revealed ? 1 : 0,
    transform: revealed ? 'translateY(0)' : 'translateY(8px)',
    transition: `opacity 700ms ease ${delay}ms, transform 700ms ease ${delay}ms`,
  });

  const scrollCueOpacity = Math.max(0, 1 - scrollY / 120);

  return (
    <section id="top" data-screen-label="Hero" className="vox-section-hero"
      style={{ background: th.surface,
      padding: '160px 0 100px', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ maxWidth: 1120, padding: '0 24px', textAlign: 'center' }}>
        <div className="vox-hero-intro"
          style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <CadenceIntro
            playId={introPlayId}
            width={introW} height={introH}
            bg="transparent" fg={th.text} accent={th.accent}
            showCaption={false} showProgress={false} clickToReplay={false} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 16, marginBottom: 40 }}>
          <span className="vox-hero-bracket-line"
            style={{ flex: '0 1 60px', height: 1, background: th.hairlineStrong }} />
          <Kicker style={{ letterSpacing: '0.28em' }}>Voice · Next · Era</Kicker>
          <span className="vox-hero-bracket-line"
            style={{ flex: '0 1 60px', height: 1, background: th.hairlineStrong }} />
        </div>
        <h1 className="vox-hero-h1"
          style={{ fontFamily: '"Instrument Sans", ui-sans-serif',
          fontSize: 'clamp(44px, 6.2vw, 80px)',
          letterSpacing: '-0.035em', lineHeight: 1.08, fontWeight: 400, margin: 0,
          color: th.text, maxWidth: 1040, marginInline: 'auto',
          marginBottom: 32, whiteSpace: 'normal', ...reveal(0) }}>
          Answer every call. 24/7.<br/>
          In Arabic and English.<br/>
          <span style={{ color: th.textSoft }}>Without hiring a single agent.</span>
        </h1>
        <Body size={18} style={{
          maxWidth: 680, marginInline: 'auto', marginBottom: 44,
          ...reveal(120) }}>
          Voxera is a complete AI call-center system. Inbound and outbound voice agents
          that speak naturally, remember every caller, and run alongside your team —
          unified in a dashboard built for operations managers, not developers.
        </Body>
        <div className="vox-hero-buttons"
          style={{ display: 'flex', gap: 12, justifyContent: 'center',
          ...reveal(220) }}>
          <Button href="#contact" primary>Book a demo →</Button>
          <Button href="#product">See the product</Button>
        </div>
        <div className="vox-hero-cue"
          style={{ marginTop: 72, display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 8,
          opacity: revealed ? scrollCueOpacity : 0,
          transition: 'opacity 400ms ease' }}>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            letterSpacing: '0.2em', textTransform: 'uppercase', color: th.textSoft }}>
            Scroll
          </div>
          <svg width="14" height="22" viewBox="0 0 14 22" fill="none">
            <rect x="1" y="1" width="12" height="20" rx="6"
              stroke={th.textSoft} strokeWidth="1" />
            <circle cx="7" cy="7" r="1.6" fill={th.textSoft}>
              <animate attributeName="cy" values="7;14;7" dur="1.8s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="1;0.2;1" dur="1.8s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Positioning — the credibility / posture strip. Anchors the
// company instead of faking pre-launch metrics.
// ─────────────────────────────────────────────────────────────
function Positioning() {
  const th = useTheme();
  const badges = [
    'Inbound + Outbound',
    'Arabic + English',
    'Dialect-aware',
    'Enterprise-ready',
  ];
  return (
    <section data-screen-label="Positioning" className="vox-section"
      style={{ background: th.surface, padding: '128px 0',
        borderTop: `1px solid ${th.hairline}` }}>
      <Container style={{ maxWidth: 1040, padding: '0 24px', textAlign: 'center' }}>
        <Reveal>
          <Kicker style={{ marginBottom: 28 }}>Built for the next era of voice</Kicker>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif',
            fontSize: 'clamp(32px, 4.2vw, 56px)',
            letterSpacing: '-0.03em', lineHeight: 1.1, fontWeight: 400,
            color: th.text, maxWidth: 920, marginInline: 'auto',
            textWrap: 'balance' }}>
            Built in Cairo. Designed for the next 100 million voice calls
          </div>
        </Reveal>
        <Reveal delay={160}>
          <div className="vox-pos-badges"
            style={{ marginTop: 56, display: 'flex', justifyContent: 'center',
            flexWrap: 'wrap', gap: 0,
            borderTop: `1px solid ${th.hairline}`,
            borderBottom: `1px solid ${th.hairline}` }}>
            {badges.map((b, i) => (
              <div key={b} style={{ flex: '1 1 0',
                minWidth: 200, padding: '24px 20px',
                fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: th.textMuted,
                borderLeft: i > 0 ? `1px solid ${th.hairline}` : 'none' }}>
                {b}
              </div>
            ))}
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// What is Voxera
// ─────────────────────────────────────────────────────────────
function WhatIsVoxera() {
  const th = useTheme();
  const pillars = [
    { k: 'Voice agents',
      v: 'Inbound + outbound, 24/7 — they don\'t just talk, they handle the full workflow a human rep would.' },
    { k: 'Caller memory',
      v: 'Every conversation is transcribed, summarized, sentiment-scored, and remembered against the caller profile.' },
    { k: 'Operations dashboard',
      v: 'Live monitoring, ticketing, CRM, roles, audit logs — one place, built for ops managers, not engineers.' },
  ];
  return (
    <section data-screen-label="What" className="vox-section"
      style={{ background: th.surface,
      padding: '128px 0', borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <div className="vox-stack-tablet"
          style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 80,
          alignItems: 'start' }}>
          <Reveal><Kicker>What Voxera is</Kicker></Reveal>
          <div>
            <Reveal>
              <H2 style={{ fontSize: 48, marginBottom: 28 }}>
                A complete call-center system. Not a chatbot widget.
              </H2>
            </Reveal>
            <Reveal delay={80}>
              <Body style={{ marginBottom: 56, maxWidth: 720 }}>
                Voxera replaces — or augments — an entire contact-center floor with AI voice
                agents that handle the full workflow a human rep would: transfers, callbacks,
                tickets, SMS follow-ups, CRM updates. Every call is transcribed, scored, and
                stored against the caller's profile.
              </Body>
            </Reveal>
            <div className="vox-grid-3"
              style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 1, background: th.hairline, border: `1px solid ${th.hairline}` }}>
              {pillars.map((p, i) => (
                <Reveal key={p.k} delay={i * 80}>
                  <div style={{ background: th.surface, padding: '28px 24px',
                    minHeight: 160, height: '100%',
                    display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                      letterSpacing: '0.16em', textTransform: 'uppercase',
                      color: th.accent }}>
                      0{i + 1}
                    </div>
                    <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif',
                      fontSize: 20, letterSpacing: '-0.02em', lineHeight: 1.15,
                      fontWeight: 500, color: th.text }}>
                      {p.k}
                    </div>
                    <Body size={13} style={{ marginTop: 'auto' }}>{p.v}</Body>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Product / Features
// ─────────────────────────────────────────────────────────────
const FEATURES = [
  {
    k: '01',
    title: 'Inbound AI agents',
    body: 'Answer on the first ring, 24/7. Handle inquiries, route calls, book appointments, open support tickets — in Arabic, English, or both inside the same call.',
    visual: 'inbound',
  },
  {
    k: '02',
    title: 'Outbound campaigns',
    body: 'Upload a list, pick a template, schedule by timezone, control pacing. DNC compliance and audit trail run automatically in the background.',
    visual: 'outbound',
  },
  {
    k: '03',
    title: 'Caller memory',
    body: 'Every returning caller is recognized. Name, prior conversations, preferences, open tickets — the agent picks up exactly where the last call ended.',
    visual: 'memory',
  },
  {
    k: '04',
    title: 'Operations dashboard',
    body: 'Live call monitoring with real-time transcripts, session history, a ticketing system tied to every call, auto-built caller CRM, and PDF-exportable reports.',
    visual: 'dashboard',
  },
  {
    k: '05',
    title: 'AI intelligence',
    body: 'Describe a use case — Voxera writes the agent\'s playbook. Every call gets an auto-summary, sentiment score, and topic extraction before the next standup.',
    visual: 'ai',
  },
  {
    k: '06',
    title: 'Mid-call toolkit',
    body: 'Transfer to a human, schedule callbacks, create tickets, send SMS and WhatsApp follow-ups, pull CRM data live. The agent does the work a rep would.',
    visual: 'toolkit',
  },
];

function Features() {
  const th = useTheme();
  // Asymmetric layout: row 1 = 3 cells; row 2 = wide Dashboard (2 cols) + AI;
  // row 3 = Toolkit (centered span 2 + filler). We use grid-column hints.
  const layout = {
    inbound:   { col: 'span 1' },
    outbound:  { col: 'span 1' },
    memory:    { col: 'span 1' },
    dashboard: { col: 'span 2', wide: true },
    ai:        { col: 'span 1' },
    toolkit:   { col: 'span 3', wide: true },
  };
  return (
    <section id="product" data-screen-label="Product" className="vox-section"
      style={{ background: th.surfaceRaised, padding: '128px 0',
        borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Kicker style={{ marginBottom: 16 }}>01 — Product</Kicker></Reveal>
        <Reveal delay={80}>
          <H2 style={{ marginBottom: 64 }}>
            Everything a contact-center floor does. Run by AI.
          </H2>
        </Reveal>
        <div className="vox-features-grid"
          style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          background: th.hairline, gap: 1, border: `1px solid ${th.hairline}` }}>
          {FEATURES.map((f, i) => {
            const meta = layout[f.visual] || { col: 'span 1' };
            return (
              <Reveal key={f.k} delay={(i % 3) * 80}
                style={{ gridColumn: meta.col, height: '100%' }}>
                <FeatureCard feature={f} wide={meta.wide} />
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function FeatureCard({ feature, wide }) {
  const th = useTheme();
  const [hover, setHover] = useS(false);
  const showMockup = feature.visual === 'dashboard';
  const showWaveform = feature.visual === 'toolkit';
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className={wide ? 'vox-feature-wide' : ''}
      style={{ background: th.surface, padding: '40px 36px',
        display: 'flex', flexDirection: wide ? 'row' : 'column',
        gap: wide ? 48 : 20, minHeight: 340, height: '100%',
        alignItems: wide ? 'stretch' : 'flex-start',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'transform 200ms ease' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20,
        flex: wide ? '0 0 320px' : '1 1 auto', height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <FeatureIcon kind={feature.visual} />
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            letterSpacing: '0.12em', color: th.textSoft }}>
            {feature.k}
          </div>
        </div>
        <div style={{ marginTop: 'auto' }}>
          <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 26,
            letterSpacing: '-0.025em', lineHeight: 1.1, fontWeight: 500,
            color: th.text, marginBottom: 12, textWrap: 'balance' }}>
            {feature.title}
          </div>
          <Body size={14}>{feature.body}</Body>
        </div>
      </div>
      {showMockup && <DashboardMockup />}
      {showWaveform && <ToolkitStrip />}
    </div>
  );
}

function DashboardMockup() {
  const th = useTheme();
  const rows = [
    { name: 'Amira H.',  status: 'Live · Resolved',    sentiment: 0.92, color: th.accent,        live: true },
    { name: 'Khalid R.', status: 'Live · In progress', sentiment: 0.71, color: th.accent,        live: true },
    { name: 'Omar S.',   status: 'Queued',             sentiment: 0.55, color: th.textSoft,      live: false },
    { name: 'Layla M.',  status: 'Closed · Positive',  sentiment: 0.88, color: T.success.hex,    live: false },
  ];
  const liveCount = rows.filter((r) => r.live).length;
  return (
    <div style={{ flex: '1 1 auto', minWidth: 0, background: th.surfaceSunk,
      border: `1px solid ${th.hairline}`, padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingBottom: 10, borderBottom: `1px solid ${th.hairline}` }}>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase', color: th.textSoft }}>
          Live calls · {liveCount}
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: th.accent }} />
          <span style={{ width: 6, height: 6, borderRadius: 3, background: th.hairlineStrong }} />
          <span style={{ width: 6, height: 6, borderRadius: 3, background: th.hairlineStrong }} />
        </div>
      </div>
      {rows.map((r, i) => (
        <div key={r.name} style={{ display: 'grid',
          gridTemplateColumns: '20px 1fr 1fr 80px', gap: 10, alignItems: 'center',
          fontFamily: '"Inter", ui-sans-serif' }}>
          <div style={{ width: 20, height: 20, display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            {r.live ? (
              <CadenceLoader size={20} color={th.text}
                accent={th.accent} showAccent speed={1.4 + i * 0.2} />
            ) : (
              <span style={{ width: 6, height: 6, borderRadius: 3,
                background: th.hairlineStrong }} />
            )}
          </div>
          <div style={{ fontSize: 13, color: th.text, fontWeight: 500 }}>{r.name}</div>
          <div style={{ fontSize: 11, color: th.textMuted, letterSpacing: '-0.005em' }}>
            {r.status}
          </div>
          <div style={{ position: 'relative', height: 4, background: th.hairline,
            borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, width: `${r.sentiment * 100}%`,
              background: r.color, transition: 'width 600ms ease' }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function ToolkitStrip() {
  const th = useTheme();
  const tools = [
    { label: 'Transfer to human', icon: '→' },
    { label: 'Schedule callback', icon: '↻' },
    { label: 'Open ticket', icon: '✚' },
    { label: 'Send SMS', icon: '✉' },
    { label: 'WhatsApp follow-up', icon: '◆' },
    { label: 'CRM lookup', icon: '⌕' },
  ];
  return (
    <div className="vox-toolkit-grid"
      style={{ flex: '1 1 auto', minWidth: 0,
      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10,
      alignSelf: 'center' }}>
      {tools.map((t) => (
        <div key={t.label} style={{ background: th.surfaceSunk,
          border: `1px solid ${th.hairline}`, padding: '14px 12px',
          display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14,
            background: th.accent50, color: th.accentText,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14, fontWeight: 500 }}>
            {t.icon}
          </div>
          <div style={{ fontSize: 11, color: th.textMuted,
            fontFamily: '"Inter", ui-sans-serif', lineHeight: 1.3 }}>
            {t.label}
          </div>
        </div>
      ))}
    </div>
  );
}

function FeatureIcon({ kind }) {
  const th = useTheme();
  const s = 44, c = th.text, a = th.accent;
  const common = { width: s, height: s, fill: 'none', stroke: c, strokeWidth: 1.5,
    strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'inbound':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <path d="M 12 10 L 12 22 L 32 22 L 32 34" />
          <circle cx="32" cy="34" r="2.5" fill={a} stroke="none" />
          <rect x="6" y="6" width="12" height="12" rx="2" />
        </svg>
      );
    case 'outbound':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <path d="M 10 32 L 30 12" />
          <path d="M 22 12 L 30 12 L 30 20" />
          <circle cx="10" cy="32" r="2.5" fill={a} stroke="none" />
        </svg>
      );
    case 'memory':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <circle cx="22" cy="22" r="14" />
          <path d="M 22 10 L 22 22 L 30 26" />
          <circle cx="22" cy="22" r="2" fill={a} stroke="none" />
        </svg>
      );
    case 'dashboard':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <rect x="6" y="8" width="32" height="28" rx="2" />
          <path d="M 6 16 L 38 16" />
          <circle cx="10" cy="12" r="1" fill={c} stroke="none" />
          <circle cx="14" cy="12" r="1" fill={c} stroke="none" />
          <path d="M 12 24 L 18 22 L 24 28 L 32 20" stroke={a} />
        </svg>
      );
    case 'ai':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <rect x="6" y="16" width="4" height="12" rx="1" fill={c} stroke="none" />
          <rect x="14" y="10" width="4" height="24" rx="1" fill={c} stroke="none" />
          <rect x="22" y="20" width="4" height="4" rx="1" fill={c} stroke="none" />
          <rect x="30" y="8" width="4" height="28" rx="1" fill={a} stroke="none" />
        </svg>
      );
    case 'toolkit':
      return (
        <svg viewBox="0 0 44 44" {...common}>
          <path d="M 8 12 L 16 12 M 8 22 L 28 22 M 8 32 L 20 32" />
          <circle cx="34" cy="12" r="3" fill={a} stroke="none" />
          <circle cx="32" cy="22" r="2" fill={c} stroke="none" />
          <circle cx="26" cy="32" r="2" fill={c} stroke="none" />
        </svg>
      );
    default: return null;
  }
}

// ─────────────────────────────────────────────────────────────
// Why Voxera — INVERTED rhythm section.
// In light mode: dark on midnight. In dark mode: light on paper.
// ─────────────────────────────────────────────────────────────
function WhyVoxera() {
  const th = useTheme();
  const points = [
    {
      k: 'Arabic-first',
      stat: 'Khaleeji · Levantine · Egyptian · MSA',
      body: 'Dialect awareness, custom vocabulary tuning, mid-sentence Arabic↔English switching. Not a translation layer bolted onto an English model.',
    },
    {
      k: 'A platform, not a feature',
      stat: 'Ticketing · CRM · Roles · Audit · Analytics',
      body: 'Voxera is the system. Built-in ticketing, CRM, roles, audit logs, and compliance — you don\'t graft them on later.',
    },
    {
      k: 'Human handoff, not replacement',
      stat: 'One-step transfer · Full context preserved',
      body: 'The AI transfers to a supervisor instantly with the full call context. Your agents do the complex work; Voxera handles the volume.',
    },
    {
      k: 'Enterprise-ready on day one',
      stat: 'Multi-tenant · SOC-ready · DNC + Consent',
      body: 'Full audit trails, role-based access, recording consent, DNC management. Shipped, not on a roadmap.',
    },
  ];
  const numColor = T.signal400.hex;
  return (
    <section id="whyvoxera" data-screen-label="Why" className="vox-section"
      style={{ background: th.rhythm, color: th.rhythmText, padding: '128px 0',
        position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: '50%',
        transform: 'translateX(-50%)', width: 1200, height: 600, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at top, rgba(47,107,255,0.16), transparent 65%)' }} />
      <Container style={{ position: 'relative' }}>
        <Reveal>
          <Kicker color={th.rhythmTextMuted} style={{ marginBottom: 16 }}>02 — Why Voxera</Kicker>
        </Reveal>
        <Reveal delay={80}>
          <H2 color={th.rhythmText} style={{ marginBottom: 72 }}>
            Four things the next five vendors you evaluate won't have.
          </H2>
        </Reveal>
        <div className="vox-grid-2"
          style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1,
          background: th.rhythmHairline, border: `1px solid ${th.rhythmHairline}` }}>
          {points.map((p, i) => (
            <Reveal key={p.k} delay={(i % 2) * 100}
              style={{ height: '100%' }}>
              <div style={{ background: th.rhythm, padding: '48px 40px',
                minHeight: 280, height: '100%',
                display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: numColor }}>
                  0{i + 1}
                </div>
                <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 32,
                  letterSpacing: '-0.03em', lineHeight: 1.05, fontWeight: 400,
                  color: th.rhythmText, textWrap: 'balance' }}>
                  {p.k}
                </div>
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                  letterSpacing: '0.08em', color: T.signal400.hex,
                  paddingBottom: 12, borderBottom: `1px solid ${th.rhythmHairline}` }}>
                  {p.stat}
                </div>
                <Body size={15} color={th.rhythmTextMuted}>{p.body}</Body>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// How it works
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const th = useTheme();
  const steps = [
    { n: '01', t: 'Connect your number', b: 'Port an existing line or provision a new one. Voxera routes calls on your terms.' },
    { n: '02', t: 'Configure your agent', b: 'Describe the use case in plain language — Voxera writes the conversation playbook. Or bring your own.' },
    { n: '03', t: 'Go live',              b: 'Agents handle inbound and outbound at full scale. Every call transcribed, summarized, scored.' },
    { n: '04', t: 'Monitor and tune',     b: 'Live dashboard, session history, sentiment trends. Supervisors coach; the AI learns the patterns.' },
  ];
  return (
    <section id="howitworks" data-screen-label="How" className="vox-section"
      style={{ background: th.surface, padding: '128px 0',
        borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Kicker style={{ marginBottom: 16 }}>03 — How it works</Kicker></Reveal>
        <Reveal delay={80}>
          <H2 style={{ marginBottom: 80 }}>
            Four steps from signed contract to first live call.
          </H2>
        </Reveal>
        <div style={{ position: 'relative' }}>
          <div aria-hidden className="vox-steps-line"
            style={{ position: 'absolute', top: 5, left: 0, right: 0,
            height: 1,
            background: `linear-gradient(to right, ${th.accent} 0%, ${th.accent} 25%, ${th.hairlineStrong} 25%, ${th.hairlineStrong} 100%)` }} />
          <div className="vox-steps-grid"
            style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            columnGap: 28, alignItems: 'start' }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 100}>
                <div className="vox-step" style={{ position: 'relative', paddingTop: 32 }}>
                  <div className="vox-step-dot"
                    style={{ position: 'absolute', top: 0, left: 0,
                    width: 11, height: 11, borderRadius: 6,
                    background: i === 0 ? th.accent : th.surface,
                    border: i === 0 ? 'none' : `1px solid ${th.hairlineStrong}`,
                    boxShadow: i === 0 ? `0 0 0 4px ${th.accent50}` : 'none' }} />
                  {i < steps.length - 1 && (
                    <div className="vox-steps-arrow"
                      style={{ position: 'absolute', top: -2, right: -22,
                      fontFamily: '"JetBrains Mono", monospace', fontSize: 14,
                      color: i === 0 ? th.accent : th.textSoft }}>→</div>
                  )}
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                    letterSpacing: '0.12em', color: th.textSoft, marginBottom: 16 }}>
                    Step {s.n}
                  </div>
                  <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 26,
                    letterSpacing: '-0.025em', lineHeight: 1.1, fontWeight: 500,
                    color: th.text, marginBottom: 12, textWrap: 'balance' }}>
                    {s.t}
                  </div>
                  <Body size={14}>{s.b}</Body>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Use cases
// ─────────────────────────────────────────────────────────────
function UseCases() {
  const th = useTheme();
  const clusters = [
    {
      k: 'Inbound',
      desc: 'Calls coming to you. Voxera answers on the first ring.',
      items: ['Customer support', 'Appointment booking', 'Order status', 'Telemedicine'],
    },
    {
      k: 'Outbound',
      desc: 'Voxera dials, speaks, qualifies, books — at scale.',
      items: ['Sales outreach', 'Collections', 'Win-back campaigns', 'Renewal calls'],
    },
    {
      k: 'AI-native',
      desc: 'Workflows only an AI can run end-to-end, in real time.',
      items: ['Lead qualification', 'Surveys', 'Reminders', 'Post-call NPS'],
    },
  ];
  return (
    <section id="usecases" data-screen-label="UseCases" className="vox-section"
      style={{ background: th.surfaceRaised, padding: '128px 0',
        borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <Reveal><Kicker style={{ marginBottom: 16 }}>04 — Use cases</Kicker></Reveal>
        <Reveal delay={80}>
          <H2 style={{ fontSize: 56, marginBottom: 72 }}>
            One platform. Every voice workflow.
          </H2>
        </Reveal>
        <div className="vox-grid-3"
          style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: th.hairline, border: `1px solid ${th.hairline}` }}>
          {clusters.map((c, ci) => (
            <Reveal key={c.k} delay={ci * 100} style={{ height: '100%' }}>
              <div style={{ background: th.surface, padding: '40px 36px',
                display: 'flex', flexDirection: 'column', gap: 24, height: '100%',
                minHeight: 360 }}>
                <div>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: th.accent, marginBottom: 14 }}>
                    0{ci + 1} · {c.k}
                  </div>
                  <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 26,
                    letterSpacing: '-0.025em', lineHeight: 1.15, fontWeight: 500,
                    color: th.text, marginBottom: 10, textWrap: 'balance' }}>
                    {c.k}
                  </div>
                  <Body size={14}>{c.desc}</Body>
                </div>
                <ul style={{ marginTop: 'auto', listStyle: 'none', padding: 0, margin: 0,
                  display: 'flex', flexDirection: 'column', gap: 1,
                  background: th.hairline, border: `1px solid ${th.hairline}` }}>
                  {c.items.map((it) => (
                    <li key={it} style={{ background: th.surface,
                      padding: '12px 16px', fontSize: 14, color: th.text,
                      fontFamily: '"Inter", ui-sans-serif',
                      display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ width: 4, height: 4, borderRadius: 2,
                        background: th.accent, flex: '0 0 4px' }} />
                      {it}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Contact
// ─────────────────────────────────────────────────────────────
function Contact() {
  const th = useTheme();
  return (
    <section id="contact" data-screen-label="Contact" className="vox-section"
      style={{ background: th.surface, padding: '128px 0',
        borderTop: `1px solid ${th.hairline}` }}>
      <Container>
        <div className="vox-contact-grid"
          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          <Reveal>
            <div>
              <Kicker style={{ marginBottom: 16 }}>05 — Contact</Kicker>
              <H2 style={{ marginBottom: 32 }}>Book a demo. Talk to a founder.</H2>
              <Body style={{ marginBottom: 48 }}>
                Tell us about your call volume and use case. We'll get back within one
                business day with a tailored pilot — usually a 30-minute call and a
                live agent running against your number within the week.
              </Body>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                <OwnerCard name="Mohamed Abdelmoaty" role="Founder & CEO"
                  email="m_abdelmoaty@voxera-ai.net" phone="+201140855558" />
                <OwnerCard name="Karim Gomaa" role="Co-Founder & CTO"
                  email="Karimgomaa@voxera-ai.net" phone="+201017532271" />
                <div style={{ padding: '16px 20px', background: th.surfaceRaised,
                  border: `1px solid ${th.hairline}` }}>
                  <div style={{ fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
                    letterSpacing: '0.12em', textTransform: 'uppercase', color: th.textSoft,
                    marginBottom: 6 }}>General inquiries</div>
                  <a href="mailto:hello@voxera-ai.net" style={{ fontSize: 18,
                    color: th.text, textDecoration: 'none',
                    fontFamily: '"Inter", ui-sans-serif', fontWeight: 500 }}>
                    hello@voxera-ai.net
                  </a>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <ContactForm />
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function OwnerCard({ name, role, email, phone }) {
  const th = useTheme();
  return (
    <div style={{ padding: '24px 28px', background: th.surfaceRaised,
      border: `1px solid ${th.hairline}` }}>
      <div style={{ fontSize: 22, fontFamily: '"Instrument Sans", ui-sans-serif',
        fontWeight: 500, letterSpacing: '-0.02em', color: th.text, marginBottom: 2 }}>
        {name}
      </div>
      <div style={{ fontSize: 13, color: th.textSoft, marginBottom: 16 }}>{role}</div>
      <div className="vox-owner-row" style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        <div>
          <div style={{ fontSize: 10, fontFamily: '"JetBrains Mono", monospace',
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: th.textSoft, marginBottom: 4 }}>Email</div>
          <div style={{ fontSize: 13, color: th.text, wordBreak: 'break-all' }}>{email}</div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontFamily: '"JetBrains Mono", monospace',
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: th.textSoft, marginBottom: 4 }}>Phone</div>
          <div style={{ fontSize: 13, color: th.text,
            fontFamily: '"JetBrains Mono", monospace' }}>{phone}</div>
        </div>
      </div>
    </div>
  );
}

// Cloudflare Turnstile — invisible CAPTCHA. Replace this with your real
// site key from Cloudflare → Turnstile → Add site. The test key below
// always passes verification, useful for local dev.
const TURNSTILE_SITE_KEY = '0x4AAAAAADDHliy2iDouFr33';

function ContactForm() {
  const th = useTheme();
  const [sent, setSent] = useS(false);
  const [error, setError] = useS(null);
  const [submitting, setSubmitting] = useS(false);
  const turnstileRef = useR(null);
  const widgetIdRef = useR(null);
  const tokenRef = useR(null);

  const fields = [
    { k: 'name', label: 'Full name', placeholder: 'Amira Hassan' },
    { k: 'company', label: 'Company', placeholder: 'Acme Contact Center' },
    { k: 'email', label: 'Work email', placeholder: 'you@company.com' },
    { k: 'phone', label: 'Phone', placeholder: '+971 50 123 4567' },
  ];

  useE(() => {
    const tryRender = () => {
      if (!window.turnstile || !turnstileRef.current || widgetIdRef.current) return false;
      widgetIdRef.current = window.turnstile.render(turnstileRef.current, {
        sitekey: TURNSTILE_SITE_KEY,
        size: 'flexible',
        theme: 'auto',
        callback: (token) => { tokenRef.current = token; },
        'expired-callback': () => { tokenRef.current = null; },
        'error-callback': () => { tokenRef.current = null; },
      });
      return true;
    };
    if (tryRender()) return;
    const id = setInterval(() => { if (tryRender()) clearInterval(id); }, 200);
    return () => clearInterval(id);
  }, []);

  async function onSubmit(e) {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    const payload = Object.fromEntries(new FormData(e.currentTarget).entries());
    payload.turnstileToken = tokenRef.current || '';
    const fallback = "We couldn't send your request right now. Please email us at hello@voxera-ai.net and we'll get straight back to you.";
    try {
      const res = await fetch('/api/demo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      let body = {};
      try { body = await res.json(); } catch {}
      if (!res.ok || !body.ok) throw new Error('non-ok');
      setSent(true);
    } catch {
      setError(fallback);
      if (window.turnstile && widgetIdRef.current) window.turnstile.reset(widgetIdRef.current);
      tokenRef.current = null;
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="vox-contact-form"
      style={{ background: th.rhythm, color: th.rhythmText,
        padding: '48px 44px', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif', fontSize: 28,
        letterSpacing: '-0.025em', fontWeight: 500, marginBottom: 8 }}>
        Request a demo
      </div>
      <input type="text" name="website" tabIndex={-1} autoComplete="off"
        style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
      {fields.map((f) => (
        <Field key={f.k} name={f.k} label={f.label} placeholder={f.placeholder}
          required={f.k !== 'phone'} />
      ))}
      <div>
        <label style={{ fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: th.rhythmTextMuted }}>
          Message
        </label>
        <textarea name="message" rows={4} required
          placeholder="Monthly call volume, languages, use case…"
          style={{ marginTop: 6, width: '100%', background: th.rhythmInputBg,
            border: `1px solid ${th.rhythmHairline}`,
            padding: '12px 14px', fontSize: 14, color: th.rhythmText,
            fontFamily: '"Inter", ui-sans-serif', resize: 'vertical' }} />
      </div>
      <div ref={turnstileRef} style={{ minHeight: 65 }} />
      {error && (
        <div style={{ fontSize: 13, color: '#FF8A8A',
          fontFamily: '"Inter", ui-sans-serif' }}>
          {error}
        </div>
      )}
      <button type="submit" disabled={sent || submitting}
        style={{ marginTop: 4, padding: '14px 18px',
          background: sent ? th.success : th.accent,
          color: '#FAFAF7', border: 'none', fontSize: 14, fontWeight: 500,
          fontFamily: '"Inter", ui-sans-serif',
          cursor: (sent || submitting) ? 'default' : 'pointer',
          opacity: submitting ? 0.7 : 1,
          letterSpacing: '-0.005em',
          transition: 'background 380ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
        {sent && (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="#FAFAF7" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12.5 L10 17.5 L19 7"
              style={{ strokeDasharray: 30, strokeDashoffset: sent ? 0 : 30,
                transition: 'stroke-dashoffset 520ms 120ms cubic-bezier(.2,.7,.2,1)' }} />
          </svg>
        )}
        {sent
          ? "Sent — we'll be in touch within 1 business day"
          : submitting ? 'Sending…' : 'Request demo →'}
      </button>
      <div style={{ fontSize: 11, color: th.rhythmTextMuted,
        fontFamily: '"Inter", ui-sans-serif', lineHeight: 1.5 }}>
        By submitting, you agree to our{' '}
        <a href="/privacy.html" style={{ color: th.rhythmText, textDecoration: 'underline' }}>
          privacy notice
        </a>.
      </div>
    </form>
  );
}

function Field({ label, placeholder, name, required }) {
  const th = useTheme();
  const type = name === 'email' ? 'email' : name === 'phone' ? 'tel' : 'text';
  return (
    <div>
      <label style={{ fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: th.rhythmTextMuted,
        display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>{label}</span>
        {!required && (
          <span style={{ textTransform: 'none', letterSpacing: '0.02em',
            fontSize: 10, opacity: 0.6, fontStyle: 'italic' }}>
            optional
          </span>
        )}
      </label>
      <input type={type} name={name} placeholder={placeholder} required={required}
        style={{ marginTop: 6, width: '100%', background: th.rhythmInputBg,
          border: `1px solid ${th.rhythmHairline}`,
          padding: '12px 14px', fontSize: 14, color: th.rhythmText,
          fontFamily: '"Inter", ui-sans-serif' }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer — always dark in both modes (anchor weight)
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: T.midnight.hex, color: T.inkInverse.hex,
      padding: '80px 0 40px' }}>
      <Container>
        <Reveal>
          <div className="vox-footer-cta"
            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            flexWrap: 'wrap', gap: 24,
            paddingBottom: 56, marginBottom: 56,
            borderBottom: '1px solid #FFFFFF1A' }}>
            <div style={{ fontFamily: '"Instrument Sans", ui-sans-serif',
              fontSize: 'clamp(28px, 3.4vw, 44px)', letterSpacing: '-0.025em',
              lineHeight: 1.1, fontWeight: 400, color: T.inkInverse.hex,
              maxWidth: 520, textWrap: 'balance' }}>
              Ready to hear what 24/7 sounds like?
            </div>
            <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 22px', background: T.signal500.hex, color: '#FAFAF7',
              fontSize: 14, fontWeight: 500, fontFamily: '"Inter", ui-sans-serif',
              letterSpacing: '-0.005em', textDecoration: 'none',
              transition: 'transform 180ms ease, background 180ms ease' }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.background = T.signal400.hex;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.background = T.signal500.hex;
              }}>
              Book a demo →
            </a>
          </div>
        </Reveal>
        <div className="vox-footer-grid"
          style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
          paddingBottom: 48, borderBottom: '1px solid #FFFFFF1A' }}>
          <div>
            <CadenceProLockup markSize={36} textSize={24}
              color={T.inkInverse.hex} accent={T.signal400.hex} showAccent />
            <div style={{ marginTop: 16, fontSize: 14, color: T.inkInverseMuted.hex,
              maxWidth: 340, lineHeight: 1.55 }}>
              The Next Era of Voice. AI agents that handle your calls —
              inbound, outbound, Arabic, English, 24/7.
            </div>
          </div>
          <FooterCol title="Product" items={['Inbound agents', 'Outbound campaigns', 'Dashboard', 'AI intelligence']} />
          <FooterCol title="Company" items={['About', 'Careers', 'Contact', 'hello@voxera-ai.net']} />
          <FooterCol title="Resources" items={['Docs', 'Security', 'DNC & compliance', 'Status']} />
        </div>
        <div className="vox-footer-bottom"
          style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 12,
          fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: T.inkInverseMuted.hex }}>
          <span>© 2026 Voxera · Cairo, Egypt</span>
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            <a href="/privacy.html" style={{ color: T.inkInverseMuted.hex, textDecoration: 'none' }}>
              Privacy
            </a>
            <a href="#top" style={{ color: T.inkInverseMuted.hex, textDecoration: 'none' }}>
              Back to top ↑
            </a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: T.inkInverseMuted.hex, marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0,
        display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((i) => (
          <li key={i} style={{ fontSize: 13, color: T.inkInverse.hex,
            fontFamily: '"Inter", ui-sans-serif' }}>{i}</li>
        ))}
      </ul>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────
function App() {
  // Persist theme choice across reloads.
  const [mode, setMode] = useS(() => {
    try { return localStorage.getItem('voxera-mode') || 'light'; }
    catch (e) { return 'light'; }
  });
  useE(() => {
    try { localStorage.setItem('voxera-mode', mode); } catch (e) {}
    document.body.style.background = mode === 'dark' ? T.midnight.hex : T.paper.hex;
    document.body.style.color = mode === 'dark' ? T.inkInverse.hex : T.ink.hex;
  }, [mode]);

  const theme = buildTheme(mode);

  // Smooth scroll for anchor links
  useE(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      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.surface, minHeight: '100vh',
        transition: 'background 200ms ease' }}>
        <Nav mode={mode} setMode={setMode} />
        <Hero />
        <Positioning />
        <WhatIsVoxera />
        <Features />
        <WhyVoxera />
        <HowItWorks />
        <UseCases />
        <Contact />
        <Footer />
      </div>
    </ThemeCtx.Provider>
  );
}

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