// QBClone — Hero (2 variants)
const Hero = ({ variant = 'a', accent = 'green' }) => {
  if (variant === 'b') return <HeroB />;
  return <HeroA />;
};

const HeroA = () => (
  <section className="qb-hero variant-a" data-screen-label="01 Hero">
    <div className="qb-hero-inner">
      <div className="qb-hero-left">
        <h1 className="qb-display qb-display-xl">
          Not another <span className="strike">accounting app</span>.<br/>
          A real QuickBooks <span className="qb-italic">replacement.</span>
        </h1>
        <p className="qb-hero-sub">
          Instant data migration from QuickBooks Desktop and QuickBooks Online with 100% accuracy. Free, unlimited companies and unlimited users. Data on your own cloud or local intranet. Freedom from QuickBooks shackles.
        </p>
        <div className="qb-hero-cta">
          <a className="qb-btn qb-btn-primary" href="dashboard.html">Open the dashboard <span className="arr">→</span></a>
          <a className="qb-btn qb-btn-outline" href="#compare">See it vs QuickBooks</a>
          <a className="qb-btn qb-btn-ghost" href="#migrate">Migrate from Intuit →</a>
        </div>
        <div className="qb-hero-meta">
          <span><b>$0</b> · forever, not a trial</span>
          <span className="sep">·</span>
          <span><b>∞</b> users / companies</span>
          <span className="sep">·</span>
          <span><b>AI-native</b> from day one</span>
          <span className="sep">·</span>
          <span><b>Self-host</b> or cloud</span>
        </div>
      </div>
      <div className="qb-hero-right qb-hero-right-freedom">
        <div className="qb-bye">Bye, Bye QuickBooks</div>
        <ul className="qb-freedom">
          <li><span className="dot"></span><span className="t">Free Forever</span></li>
          <li><span className="dot"></span><span className="t">Unlimited Users</span></li>
          <li><span className="dot"></span><span className="t">Unlimited Companies</span></li>
        </ul>
      </div>
    </div>
  </section>
);

const HeroB = () => (
  <section className="qb-hero variant-b" data-screen-label="01 Hero">
    <div className="qb-hero-inner">
      <div className="qb-hero-left" style={{ textAlign: 'left' }}>
        <div className="qb-pill" style={{ marginBottom: 20 }}>
          <span className="free-dot"></span>Free, forever — funded by hosting, not by you
        </div>
        <h1 className="qb-display qb-display-xxl" style={{ letterSpacing: '-0.045em' }}>
          Everything<br/>businesses<br/>
          <span className="qb-italic" style={{ color: 'var(--ink-60)' }}>wanted&nbsp;</span>
          QuickBooks<br/>
          <span className="qb-italic">to become.</span>
        </h1>
        <div className="qb-hero-cta" style={{ marginTop: 40 }}>
          <a className="qb-btn qb-btn-primary" href="dashboard.html">Open the dashboard <span className="arr">→</span></a>
          <a className="qb-btn qb-btn-outline" href="#compare">Why QBClone exists</a>
        </div>
      </div>
      <div className="qb-hero-right" style={{ marginTop: 56 }}>
        {/* Three feature columns in B */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1, background: 'var(--qb-line)',
          border: '1px solid var(--qb-line)', borderRadius: 16, overflow: 'hidden'
        }}>
          {[
            { eyebrow: '01 / The promise', t: 'Free. Forever.', d: 'Not freemium. Not a trial. The full product, free to run for unlimited users and unlimited companies — for as long as you want.' },
            { eyebrow: '02 / The power',   t: 'Built for scale.', d: 'Modern cloud architecture handles million-row company files, large multi-user teams, and fast reports — without crashing or slowing down.' },
            { eyebrow: '03 / The future',  t: 'AI-first books.', d: 'Categorize, reconcile, draft invoices, answer questions about your books in natural language. Wire it to Claude Code or Codex.' },
          ].map((it, i) => (
            <div key={i} style={{ background: '#fff', padding: 32, minHeight: 240, display: 'flex', flexDirection: 'column' }}>
              <div className="qb-eyebrow">{it.eyebrow}</div>
              <h3 style={{ font: '500 28px var(--font-display)', letterSpacing: '-0.02em', margin: '20px 0 12px', color: 'var(--ink-100)' }}>{it.t}</h3>
              <p style={{ color: 'var(--ink-60)', fontSize: 14, lineHeight: 1.55, margin: 0 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, HeroA, HeroB });