// Home page hero compositions + supporting sections

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineFont": "Fraunces",
  "heroVariant": "rfp-card",
  "density": "editorial"
}/*EDITMODE-END*/;

function HomeHeroEditorial({ tweaks }) {
  const fontFamily = tweaks.headlineFont === 'Newsreader' ? "'Newsreader', Georgia, serif"
    : tweaks.headlineFont === 'Instrument' ? "'Instrument Serif', Georgia, serif"
    : "'Fraunces', Georgia, serif";

  return (
    <section style={{ padding: '88px 0 64px', position: 'relative', zIndex: 2 }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'start' }}>
          {/* Left · headline */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
              <span className="eyebrow-amber">Vol. III · Issue 04</span>
              <span style={{ width: 24, height: 1, background: 'var(--rule)' }}></span>
              <span className="eyebrow">A working journal for federal small business</span>
            </div>

            <h1 style={{
              fontFamily,
              fontSize: tweaks.density === 'dense' ? 76 : 92,
              fontWeight: 400,
              lineHeight: 0.94,
              letterSpacing: '-0.025em',
              margin: '0 0 36px',
              color: 'var(--navy)',
              fontVariationSettings: '"opsz" 144',
              textWrap: 'pretty',
            }}>
              Bring a live <em style={{ fontStyle: 'italic', color: 'var(--amber-deep)' }}>solicitation.</em><br />
              Leave with a <em style={{ fontStyle: 'italic', color: 'var(--amber-deep)' }}>draft.</em>
            </h1>

            <p style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontSize: 21,
              lineHeight: 1.45,
              color: 'var(--ink-soft)',
              maxWidth: 520,
              margin: '0 0 40px',
              textWrap: 'pretty',
            }}>
              GovBid AI reads Section L, finds the three of your past projects that actually fit,
              and writes the first 80% of the proposal in about eight minutes. You spend your time formatting winning.
            </p>

            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 40 }}>
              <a href="pricing.html" className="btn btn-amber btn-arrow">Start a 14-day trial</a>
              <a href="features.html" className="btn btn-ghost btn-arrow">See how it works</a>
            </div>

            <div style={{ display: 'flex', gap: 32, paddingTop: 24, borderTop: '1px solid var(--rule)' }}>
              <Stat n="14k" label="Active opps tracked" />
              <Stat n="~8 min" label="To first compliant draft" />
              <Stat n="$49" label="Starts at, per month" />
            </div>
          </div>

          {/* Right · RFP card or diagram */}
          <div>
            {tweaks.heroVariant === 'rfp-card' ? <HeroRFPCard /> : <HeroDiagramCard />}
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 500, color: 'var(--navy)', lineHeight: 1, marginBottom: 6, fontVariationSettings: '"opsz" 144' }}>
        {n}
      </div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        {label}
      </div>
    </div>
  );
}

function HeroRFPCard() {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--rule)',
      padding: 0,
      boxShadow: '0 24px 48px -28px rgba(20, 35, 61, 0.25)',
      position: 'relative',
    }}>
      {/* Header strip */}
      <div style={{ background: 'var(--navy)', color: 'var(--cream)', padding: '12px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--amber-tint)' }}>OPP · W56KGY-26-R-0142</span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', opacity: 0.7 }}>RECEIVED 14:22 EST</span>
      </div>

      <div style={{ padding: '24px 24px 8px' }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Department of the Army · NAICS 541512</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, lineHeight: 1.2, color: 'var(--navy)', marginBottom: 18, fontStyle: 'italic' }}>
          Cloud Migration Services · APG Garrison
        </div>

        {/* Score gauge */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 16, borderBottom: '1px solid var(--rule-soft)' }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 64, fontWeight: 500, color: 'var(--amber-deep)', lineHeight: 1, fontVariationSettings: '"opsz" 144' }}>
            92
          </div>
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--navy)' }}>Strong match</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>Win probability · this firm</div>
          </div>
        </div>

        {/* Match factors */}
        <div style={{ padding: '16px 0' }}>
          {[
            { label: 'NAICS aligned', val: '541512 · primary', good: true },
            { label: 'Set-aside fit', val: 'Total SB · qualified', good: true },
            { label: 'Past performance', val: '3 of 3 size class', good: true },
            { label: 'Clearance gap', val: 'Secret · 2 of 4', warn: true },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i < 3 ? '1px dotted var(--rule-soft)' : 'none' }}>
              <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{m.label}</span>
              <span className="mono" style={{ fontSize: 11, color: m.warn ? 'var(--oxblood)' : 'var(--navy)', fontWeight: 600 }}>
                {m.good && '◉ '}{m.warn && '△ '}{m.val}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Footer action */}
      <div style={{ padding: '14px 18px', background: 'var(--cream-2)', borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-soft)' }}>DRAFT READY · 7M 42S</span>
        <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--amber-deep)' }}>Open in editor →</span>
      </div>

      {/* Margin notation */}
      <div style={{ position: 'absolute', top: 96, right: -120, width: 140, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--amber-deep)', lineHeight: 1.3, transform: 'rotate(2deg)' }}>
        ↖ a real opportunity card,<br />annotated as you'd<br />read it on paper
      </div>
    </div>
  );
}

