/* VillaCash — Premise, ValueStack, Reels, BookingDemo */
const { useState: useStateM, useEffect: useEffectM, useMemo: useMemoM, useRef: useRefM } = React;

/* ---------------- §01 Premise ---------------- */
function Premise() {
  const figRef = useRefM(null);
  useEffectM(() => {
    const el = figRef.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const prog = (window.innerHeight - r.top) / (window.innerHeight + r.height);
      const slot = el.querySelector('image-slot, .pfill, video');
      if (slot) slot.style.transform = `scale(1.12) translateY(${(prog - 0.5) * -36}px)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="section premise on-sand" id="contents">
      <div className="wrap">
        <Reveal className="smark"><span className="num">§ 01 · Premise</span><span className="ln"></span></Reveal>
        <div className="premise-grid">
          <div>
            <Reveal as="p" className="premise-statement">
              Most villas are run like <em>hobbies</em>. The platforms keep the upside.
              Villa Cash gives you the playbook the top owners use to take back
              <b> their calendar, their pricing, and their margin.</b>
            </Reveal>
            <Reveal delay={2} style={{ marginTop: 30, display: 'flex', gap: 36, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 40, letterSpacing: '-.03em' }}>
                  <CountUp to={15} suffix="–18%" sep={false} />
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)', maxWidth: '22ch' }}>typical OTA commission you stop paying</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 40, letterSpacing: '-.03em', color: 'var(--accent)' }}>
                  100<span style={{ fontSize: 24 }}>%</span>
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)', maxWidth: '22ch' }}>of direct-booking revenue stays yours</div>
              </div>
            </Reveal>
          </div>
          <Reveal delay={1} className="premise-fig">
            <div ref={figRef} style={{ position: 'absolute', inset: 0 }}>
              <BgVideo className="premise-video" src={`${VR}/videos/villa-golden-hour.mp4`} poster={`${VR}/images/reel-hillside.jpg`} />
            </div>
            <span className="premise-tag">villa exterior · golden hour</span>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- What's inside — value stack ---------------- */
function ValueStack() {
  return (
    <section className="section stack on-sand">
      <div className="wrap">
        <div className="stack-head">
          <div>
            <Reveal className="smark"><span className="num">The system</span><span className="ln"></span></Reveal>
            <Reveal as="h2" className="h2" delay={1}>What’s <em>inside.</em></Reveal>
          </div>
          <Reveal className="stack-total" delay={2}>
            <div className="k">Seven systems</div>
            <div className="v"><CountUp to={7} dur={1200} /></div>
          </Reveal>
        </div>

        <div className="stack-list">
          {VALUE_ITEMS.map((it, i) => (
            <Reveal key={it.r} className="stack-item" delay={Math.min(4, (i % 4) + 1)}>
              <div className="rn">{it.r}.</div>
              <div className="body">
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Reels gallery ---------------- */
const REELS = [
  { cap: 'Sunset terrace',   meta: '0:14 · 4K', v: 'reel-villa-hero', img: 'reel-villa-hero', p: 'tt', song: 'Costa del Sol — ambient', likes: '38.2K', cmt: '412',  shares: '1.2K' },
  { cap: 'Infinity pool',    meta: '0:11 · 4K', v: 'reel-villa-pool', img: 'reel-villa-pool', p: 'ig', song: 'Original audio · yourvilla', likes: '12.4K', cmt: '286', shares: '742' },
  { cap: 'The master suite', meta: '0:16 · 4K', v: 'reel-bedroom',    img: 'reel-bedroom',    p: 'yt', subs: '24.8K', likes: '9.1K',  cmt: '184' },
  { cap: 'Jacuzzi terrace',  meta: '0:09 · 4K', v: 'reel-jacuzzi',    img: 'reel-jacuzzi',    p: 'tt', song: 'Sunset Suite — lo-fi', likes: '21.7K', cmt: '198', shares: '634' },
  { cap: 'Hillside retreat', meta: '0:13 · 4K', v: 'reel-hillside',   img: 'reel-hillside',   p: 'ig', song: 'Mediterranea — original mix', likes: '15.9K', cmt: '312', shares: '511' },
];

/* ---- Tiny SVG icon set used across platform overlays ---- */
const SVG = (path, fill = 'currentColor', extra = {}) => (
  <svg viewBox="0 0 24 24" width="100%" height="100%" fill={fill} {...extra}>{path}</svg>
);
const Ico = {
  heartFill: SVG(<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>),
  heartLine: SVG(<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0 1 7.5 3c1.74 0 3.41.81 4.5 2.09A6.04 6.04 0 0 1 16.5 3 5.5 5.5 0 0 1 22 8.5c0 3.78-3.4 6.86-8.55 11.54z" fill="none" stroke="currentColor" strokeWidth="1.6"/>),
  chat: SVG(<path d="M21.6 11.5a8 8 0 0 1-12.4 6.6L3.5 19.5l1.5-5A8 8 0 1 1 21.6 11.5z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>),
  plane: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></g>),
  bookmark: SVG(<path d="M6 3h12v18l-6-4.5L6 21z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>),
  dotsV: SVG(<g fill="currentColor"><circle cx="12" cy="5" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="12" cy="19" r="1.7"/></g>),
  share: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round"><path d="M5 19V8a3 3 0 0 1 3-3h6"/><path d="m11 8 3-3-3-3"/><path d="M9 14h12"/><path d="m17 10 4 4-4 4"/></g>),
  thumbsUp: SVG(<path d="M7 11v10H4V11h3zm3.5 10c-.6 0-1.1-.4-1.3-1l-2-7c0-.1-.2-1 .7-1H13l1.1-5c.1-.6.7-1 1.3-1 1.7 0 3 1.3 3 3v3h2.4c1.3 0 2.3 1.2 2 2.5l-1.5 6c-.2 1-1.1 1.5-2 1.5h-8.7z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>),
  thumbsDown: SVG(<g transform="rotate(180 12 12)"><path d="M7 11v10H4V11h3zm3.5 10c-.6 0-1.1-.4-1.3-1l-2-7c0-.1-.2-1 .7-1H13l1.1-5c.1-.6.7-1 1.3-1 1.7 0 3 1.3 3 3v3h2.4c1.3 0 2.3 1.2 2 2.5l-1.5 6c-.2 1-1.1 1.5-2 1.5h-8.7z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></g>),
  remix: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round"><path d="m17 2 5 5-5 5"/><path d="M22 7H10a6 6 0 0 0 0 12h2"/><path d="m7 22-5-5 5-5"/><path d="M2 17h12a6 6 0 0 0 0-12h-2"/></g>),
  music: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3" fill="currentColor" stroke="none"/><circle cx="18" cy="16" r="3" fill="currentColor" stroke="none"/></g>),
  search: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></g>),
  camera: SVG(<g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><rect x="2" y="6" width="20" height="13" rx="3"/><circle cx="12" cy="12.5" r="3.5"/><path d="M8 6V4h8v2"/></g>),
  ytLogo: (
    <svg viewBox="0 0 24 17" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
      <rect width="24" height="17" rx="3.5" fill="#FF0033"/>
      <path d="m9.5 4.6 6.2 3.9-6.2 3.9z" fill="#fff"/>
    </svg>
  ),
  back: SVG(<path d="m15 5-7 7 7 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>),
};

/* ---- Per-platform overlays ---- */
function TTOverlay({ r }) {
  return (
    <>
      <div className="ptop tt">
        <span className="ttab">Following</span>
        <span className="ttab on">For You</span>
        <span className="ic-r"><span className="ic">{Ico.search}</span></span>
      </div>
      <div className="prail tt">
        <div className="r-av"><span className="dot-plus">+</span></div>
        <div className="r-item"><span className="ic">{Ico.heartFill}</span><b>{r.likes}</b></div>
        <div className="r-item"><span className="ic">{Ico.chat}</span><b>{r.cmt}</b></div>
        <div className="r-item"><span className="ic ic-fill">{Ico.bookmark}</span><b>Save</b></div>
        <div className="r-item"><span className="ic">{Ico.share}</span><b>{r.shares}</b></div>
        <div className="r-disc" aria-hidden="true"></div>
      </div>
      <div className="pbot tt">
        <div className="phandle">@yourvilla</div>
        <div className="pcap">{r.cap} ✦ direct booking link in bio</div>
        <div className="pmusic"><span className="ic">{Ico.music}</span><span className="ticker">{r.song}</span></div>
      </div>
    </>
  );
}

function IGOverlay({ r }) {
  return (
    <>
      <div className="ptop ig">
        <span className="ic-l"><span className="ic">{Ico.back}</span></span>
        <span className="ig-title">Reels</span>
        <span className="ic-r"><span className="ic">{Ico.camera}</span></span>
      </div>
      <div className="prail ig">
        <div className="r-item"><span className="ic">{Ico.heartLine}</span><b>{r.likes}</b></div>
        <div className="r-item"><span className="ic">{Ico.chat}</span><b>{r.cmt}</b></div>
        <div className="r-item"><span className="ic">{Ico.plane}</span><b>{r.shares}</b></div>
        <div className="r-item"><span className="ic">{Ico.bookmark}</span></div>
        <div className="r-item"><span className="ic">{Ico.dotsV}</span></div>
        <div className="r-av ig"><span></span></div>
      </div>
      <div className="pbot ig">
        <div className="phandle">
          <span className="av"></span>
          <b>yourvilla</b>
          <span className="follow">Follow</span>
        </div>
        <div className="pcap">{r.cap}. booked direct, no OTA fees.</div>
        <div className="pmusic"><span className="ic">{Ico.music}</span><span className="ticker">{r.song}</span></div>
      </div>
    </>
  );
}

function YTOverlay({ r }) {
  return (
    <>
      <div className="ptop yt">
        <span className="yt-mark"><span className="ic">{Ico.ytLogo}</span><b>Shorts</b></span>
        <span className="ic-r"><span className="ic">{Ico.search}</span></span>
      </div>
      <div className="prail yt">
        <div className="r-item"><span className="ic">{Ico.thumbsUp}</span><b>{r.likes}</b></div>
        <div className="r-item"><span className="ic">{Ico.thumbsDown}</span><b>Dislike</b></div>
        <div className="r-item"><span className="ic">{Ico.chat}</span><b>{r.cmt}</b></div>
        <div className="r-item"><span className="ic">{Ico.remix}</span><b>Remix</b></div>
        <div className="r-item"><span className="ic">{Ico.share}</span><b>Share</b></div>
        <div className="r-av yt"><span></span></div>
      </div>
      <div className="pbot yt">
        <div className="phandle">
          <span className="av yt"></span>
          <b>@yourvilla</b>
          <span className="subs">Subscribe</span>
        </div>
        <div className="pcap">{r.cap} · book direct at yourvilla.com</div>
      </div>
    </>
  );
}

function PlatformUI({ r }) {
  if (r.p === 'tt') return <TTOverlay r={r} />;
  if (r.p === 'yt') return <YTOverlay r={r} />;
  return <IGOverlay r={r} />;
}
function Reels() {
  return (
    <section className="section reels">
      <div className="wrap">
        <Reveal className="smark"><span className="num">§ I · Reels Launchpad</span><span className="ln"></span></Reveal>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 30, flexWrap: 'wrap' }}>
          <Reveal as="h2" className="h2" delay={1} style={{ color: '#fff', maxWidth: '14ch' }}>
            10 reels. <em>One</em> opening month.
          </Reveal>
          <Reveal as="p" className="lead" delay={2}>
            Short videos for your villa, ready to post on Instagram, Reels and TikTok. Ten in your
            first 30 days. Keep them coming after that from <b style={{ color: '#fff' }}>€249/mo</b>.
          </Reveal>
        </div>

        <Reveal className="reels-stage" delay={2}>
          {REELS.map((r, i) => (
            <div className={`phone p${i}`} key={i}>
              <div className="screen">
                <div className="notch"></div>
                <BgVideo className="reel-video" src={`${VR}/videos/${r.v}.mp4`} poster={`${VR}/images/${r.img}.jpg`} />
                <div className={`ui plat plat-${r.p}`}>
                  <PlatformUI r={r} />
                </div>
              </div>
            </div>
          ))}
        </Reveal>

        <Reveal className="reels-foot" delay={3}>
          <div><b>10</b> reels in month one</div>
          <div><b>4K</b> master files</div>
          <div><b>3</b> formats · Reels, TikTok, Stories</div>
          <div><b>0</b> shoots on your end</div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Interactive booking engine ---------------- */
const NIGHTLY_BASE = 420, NIGHTLY_PEAK = 560, CLEANING = 180, OTA_RATE = 0.15;
function priceFor(day, dow) {
  const peak = (day >= 8 && day <= 18) || dow === 5 || dow === 6;
  return peak ? NIGHTLY_PEAK : NIGHTLY_BASE;
}
const BOOKED = [24, 25, 26];

function BookingDemo() {
  // August 2026: Aug 1 2026 is a Saturday (getDay 6)
  const daysInMonth = 31;
  const firstDow = new Date(2026, 7, 1).getDay(); // 6 = Sat
  const cells = useMemoM(() => {
    const arr = [];
    for (let i = 0; i < firstDow; i++) arr.push(null);
    for (let d = 1; d <= daysInMonth; d++) arr.push(d);
    return arr;
  }, []);

  const [checkIn, setCheckIn] = useStateM(8);
  const [checkOut, setCheckOut] = useStateM(15);

  const onPick = (d) => {
    if (BOOKED.includes(d)) return;
    if (checkIn === null || (checkIn !== null && checkOut !== null)) {
      setCheckIn(d); setCheckOut(null); return;
    }
    if (d <= checkIn) { setCheckIn(d); setCheckOut(null); return; }
    // ensure no booked day inside range
    for (let x = checkIn + 1; x <= d; x++) if (BOOKED.includes(x)) { setCheckIn(d); setCheckOut(null); return; }
    setCheckOut(d);
  };

  const summary = useMemoM(() => {
    if (checkIn === null || checkOut === null) return null;
    let subtotal = 0, nights = 0;
    for (let d = checkIn; d < checkOut; d++) {
      const dow = new Date(2026, 7, d).getDay();
      subtotal += priceFor(d, dow); nights++;
    }
    const gross = subtotal + CLEANING;
    const commission = Math.round(gross * OTA_RATE);
    return { nights, subtotal, gross, commission };
  }, [checkIn, checkOut]);

  const cellClass = (d) => {
    if (d === null) return 'cal-cell empty';
    const dow = new Date(2026, 7, d).getDay();
    const peak = priceFor(d, dow) === NIGHTLY_PEAK;
    let cls = 'cal-cell sel-able' + (peak ? ' peak' : '');
    if (BOOKED.includes(d)) return 'cal-cell disabled';
    if (checkIn !== null && checkOut !== null) {
      if (d === checkIn || d === checkOut) cls += ' endpoint';
      else if (d > checkIn && d < checkOut) cls += ' in-range';
    } else if (d === checkIn) cls += ' endpoint';
    return cls;
  };

  return (
    <section className="section booking on-sand">
      <div className="wrap booking-grid">
        <div className="booking-copy">
          <Reveal className="smark"><span className="num">§ II · Direct Booking Engine</span><span className="ln"></span></Reveal>
          <Reveal as="h2" className="h2" delay={1}>Keep <em>100%.</em><br />Every booking.</Reveal>
          <Reveal as="p" className="lead" delay={2} style={{ marginTop: 18 }}>
            A site built to convert. Guests reserve and pay directly. The 15% Airbnb
            and Booking.com would have taken stays in your pocket. Try it: pick a check-in and check-out.
          </Reveal>
          <Reveal delay={2}>
            <div className="feat"><span className="ic">✓</span><div><h4>No commission. Ever.</h4><p>Direct payments, your terms, full guest data.</p></div></div>
            <div className="feat"><span className="ic">€</span><div><h4>Pricing that moves with the season</h4><p>Premium peak weeks. Filled shoulder season.</p></div></div>
          </Reveal>
        </div>

        <Reveal className="engine" delay={2}>
          <div className="engine-top">
            <span className="url"><span className="lock">🔒</span>villacaprera.com<span style={{opacity:.5}}>/book</span></span>
            <span className="badge-direct">DIRECT · 0% FEES</span>
          </div>
          <div className="engine-villa">
            <div className="thumb"><image-slot id="engine-thumb" shape="rounded" radius="12" fit="cover" src={`${VR}/images/villa-caprera.jpg`} placeholder="Villa Caprera"></image-slot></div>
            <div>
              <h3>Villa Caprera</h3>
              <div className="loc">📍 Puglia, Italy · sleeps 8</div>
              <div className="stars">★★★★★ <span style={{ color: 'var(--muted)', fontFamily: 'var(--mono)', fontSize: 11 }}>4.97 · 128 reviews</span></div>
            </div>
          </div>

          <div className="cal">
            <div className="cal-head">
              <button aria-label="prev">‹</button>
              <span className="mo">August 2026</span>
              <button aria-label="next">›</button>
            </div>
            <div className="cal-dow">{['Su','Mo','Tu','We','Th','Fr','Sa'].map(d => <span key={d}>{d}</span>)}</div>
            <div className="cal-grid">
              {cells.map((d, i) => {
                if (d === null) return <div key={i} className="cal-cell empty"></div>;
                const dow = new Date(2026, 7, d).getDay();
                const p = priceFor(d, dow);
                return (
                  <div key={i} className={cellClass(d)} onClick={() => onPick(d)}>
                    <span className="pday">{d}</span>
                    {!BOOKED.includes(d) && <span className="pp">{p}</span>}
                    {BOOKED.includes(d) && <span className="pp">×</span>}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="engine-summary">
            {summary ? (
              <>
                <div className="sum-row"><span className="lbl">{summary.nights} nights · Aug {checkIn}–{checkOut}</span><span className="amt">{fmtEuro(summary.subtotal)}</span></div>
                <div className="sum-row"><span className="lbl">Cleaning &amp; linens</span><span className="amt">{fmtEuro(CLEANING)}</span></div>
                <div className="sum-row ota"><span className="lbl">If booked via OTA (−15%)</span><span className="amt">−{fmtEuro(summary.commission)}</span></div>
                <div className="sum-row saved"><span className="lbl">✓ You keep with VillaCash</span><span className="amt">+{fmtEuro(summary.commission)}</span></div>
                <div className="sum-total"><span className="lbl">Guest pays you</span><span className="amt">{fmtEuro(summary.gross)}</span></div>
                <div className="engine-hint">That’s <b style={{color:'var(--accent)'}}>{fmtEuro(summary.commission)}</b> back in your pocket, on a single booking.</div>
              </>
            ) : (
              <div className="engine-hint" style={{ padding: '14px 0' }}>Pick a check-out date to see what you keep →</div>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Reels Plans (after launch month) ---------------- */
function ReelsPlans() {
  return (
    <section className="section reels-plans on-sand" id="reels-plans">
      <div className="wrap">
        <Reveal className="smark"><span className="num">§ Ia · Members only · keep them rolling</span><span className="ln"></span></Reveal>
        <div className="rp-head">
          <Reveal as="h2" className="h2" delay={1}>
            Your launch month, <em>then</em> a monthly rhythm.
          </Reveal>
          <Reveal as="p" className="lead" delay={2}>
            The first 10 reels come with your membership. After that, pick the cadence that fits
            your calendar. Cancel any time.
          </Reveal>
        </div>

        <Reveal className="rp-members" delay={2}>
          <span className="rp-mline" aria-hidden="true"></span>
          <span className="rp-mtxt">
            <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
            Members-only pricing · agency retail <span className="rp-x">€100–500 / reel</span>
          </span>
          <span className="rp-mline" aria-hidden="true"></span>
        </Reveal>

        <div className="rp-grid">
          <Reveal className="rp-card" delay={2}>
            <div className="rp-tag">Starter</div>
            <div className="rp-price"><span className="cur">€</span><span className="num">249</span><span className="per">/mo</span></div>
            <div className="rp-cad">15 reels per month · every other day</div>
            <ul className="rp-list">
              <li><span className="ck">✓</span> 15 short videos, ready to post</li>
              <li><span className="ck">✓</span> 4K masters in Reels, TikTok and Stories formats</li>
              <li><span className="ck">✓</span> Captions, hooks and posting schedule included</li>
              <li><span className="ck">✓</span> Cancel any time</li>
            </ul>
            <div className="rp-foot">about €16.60 per reel</div>
          </Reveal>

          <Reveal className="rp-card featured" delay={3}>
            <div className="rp-badge">Most popular</div>
            <div className="rp-tag">Daily</div>
            <div className="rp-price"><span className="cur">€</span><span className="num">399</span><span className="per">/mo</span></div>
            <div className="rp-cad">30 reels per month · one a day</div>
            <ul className="rp-list">
              <li><span className="ck">✓</span> 30 short videos, one for every day</li>
              <li><span className="ck">✓</span> Full calendar coverage across all three platforms</li>
              <li><span className="ck">✓</span> Priority queue and first access to new templates</li>
              <li><span className="ck">✓</span> Cancel any time</li>
            </ul>
            <div className="rp-foot">about €13.30 per reel · 20% off vs Starter</div>
          </Reveal>
        </div>

        <Reveal className="rp-note" delay={4}>
          The membership is yours either way. Pick a plan only if you want one. Most owners run Daily in high season and step down to Starter in the off months.
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Premise, ValueStack, Reels, ReelsPlans, BookingDemo });
