// Six-Figure Venue Engine — bottom sections: ValueStack (G), Bonuses (H), Guarantees (I), Pricing (J), CTAs (K), Founder close, FAQ (L), Footer

// G. Offer Breakdown — The Value Stack ($13,997 retail)
function ValueStack() {
  const groups = [
  {
    ttl: 'Core engine', tag: '90-day DFY', total: '$5,000',
    items: [
    { name: 'Ad-Fueled Booking OS — 90-day DFY build + management', sub: 'Meta/Google campaigns built, launched, optimized for your top event types', val: '$5,000' }]
  },
  {
    ttl: 'Supporting assets', tag: 'Installed for you', total: '$3,000',
    items: [
    { name: 'Week-1 Ads-Live Launch', sub: 'Ad account, pixel, lead capture wired, $35/day live, first campaign running', val: '$1,500' },
    { name: 'Custom venue-branded Quiz Funnel', sub: 'Pre-qualifies every lead by event type, date, guest count, budget', val: '$500' },
    { name: 'Booking OS installed in GHL', sub: 'Pipelines, tags, automations, reminders, calendars — owned by you', val: '$750' },
    { name: 'Attribution Dashboard', sub: 'Every tour tracked from click to source', val: '$250' }]
  },
  {
    ttl: 'Accelerators', tag: 'Fast early wins', total: '$2,250',
    items: [
    { name: 'Warm-List Reactivation Blast', sub: 'Books tours from your existing list while paid traffic ramps', val: '$1,250' },
    { name: '90-Day Booking Calendar Audit + Roadmap', sub: '1-to-1 kickoff that maps your exact path to 10 tours', val: '$1,000' }]
  },
  {
    ttl: 'Accountability', tag: 'Live, 90 days', total: '$2,000',
    items: [
    { name: 'Weekly optimization + bi-weekly strategy calls', sub: 'We keep tuning the engine; you always know the plan', val: '$1,500' },
    { name: 'Priority Support', sub: 'Same-day weekday response for the entire Sprint', val: '$500' }]
  },
  {
    ttl: 'Bonuses', tag: 'Multipliers', total: '$1,747',
    items: [
    { name: 'Tour Close Playbook', sub: 'Scripts + follow-up cadences + decision-maker qualification', val: '$1,200' },
    { name: 'Seasonal Calendar Fill Plan', sub: '4 plug-and-play quarterly promo campaigns', val: '$547' }]
  }];

  return (
    <section id="offer" style={{ background: 'var(--jet-black)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">What's included</div>
          <h2 className="section">The full engine, built and run for you.</h2>
          <p className="lede">Each line solves a specific reason venues stay empty. Everything below is done-for-you — here's the engine, piece by piece, with what each is actually worth on the open market.</p>
        </div>

        <div className="stack" data-comment-anchor="f3dc9ce43f-div-47-9">
          {groups.map((g, gi) =>
          <section className="stack-section" key={gi} {...gi === 0 ? { 'data-comment-anchor': '3980c72ac2-section-16-13' } : {}}>
              <div className="stack-section-head">
                <div className="ttl" style={{ fontSize: "14px" }}>{g.ttl}</div>
                <div className="sub" style={{ fontSize: "14px" }}>{g.tag}</div>
              </div>
              {g.items.map((it, ii) => <Row key={ii} name={it.name} sub={it.sub} val={it.val} />)}
              <div className="stack-subtotal"><span>Subtotal</span><span>{g.total}</span></div>
            </section>
          )}

          <div className="stack-total">
            <div>
              <div className="lbl" style={{ fontSize: "15px" }}>Total retail value</div>
              <div className="stack-total-sub" style={{ fontSize: "16px" }}>Everything above, priced separately</div>
            </div>
            <div className="v">$13,997</div>
          </div>
        </div>
      </div>
    </section>);

}

function Row({ name, sub, val }) {
  return (
    <div className="stack-row">
      <div className="name">
        <span className="rcheck"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 10-10" /></svg></span>
        <span className="rtext">{name}{sub && <small>{sub}</small>}</span>
      </div>
      <div className="val">{val}</div>
    </div>);

}

// H. Bonuses
function Bonuses() {
  const items = [
  {
    tag: 'Bonus 1',
    t: 'Tour Close Playbook',
    b: 'Scripts, follow-up cadences, and decision-maker qualification so the qualified tours we book actually turn into signed contracts.',
    v: '$1,200 value'
  },
  {
    tag: 'Bonus 2',
    t: 'Seasonal Calendar Fill Plan',
    b: 'Four plug-and-play quarterly promo campaigns that keep the calendar full all year — not just during your busy season.',
    v: '$547 value'
  },
  {
    tag: 'Fast action',
    t: 'Creative Refresh Pack',
    b: 'Enroll in 48 hours and we add 10 extra ad variations so your creative doesn’t fatigue in month one. Only on the table if you start by 7/9.',
    v: 'Limited time only'
  }];

  return (
    <section style={{ background: 'var(--charcoal)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">Bonuses</div>
          <h2 className="section">Two multipliers on the engine — plus one for fast action.</h2>
          <p className="lede">The first two are already counted inside the $13,997 stack — they're the multipliers on top of the engine. The third you only get by enrolling on your Diagnostic call.</p>
        </div>
        <div className="bonus-grid">
          {items.map((b, i) =>
          <div key={i} className="bonus">
              <span className="tag">{b.tag}</span>
              <h4 style={{ marginTop: 28 }}>{b.t}</h4>
              <p>{b.b}</p>
              <div className="v">{b.v}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// I. Guarantee
function Guarantees({ onApply }) {
  return (
    <section id="guarantee" style={{ background: 'var(--jet-black)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">The guarantee</div>
          <h2 className="section">You fund the fuel. We guarantee the tours.</h2>
          <p className="lede">We can make a guarantee this bold for one reason: we require the one input that controls the outcome. You bring the $35/day; we stand behind the result.</p>
        </div>

        <div className="guard-grid">
          {/* Hero guarantee + seal */}
          <div className="guard hero">
            <div className="guard-hero-body" data-comment-anchor="508e28720b-div-143-13">
              <div className="badge"><Target /> Guarantee #2 — the main one</div>
              <h3>The 90-Day 10-Tour Guarantee.</h3>
              <p>Fund your $35/day in your own Meta account, approve campaigns on time, and host the tours we book. If we don't put <strong style={{ color: '#fff' }}>10 qualified, shown tours</strong> on your calendar within 90 days, we <strong style={{ color: '#7CD7A8' }}>refund your $4,000 and keep working for free until we do.</strong></p>
              <div className="closer" style={{ marginTop: 16 }}>
                <strong style={{ color: '#7CD7A8' }}>A "shown tour"</strong> = the decision-maker (or their direct spouse/parent), event type and budget match what you want, booked on your calendar, and it actually happens — in person or live video. No fluff, no padding the count.
              </div>
            </div>
            <Seal />
          </div>

          <div className="guard a">
            <div className="badge"><Shield /> Guarantee #1 — 7-day wrong-fit refund</div>
            <h3>Zero risk to look under the hood.</h3>
            <p>Attend your first call, complete the kickoff homework, and if within 7 days you decide it's not a fit — full refund of the install fee and the Care Plan cancelled.</p>
            <div className="closer">You risk a little time and attention for 7 days. No net financial risk to start.</div>
          </div>

          <div className="guard b">
            <div className="badge"><Target /> Guarantee #3 — the $10,000 target</div>
            <h3>Your part, stated honestly.</h3>
            <p>Those 10 qualified tours are built to produce <strong style={{ color: '#fff' }}>$10,000+ in new contracts</strong>, and most venues clear it. But you run the tours and you sign the contracts — so the close is yours.</p>
            <div className="closer">We guarantee what we control (the tours) and tell you straight what's on you (the close). That's more than any agency or course will put in writing.</div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <button className="btn btn-primary btn-lg" onClick={onApply} data-comment-anchor="86c9cce7b5-button-192-11">Book a call <ArrowR /></button>
        </div>
      </div>
    </section>);

}

function Seal() {
  return (
    <div className="seal" aria-hidden="true">
      <div className="seal-ring">
        <svg viewBox="0 0 200 200" width="100%" height="100%">
          <defs>
            <path id="sealArc" d="M 100,100 m -74,0 a 74,74 0 1,1 148,0 a 74,74 0 1,1 -148,0" />
          </defs>
          <text className="seal-text">
            <textPath href="#sealArc" startOffset="0%">90-DAY 10-TOUR GUARANTEE · 90-DAY 10-TOUR GUARANTEE · </textPath>
          </text>
        </svg>
      </div>
      <div className="seal-core">
        <div className="seal-n">10</div>
        <div className="seal-l">tours<br />or we work free</div>
      </div>
    </div>);

}

function Shield() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6z" />
    </svg>);

}
function Target() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" />
    </svg>);

}

// J. The deal — value stack vs grand-slam price (side by side)
function Pricing({ onApply }) {
  return (
    <section id="pricing" style={{ background: 'var(--charcoal)' }}>
      <div className="wrap">
        <div className="section-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="eyebrow">The deal</div>
          <h2 className="section" style={{ maxWidth: '24ch', marginInline: 'auto' }}>Piece it together yourself? You're north of $13,997.</h2>
          <p className="lede" style={{ marginInline: 'auto' }}>Buy every piece on the open market and you're past ten grand — before you've booked a single tour. Here's what we hand you instead.</p>
        </div>

        <div className="vsplit" data-comment-anchor="43c639f4a4-div-262-9">
          <div className="vs-left">
            <div className="vs-eyebrow">Piece it together yourself</div>
            <h3 className="vs-h">The retail value.</h3>
            <div className="vs-lines">
              <div className="vs-line"><span style={{ fontSize: "18px" }}>Core engine — 90-day DFY build</span><span style={{ fontSize: "18px" }}>$5,000</span></div>
              <div className="vs-line"><span style={{ fontSize: "18px" }}>Supporting assets — funnel, GHL, dashboard</span><span style={{ fontSize: "18px" }}>$3,000</span></div>
              <div className="vs-line"><span style={{ fontSize: "18px" }}>Accelerators — reactivation + roadmap</span><span style={{ fontSize: "18px" }}>$2,250</span></div>
              <div className="vs-line"><span style={{ fontSize: "18px" }}>Accountability — weekly + bi-weekly calls</span><span style={{ fontSize: "18px" }}>$2,000</span></div>
              <div className="vs-line"><span style={{ fontSize: "18px" }}>Bonuses — playbook + seasonal plan</span><span style={{ fontSize: "18px" }}>$1,747</span></div>
            </div>
            <div className="vs-total">
              <span>Total retail value</span>
              <strong>$13,997</strong>
            </div>
            <div className="vs-note">…plus months of stitching it together yourself.</div>
          </div>

          <div className="vs-right">
            <span className="vs-badge">Grand Slam Price · 2026</span>
            <div className="vs-eyebrow light">The Six-Figure Venue Engine</div>
            <h3 className="vs-h light">Done for you, start to finish.</h3>
            <div className="vs-price">
              <s>$13,997</s>
              <span className="now">$3,997</span>
            </div>
            <div className="vs-pricetag">All-in · paid in full</div>

            <div className="vs-credit">
              <span className="vc-ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg></span>
              <div><strong>$10,000 scholarship credit applied.</strong> Redeem in the next 48 hours to lock in the $3,997 price.</div>
            </div>

            <Countdown />

            <button className="btn btn-primary btn-lg vs-cta" onClick={onApply}>Book a call <ArrowR /></button>
            <div className="vs-fuel">Plus $35/day (~$1,000/mo) in your own Meta account — your fuel, not our fee.</div>

            <div className="vs-spots">
              <div className="vs-spots-h"><span>This cohort</span><span>2 of 5 spots left</span></div>
              <div className="vs-spots-bar"><i /><i /><i /><i className="open" /><i className="open" /></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Countdown() {
  const [left, setLeft] = React.useState(null);
  React.useEffect(() => {
    const KEY = 'omg_scholarship_deadline';
    let target = parseInt(localStorage.getItem(KEY) || '0', 10);
    if (!target || target < Date.now()) {
      target = Date.now() + 48 * 3600 * 1000;
      localStorage.setItem(KEY, String(target));
    }
    const tick = () => setLeft(Math.max(0, target - Date.now()));
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  const ms = left == null ? 48 * 3600 * 1000 : left;
  const pad = (x) => String(x).padStart(2, '0');
  const h = Math.floor(ms / 3600000);
  const m = Math.floor(ms % 3600000 / 60000);
  const s = Math.floor(ms % 60000 / 1000);
  return (
    <div className="vs-clock">
      <span className="vc-label">Offer expires in</span>
      <div className="vc-digits">
        <div className="vc-unit"><b>{pad(h)}</b><i>hrs</i></div>
        <span className="vc-sep">:</span>
        <div className="vc-unit"><b>{pad(m)}</b><i>min</i></div>
        <span className="vc-sep">:</span>
        <div className="vc-unit"><b>{pad(s)}</b><i>sec</i></div>
      </div>
    </div>);

}

// K. Call-to-Action — 3 variants, all → the Diagnostic
function CtaTrio({ onApply }) {
  return (
    <section style={{ background: 'var(--jet-black)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">Three ways in</div>
          <h2 className="section">Every door opens on the same free Diagnostic.</h2>
        </div>
        <div className="cta-trio">
          <div className="cta-card">
            <span className="tag">Primary</span>
            <h4>Book your free Discovery Diagnostic</h4>
            <p>On the call we'll walk through your numbers and see if this program is right for you. We turn away 62% of applicants but everyone walks away from the call with a customized 90-day game plan. </p>
            <button className="btn btn-primary" onClick={onApply}>Book a call <ArrowR /></button>
          </div>
          <div className="cta-card">
            <span className="tag">Limited spots</span>
            <h4>Claim one of this cohort's venue spots</h4>
            <p>We don't onboard unlimited venues — the done-for-you build is hands-on, so each cohort is capped. Book a call now to hold your spot. </p>
            <button className="btn btn-emerald" onClick={onApply}>Book a call <ArrowR /></button>
          </div>
          <div className="cta-card">
            <span className="tag">No pressure</span>
            <h4>Just want to see if it fits?</h4>
            <p>The Diagnostic is the no-pressure way to look under the hood. We'll show you exactly how the engine would run for your venue. </p>
            <button className="btn btn-ghost" onClick={onApply}>Book a call <ArrowR /></button>
          </div>
        </div>
        <div className="cta-qualifier">
          This works if you've got open dates and you're ready to fund $35/day to fill them.
        </div>
      </div>
    </section>);

}

// Final word from the founder
function MegaCta({ onApply }) {
  return (
    <section style={{ background: 'var(--charcoal)' }}>
      <div className="wrap">
        <div className="founder">
          <div className="founder-photo">
            <img src="assets/founder-cover.png" alt="Dylan Johnson, Founder of OMG Rentals — built 2 venues past $35K/month, taught 1,500+ owners" />
          </div>
          <div className="founder-body">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Final word from the founder</div>
            <h2>You bring $35 a day. We bring four years of proof.</h2>
            <p className="lede" style={{ marginTop: 18 }}>
              A done-for-you install where you touch zero tech, and a guarantee tied to 10 qualified tours on your calendar. <strong style={{ color: '#fff' }}>The only venues that don't get results are the ones that never funded the engine</strong> — so now we require the fuel up front, and put everything else on us.
            </p>
            <p style={{ marginTop: 16, color: 'rgba(255,255,255,0.78)', fontSize: 15.5, lineHeight: 1.6 }}>
              — Dylan Johnson, founder of OMG Rentals. Built two of his own venues past $35,000/month and taught 1,500+ owners.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
              <button className="btn btn-primary btn-lg" onClick={onApply}>Book a call <ArrowR /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' })}>I still have questions</button>
            </div>
            <div style={{ fontSize: 13, color: 'var(--cool-grey)', marginTop: 16 }}>$10,000 scholarship credit · 1,500+ owners taught · backed by the 90-day 10-tour guarantee

            </div>
          </div>
        </div>
      </div>
    </section>);

}

// L. FAQ — Objections Handled
function Faq() {
  const [open, setOpen] = React.useState(0);
  const items = [
  {
    q: "Is the $35/day paid to you?",
    a: "No. It goes into your own Meta ad account — your login, your card, your money. It's the fuel that reaches your future clients, and it's the reason we can guarantee the tours. Think of it as filling your own gas tank, not paying a toll."
  },
  {
    q: "What happens if you don't hit the 10 tours?",
    a: "As long as you funded your $35/day, approved campaigns on time, and hosted the tours we booked — we refund your full $4,000 and keep working for free until you get to 10 qualified, shown tours. The risk is ours."
  },
  {
    q: "What counts as a 'shown tour'?",
    a: "The decision-maker (or their direct spouse/parent), event type and budget matching what you want, booked on your calendar, and it actually happens — in person or live video. We don't pad the count with no-shows or tire-kickers."
  },
  {
    q: "I'm not technical and don't have time to learn software.",
    a: "Perfect — that's exactly who this is built for. You touch zero tech. We install the ad account, the funnel, the GHL system, the automations, and the follow-up for you. You approve copy and host tours. That's the entire job on your side."
  },
  {
    q: "I've been burned by an agency before.",
    a: "So have most of the owners we work with. The difference: agencies rent you results and you own nothing the day you stop paying. Here, you own the entire engine — ads, funnel, CRM, data — and the guarantee is in writing. We also require the ad spend specifically so we can stand behind the outcome instead of hiding behind “well, you didn't give it enough budget.”"
  },
  {
    q: "$4,000 is a lot right now.",
    a: "Two things. One: the guarantee targets $10,000+ in new contracts, so one or two booked events typically covers the entire fee. Two: you can split it 2-pay ($2,250), and the $500 Diagnostic that gets you started is credited to the Sprint. If the full done-for-you build genuinely isn't in reach, ask us about the DIY Booking OS Kit ($997) — the same GHL snapshot, quiz funnel, ad creative, and playbooks to run yourself. No done-for-you, no guarantee, but an honest lesser path."
  },
  {
    q: "How fast will I actually see something?",
    a: "Ads are live in Week 1. First tours usually land inside 14 days. While paid traffic ramps, our Warm-List Reactivation Blast books tours from people already on your list — so you often see early wins in the first two weeks."
  },
  {
    q: "Does this work for my city / my type of venue?",
    a: "The engine works on the same principle everywhere: qualified local demand for event space exists, and we put tested creative in front of it. We tune the creative and targeting to your market and your top event types. The 10-tour guarantee stands behind it."
  },
  {
    q: "I already run some ads / already have a CRM.",
    a: "Great — you're ahead of most. We'll either rebuild it properly or fold what's working into the Booking OS. Either way you end up with one owned system instead of disconnected pieces, and the follow-up gets handled so nothing leaks."
  },
  {
    q: "Can I get the ads live even faster?",
    a: "Yes — at checkout you can add the 48-Hour Launch Concierge (+$297) to go live in 2 business days instead of within Week 1."
  },
  {
    q: "What do you need from me to start?",
    a: "Three things: fund your $35/day in your own Meta account, approve campaign copy when we send it, and host the tours we book. We handle everything else."
  }];

  return (
    <section id="faq" style={{ background: 'var(--jet-black)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">FAQ</div>
          <h2 className="section">Objections, handled.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-row" + (isOpen ? " open" : "")}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="q">{it.q}</span>
                  <span className="chev">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 5v14M5 12h14" />
                    </svg>
                  </span>
                </button>
                {isOpen && <div className="a">{it.a}</div>}
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// Inline booking calendar embed (placeholder for the live GHL / Calendly widget)
function BookSection() {
  const cells = [null, null, ...Array.from({ length: 30 }, (_, i) => i + 1)];
  const avail = new Set([15, 16, 17, 18, 22, 23, 24, 25]);
  const sel = 17;
  const slots = ['10:00 AM', '11:30 AM', '1:00 PM', '2:30 PM', '4:00 PM'];
  return (
    <section id="book" style={{ background: 'var(--jet-black)', borderTop: '1px solid var(--line-dark)' }}>
      <div className="wrap">
        <div className="section-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="eyebrow">Book a call</div>
          <h2 className="section" style={{ marginInline: 'auto' }}>Pick a time. We'll map your 6-week build.</h2>
          <p className="lede" style={{ marginInline: 'auto' }}>Grab a slot for your $500 Calendar Diagnostic right here — no jumping to another page. We map your exact path to 10 tours, and the $500 comes off your build when you start.</p>
        </div>
        <div className="book-wrap">
          <div className="book-embed">
            <div className="book-cal">
              <div className="book-cal-h">
                <span className="m">September 2026</span>
                <span className="nav">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6" /></svg>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
                </span>
              </div>
              <div className="book-dow"><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div>
              <div className="book-grid">
                {cells.map((n, i) => {
                  if (n === null) return <div key={i} className="book-day" />;
                  const cls = n === sel ? 'book-day sel' : avail.has(n) ? 'book-day avail' : 'book-day muted';
                  return <div key={i} className={cls}>{n}</div>;
                })}
              </div>
            </div>
            <div className="book-slots">
              <div className="sh">Thursday, September 17</div>
              <div className="sd">Times shown in your local timezone</div>
              {slots.map((s, i) =>
              <div key={i} className={"book-slot" + (i === slots.length - 1 ? " primary" : "")}>{s}</div>
              )}
            </div>
          </div>
          <div className="book-foot">Placeholder — connect your live GHL / Calendly booking calendar here.</div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="site">
      <div className="wrap">
        <div>
          <img src="assets/OMG-Rentals-Logo-Black.png" alt="OMG Rentals" style={{ height: 30 }} />
          <div style={{ marginTop: 16, color: 'rgba(255,255,255,0.6)', maxWidth: 340, fontSize: 14, lineHeight: 1.55 }}>
            The operating system for modern venues. The Six-Figure Venue Engine is the done-for-you, ad-fueled Booking OS we build and run on top of OMG Rentals.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="eyebrow" style={{ color: 'var(--cool-grey)' }}>Product</div>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>App</a>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Directory</a>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Course</a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="eyebrow" style={{ color: 'var(--cool-grey)' }}>This program</div>
            <a href="#mechanism" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>The engine</a>
            <a href="#guarantee" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Guarantee</a>
            <a href="#faq" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>FAQ</a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="eyebrow" style={{ color: 'var(--cool-grey)' }}>Company</div>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>About</a>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Contact</a>
            <a style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Terms</a>
          </div>
        </div>
      </div>
      <div className="wrap end">
        © 2026 OMG Rentals · The Six-Figure Venue Engine · Atlanta, GA · The $35/day ad spend is funded in your own Meta account, never paid to OMG.
      </div>
    </footer>);

}

Object.assign(window, { ValueStack, Bonuses, Guarantees, Pricing, CtaTrio, MegaCta, BookSection, Faq, Footer, Row, Seal });