/* ============================================================
   NeuralScout — Page sections (Nav, Hero, About, CTA, Footer)
   ============================================================ */

function Nav({ overlay = false }) {
  const navStyle = overlay
    ? { ...pageStyles.nav, ...pageStyles.navOverlay, position: 'fixed', left: 0, right: 0, top: 0 }
    : pageStyles.nav;
  const linkStyle = overlay
    ? { ...pageStyles.navLink, ...pageStyles.navLinkOverlay }
    : pageStyles.navLink;

  return (
    <nav style={navStyle}>
      <div style={pageStyles.navInner}>
        <a href="index.html" style={{display:'flex', alignItems:'center', textDecoration:'none', color:'inherit'}}>
          <Logo height={34} />
        </a>
        <div style={pageStyles.navLinks}>
          {[
            ['Product', 'index.html#product'],
            ['How it works', 'index.html#how'],
            ['Use cases', 'index.html#use-cases'],
            ['Pricing', 'Pricing.html'],
            ['Docs', '#'],
          ].map(([l, href]) => (
            <a key={l} href={href} style={linkStyle}>{l}</a>
          ))}
        </div>
        <div style={{display:'flex', gap: 10, alignItems:'center'}}>
          <ThemeToggle overlay={overlay} />
          <a href="#" style={{...linkStyle, fontSize: 13}}>Sign in</a>
          <a href="ContactUs.html" className="ns-btn ns-btn-primary" style={{padding:'9px 16px', fontSize: 13}}>Book a demo →</a>
        </div>
      </div>
    </nav>
  );
}

function ThemeToggle({ overlay = false }) {
  const [theme, setTheme] = React.useState(() => {
    if (typeof document === 'undefined') return 'dark';
    return document.documentElement.getAttribute('data-theme') || 'dark';
  });

  React.useEffect(() => {
    const sync = () => setTheme(document.documentElement.getAttribute('data-theme') || 'dark');
    window.addEventListener('ns-theme-change', sync);
    return () => window.removeEventListener('ns-theme-change', sync);
  }, []);

  const toggle = () => {
    const next = theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('ns-theme', next); } catch(e) {}
    setTheme(next);
    window.dispatchEvent(new CustomEvent('ns-theme-change', { detail: { theme: next }}));
  };

  const isLight = theme === 'light';
  const borderColor = overlay ? 'rgba(255,255,255,0.25)' : 'var(--ns-line-2)';
  const color = overlay ? 'rgba(255,255,255,0.85)' : 'var(--ns-fg-dim)';
  return (
    <button onClick={toggle} aria-label={`Switch to ${isLight ? 'dark' : 'light'} mode`} title={`Switch to ${isLight ? 'dark' : 'light'} mode`} style={{
      width: 36, height: 36,
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      background:'transparent',
      border:`1px solid ${borderColor}`,
      borderRadius: 99,
      color,
      cursor:'pointer',
      transition:'all .2s var(--ns-ease)',
      padding: 0,
    }}
    onMouseEnter={e => { e.currentTarget.style.color = overlay ? '#fff' : 'var(--ns-fg)'; e.currentTarget.style.borderColor = overlay ? 'rgba(255,255,255,0.5)' : 'var(--ns-fg-dim)'; }}
    onMouseLeave={e => { e.currentTarget.style.color = color; e.currentTarget.style.borderColor = borderColor; }}
    >
      {isLight ? (
        // moon icon for "click to go dark"
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
        </svg>
      ) : (
        // sun icon for "click to go light"
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
        </svg>
      )}
    </button>
  );
}

const LOGO_SRC = 'assets/logos/logo.png';

function Logo({ height = 32 }) {
  return (
    <img
      src={LOGO_SRC}
      alt="Neuralscout"
      style={{
        height,
        width: 'auto',
        display: 'block',
        objectFit: 'contain',
      }}
    />
  );
}