function HeroDiagramCard() {
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', padding: 24 }}>
      <DiagramScoringPipeline />
    </div>
  );
}

/* =================== INSTRUMENT-PANEL (alt hero) =================== */

function HomeHeroInstrument({ tweaks }) {
  const fontFamily = tweaks.headlineFont === 'Newsreader' ? "'Newsreader', Georgia, serif"
    : tweaks.headlineFont === 'Instrument' ? "'Instrument Serif', Georgia, serif"
    : "'Fraunces', Georgia, serif";

  return (
    <section style={{ padding: '64px 0 48px', position: 'relative', zIndex: 2 }}>
      <div className="container-wide">
        {/* Centered editorial headline */}
        <div style={{ textAlign: 'center', maxWidth: 1000, margin: '0 auto 56px' }}>
          <div className="eyebrow-amber" style={{ marginBottom: 24 }}>· An instrument panel for the federal proposal ·</div>
          <h1 style={{
            fontFamily,
            fontSize: tweaks.density === 'dense' ? 88 : 112,
            fontWeight: 400,
            lineHeight: 0.92,
            letterSpacing: '-0.03em',
            margin: '0 0 28px',
            color: 'var(--navy)',
            fontVariationSettings: '"opsz" 144',
            textWrap: 'balance',
          }}>
            Win rate is just <em style={{ fontStyle: 'italic', color: 'var(--amber-deep)' }}>discipline</em><br />
            you couldn't afford yet.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--ink-soft)', maxWidth: 620, margin: '0 auto 32px', textWrap: 'pretty' }}>
            GovBid AI scores every SAM.gov solicitation against your firm, drafts the parts you keep rewriting,
            and remembers every project so the next bid starts at minute eight, not week three.
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
            <a href="pricing.html" className="btn btn-amber btn-arrow">Start a 14-day trial</a>
            <a href="features.html" className="btn btn-ghost btn-arrow">See how it works</a>
          </div>
        </div>

        {/* Full-width annotated diagram */}
        <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', padding: 32, position: 'relative' }}>
          <DiagramScoringPipeline />
        </div>
      </div>
    </section>
  );
}

/* =================== SUPPORTING SECTIONS =================== */

