// Shared Nav + Footer across all 5 pages.
// Nav reads current pathname to mark active link.

function SiteNav({ current }) {
  const [hover, setHover] = React.useState(null);
  const links = [
    { label: 'Product',  href: 'product.html' },
    { label: 'Pricing',  href: 'pricing.html' },
    { label: 'About',    href: 'about.html' },
    { label: 'Contact',  href: 'contact.html' },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250,249,247,0.92)',
      backdropFilter: 'saturate(1.2)',
      borderBottom: '1px solid var(--oat-border)',
      padding: '14px 40px',
      display: 'flex', alignItems: 'center', gap: 32,
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: '#000' }}>
        <SoundWaveBubble size={28} animated={false}/>
        <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.5px', fontFeatureSettings: 'var(--otf-heading)' }}>noisy</span>
      </a>
      <div style={{ display: 'flex', gap: 2, marginLeft: 16 }}>
        {links.map(l => {
          const active = current === l.href;
          const isHover = hover === l.label;
          return (
            <a key={l.label} href={l.href}
               onMouseEnter={() => setHover(l.label)}
               onMouseLeave={() => setHover(null)}
               style={{
                 fontSize: 15, fontWeight: 500, color: '#000', textDecoration: 'none',
                 padding: '7px 14px', borderRadius: 8,
                 background: active ? '#eee9df' : (isHover ? '#f4f1ea' : 'transparent'),
                 transition: 'background .15s',
                 position: 'relative',
               }}>
              {l.label}
              {active && <span style={{ position: 'absolute', bottom: -2, left: '50%', transform: 'translateX(-50%)', width: 4, height: 4, borderRadius: 999, background: '#146ef5' }}/>}
            </a>
          );
        })}
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
        <a href="https://noisy-ai-dashboard.vercel.app/login" style={{ fontSize: 15, fontWeight: 500, color: '#000', textDecoration: 'none', padding: '7px 12px' }}>Sign in</a>
        <a href="pricing.html" style={{ textDecoration: 'none' }}>
          <ClayBtn variant="pill" size="sm" swatch="#fbbd41">Get Noisy</ClayBtn>
        </a>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer style={{ margin: 24, padding: '56px 48px', background: '#062766', color: '#fff', borderRadius: 40 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <SoundWaveBubble size={34} animated={false}/>
            <span style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.6px' }}>noisy</span>
          </div>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: '#b6cfff', maxWidth: 320 }}>
            The control center for contractors. Five branch dashboards + a Member tier with discounted pricing and marketplace access.
          </p>
          <div style={{ marginTop: 28 }}>
            <a href="contact.html" style={{ textDecoration: 'none' }}>
              <ClayBtn variant="ghost" size="md" onDark swatch="#146ef5">Talk to our team →</ClayBtn>
            </a>
          </div>
        </div>
        {[
          ['Branches',    [['Sales','product.html'],['Marketing','product.html'],['Operations','product.html'],['Finance','product.html'],['Production','product.html']]],
          ['Tiers',       [['Self-serve','pricing.html'],['Member','pricing.html'],['Integrations','product.html']]],
          ['Company',     [['About','about.html'],['Pricing','pricing.html'],['Contact','contact.html'],['Book a walkthrough','contact.html']]],
        ].map(([title, items]) => (
          <div key={title}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#7ca6ff', marginBottom: 16 }}>{title.toUpperCase()}</div>
            {items.map(([label, href]) => (
              <a key={label} href={href} style={{ display: 'block', fontSize: 14, color: '#fff', marginBottom: 10, opacity: 0.9, textDecoration: 'none' }}>{label}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1120, margin: '56px auto 0', paddingTop: 24, borderTop: '1px dashed #3d82fb', display: 'flex', justifyContent: 'space-between', fontSize: 13, color: '#b6cfff', fontFamily: 'var(--font-mono)' }}>
        <span>© 2026 NOISY AI</span>
        <span>SOFTWARE BUILT BY CONTRACTORS, FOR CONTRACTORS.</span>
      </div>
    </footer>
  );
}

// A reusable page CTA band that ends every page (like the ref's "still have a question" block)
function EndCTA({ eyebrow = 'READY WHEN YOU ARE', headline = 'See it on your own pipeline.', body = 'Book a 30-minute walkthrough. Bring your real numbers: rep stats, lead sources, active jobs, etc. And we\'ll show you exactly what Noisy surfaces and which Member unlocks would pay for themselves first.', primary = 'Book a walkthrough', primaryHref = 'contact.html', secondary = 'See pricing', secondaryHref = 'pricing.html' }) {
  return (
    <section style={{ padding: '24px 24px 40px' }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto',
        background: '#fff', border: '1px solid var(--oat-border)',
        borderRadius: 40, padding: '72px 64px',
        boxShadow: 'var(--shadow-clay)',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e', marginBottom: 14 }}>{eyebrow}</div>
          <h2 style={{ margin: 0, fontSize: 52, fontWeight: 600, lineHeight: 1.02, letterSpacing: '-1.8px', fontFeatureSettings: 'var(--otf-heading)', textWrap: 'balance' }}>{headline}</h2>
          <p style={{ margin: '20px 0 32px', fontSize: 18, lineHeight: 1.55, color: '#55534e', maxWidth: 480 }}>{body}</p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a href={primaryHref} style={{ textDecoration: 'none' }}>
              <ClayBtn variant="primary" size="lg" swatch="#fbbd41">{primary}</ClayBtn>
            </a>
            <a href={secondaryHref} style={{ textDecoration: 'none' }}>
              <ClayBtn variant="ghost" size="lg" swatch="#c1b0ff">{secondary}</ClayBtn>
            </a>
          </div>
        </div>
        <EndCTAArt/>
      </div>
    </section>
  );
}

function EndCTAArt() {
  // Snapshot card — live KPIs from a partner install.
  const kpis = [
    ['CLOSE RATE', '27.4%', '+3.1', '#078a52'],
    ['JOBS IN PIPELINE', '57', '+12', '#078a52'],
    ['REVENUE PENDING', '$22,050', '14d avg', '#d07000'],
    ['STALLED', '6', '−2', '#078a52'],
  ];
  return (
    <div style={{
      background: '#faf9f7', border: '1px dashed var(--oat-border)',
      borderRadius: 24, padding: 22, minHeight: 240,
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <SoundWaveBubble size={28}/>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e' }}>LIVE · WEEK OF APR 14</div>
        <div style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 10, background: '#e1f8ea', color: '#078a52' }}>ON TRACK</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {kpis.map(([l,v,d,c],i) => (
          <div key={i} style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 10, padding: '10px 12px' }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '1.08px', color: '#9f9b93' }}>{l}</div>
            <div style={{ fontSize: 18, fontWeight: 600, fontFamily: 'var(--font-mono)', marginTop: 3, letterSpacing: '-0.3px' }}>{v}</div>
            <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: c, marginTop: 2 }}>{d}</div>
          </div>
        ))}
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#9f9b93' }}>→ 3 Member-tier unlocks would ship this week&apos;s wins</div>
    </div>
  );
}

Object.assign(window, { SiteNav, SiteFooter, EndCTA });