/* VillaCash — Offer, FAQ, FinalCTA, Footer */
const { useState: useStateB } = React;

function Offer() {
  return (
    <section className="section offer" id="offer">
      <div className="wrap">
        <Reveal className="smark"><span className="num">§ 02 · The offer</span><span className="ln"></span></Reveal>
        <div className="offer-grid">
          <div>
            <Reveal as="h2" className="offer-h2" delay={1}>
              One price. <em>Lifetime access.</em>
            </Reveal>
            <Reveal as="p" className="lead" delay={2}>
              The full VillaCash system: ten launch reels, the direct booking site, pricing playbook
              and review flow. Set up once, runs every season. You own it.
            </Reveal>
            <Reveal delay={2}>
              <div className="guarantee">
                <span className="seal">60-DAY<br />RISK<br />ON US</span>
                <div>
                  <div className="gt">60-day money-back guarantee</div>
                  <div className="gs">Do the work. Not seeing results? Full refund. You keep every asset.</div>
                </div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={2}>
            <div className="receipt">
              <div className="receipt-top">
                <span className="t">VillaCash · Season 2026</span>
                <span className="o">Lifetime licence</span>
              </div>
              <div className="receipt-body">
                <div className="rec-pay">
                  <span className="l">One-time</span>
                  <span className="v"><span className="cur">€</span>3,999</span>
                </div>
                <div className="rec-split">Lifetime access · no renewals · 60-day guarantee</div>
                <a href="/checkout-now" className="btn btn-primary">Get instant access <span className="arr">→</span></a>
                <div className="rec-foot"><span>● Lifetime access</span><span>● VAT-inclusive</span><span>● 60-day guarantee</span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, t, a, idx }) {
  const [open, setOpen] = useStateB(idx === 0);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span className="qn">{q}</span>
        <span className="qt">{t}</span>
        <span className="qi"></span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? 260 : 0 }}>
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
}

function Faq() {
  return (
    <section className="section faq on-sand" id="faq">
      <div className="wrap">
        <Reveal className="smark"><span className="num">§ 03 · Notes</span><span className="ln"></span></Reveal>
        <Reveal as="h2" className="h2" delay={1}>Before you <em>sign.</em></Reveal>
        <div className="faq-list">
          {FAQS.map((f, i) => <Reveal key={f.q} delay={Math.min(3, i + 1)}><FaqItem {...f} idx={i} /></Reveal>)}
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="section final">
      <div className="wrap final-inner">
        <Reveal className="eyebrow" style={{ color: 'rgba(255,255,255,.55)', marginBottom: 22 }}>· Ready when you are ·</Reveal>
        <Reveal as="h2" delay={1}>One licence. <em>Every season.</em></Reveal>
        <Reveal as="p" delay={2}>
          You set it up once. The system runs across every booking, every reel, every pricing decision,
          for as long as you own the villa.
        </Reveal>

        <Reveal delay={3}>
          <a href="/checkout-now" className="btn btn-primary" style={{ padding: '18px 36px', fontSize: 17 }}>
            Get instant access &middot; €3,999 <span className="arr">→</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <span>© 2026 · Villa Cash</span>
        <span className="stars">✦ ✦ ✦</span>
        <a href="mailto:support@villacashsystem.com">support@villacashsystem.com</a>
      </div>
    </footer>
  );
}

Object.assign(window, { Offer, Faq, FinalCta, Footer });