function VoiceSection() {
  return (
    <section className="section-sm" style={{ background: 'var(--paper)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
          <EditorialPhoto
            src={PHOTOS.capitol}
            alt="Federal building, Washington DC"
            plate="PLATE II"
            caption="The buyer · 14,000 active solicitations on any given day"
            aspect="4 / 5"
          />
          <div>
            <div className="eyebrow-amber" style={{ marginBottom: 28 }}>From the editor's desk</div>
            <p style={{
              fontFamily: 'var(--serif)',
              fontSize: 40,
              lineHeight: 1.2,
              fontWeight: 400,
              color: 'var(--navy)',
              fontVariationSettings: '"opsz" 144',
              textWrap: 'balance',
              margin: 0,
            }}>
              We don't write the bid for you. <em style={{ fontStyle: 'italic', color: 'var(--amber-deep)' }}>We write the first 80%</em>,
              so you spend your time <em style={{ fontStyle: 'italic', color: 'var(--amber-deep)' }}>formatting winning.</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function CapabilitiesSection() {
  const caps = [
    { num: '01', title: 'Find', body: 'Every SAM.gov solicitation and SLED state portal pulled into one searchable inventory, scored 0–100 against your firm profile, NAICS, set-asides, and past performance.', tag: 'Discovery' },
    { num: '02', title: 'Decide', body: 'Win-probability model + AI-assisted bid/no-bid recommendation. Reads Section M before you sink a week, and tells you where you will and will not score.', tag: 'Strategy' },
    { num: '03', title: 'Draft', body: 'Section L–compliant volumes · technical, management, past performance, exec summary. SF-330 Parts I & II autofilled. Capability statements in one click.', tag: 'Writing' },
    { num: '04', title: 'Comply', body: 'Compliance checks against the actual RFP requirements. Audit-mode chat over uploaded RFP documents. Every "shall" tracked, every gap surfaced.', tag: 'Pre-submit' },
    { num: '05', title: 'Track', body: 'Pipeline kanban from interested through awarded. Contracts library. Past-performance library. Competitor and agency intelligence on Pro+.', tag: 'Operations' },
  ];

  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
            <span className="section-head-num">§ Capabilities</span>
          </div>
          <span className="section-head-title">Five jobs the product does, end to end</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
          {caps.map((c, i) => (
            <div key={i} style={{
              padding: '0 24px 0 0',
              borderRight: i < 4 ? '1px solid var(--rule)' : 'none',
              paddingLeft: i > 0 ? 24 : 0,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--amber-deep)', marginBottom: 12 }}>
                {c.num} · {c.tag.toUpperCase()}
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, lineHeight: 1.15, marginBottom: 14, color: 'var(--navy)', fontVariationSettings: '"opsz" 144' }}>
                {c.title}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
                {c.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  return (
    <section className="section bg-paper" style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <div className="section-head">
          <span className="section-head-num">§ Mechanics</span>
          <span className="section-head-title">From solicitation to compliant draft, in roughly eight minutes</span>
        </div>

        <div style={{ background: 'var(--cream)', border: '1px solid var(--rule)', padding: 32, marginBottom: 56 }}>
          <DiagramSectionLMap />
        </div>

        <div style={{ background: 'var(--cream)', border: '1px solid var(--rule)', padding: 32 }}>
          <DiagramEightMinutes />
        </div>
      </div>
    </section>
  );
}

function PricingTeaserSection() {
  const tiers = [
    { name: 'Starter', price: '49', sub: 'For firms running 1–2 bids a month', features: ['Up to 5 saved opportunities', 'Section L drafting', 'SF-330 Part I autofill'] },
    { name: 'Pro', price: '99', sub: 'The anchor · what most firms run on', features: ['Unlimited opportunities', 'Win-probability scoring', 'SF-330 Parts I & II', 'Red-team mode', 'Past performance library'], featured: true },
    { name: 'Premium', price: '199', sub: 'Capture teams + multiple writers', features: ['Everything in Pro', 'Up to 5 seats', 'Custom voice training', 'Priority support'] },
    { name: 'Enterprise', price: 'Talk', sub: 'Mid-market govcon, primes, JVs', features: ['SSO + audit log', 'On-prem deployment available', 'Custom integrations'] },
  ];

  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <span className="section-head-num">§ Pricing</span>
          <span className="section-head-title">Priced to be cheaper than your last no-bid decision</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {tiers.map((t, i) => (
            <div key={i} style={{
              border: t.featured ? '1.5px solid var(--navy)' : '1px solid var(--rule)',
              background: t.featured ? 'var(--navy)' : 'var(--paper)',
              color: t.featured ? 'var(--cream)' : 'var(--navy)',
              padding: '32px 24px',
              position: 'relative',
            }}>
              {t.featured && (
                <div style={{ position: 'absolute', top: -10, left: 24, background: 'var(--amber)', color: 'var(--navy)', padding: '4px 10px', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', fontWeight: 600 }}>
                  RECOMMENDED
                </div>
              )}
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: t.featured ? 'var(--amber-tint)' : 'var(--ink-mute)', marginBottom: 12 }}>
                Tier {i + 1}
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 500, marginBottom: 4 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 12 }}>
                {t.price !== 'Talk' && <span style={{ fontSize: 16, opacity: 0.7 }}>$</span>}
                <span style={{ fontFamily: 'var(--serif)', fontSize: 48, fontWeight: 500, lineHeight: 1, fontVariationSettings: '"opsz" 144' }}>{t.price}</span>
                {t.price !== 'Talk' && <span style={{ fontFamily: 'var(--mono)', fontSize: 12, opacity: 0.7, marginLeft: 4 }}>/mo</span>}
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 13, opacity: 0.85, marginBottom: 20, lineHeight: 1.4 }}>
                {t.sub}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, opacity: 0.9 }}>
                {t.features.map((f, j) => <li key={j}>· {f}</li>)}
              </ul>
              <a href="pricing.html" className={`btn ${t.featured ? 'btn-amber' : 'btn-ghost'}`} style={{ width: '100%', justifyContent: 'center' }}>
                {t.price === 'Talk' ? 'Contact sales' : 'Start trial'}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const quotes = [
    {
      text: "We used to no-bid anything under $500K because the writing time wasn't worth the math. Now we run those.",
      role: 'Founder & CEO',
      org: 'SDVOSB prime · NCR',
      initials: 'JT',
    },
    {
      text: "First time the SF-330 didn't ruin a Saturday. The Block E narratives matched our voice · needed light editing, not rewriting.",
      role: 'Capture Director',
      org: 'A/E firm · Mid-Atlantic',
      initials: 'RM',
    },
    {
      text: "It told us, plainly, that we wouldn't score on Section M.4. We saved a week not chasing it.",
      role: 'Owner',
      org: 'WOSB · 8(a) graduate',
      initials: 'AC',
    },
  ];

  return (
    <section className="section bg-paper" style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <div className="section-head">
          <span className="section-head-num">§ Field reports</span>
          <span className="section-head-title">Illustrative · written approval pending from each firm</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {quotes.map((q, i) => (
            <figure key={i} style={{ margin: 0, padding: 32, background: 'var(--cream)', border: '1px solid var(--rule)', position: 'relative' }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 0.5, color: 'var(--amber-deep)', marginBottom: 8, fontStyle: 'italic' }}>"</div>
              <blockquote style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.4, color: 'var(--navy)', textWrap: 'pretty' }}>
                {q.text}
              </blockquote>
              <figcaption style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--rule-soft)', display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--navy)', color: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 14, fontWeight: 500 }}>
                  {q.initials}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)' }}>{q.role}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-mute)' }}>{q.org}</div>
                </div>
              </figcaption>
              <span className="mono" style={{ position: 'absolute', top: 16, right: 18, fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>
                Approval pending
              </span>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const items = [
    { q: 'Is GovBid AI just a wrapper around ChatGPT?', a: 'No. We run our own retrieval pipeline over SAM.gov, your past performance library, and the agency\'s historical solicitations. Generic models don\'t know what Block E asks for, or that your firm has a CMMI L3 letter from April 2024. We do.' },
    { q: 'Will agencies know our proposal was AI-assisted?', a: 'Reading like a human writer is a feature, not a leak. We tune voice to your firm\'s style · your past prose, your win themes, your phrasing for capabilities. Drafts come back sounding like the author who wrote your last winning bid.' },
    { q: 'Who actually built this?', a: 'Olufela Fagbure (Founder & Director) and the team at IT Custom Solution LLC, a NYC-registered MBE that bids alongside its customers. We use the product on our own work first.' },
    { q: 'What about data security?', a: 'Tenant-isolated workspaces, per-firm KMS encryption, AES-256 at rest, TLS 1.3 in transit, and zero-retention contracts with our LLM providers. Your past performance library and drafts are never used for training and are exportable at any time. Full security page →' },
    { q: 'Can we cancel anytime?', a: 'Monthly plans cancel at the end of the period, no questions, no retention call. Annual plans pro-rate. We\'d rather earn the next month than trap you in this one.' },
  ];

  return (
    <section className="section">
      <div className="container-narrow">
        <div className="section-head">
          <span className="section-head-num">§ Diligence</span>
          <span className="section-head-title">The questions you'd ask in the second meeting</span>
        </div>

        <div>
          {items.map((item, i) => (
            <details key={i} style={{ borderBottom: '1px solid var(--rule)', padding: '24px 0' }} open={i === 0}>
              <summary style={{
                cursor: 'pointer',
                listStyle: 'none',
                fontFamily: 'var(--serif)',
                fontSize: 22,
                fontWeight: 500,
                color: 'var(--navy)',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'baseline',
                fontVariationSettings: '"opsz" 144',
              }}>
                <span><span className="mono" style={{ fontSize: 11, color: 'var(--amber-deep)', marginRight: 16, letterSpacing: '0.16em' }}>{String(i + 1).padStart(2, '0')}</span>{item.q}</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--amber-deep)' }}>+</span>
              </summary>
              <p style={{ marginTop: 16, marginLeft: 44, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 680, textWrap: 'pretty' }}>
                {item.a}
              </p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section style={{ background: 'var(--navy)', color: 'var(--cream)', padding: '120px 0', position: 'relative', zIndex: 2 }}>
      <div className="container-narrow" style={{ textAlign: 'center' }}>
        <div className="eyebrow-amber" style={{ color: 'var(--amber)', marginBottom: 24 }}>· To press ·</div>
        <h2 style={{
          fontFamily: 'var(--serif)',
          fontSize: 88,
          fontWeight: 400,
          lineHeight: 0.96,
          letterSpacing: '-0.025em',
          margin: '0 0 28px',
          color: 'var(--cream)',
          fontVariationSettings: '"opsz" 144',
          textWrap: 'balance',
        }}>
          Bring a live solicitation.<br />
          <em style={{ fontStyle: 'italic', color: 'var(--amber)' }}>Leave with a draft.</em>
        </h2>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--cream-2)', opacity: 0.85, maxWidth: 580, margin: '0 auto 40px' }}>
          Fourteen-day trial. No card. Cancel from a settings page, not a phone call.
        </p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
          <a href="pricing.html" className="btn btn-amber btn-arrow">Start your trial</a>
          <a href="about.html" className="btn btn-ghost btn-arrow" style={{ color: 'var(--cream)', borderColor: 'var(--cream)' }}>Meet the team</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  HOME_TWEAK_DEFAULTS,
  HomeHeroEditorial, HomeHeroInstrument,
  VoiceSection, CapabilitiesSection, HowItWorksSection,
  PricingTeaserSection, TestimonialsSection, FAQSection, CTASection,
});