// Homepage — Hero + sections
const { useState: useStateHome, useEffect: useEffectHome } = React;

function StatGrid() {
  const stats = [
    { num: '4.9', unit: '/ 5', label: 'Average rating across 1,000+ clients' },
    { num: '1,000', unit: '+', label: 'Founders and small businesses served' },
    { num: '< 24h', unit: '', label: 'Typical response time from your team' },
    { num: '< 1 wk', unit: '', label: 'Onboard in a week. Month-to-month. Cancel anytime.' },
  ];
  return (
    <div className="stat-grid">
      {stats.map((s, i) => (
        <div key={i} className="stat">
          <div className="stat-num tabular">
            <span className="display">{s.num}</span>
            <span className="stat-unit">{s.unit}</span>
          </div>
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

function HeroEditorial({ headline, subhead, ctaText }) {
  return (
    <section className="hero-editorial">
      <div className="container">
        <div className="hero-top">
          <Rating />
          <div className="hero-meta mono">Est. 2019 · New York, NY</div>
        </div>
        <h1 className="display hero-headline">
          {headline}
        </h1>
        <div className="hero-bottom">
          <p className="hero-sub">{subhead}</p>
          <div className="hero-actions">
            <a href="talk-to-advisor.html" className="btn btn-primary is-accent">{ctaText} <ArrowRight/></a>
            <a href="how-we-work.html" className="btn btn-secondary">See how we work</a>
          </div>
        </div>
      </div>
      <div className="container hero-visual-wrap">
        <HeroVisual />
      </div>
    </section>
  );
}

function HeroSplit({ headline, subhead, ctaText }) {
  return (
    <section className="hero-split">
      <div className="container hero-split-grid">
        <div>
          <Rating />
          <h1 className="display hero-headline-split" style={{marginTop:24}}>
            {headline}
          </h1>
          <p className="hero-sub" style={{marginTop: 24}}>{subhead}</p>
          <div className="hero-actions" style={{marginTop: 32, justifyContent:'flex-start'}}>
            <a href="talk-to-advisor.html" className="btn btn-primary is-accent">{ctaText} <ArrowRight/></a>
            <a href="how-we-work.html" className="btn btn-secondary">See how we work</a>
          </div>
          <div style={{marginTop: 48, display:'flex', gap: 32, flexWrap:'wrap', color:'var(--ink-muted)', fontSize: 13}}>
            <span>✓ No credit card</span>
            <span>✓ Onboard in a week</span>
            <span>✓ Cancel anytime</span>
          </div>
        </div>
        <div className="hero-split-visual">
          <DashboardMock />
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ headline, subhead, ctaText }) {
  return (
    <section className="hero-centered">
      <div className="container" style={{textAlign:'center', maxWidth: 960}}>
        <div style={{display:'flex', justifyContent:'center', marginBottom: 32}}>
          <Rating />
        </div>
        <h1 className="display hero-headline" style={{textAlign:'center'}}>
          {headline}
        </h1>
        <p className="hero-sub" style={{margin:'32px auto 0', maxWidth: 620}}>{subhead}</p>
        <div className="hero-actions" style={{justifyContent:'center', marginTop: 40}}>
          <a href="talk-to-advisor.html" className="btn btn-primary is-accent">{ctaText} <ArrowRight/></a>
          <a href="how-we-work.html" className="btn btn-secondary">See how we work</a>
        </div>
      </div>
      <div className="container" style={{marginTop: 72}}>
        <HeroVisual />
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual">
      <div className="hv-header">
        <div className="hv-dots"><span/><span/><span/></div>
        <div className="hv-title mono">revenu · march dashboard</div>
        <div className="hv-pill">March · Closed</div>
      </div>
      <div className="hv-body">
        <div className="hv-left">
          <div className="hv-card">
            <div className="mono" style={{color:'var(--ink-muted)'}}>Net Income · March</div>
            <div className="hv-big tabular display">$142,380</div>
            <div className="hv-delta">▲ 18.4% vs Feb</div>
            <div className="hv-spark">
              <svg viewBox="0 0 240 60" width="100%" height="60" preserveAspectRatio="none">
                <path d="M0,45 L20,42 L40,46 L60,38 L80,40 L100,32 L120,34 L140,28 L160,22 L180,24 L200,15 L220,18 L240,8" stroke="var(--accent)" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
                <path d="M0,45 L20,42 L40,46 L60,38 L80,40 L100,32 L120,34 L140,28 L160,22 L180,24 L200,15 L220,18 L240,8 L240,60 L0,60 Z" fill="var(--accent)" opacity="0.08"/>
              </svg>
            </div>
          </div>
          <div className="hv-card">
            <div className="mono" style={{color:'var(--ink-muted)'}}>Runway</div>
            <div className="hv-big tabular display" style={{fontSize:36}}>14.2 mo</div>
            <div className="hv-bar"><div style={{width:'62%'}}/></div>
          </div>
        </div>
        <div className="hv-right">
          <div className="hv-row-head mono">Recent activity</div>
          {[
            {who:'Stripe payout', amt:'+$24,812', when:'2h ago', cat:'Revenue'},
            {who:'AWS', amt:'−$1,420', when:'5h ago', cat:'Infra'},
            {who:'Shopify payout', amt:'+$8,240', when:'yesterday', cat:'Revenue'},
            {who:'Payroll · Gusto', amt:'−$48,000', when:'Mar 15', cat:'Payroll'},
            {who:'Q1 tax estimate', amt:'−$12,400', when:'Mar 15', cat:'Tax'},
          ].map((r, i) => (
            <div key={i} className="hv-row">
              <div>
                <div style={{fontSize:13}}>{r.who}</div>
                <div className="mono" style={{color:'var(--ink-muted)', marginTop:2}}>{r.cat} · {r.when}</div>
              </div>
              <div className="tabular" style={{fontSize:13, color: r.amt.startsWith('+') ? 'var(--accent-ink)' : 'var(--ink)'}}>{r.amt}</div>
            </div>
          ))}
          <div className="hv-advisor">
            <div className="av-circle">MK</div>
            <div>
              <div style={{fontSize:13}}><strong>Maya K.</strong> · Your controller</div>
              <div className="mono" style={{color:'var(--ink-muted)', marginTop:2}}>Reviewed books · ready for your look</div>
            </div>
            <div style={{marginLeft:'auto'}} className="hv-pill">● Online</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashboardMock() {
  return <HeroVisual />;
}

function LogoWall() {
  const logos = ['QuickBooks', 'Gusto', 'Stripe', 'Bill.com', 'Xero', 'NetSuite', 'Shopify'];
  return (
    <section className="section-sm logowall">
      <div className="container">
        <div className="eyebrow" style={{textAlign:'center', marginBottom:32}}>We work across the tools you already use</div>
        <div className="logo-row">
          {logos.map((l, i) => (
            <div key={i} className="logo-placeholder">{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const services = [
    {
      num: '01',
      title: 'Bookkeeping & Accounting',
      desc: 'Clean books, closed monthly. A real person picks up the phone — not a ticket queue.',
      bullets: ['Monthly close by day 10', 'P&L, balance sheet, cash flow', 'QuickBooks, Xero, NetSuite'],
      href: 'bookkeeping.html',
    },
    {
      num: '02',
      title: 'Tax Prep & Filings',
      desc: 'Federal, state, and local — filed on time, planned year-round. No April surprises.',
      bullets: ['Entity and personal returns', 'Quarterly estimates', 'Proactive tax strategy'],
      href: 'tax.html',
    },
    {
      num: '03',
      title: 'Controller & CFO',
      desc: 'The strategic finance muscle founders usually only get after a hire they can\u2019t yet afford.',
      bullets: ['Board-ready reporting', 'Cash flow forecasts', 'Fundraising support'],
      href: 'cfo.html',
    },
  ];
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">What we do</div>
            <h2 className="display">One team. Your whole finance stack.</h2>
          </div>
          <div className="sh-right">
            <p>Most firms hand you off between bookkeepers, tax preparers, and advisors. We don't. One team owns the whole picture — and answers in hours, not weeks.</p>
          </div>
        </div>
        <div className="services-grid">
          {services.map((s, i) => (
            <a key={i} href={s.href} className="svc-card">
              <div className="svc-top">
                <div className="mono" style={{color:'var(--ink-muted)'}}>{s.num}</div>
                <ArrowRight size={16}/>
              </div>
              <h3 className="display">{s.title}</h3>
              <p>{s.desc}</p>
              <ul>
                {s.bullets.map((b, j) => (
                  <li key={j}><Check size={12}/> {b}</li>
                ))}
              </ul>
              <div className="svc-learn">Explore <ArrowRight size={12}/></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Differentiator() {
  const items = [
    { t: 'Responsive, not reactive', d: 'We reply in hours, not next Tuesday. Your books, your taxes, and your strategy all live with one team who already knows your business.' },
    { t: 'One team, not a handoff', d: 'Bookkeeper, tax preparer, and fractional CFO under one roof. No lost context between services. No "let me loop in my colleague" email threads.' },
    { t: 'Clarity over jargon', d: 'Monthly reports you\'ll actually read. Plain-English explanations of what changed and what to do about it.' },
    { t: 'Built for growth moments', d: 'Hiring, raising, expanding inventory, migrating software — we\'ve done it for hundreds of clients. We won\'t learn on your dime.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Why Revenu</div>
            <h2 className="display">A firm that moves at founder speed.</h2>
          </div>
          <div className="sh-right">
            <p>Traditional firms are built for compliance. Revenu is built for the way you actually run the business — fast, iterative, and always-on.</p>
          </div>
        </div>
        <div className="diff-grid">
          {items.map((it, i) => (
            <div key={i} className="diff-cell">
              <div className="diff-num mono">0{i+1}</div>
              <h3 className="display">{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Industries() {
  const rows = [
    { name: 'eCommerce', detail: 'Inventory, COGS, multi-channel reconciliation', href: 'industries-ecommerce.html' },
    { name: 'Tech Startups', detail: 'SaaS metrics, R&D credits, fundraising prep', href: 'industries-tech.html' },
    { name: 'Professional Services', detail: 'Project accounting, revenue recognition', href: 'industries-professional-services.html' },
    { name: 'Real Estate', detail: 'Entity structures, cost segregation, 1031s', href: 'industries-real-estate.html' },
    { name: 'Insurance Brokers', detail: 'Commissions, carrier reconciliation, producer comp', href: 'industries-insurance-brokers.html' },
    { name: 'Construction', detail: 'Job costing, WIP schedules, lien waivers', href: 'industries-construction.html' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Industries</div>
            <h2 className="display">Your industry, spoken fluently.</h2>
          </div>
          <div className="sh-right">
            <p>Different businesses have different books. Our team has specialists across the categories most founders actually operate in.</p>
          </div>
        </div>
        <div className="industries-table">
          {rows.map((r, i) => (
            <a key={i} href={r.href} className="ind-row">
              <div className="ind-num mono">{String(i+1).padStart(2,'0')}</div>
              <div className="ind-name display">{r.name}</div>
              <div className="ind-detail">{r.detail}</div>
              <ArrowRight size={14}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'Intro call', d: 'A 30-minute call to understand your business, pain points, and goals. No pitch deck.' },
    { n: '02', t: 'Clean-up & onboarding', d: 'We get your books current, clean, and standardized — usually within a week.' },
    { n: '03', t: 'Monthly cadence', d: 'Close, review, and a monthly report with plain-English commentary from your team.' },
    { n: '04', t: 'Advisory on demand', d: 'Slack, email, or a call when big questions come up. You\'re never waiting.' },
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">How we work</div>
            <h2 className="display">From messy to closed in a week.</h2>
          </div>
          <div className="sh-right">
            <p>Onboarding is the thing most firms dread. We do it constantly — and we've made it quick.</p>
          </div>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step">
              <div className="num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    {
      q: "We've worked with the Revenu team for over 5 years, and every year somehow exceeds the last. Afrim and his team have consistently delivered exceptional results and support. They invest the time to understand our business and our specific needs and have truly become a core part of our success. To top it off, every member of their team is an absolute joy to work with and brings positivity to every conversation.",
      who: 'Evan Brandt',
      role: 'CEO, VidTech',
      site: 'vidtech.com',
      href: 'https://www.vidtech.com',
      init: 'EB',
    },
    {
      q: "After working with several firms, we've come to truly value The Revenu team's professionalism, responsiveness, and attention to detail. They provide high-quality, reliable financial support at a fair price, with regular check-ins that keep us informed and confident in our numbers. Over time, Afrim and his team have become trusted partners — not just service providers — helping us stay organized, compliant, and focused on growing our business.",
      who: 'Sonya Sepahban',
      role: 'CEO, Trivvy',
      site: 'gotrivvy.com',
      href: 'https://www.gotrivvy.com',
      init: 'SS',
    },
    {
      q: "Working with Revenu has been a bright spot of my journey as an entrepreneur. I appreciate immensely the work this team does — and even more so that they do so as friends and collaborators, not just as professional associates. We are grateful to have partners like these in business.",
      who: 'Chance Horky',
      role: 'Co-Founder, InterWoven Studios',
      site: 'interwoven-studios.com',
      href: 'https://www.interwoven-studios.com',
      init: 'CH',
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">What clients say</div>
            <h2 className="display">Trusted by the people who build things.</h2>
          </div>
          <div className="sh-right">
            <p>A few of the 1,000+ founders, operators, and small business owners we work with every month.</p>
          </div>
        </div>
        <div className="quote-lean">
          {quotes.map((q, i) => (
            <figure key={i} className="quote-lean-item">
              <span className="quote-lean-mark" aria-hidden>&ldquo;</span>
              <blockquote>{q.q}</blockquote>
              <figcaption className="quote-lean-cite">
                <div className="quote-lean-who">{q.who}</div>
                <div className="quote-lean-sub">{q.role}</div>
                <a href={q.href} target="_blank" rel="noopener noreferrer" className="quote-lean-site mono">
                  {q.site} <span aria-hidden>↗</span>
                </a>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function JournalTeaser() {
  const posts = [
    {
      tag: 'CFO & strategy',
      date: 'August 21, 2026',
      read: '10 min read',
      title: <>The headcount plan as a <em>financial</em> document — not an HR wishlist.</>,
      summary: 'The most expensive line in your operating model isn\u2019t a tool, an office, or a marketing budget — it\u2019s the seats. The single document that determines whether you run out of money in eighteen months or thirty.',
      href: 'journal-headcount-plan.html',
    },
    {
      tag: 'CFO & strategy',
      date: 'August 7, 2026',
      read: '11 min read',
      title: <>Building a Series A diligence package that doesn't get <em>re-requested</em> three times.</>,
      summary: 'The fastest way to lose a term sheet is not a bad number — it\u2019s the third email from the associate asking, again, for the cohort file you already sent twice. What the package looks like when it gets opened once.',
      href: 'journal-series-a-diligence.html',
    },
    {
      tag: 'CFO & strategy',
      date: 'July 24, 2026',
      read: '12 min read',
      title: <>M&amp;A diligence on the sell side — the financial hygiene that adds a <em>turn</em> to your multiple.</>,
      summary: 'Buyers don\u2019t pay full price for businesses they don\u2019t trust. The discount shows up quietly — in retrades, holdbacks, escrow that never comes back. The hygiene that closes the gap before the LOI is signed.',
      href: 'journal-ma-diligence.html',
    },
  ];
  return (
    <section className="section hm-journal">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">The Revenu Journal</div>
            <h2 className="display">Field notes from the <em>finance</em> trenches.</h2>
          </div>
          <div className="sh-right">
            <p>Specific, opinionated essays on the bookkeeping, tax, and CFO questions our clients actually ask. Written by the same people who close their books — not a content team.</p>
          </div>
        </div>
        <div className="hm-journal-grid">
          {posts.map((p, i) => (
            <a key={i} href={p.href} className="hm-journal-card">
              <div className="hm-journal-meta mono">
                <span>{p.tag}</span>
                <span className="hm-journal-dot">·</span>
                <span>{p.date}</span>
              </div>
              <h3 className="hm-journal-title">{p.title}</h3>
              <p className="hm-journal-summary">{p.summary}</p>
              <div className="hm-journal-foot">
                <span className="mono">{p.read}</span>
                <span className="hm-journal-read">Read <ArrowRight size={12}/></span>
              </div>
            </a>
          ))}
        </div>
        <div className="hm-journal-all">
          <a href="blog.html" className="btn btn-secondary">All articles in the Journal <ArrowRight size={14}/></a>
        </div>
      </div>
    </section>
  );
}

function PricingTeaser() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Pricing</div>
            <h2 className="display">Flat monthly pricing. No surprises.</h2>
          </div>
          <div className="sh-right">
            <p>One price covers your bookkeeping, reporting, and advisor access. Plans are starting points — every engagement is customized. Tax filing is custom-quoted, and CFO services can be layered on as you grow.</p>
          </div>
        </div>
        <div className="price-grid">
          <div className="price-col">
            <div className="tier">PROFESSIONAL</div>
            <h3 className="display">Professional</h3>
            <div className="subtitle">For founders getting organized</div>
            <div style={{fontSize:13,color:'var(--ink-muted)',marginBottom:4}}>Starting at</div>
            <div className="price"><span className="amt tabular">$749</span><span className="per">/ month</span></div>
            <ul>
              <li><Check/> Monthly bookkeeping & close</li>
              <li><Check/> P&L, balance sheet, cash flow</li>
              <li><Check/> Dedicated bookkeeper</li>
              <li><Check/> QuickBooks or Xero</li>
              <li><Check/> Slack, Chat & email support</li>
              <li><Check/> Monthly review call</li>
              <li><Check/> Year-end tax-ready handoff</li>
            </ul>
            <a href="talk-to-advisor.html" className="btn btn-secondary">Get a proposal</a>
          </div>
          <div className="price-col featured">
            <div className="tier">COMMERCIAL · MOST POPULAR</div>
            <h3 className="display">Commercial</h3>
            <div className="subtitle">For growing businesses</div>
            <div style={{fontSize:13,color:'oklch(0.75 0.01 80)',marginBottom:4}}>Starting at</div>
            <div className="price"><span className="amt tabular">$1,795</span><span className="per">/ month</span></div>
            <ul>
              <li><Check/> Everything in Professional</li>
              <li><Check/> Accrual accounting (GAAP-aligned)</li>
              <li><Check/> Quarterly tax-ready package</li>
              <li><Check/> Tax filing available (custom quote)</li>
              <li><Check/> AP / AR support & bill pay</li>
              <li><Check/> 1099 prep & filing</li>
              <li><Check/> Class / location tracking</li>
              <li><Check/> 4h response SLA</li>
            </ul>
            <a href="talk-to-advisor.html" className="btn btn-accent">Get a proposal</a>
          </div>
          <div className="price-col">
            <div className="tier">STRATEGIC</div>
            <h3 className="display">Strategic</h3>
            <div className="subtitle">Fractional CFO & custom scope</div>
            <div className="price"><span className="amt tabular">Custom</span></div>
            <ul>
              <li><Check/> Everything in Commercial</li>
              <li><Check/> Fractional controller + CFO</li>
              <li><Check/> Board-ready monthly reporting pack</li>
              <li><Check/> Weekly 13-week cash flow forecast</li>
              <li><Check/> Fundraising & capital raise support</li>
              <li><Check/> Multi-entity consolidations</li>
              <li><Check/> Software migrations included</li>
              <li><Check/> Priority response (same-day)</li>
            </ul>
            <a href="talk-to-advisor.html" className="btn btn-secondary">Talk to us</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'What does onboarding look like?', a: 'We start with a scoping call to understand your business and any historical clean-up needed. Clean-up is quoted separately so you see the cost up front. Once scoped, we typically have you fully onboarded within a week.' },
    { q: 'Do I need to switch software?', a: 'No. We work in QuickBooks, Xero, NetSuite, and most industry-specific tools. If you need a migration, we handle it (usually included at Commercial and up).' },
    { q: 'Who exactly will I be working with?', a: 'A dedicated lead — bookkeeper, accountant, or controller depending on your tier — plus the specialists you need for tax, CFO, or advisory. Same team, every month.' },
    { q: 'Do you handle both business and personal taxes?', a: 'Yes. We prepare and file entity returns, founder personal returns, and sales tax. Tax filing is custom-quoted after a short scoping call — entity type, multi-state exposure, and complexity all change the scope, so we don\'t publish a flat price.' },
    { q: 'Are these plans fixed?', a: 'No — every engagement is customized. The plans are best-practice starting points; we tailor scope, cadence, and inclusions to your business.' },
    { q: 'What if my books are a mess?', a: 'That\'s most of our new clients. We quote clean-up separately based on complexity, and typically finish within two weeks of kickoff.' },
  ];
  const [openIdx, setOpenIdx] = useStateHome(0);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Questions</div>
            <h2 className="display">Common questions, answered.</h2>
          </div>
          <div className="sh-right">
            <p>If we missed yours, <a href="#" style={{textDecoration:'underline'}}>send us a note</a>. A real person responds within a business day.</p>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className="faq-item" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
              <h3>{it.q}</h3>
              <p style={{opacity: openIdx === i ? 1 : 0.55}}>{it.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroEditorial, HeroSplit, HeroCentered, HeroVisual, LogoWall, Services, Differentiator, Industries, Process, Testimonials, PricingTeaser, FAQ, StatGrid, DashboardMock });
