// Six-Figure Venue Engine — top sections: Header, Hero (A), Stat Ticker, Pattern Interrupt (B), Future Pacing (C), Why Stuck (D)

function Header({ onApply }) {
  return (
    <header className="site">
      <div className="wrap">
        <a style={{ display: 'inline-flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/OMG-Rentals-Logo-Black.png" alt="OMG Rentals" style={{ height: 30 }} />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7CD7A8', paddingLeft: 12, borderLeft: '1px solid rgba(255,255,255,0.12)' }}>
            <span>Six-Figure Venue Engine</span>
          </span>
        </a>
        <nav>
          <a href="#mechanism">The engine</a>
          <a href="#proof">Proof</a>
          <a href="#offer">What's included</a>
          <a href="#guarantee">Guarantee</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
          <button className="btn btn-primary" onClick={onApply} style={{ padding: '10px 16px', fontSize: 14 }}>Book a call <ArrowR /></button>
        </nav>
      </div>
    </header>);

}

function ArrowR() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14" /><path d="m13 5 7 7-7 7" />
    </svg>);

}

// A. Headline + Subheadline — 5 versions (toggle via Tweaks)
const HEADLINES = [
{
  eyebrow: "The $76K/mo engine",
  headline: <span>The Same Engine That Took One Venue to <em>$76K a Month</em> — Built and Run For You in <em>6 weeks.</em></span>,
  sub: "A done-for-you booking engine for independent venues. You fund the ads, we book the tours. 10 qualified tours and $10,000 in new contracts, or we work free until you do."
},
{
  eyebrow: "The deal in seven words",
  headline: <span>You fund the ads. <em>We guarantee the tours.</em></span>,
  sub: "A 90-day done-for-you Booking OS for independent venues. 10 qualified, shown tours on your calendar, on the path to $10,000 in new contracts. You touch zero tech."
},
{
  eyebrow: "Done for you · you own it",
  headline: <span>From empty dates to a <em>full tour calendar</em> in 90 days — done for you.</span>,
  sub: "Not an agency you rent. Not a course you finish alone. An ad-fueled Booking OS you own, run for you, backed by a 10-tour guarantee."
},
{
  eyebrow: "Fill the calendar",
  headline: <span>Your Saturdays shouldn't be empty. In <em>90 days, they won't be.</em></span>,
  sub: "We install and run the entire booking engine — ads, quiz funnel, CRM, follow-up — and put 10 qualified, shown tours on your calendar, guaranteed. You fund $35/day and host the tours. That's it."
},
{
  eyebrow: "The $76K/mo engine",
  headline: <span>The same engine that took one venue to <em>$76K a month</em> — built and run for you in 90 days.</span>,
  sub: "Fund $35/day in your own Meta account. We do the rest and guarantee 10 qualified, shown tours, or we refund the $4,000 and keep working free."
}];


function Hero({ variant = 0, onApply }) {
  const h = HEADLINES[variant] || HEADLINES[0];
  return (
    <section className="hero" data-comment-anchor="3cb4ee4dc4-section-67-5">
      <div className="hero-inner reveal" data-comment-anchor="2bc4e2a785-div-68-7">
        <div className="hero-copy">
          <div className="eyebrow" style={{ marginBottom: 22 }}>{h.eyebrow}</div>
          <h1 data-comment-anchor="2d7e2bc3df-h1-70-9">{h.headline}</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: 600 }} data-comment-anchor="bf783a6799-p-71-9">{h.sub}</p>
          <div className="hero-meta">
            <button className="btn btn-primary btn-lg" onClick={onApply} data-comment-anchor="e5cbf55e33-button-73-11">Book a call <ArrowR /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => document.getElementById('mechanism')?.scrollIntoView({ behavior: 'smooth' })}>How the engine works</button>
          </div>
        </div>
        <div className="hero-visual">
          <div className="vsl" data-comment-anchor="vsl-placeholder" style={{ cursor: 'default' }}>
            <iframe
              src="https://www.loom.com/embed/7d93a0222afd4434af45ba36468ada1d?hide_owner=true&hide_share=true&hideEmbedTopBar=true"
              title="The Six-Figure Venue Engine"
              frameBorder="0"
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, zIndex: 2 }}
            ></iframe>
          </div>
        </div>
      </div>
    </section>);

}