function Hero() {
  return (
    <section style={pageStyles.hero}>
      <div style={pageStyles.heroInner}>
        <div style={pageStyles.heroCopy}>
          <div className="ns-eyebrow" style={{marginBottom: 20}}>Real-time video analytics · v2.1</div>
          <h1 style={pageStyles.h1}>
            Every camera, <em style={{fontStyle:'normal', color:'var(--ns-accent)'}}>watching.</em><br/>
            Every frame, <em style={{fontStyle:'normal'}}>understood.</em>
          </h1>
          <p style={pageStyles.heroSub}>
            NeuralScout turns any 24/7 RTSP stream into live counts, dwell times, faces,
            plates, and demographics — plus anything you can describe in plain English.
          </p>
          <div style={{display:'flex', gap: 12, marginTop: 32, flexWrap:'wrap'}}>
            <a href="#" className="ns-btn ns-btn-primary">Start free trial</a>
            <a href="#" className="ns-btn ns-btn-ghost">Watch 90-second demo</a>
          </div>
          <div style={{display:'flex', gap: 20, marginTop: 36, flexWrap:'wrap'}}>
            {[
              { v:'12ms', l:'median inference' },
              { v:'99.97%', l:'uptime SLA' },
              { v:'30 fps', l:'per stream' },
            ].map((s, i) => (
              <div key={i}>
                <div style={{fontFamily:'var(--ns-mono)', fontSize: 22, fontWeight: 600, color:'var(--ns-fg)'}}>{s.v}</div>
                <div style={{fontSize: 11, color:'var(--ns-fg-dimmer)', fontFamily:'var(--ns-mono)', letterSpacing:'0.08em', textTransform:'uppercase'}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={pageStyles.heroFeed}>
          <CameraFeed />
        </div>
      </div>

      {/* Logo row */}
      <div style={pageStyles.logoRow}>
        <span className="ns-mono" style={{fontSize: 11, color:'var(--ns-fg-dimmer)', letterSpacing:'0.14em'}}>
          DEPLOYED BY OPS & SECURITY TEAMS AT
        </span>
        <div style={pageStyles.logoStrip}>
          {['NORTHWARE', 'Meridian', 'CLARIFY.io', 'Portside', 'SIGMA+', 'Yardwell'].map(l => (
            <span key={l} style={{
              fontFamily: l.includes('.io') ? 'var(--ns-mono)' : 'var(--ns-sans)',
              fontWeight: 600, fontSize: 15,
              color:'var(--ns-fg-dim)',
              letterSpacing: l === l.toUpperCase() ? '0.08em' : '-0.01em',
              opacity: 0.7,
            }}>{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionHeader({ eyebrow, title, sub, align = 'center' }) {
  return (
    <div style={{
      textAlign: align, maxWidth: 720,
      margin: align === 'center' ? '0 auto' : '0',
      marginBottom: 56,
    }}>
      <div className="ns-eyebrow" style={{marginBottom: 16, justifyContent: align === 'center' ? 'center' : 'flex-start'}}>{eyebrow}</div>
      <h2 style={pageStyles.h2}>{title}</h2>
      {sub && <p style={pageStyles.sectionSub}>{sub}</p>}
    </div>
  );
}

function FeaturesSection() {
  return (
    <section style={pageStyles.section}>
      <div style={pageStyles.sectionInner}>
        <SectionHeader
          eyebrow="Meet your AI agent"
          title={<>Six features. One feed. <span style={{color:'var(--ns-fg-dimmer)'}}>Zero new hardware.</span></>}
          sub="Stop re-watching footage. NeuralScout extracts the signal from every second of every camera — continuously."
        />
        <div style={pageStyles.featureGrid}>
          <FeatTraffic />
          <FeatDwell />
          <FeatFace />
          <FeatPlate />
          <FeatDemo />
          <FeatQuery />
        </div>
      </div>
    </section>
  );
}

function DashboardSection() {
  return (
    <section style={{...pageStyles.section, paddingTop: 40}}>
      <div style={pageStyles.sectionInner}>
        <SectionHeader
          eyebrow="The dashboard"
          title={<>One place for every <em style={{fontStyle:'normal', color:'var(--ns-accent)'}}>camera, zone, and question.</em></>}
          sub="Group cameras by site, compare zones side-by-side, slice by time. Set alerts. Share reports. Built for ops, security, and retail teams."
        />
        <DashboardPreview />
      </div>
    </section>
  );
}

function TimelineSection() {
  return (
    <section style={{...pageStyles.section, background:'var(--ns-bg-1)', borderTop:'1px solid var(--ns-line)', borderBottom:'1px solid var(--ns-line)'}}>
      <div style={pageStyles.sectionInner}>
        <SectionHeader
          eyebrow="How it works"
          title={<>From camera to chart <em style={{fontStyle:'normal', color:'var(--ns-accent)'}}>in five steps.</em></>}
          sub="No models to train. No cameras to replace. Point us at your RTSP feed — we do the rest."
        />
        <Timeline />
      </div>
    </section>
  );
}

function StatsSection() {
  const now = useTick(100);
  const t = (now % 4000) / 4000;
  return (
    <section style={pageStyles.section}>
      <div style={pageStyles.sectionInner}>
        <div style={pageStyles.statsWrap}>
          {/* bg dots */}
          <div style={{position:'absolute', inset: 0, backgroundImage:'radial-gradient(var(--ns-line-2) 1px, transparent 1px)', backgroundSize:'22px 22px', opacity: 0.6, mask:'radial-gradient(ellipse at 50% 50%, #000, transparent 70%)'}}/>
          <div style={{position:'relative', textAlign:'center'}}>
            <SectionHeader
              eyebrow="Numbers that don't clock out"
              title={<>Running right now, across <span style={{color:'var(--ns-accent)'}}>thousands of cameras.</span></>}
            />
          </div>
          <div style={{...pageStyles.statsGrid, position:'relative'}}>
            {[
              { v: (12400 + Math.floor(t*80)).toLocaleString(), l:'frames analyzed / second' },
              { v: '1,340', l:'cameras in production' },
              { v: '2.1B', l:'events indexed to date' },
              { v: '98.7%', l:'detection accuracy' },
            ].map((s, i) => (
              <div key={i} style={pageStyles.statCell}>
                <div style={pageStyles.statValue}>{s.v}</div>
                <div style={pageStyles.statLabel}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialSection() {
  return (
    <section style={pageStyles.section}>
      <div style={pageStyles.sectionInner}>
        <div style={pageStyles.testimonialCard}>
          <div style={pageStyles.testimonialAvatar}>
            {/* stylized portrait */}
            <svg viewBox="0 0 100 100" width="100%" height="100%">
              <defs>
                <linearGradient id="avatarBg" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#1a2030"/>
                  <stop offset="100%" stopColor="#0c1018"/>
                </linearGradient>
              </defs>
              <rect width="100" height="100" fill="url(#avatarBg)"/>
              <circle cx="50" cy="42" r="20" fill="#c9a584"/>
              <path d="M 25 100 Q 25 70 50 68 Q 75 70 75 100 Z" fill="#2b4b7a"/>
              <path d="M 32 38 Q 50 20 68 38 L 68 30 Q 50 14 32 30 Z" fill="#1a1410"/>
            </svg>
          </div>
          <div style={{flex: 1}}>
            <div className="ns-eyebrow" style={{marginBottom: 16}}>Customer · Portside Logistics</div>
            <p style={pageStyles.quote}>
              "We replaced three dashboards and two headcount spreadsheets with NeuralScout.
              The VLM prompt feature alone caught a safety violation in week one."
            </p>
            <div style={{marginTop: 20}}>
              <div style={{fontWeight: 500, fontSize: 14}}>Rhea Okonkwo</div>
              <div style={{fontSize: 12, color:'var(--ns-fg-dim)'}}>VP Operations · Portside</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section style={pageStyles.section}>
      <div style={pageStyles.sectionInner}>
        <div style={pageStyles.ctaCard}>
          <div style={{position:'absolute', inset: 0, background:'radial-gradient(ellipse at 20% 0%, var(--ns-accent-soft), transparent 60%)'}}/>
          <div style={{position:'relative', zIndex: 1}}>
            <div className="ns-eyebrow" style={{marginBottom: 14}}>Ready when you are</div>
            <h2 style={{...pageStyles.h2, fontSize: 'clamp(32px, 4vw, 52px)', marginBottom: 14}}>
              Plug in your feed.<br/>
              <span style={{color:'var(--ns-fg-dim)'}}>See insights in 60 seconds.</span>
            </h2>
            <p style={{fontSize: 16, color:'var(--ns-fg-dim)', maxWidth: 520, margin:'0 0 28px', lineHeight: 1.6}}>
              Free 14-day trial. No hardware changes. Cancel anytime.
            </p>
            <div style={{display:'flex', gap: 12, flexWrap:'wrap'}}>
              <a href="#" className="ns-btn ns-btn-primary">Start free trial</a>
              <a href="ContactUs.html" className="ns-btn ns-btn-ghost">Talk to sales →</a>
            </div>
          </div>
          {/* Decorative feed */}
          <div style={pageStyles.ctaDecor}>
            <div className="ns-corners"><span/></div>
            <div style={{
              width: '100%', height: '100%', position:'relative',
              background:'linear-gradient(135deg, #141a24, #080b12)',
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <svg viewBox="0 0 120 120" width="70%">
                <circle cx="60" cy="60" r="50" fill="none" stroke="var(--ns-accent)" strokeWidth="0.6" strokeDasharray="2 3"/>
                <circle cx="60" cy="60" r="36" fill="none" stroke="var(--ns-accent)" strokeWidth="0.6" strokeDasharray="2 3"/>
                <circle cx="60" cy="60" r="22" fill="none" stroke="var(--ns-accent)" strokeWidth="0.6" strokeDasharray="2 3"/>
                <circle cx="60" cy="60" r="6" fill="var(--ns-accent)"/>
                <line x1="60" y1="10" x2="60" y2="110" stroke="var(--ns-accent)" strokeWidth="0.4" opacity="0.4"/>
                <line x1="10" y1="60" x2="110" y2="60" stroke="var(--ns-accent)" strokeWidth="0.4" opacity="0.4"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={pageStyles.footer}>
      <div style={pageStyles.sectionInner}>
        <div style={pageStyles.footerGrid}>
          <div>
            <div style={{marginBottom: 14}}>
              <Logo height={28} />
            </div>
            <p style={{fontSize: 13, color:'var(--ns-fg-dim)', maxWidth: 260, lineHeight: 1.55}}>
              Real-time video analytics for operations, security, and retail.
            </p>
            <div style={{display:'flex', gap: 10, marginTop: 18}}>
              {['x', 'in', 'yt'].map(s => (
                <div key={s} style={{
                  width: 28, height: 28, border:'1px solid var(--ns-line-2)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'var(--ns-mono)', fontSize: 10, color:'var(--ns-fg-dim)',
                  borderRadius: 4,
                }}>{s}</div>
              ))}
            </div>
          </div>
          {[
            { h: 'Product', items:['Traffic counting','Dwell','Face recognition','License plates','Custom queries','Dashboard']},
            { h: 'Company', items:['About','Customers','Blog','Careers','Security','Contact']},
            { h: 'Resources', items:['Docs','API reference','Status','Changelog','Privacy','Terms']},
          ].map(col => (
            <div key={col.h}>
              <div className="ns-mono" style={{fontSize: 10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ns-fg-dimmer)', marginBottom: 14}}>{col.h}</div>
              <div style={{display:'flex', flexDirection:'column', gap: 8}}>
                {col.items.map(i => (
                  <a key={i} href="#" style={{fontSize: 13, color:'var(--ns-fg-dim)', textDecoration:'none'}}>{i}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={pageStyles.footerBottom}>
          <span className="ns-mono" style={{fontSize: 11, color:'var(--ns-fg-dimmer)'}}>© 2026 NeuralScout Inc. · All systems nominal</span>
          <span className="ns-mono" style={{fontSize: 11, color:'var(--ns-fg-dimmer)'}}>SOC 2 · GDPR · ISO 27001</span>
        </div>
      </div>
    </footer>
  );
}

const pageStyles = {
  nav: {
    position:'sticky', top: 0, zIndex: 40,
    background:'var(--ns-nav-bg)',
    backdropFilter:'blur(12px)',
    borderBottom:'1px solid var(--ns-line)',
  },
  navOverlay: {
    background:'rgba(0,0,0,0.38)',
    backdropFilter:'blur(16px)',
    borderBottom:'1px solid rgba(255,255,255,0.08)',
    color:'#fff',
  },
  navLinkOverlay: {
    color:'rgba(255,255,255,0.82)',
  },
  navInner: {
    maxWidth: 1320, margin:'0 auto',
    padding: '14px var(--ns-pg)',
    display:'flex', justifyContent:'space-between', alignItems:'center', gap: 24,
  },
  navLinks: {
    display:'flex', gap: 22, alignItems:'center',
  },
  navLink: {
    color:'var(--ns-fg-dim)', fontSize: 13.5, textDecoration:'none',
    transition:'color .2s',
    whiteSpace:'nowrap',
  },
  hero: {
    position:'relative', paddingTop: 60, paddingBottom: 80,
    borderBottom:'1px solid var(--ns-line)',
    overflow:'hidden',
  },
  heroInner: {
    maxWidth: 1320, margin:'0 auto',
    padding: '0 var(--ns-pg)',
    display:'grid', gridTemplateColumns: '1fr 1.2fr', gap: 60,
    alignItems:'center',
  },
  heroCopy: { maxWidth: 540 },
  h1: {
    fontFamily:'var(--ns-display)',
    fontSize: 'clamp(40px, 5.5vw, 72px)',
    fontWeight: 500, lineHeight: 1.02,
    letterSpacing:'-0.03em',
    margin:'0 0 24px',
    textWrap:'balance',
  },
  heroSub: {
    fontSize: 17, lineHeight: 1.55,
    color:'var(--ns-fg-dim)', margin: 0,
    textWrap:'pretty',
  },
  heroFeed: { width: '100%' },
  logoRow: {
    maxWidth: 1320, margin:'0 auto', padding:'80px var(--ns-pg) 0',
    display:'flex', flexDirection:'column', alignItems:'center', gap: 24,
  },
  logoStrip: {
    display:'flex', gap: 48, alignItems:'center', flexWrap:'wrap', justifyContent:'center',
  },
  section: {
    paddingTop: 'var(--ns-section)',
    paddingBottom: 'var(--ns-section)',
  },
  sectionInner: {
    maxWidth: 1320, margin:'0 auto',
    padding: '0 var(--ns-pg)',
  },
  h2: {
    fontFamily:'var(--ns-display)',
    fontSize: 'clamp(32px, 4vw, 56px)',
    fontWeight: 500, lineHeight: 1.05,
    letterSpacing:'-0.02em',
    margin:'0 0 20px',
    textWrap:'balance',
  },
  sectionSub: {
    fontSize: 17, lineHeight: 1.55,
    color:'var(--ns-fg-dim)', margin: 0,
    textWrap:'pretty',
  },
  featureGrid: {
    display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16,
  },
  statsWrap: {
    position:'relative', padding: '60px 40px',
    border:'1px solid var(--ns-line)',
    borderRadius:'var(--ns-r-4)',
    background:'radial-gradient(ellipse at 50% 0%, var(--ns-accent-soft), transparent 55%), var(--ns-bg-1)',
    overflow:'hidden',
  },
  statsGrid: {
    display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1,
    background:'var(--ns-line)', border:'1px solid var(--ns-line)',
  },
  statCell: {
    background:'var(--ns-bg-1)',
    padding:'32px 24px',
    textAlign:'center',
  },
  statValue: {
    fontFamily:'var(--ns-display)', fontSize: 'clamp(32px, 4vw, 52px)',
    fontWeight: 500, letterSpacing:'-0.02em',
    color:'var(--ns-fg)', fontVariantNumeric:'tabular-nums',
    lineHeight: 1,
  },
  statLabel: {
    fontFamily:'var(--ns-mono)', fontSize: 11,
    color:'var(--ns-fg-dimmer)', letterSpacing:'0.1em', textTransform:'uppercase',
    marginTop: 12,
  },
  testimonialCard: {
    display:'grid', gridTemplateColumns: '160px 1fr', gap: 32,
    padding: 40,
    border:'1px solid var(--ns-line)',
    borderRadius:'var(--ns-r-4)',
    background:'var(--ns-bg-1)',
    alignItems:'center',
  },
  testimonialAvatar: {
    width: 160, height: 160,
    background:'var(--ns-bg-2)',
    border:'1px solid var(--ns-line)',
    overflow:'hidden',
    borderRadius: 8,
  },
  quote: {
    fontFamily:'var(--ns-display)',
    fontSize: 'clamp(22px, 2.3vw, 30px)',
    lineHeight: 1.35, margin: 0,
    letterSpacing:'-0.01em',
    color:'var(--ns-fg)',
    textWrap:'pretty',
    fontWeight: 400,
  },
  ctaCard: {
    position:'relative', overflow:'hidden',
    border:'1px solid var(--ns-line)',
    borderRadius:'var(--ns-r-4)',
    background:'var(--ns-bg-1)',
    padding: 'clamp(40px, 5vw, 72px)',
    display:'grid', gridTemplateColumns:'1fr 240px', gap: 40, alignItems:'center',
  },
  ctaDecor: {
    position:'relative', aspectRatio:'1/1', width: 240,
    border:'1px solid var(--ns-line-2)',
    overflow:'hidden',
  },
  footer: {
    borderTop:'1px solid var(--ns-line)',
    padding:'72px 0 40px',
    background:'var(--ns-bg-1)',
  },
  footerGrid: {
    display:'grid',
    gridTemplateColumns:'1.4fr 1fr 1fr 1fr',
    gap: 40,
    marginBottom: 64,
  },
  footerBottom: {
    borderTop:'1px solid var(--ns-line)',
    paddingTop: 24,
    display:'flex', justifyContent:'space-between', alignItems:'center',
    flexWrap:'wrap', gap: 12,
  },
};

Object.assign(window, {
  Nav, ThemeToggle, Hero, FeaturesSection, DashboardSection, TimelineSection,
  StatsSection, TestimonialSection, CTASection, Footer, SectionHeader, Logo,
});