// Shared components: Nav, Footer, Logo, Icons, Placeholder
const { useState, useEffect, useRef } = React;

function Logo({ size = 28 }) {
  return (
    <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center' }}>
      <img src="assets/revenu-logo.png" alt="Revenu" style={{ height: size, width: 'auto', display: 'block' }}/>
    </a>
  );
}

// Small icon set used in the mega menu
function MegaIcon({ name, size = 22 }) {
  const s = size;
  const common = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'books':   return (<svg {...common}><path d="M4 5a2 2 0 0 1 2-2h5v16H6a2 2 0 0 1-2-2V5Z"/><path d="M13 3h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5V3Z"/><path d="M7 7h2M7 10h2M15 7h2M15 10h2"/></svg>);
    case 'tax':     return (<svg {...common}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>);
    case 'cfo':     return (<svg {...common}><path d="M4 20V10M9 20V4M14 20v-8M19 20v-5"/><path d="M3 20h18"/></svg>);
    case 'capital': return (<svg {...common}><path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/></svg>);
    case 'cash':    return (<svg {...common}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/><path d="M6 10v4M18 10v4"/></svg>);
    case 'cogs':    return (<svg {...common}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4Z"/><path d="M9 12l2 2 4-4"/></svg>);
    case 'migration': return (<svg {...common}><path d="M4 8h11M11 4l4 4-4 4"/><path d="M20 16H9M13 20l-4-4 4-4"/></svg>);
    case 'ecom':    return (<svg {...common}><path d="M3 4h2l2.5 12h11l2-8H7"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>);
    case 'tech':    return (<svg {...common}><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>);
    case 'prof':    return (<svg {...common}><path d="M6 8a6 6 0 0 1 12 0v3a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V8Z"/><path d="M9 14v6M15 14v6M6 20h12"/></svg>);
    case 'real':    return (<svg {...common}><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9Z"/></svg>);
    case 'nonprofit': return (<svg {...common}><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.5-7 10-7 10Z"/></svg>);
    case 'constr':  return (<svg {...common}><path d="M3 21h18M5 21V10l7-5 7 5v11"/><path d="M10 21v-6h4v6"/></svg>);
    case 'guide':   return (<svg {...common}><path d="M4 4h10l6 6v10H4V4Z"/><path d="M14 4v6h6"/><path d="M8 14h8M8 17h5"/></svg>);
    case 'calc':    return (<svg {...common}><rect x="5" y="3" width="14" height="18" rx="2"/><rect x="7" y="5" width="10" height="4" rx="1"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/><circle cx="12" cy="13" r="0.6" fill="currentColor"/><circle cx="15" cy="13" r="0.6" fill="currentColor"/><circle cx="9" cy="17" r="0.6" fill="currentColor"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/><circle cx="15" cy="17" r="0.6" fill="currentColor"/></svg>);
    case 'blog':    return (<svg {...common}><path d="M4 5h16v14H4z"/><path d="M4 9h16M8 13h8M8 16h5"/></svg>);
    case 'case':    return (<svg {...common}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>);
    case 'shield':  return (<svg {...common}><path d="M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6l8-3Z"/><path d="M9 12l2 2 4-4"/></svg>);
    default: return null;
  }
}

function MegaServices({ current }) {
  const services = [
    { key: 'bookkeeping', icon: 'books', t: 'Bookkeeping & Accounting', d: 'Monthly closes, reconciliations, and clean financials you can actually read.', href: 'bookkeeping.html' },
    { key: 'tax',         icon: 'tax',   t: 'Tax Prep & Filings',       d: 'Federal, state, and multi-entity filings — plus year-round planning.', href: 'tax.html' },
    { key: 'cfo',         icon: 'cfo',   t: 'Controller & CFO',         d: 'Forecasts, fundraising support, and board-ready reporting.', href: 'cfo.html' },
  ];
  const enterprise = [
    { key: 'sec', icon: 'shield', t: 'SEC Reporting & Audit Support', d: 'Technical 10-K/10-Q & audit readiness.', href: 'sec.html' },
  ];
  return (
    <div className="mega mega-services">
      <div className="mega-col mega-col-primary">
        <div className="mega-eyebrow">Small Business Core</div>
        <div className="mega-services-list">
          {services.map((s) => (
            <a key={s.key} href={s.href} className={`mega-svc ${current === s.key ? 'is-active' : ''}`}>
              <div className="mega-svc-icon"><MegaIcon name={s.icon}/></div>
              <div className="mega-svc-body">
                <div className="mega-svc-t">{s.t} <span className="mega-arrow" aria-hidden>→</span></div>
                <div className="mega-svc-d">{s.d}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <div className="mega-col mega-col-secondary">
        <div className="mega-eyebrow"><span className="mega-featured-tag">Enterprise Services</span></div>
        <div className="mega-services-list">
          {enterprise.map((s) => (
            <a key={s.key} href={s.href} className={`mega-svc ${current === s.key ? 'is-active' : ''}`}>
              <div className="mega-svc-icon"><MegaIcon name={s.icon}/></div>
              <div className="mega-svc-body">
                <div className="mega-svc-t">
                  {s.t}
                  {s.tag && <span className="mega-featured-tag">{s.tag}</span>}
                  <span className="mega-arrow" aria-hidden>→</span>
                </div>
                <div className="mega-svc-d">{s.d}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <div className="mega-col mega-col-feature">
        <a href="pricing.html" className="mega-feature">
          <div className="mega-feature-eyebrow">Featured</div>
          <div className="mega-feature-t">Not sure which plan fits?</div>
          <div className="mega-feature-d">Answer four questions and we'll recommend a tier — plus show what you'd pay.</div>
          <div className="mega-feature-cta">See pricing <span aria-hidden>→</span></div>
        </a>
      </div>
    </div>
  );
}

function MegaIndustries() {
  const inds = [
    { icon: 'ecom',      t: 'eCommerce',            d: 'Shopify, Amazon, multi-channel', href: 'industries-ecommerce.html' },
    { icon: 'tech',      t: 'Tech startups',        d: 'SaaS, ARR, R&D credits',          href: 'industries-tech.html' },
    { icon: 'prof',      t: 'Professional services',d: 'Agencies, law, consulting',       href: 'industries-professional-services.html' },
    { icon: 'real',      t: 'Real estate',          d: 'Holdcos, syndications',           href: 'industries-real-estate.html' },
    { icon: 'shield',    t: 'Insurance brokers',    d: 'Commissions, carriers, producer comp', href: 'industries-insurance-brokers.html' },
    { icon: 'constr',    t: 'Construction & Trade', d: 'Job costing, WIP, payroll',       href: 'industries-construction.html' },
  ];
  return (
    <div className="mega mega-industries">
      <div className="mega-col" style={{flex: 1}}>
        <div className="mega-eyebrow">Industries we serve</div>
        <div className="mega-ind-grid">
          {inds.map((i, k) => (
            <a key={k} href={i.href} className="mega-ind">
              <div className="mega-ind-icon"><MegaIcon name={i.icon} size={18}/></div>
              <div>
                <div className="mega-ind-t">{i.t}</div>
                <div className="mega-ind-d">{i.d}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
      <div className="mega-col mega-col-feature">
        <a href="about.html" className="mega-feature mega-feature-quiet">
          <div className="mega-feature-eyebrow">How we work</div>
          <div className="mega-feature-t">A team, not a portal — your bookkeeper, controller, and tax lead in one room.</div>
          <div className="mega-feature-cta">See the engagement <span aria-hidden>→</span></div>
        </a>
      </div>
    </div>
  );
}

function MegaResources() {
  const cols = [
    { title: 'Learn', items: [
      { icon: 'guide', t: 'Capital Raising',  d: 'Guides + when to bring in a CFO', href: 'capital-raising.html' },
      { icon: 'cash',  t: 'Cash Flow Management',   d: 'Models, timing, and when to call us', href: 'cash-flow.html' },
      { icon: 'cogs',  t: 'Inventory & COGS',        d: 'Landed cost, COGS, and month-end rolls', href: 'inventory-cogs.html' },
    ]},
    { title: 'Tools', items: [
      { icon: 'calc',  t: 'Runway calculator',       d: 'Model burn & cash-out dates',  href: 'runway-calculator.html' },
      { icon: 'calc',  t: 'Entity structure quiz',   d: 'LLC, S-corp, C-corp — what fits', href: 'entity-quiz.html' },
      { icon: 'calc',  t: 'Close-the-Books Checklist', d: 'A guided monthly close, step by step', href: 'close-checklist.html' },
    ]},
  ];
  return (
    <div className="mega mega-resources">
      <div className="mega-resources-stack">
        <div className="mega-resources-cols">
          {cols.map((col, i) => (
            <div key={i} className="mega-col">
              <div className="mega-eyebrow">{col.title}</div>
              <div className="mega-svc-list">
                {col.items.map((it, j) => (
                  <a key={j} href={it.href} className="mega-svc">
                    <div className="mega-svc-icon mega-svc-icon-sm"><MegaIcon name={it.icon} size={18}/></div>
                    <div className="mega-svc-body">
                      <div className="mega-svc-t">{it.t}</div>
                      <div className="mega-svc-d">{it.d}</div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="mega-col mega-col-feature">
        <a href="blog.html" className="mega-feature mega-feature-journal">
          <div className="mega-journal-masthead">
            <div className="mega-journal-rule" aria-hidden></div>
            <div className="mega-journal-wordmark">The Revenu Journal</div>
            <div className="mega-journal-rule" aria-hidden></div>
          </div>
          <div className="mega-journal-meta">
            <span>Vol. III</span>
            <span aria-hidden>·</span>
            <span>Field notes</span>
            <span aria-hidden>·</span>
            <span>Weekly</span>
          </div>
          <div className="mega-feature-t mega-journal-headline">
            Plain-English writing on tax, accounting, and running a <em>better-run</em> business.
          </div>
          <div className="mega-journal-latest">
            <div className="mega-journal-latest-eyebrow">Latest</div>
            <div className="mega-journal-latest-t">The headcount plan as a financial document, not an HR wishlist.</div>
          </div>
          <div className="mega-feature-cta">Read the journal <span aria-hidden>→</span></div>
        </a>
      </div>
    </div>
  );
}

function MobileMenu({ current, open, onClose }) {
  const [expanded, setExpanded] = useState('services');
  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
      setExpanded('services');
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const services = [
    { key: 'bookkeeping', t: 'Bookkeeping & Accounting', href: 'bookkeeping.html' },
    { key: 'tax',         t: 'Tax Prep & Filings',       href: 'tax.html' },
    { key: 'cfo',         t: 'Controller & CFO',         href: 'cfo.html' },
    { key: 'sec',         t: 'SEC Reporting & Audit',    href: 'sec.html', tag: 'Enterprise' },
  ];
  const industries = [
    { t: 'eCommerce',             href: 'industries-ecommerce.html' },
    { t: 'Tech startups',         href: 'industries-tech.html' },
    { t: 'Professional services', href: 'industries-professional-services.html' },
    { t: 'Real estate',           href: 'industries-real-estate.html' },
    { t: 'Insurance brokers',     href: 'industries-insurance-brokers.html' },
    { t: 'Construction & Trade',  href: 'industries-construction.html' },
  ];
  const resources = [
    { t: 'Runway calculator',     href: 'runway-calculator.html' },
    { t: 'Entity structure quiz', href: 'entity-quiz.html' },
    { t: 'Capital Raising', href: 'capital-raising.html' },
    { t: 'Cash Flow Management', href: 'cash-flow.html' },
    { t: 'Inventory & COGS', href: 'inventory-cogs.html' },
    { t: 'The Revenu Journal', href: 'blog.html' },
  ];

  const sections = [
    { key: 'services',   label: 'What we do',   items: services },
    { key: 'industries', label: 'Who we serve', items: industries },
    { key: 'about',      label: 'Who are we',   flat: true, href: 'about.html' },
    { key: 'pricing',    label: 'Our Pricing',  flat: true, href: 'pricing.html' },
    { key: 'resources',  label: 'Resources',    items: resources },
  ];

  return (
    <div className={`mobile-drawer ${open ? 'is-open' : ''}`} aria-hidden={!open}>
      <div className="mobile-drawer-head">
        <Logo size={26}/>
        <button className="mobile-close" aria-label="Close menu" onClick={onClose}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M4 4l12 12M16 4L4 16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
      <nav className="mobile-drawer-body">
        {sections.map((sec) => {
          if (sec.flat) {
            return (
              <a key={sec.key} href={sec.href} className="md-flat" onClick={onClose}>{sec.label}</a>
            );
          }
          const isExp = expanded === sec.key;
          return (
            <div key={sec.key} className={`md-group ${isExp ? 'is-expanded' : ''}`}>
              <button
                className="md-group-head"
                aria-expanded={isExp}
                onClick={() => setExpanded(isExp ? null : sec.key)}
              >
                <span>{sec.label}</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{transform: isExp ? 'rotate(180deg)' : 'none', transition: 'transform 180ms'}}>
                  <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div className="md-group-body">
                <div className="md-group-body-inner">
                  {sec.items.map((it, i) => (
                    <a
                      key={i}
                      href={it.href}
                      className={`md-item ${current === it.key ? 'is-active' : ''}`}
                      onClick={onClose}
                    >
                      <span>{it.t}</span>
                      {it.tag && <span className="md-tag">{it.tag}</span>}
                    </a>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </nav>
      <div className="mobile-drawer-foot">
        <a href="login.html" className="md-login" onClick={onClose}>Log in</a>
        <a href="talk-to-advisor.html" className="btn btn-primary md-cta" onClick={onClose}>Get a proposal</a>
      </div>
    </div>
  );
}

function Nav({ current }) {
  const [openKey, setOpenKey] = useState(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const navRef = useRef(null);
  const closeTimer = useRef(null);

  // Close on outside click / escape
  useEffect(() => {
    const onDoc = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setOpenKey(null); };
    const onEsc = (e) => { if (e.key === 'Escape') setOpenKey(null); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onEsc); };
  }, []);

  const handleEnter = (key) => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setOpenKey(key);
  };
  const handleLeave = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpenKey(null), 120);
  };

  const items = [
    { key: 'services',    label: 'What we do',    mega: <MegaServices current={current}/> },
    { key: 'industries',  label: 'Who we serve',  mega: <MegaIndustries/> },
    { key: 'about',       label: 'Who are we',    href: 'about.html',    currentKey: 'about' },
    { key: 'pricing',     label: 'Our Pricing',   href: 'pricing.html',  currentKey: 'pricing' },
    { key: 'resources',   label: 'Resources',     mega: <MegaResources/> },
  ];

  return (
    <>
    <header className="site-nav" ref={navRef}>
      <div className="container nav-inner">
        <Logo />
        <nav className="nav-links"
             onMouseLeave={handleLeave}>
          {items.map((it) => {
            const hasMega = !!it.mega;
            const isOpen = openKey === it.key;
            const isActive = current === it.currentKey || (hasMega && current === 'services' && it.key === 'services');
            return (
              <div
                key={it.key}
                className={`nav-item ${hasMega ? 'has-mega' : ''} ${isOpen ? 'is-open' : ''}`}
                onMouseEnter={() => hasMega ? handleEnter(it.key) : handleLeave()}
              >
                <a
                  href={it.href || '#'}
                  className={isActive || isOpen ? 'active' : ''}
                  onClick={(e) => { if (hasMega) { e.preventDefault(); setOpenKey(isOpen ? null : it.key); } }}
                  aria-expanded={hasMega ? isOpen : undefined}
                  aria-haspopup={hasMega ? 'true' : undefined}
                >
                  {it.label}
                  {hasMega && (
                    <svg width="10" height="10" viewBox="0 0 10 10" style={{marginLeft:6,opacity:0.55, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 160ms'}}>
                      <path d="M2 3l3 4 3-4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </a>
              </div>
            );
          })}
        </nav>
        <div className="nav-cta">
          <a href="login.html" className="nav-login">Log in</a>
          <a href="talk-to-advisor.html" className="btn btn-primary" style={{padding:'10px 16px', fontSize:13}}>Get a proposal</a>
        </div>
        <button
          className="nav-mobile-toggle"
          aria-label="Open menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(true)}
        >
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M3 7h16M3 11h16M3 15h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
      <hr className="rule" />

      {/* Mega panel — full-width, anchored below the nav row */}
      <div
        className={`mega-panel ${openKey ? 'is-open' : ''}`}
        onMouseEnter={() => handleEnter(openKey)}
        onMouseLeave={handleLeave}
        aria-hidden={!openKey}
      >
        <div className="container">
          {items.find((it) => it.key === openKey)?.mega}
        </div>
      </div>
      {openKey && <div className="mega-backdrop" onClick={() => setOpenKey(null)} aria-hidden/>}
    </header>

    {/* Portaled to body so backdrop-filter on .site-nav doesn't trap these fixed elements */}
    {ReactDOM.createPortal(
      <>
        <MobileMenu current={current} open={mobileOpen} onClose={() => setMobileOpen(false)}/>
        {mobileOpen && <div className="mobile-backdrop" onClick={() => setMobileOpen(false)} aria-hidden/>}
      </>,
      document.body
    )}
    </>
  );
}

function Footer() {
  return (
    <footer className="site-footer" role="contentinfo">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo size={28} />
            <p style={{ color: 'var(--ink-muted)', fontSize: 14, maxWidth: 300, marginTop: 16 }}>
              Accounting and fractional CFO services for founders who'd rather be building.
            </p>
            <div className="footer-rating">
              <span className="stars" aria-hidden>★★★★★</span>
              <span><strong>4.9</strong> · 1,000+ clients</span>
            </div>
            <ul className="footer-social" aria-label="Revenu on social">
              <li>
                <a href="https://www.instagram.com/revenu.co" target="_blank" rel="noopener" aria-label="Revenu on Instagram">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="5"/>
                    <circle cx="12" cy="12" r="4"/>
                    <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none"/>
                  </svg>
                </a>
              </li>
              <li>
                <a href="https://www.linkedin.com/company/revenu-accounting" target="_blank" rel="noopener" aria-label="Revenu on LinkedIn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="3"/>
                    <line x1="7.5" y1="10" x2="7.5" y2="17"/>
                    <circle cx="7.5" cy="7.2" r="0.6" fill="currentColor" stroke="none"/>
                    <path d="M11.5 17v-4.2a2.3 2.3 0 0 1 4.6 0V17"/>
                    <line x1="11.5" y1="10" x2="11.5" y2="17"/>
                  </svg>
                </a>
              </li>
              <li>
                <a href="https://x.com/revenu_com" target="_blank" rel="noopener" aria-label="Revenu on X">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
          <nav aria-label="Services">
            <div className="eyebrow">Services</div>
            <ul>
              <li><a href="bookkeeping.html">Bookkeeping & Accounting</a></li>
              <li><a href="tax.html">Tax Prep & Filings</a></li>
              <li><a href="cfo.html">Controller & CFO</a></li>
              <li><a href="sec.html">SEC Reporting & Audit</a></li>
              <li><a href="cash-flow.html">Cash Flow Management</a></li>
              <li><a href="capital-raising.html">Capital Raising</a></li>
              <li><a href="inventory-cogs.html">Inventory & COGS</a></li>
            </ul>
          </nav>
          <nav aria-label="Industries">
            <div className="eyebrow">Industries</div>
            <ul>
              <li><a href="industries-ecommerce.html">eCommerce</a></li>
              <li><a href="industries-tech.html">Tech Startups</a></li>
              <li><a href="industries-professional-services.html">Professional Services</a></li>
              <li><a href="industries-real-estate.html">Real Estate</a></li>
              <li><a href="industries-insurance-brokers.html">Insurance Brokers</a></li>
              <li><a href="industries-construction.html">Construction & Trade</a></li>
            </ul>
          </nav>
          <div>
            <nav aria-label="Resources">
              <div className="eyebrow">Resources</div>
              <ul>
                <li><a href="blog.html">The Revenu Journal</a></li>
                <li><a href="runway-calculator.html">Runway Calculator</a></li>
                <li><a href="entity-quiz.html">Entity Structure Quiz</a></li>
                <li><a href="close-checklist.html">Close-the-Books Checklist</a></li>
              </ul>
            </nav>
          </div>
          <nav aria-label="Company">
            <div className="eyebrow">Company</div>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="pricing.html">Pricing</a></li>
              <li><a href="how-we-work.html">How We Work</a></li>
              <li><a href="talk-to-advisor.html">Talk to an Advisor</a></li>
            </ul>
          </nav>
        </div>
        <hr className="rule" style={{ marginTop: 48 }}/>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Revenu, Inc.</div>
          <div style={{display:'flex',gap:24}}>
            <a href="privacy.html">Privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Rating({ compact }) {
  return (
    <div className="rating-badge" style={compact ? {padding:'6px 10px'} : {}}>
      <span className="stars" aria-hidden>★★★★★</span>
      <span className="tabular"><strong>4.9</strong></span>
      <span style={{color:'var(--ink-muted)'}}>·</span>
      <span style={{color:'var(--ink-muted)'}}>1,000+ clients</span>
    </div>
  );
}

function Placeholder({ label, h = 200, style = {} }) {
  return (
    <div className="placeholder" style={{ height: h, ...style }}>
      {label}
    </div>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Check({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
      <path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function CTABand() {
  return (
    <section className="cta-band">
      <div className="container">
        <div className="cta-inner">
          <div>
            <div className="eyebrow" style={{color:'#9CD9BA',opacity:0.9}}>Ready when you are</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '12px 0 0', color:'white' }}>
              Replace financial guesswork with <em style={{color:'#4FC08D',fontStyle:'italic'}}>expert oversight</em>.
            </h2>
            <p style={{ color: '#C9CAC8', marginTop: 16, fontSize: 17, maxWidth: 540 }}>
              Onboard in a week. Month-to-month, cancel anytime — we'd rather earn your business than lock you in.
            </p>
          </div>
          <div className="cta-actions">
            <a href="talk-to-advisor.html" className="btn btn-accent">Get proposal <ArrowRight/></a>
            <a href="how-we-work.html" className="btn btn-secondary" style={{borderColor:'#3A3B3A',color:'white'}}>See how we work</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Logo, Nav, Footer, Rating, Placeholder, ArrowRight, Check, CTABand });