function StatTicker() {
  return (
    <div className="ticker">
      <div className="wrap">
        <div className="row">
          <div><strong>$35K → $75K</strong><span>in a single month · Mike R.</span></div>
          <div><strong>$76K/mo</strong><span>from one venue space · Shamarly</span></div>
          <div><strong>136 tours</strong><span>+700% in one quarter</span></div>
          <div><strong>53 events</strong><span>booked in 92 days</span></div>
        </div>
      </div>
    </div>);

}

// B. Pattern Interrupt / Call-Out Opening
function PatternInterrupt() {
  return (
    <section style={{ background: 'var(--jet-black)', borderTop: '1px solid var(--line-dark)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }} className="pi-split">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Read this before you spend another dollar</div>
            <h2 className="big-quote">
              You don't have a marketing problem. You have an <em>engine</em> problem.
            </h2>
            <p className="lede" style={{ marginTop: 24, fontSize: 17 }}>
              You've got a beautiful space. People walk through and say "wow." But the calendar still has holes — and every empty Saturday is revenue that's gone forever. You can't sell it back.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignSelf: 'center' }}>
            {[
            "Inquiries leak — a form comes in at 9pm, you reply at 11am, they've already booked somewhere else.",
            "Tire-kickers eat your time — wrong budget, wrong date, not even the decision-maker.",
            "You've never put consistent ad spend behind your space, so demand stays a trickle.",
            "Every “solution” so far handed you more software to learn — and you run a venue, not a marketing department."].
            map((t, i) =>
            <div key={i} style={{
              display: 'flex', gap: 14, alignItems: 'flex-start',
              padding: '14px 18px',
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid var(--line-dark)',
              borderRadius: 12,
              fontSize: 15.5, lineHeight: 1.45
            }}>
                <span style={{ color: '#FF6B6B', fontWeight: 700, flex: '0 0 18px' }}>✕</span>
                <span>{t}</span>
              </div>
            )}
            <div style={{ marginTop: 12, padding: '20px 22px', background: 'var(--emerald-deep)', border: '1px solid rgba(124,215,168,0.25)', borderRadius: 12 }}>
              <strong style={{ color: '#7CD7A8', fontWeight: 700 }}>We fix that — completely, and for you.</strong>{' '}
              <span style={{ color: 'rgba(255,255,255,0.85)' }}>You won't learn ads or a CRM. You fund $35/day into your own account and host the tours. We build and run everything in between.</span>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) { .pi-split { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </div>
    </section>);

}

// C. Future Pacing
function FuturePacing() {
  return (
    <section style={{ background: 'var(--charcoal)', borderBlock: '1px solid var(--line-dark)' }}>
      <div className="wrap">
        <div className="split">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Fast forward · 90 days</div>
            <h2 className="section">Open your calendar. See <span style={{ color: '#7CD7A8' }}>booked tours,</span> not empty dates.</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 32, fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.82)' }}>
              <p>It's a Monday morning. There are <strong style={{ color: '#fff' }}>tours booked</strong> — Tuesday, Thursday, Saturday. Not "leads." Not "maybes."</p>
              <p>Real, qualified people who already told a quiz funnel their event type, date, guest count, and budget <em>before</em> they hit your calendar.</p>
              <p>You didn't write an ad or build a funnel. You approved some copy three months ago, put $35 a day behind your space, and the engine has run ever since.</p>
              <p>Your phone buzzes — an AI follow-up just booked another tour while you poured coffee. The lead came in at 9:14pm; it got answered at 9:14pm. Nothing leaks anymore.</p>
            </div>
            <div style={{ marginTop: 28, padding: '18px 20px', background: 'var(--emerald-deep)', border: '1px solid rgba(124,215,168,0.22)', borderRadius: 12, fontSize: 14.5, color: 'rgba(255,255,255,0.8)' }}>
              <strong style={{ color: '#7CD7A8' }}>And you own all of it.</strong>{' '}
              The ads, the funnel, the CRM, the data. It doesn't disappear if you ever walk away — that one Saturday contract more than covers the whole engine.
            </div>
          </div>
          <div>
            <PipelineMock />
          </div>
        </div>
      </div>
    </section>);

}

function PipelineMock() {
  return (
    <div className="pipeline">
      <div className="pipe-head">
        <span style={{ color: '#fff', fontWeight: 600 }}>Venue Booking Pipeline · your GHL</span>
        <span>Sep 2026</span>
      </div>
      <div className="pipe-cols">
        <div>
          <div className="pipe-col-h"><span>Qualified lead</span><span className="count">14</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="pipe-card"><div className="nm">Sarah · Wedding</div><div className="mt">100 guests · Oct '26</div></div>
            <div className="pipe-card"><div className="nm">Reyes · Quince</div><div className="mt">$8K budget</div></div>
            <div className="pipe-card"><div className="nm">DT Corp</div><div className="mt">Holiday party</div></div>
          </div>
        </div>
        <div>
          <div className="pipe-col-h"><span>Tour Booked</span><span className="count" style={{ background: 'var(--emerald)' }}>10</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="pipe-card tour"><div className="nm" data-comment-anchor="465ea68e60-div-213-45">M. Carter</div><div className="mt">Sat · 2 PM</div></div>
            <div className="pipe-card tour"><div className="nm" data-comment-anchor="8e403105a5-div-214-45">J. Patel</div><div className="mt">Sun · 11 AM</div></div>
            <div className="pipe-card tour"><div className="nm" data-comment-anchor="adbb9686b5-div-215-45">B. Diaz</div><div className="mt">Tue · 6 PM</div></div>
            <div className="pipe-card tour"><div className="nm" data-comment-anchor="c207f3b77e-div-216-45">K. Lee</div><div className="mt">Fri · 4 PM</div></div>
          </div>
        </div>
        <div>
          <div className="pipe-col-h"><span>Deposit Paid</span><span className="count" style={{ background: 'var(--emerald-hover)', color: '#7CD7A8' }}>4</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div className="pipe-card deposit"><div className="nm" data-comment-anchor="dda9675ba6-div-222-48">H. Brooks</div><div className="mt">$3,200 · signed</div></div>
            <div className="pipe-card deposit"><div className="nm" data-comment-anchor="9435a7aa3e-div-223-48">A. Nguyen</div><div className="mt">$4,500 · signed</div></div>
            <div className="pipe-card deposit"><div className="nm" data-comment-anchor="f36b2c3f9e-div-224-48">R. Walsh</div><div className="mt">$2,800 · signed</div></div>
          </div>
        </div>
      </div>
    </div>);

}

// D. Why You're Stuck
function WhyStuck() {
  const reasons = [
  {
    n: "01",
    t: "No consistent paid traffic",
    b: "Referrals, a directory, word of mouth. Unpredictable, and none of it scales. Competitors who run ads quietly eat the dates you wanted."
  },
  {
    n: "02",
    t: "Leads leak out the bottom",
    b: "Someone fills a form at 9pm and you reply at 11am — they've booked elsewhere. Speed-to-lead wins venues, and by hand it's impossible mid-event."
  },
  {
    n: "03",
    t: "Drowning in tire-kickers",
    b: "Without a funnel that qualifies people first, you waste hours on tours that were never going to book — wrong budget, wrong date."
  },
  {
    n: "04",
    t: "You rented an agency",
    b: "$2,000+ a month for clicks you don't own. The second you stop paying, it all vanishes. You built nothing."
  },
  {
    n: "05",
    t: "You bought a course",
    b: "Information and a login. You were supposed to become a media buyer, funnel builder, and CRM admin in your spare time. You didn't."
  },
  {
    n: "06",
    t: "Tech is the thing you won't touch",
    b: "Ads Manager, A2P registration, pipelines, automations. Every “solution” so far handed you more software to learn."
  }];

  return (
    <section style={{ background: 'var(--jet-black)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">Why you're stuck</div>
          <h2 className="section">If your calendar has holes, it's almost never the venue.</h2>
          <p className="lede">None of these are character flaws. They're the predictable result of being sold tools instead of outcomes. The fix isn't trying harder on your own.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="why-grid">
          {reasons.map((r) =>
          <div key={r.n} className="nm-card">
              <div className="idx">{r.n}</div>
              <h3>{r.t}</h3>
              <p>{r.b}</p>
            </div>
          )}
        </div>
        <style>{`
          @media (max-width: 920px) { .why-grid { grid-template-columns: 1fr !important; } }
          @media (min-width: 921px) and (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        `}</style>
      </div>
    </section>);

}

Object.assign(window, { Header, Hero, StatTicker, PatternInterrupt, FuturePacing, WhyStuck, ArrowR, HEADLINES });