// BookUno Web — Business Sales Landing (main page)

/* ─── Hero floating pills ─────────────────────────────────────────────
   Decorative "live activity" cards that hug the hero phone. They render
   INSIDE `.phone-stage-wrap` (a position:relative box sized to the phone),
   so `pos` anchors each card to a corner OF THE PHONE — not the hero — and
   they stay glued to the device at any width. Negative left/right values
   let a card overhang the phone edge. To change/add/remove a card, edit
   this array; keep two per side so the phone stays balanced.
   ──────────────────────────────────────────────────────────────────── */
const HERO_PILLS = [
  {
    pos: { top: 70, left: -40 }, delay: '0.4s, 0s', pulse: true,
    avatar: { text: 'TH', bg: 'linear-gradient(135deg, #FFB4A2, #FF7B9C)' },
    title: 'New booking', sub: 'Tom · Skin fade · 14:30',
  },
  {
    pos: { bottom: 90, left: -40 }, delay: '1.4s, 1s',
    avatar: { text: 'HB', bg: 'linear-gradient(135deg, #A8E0FF, #7C5BFF)' },
    title: '5★ review', sub: 'Hannah · "Brilliant cut"',
  },
  {
    pos: { top: 70, right: -40 }, delay: '2.2s, 2s',
    icon: 'zap',
    title: '£186 today', sub: '+£42 vs avg Tuesday',
  },
  {
    pos: { bottom: 90, right: -40 }, delay: '3.0s, 2.5s',
    icon: 'bell',
    title: 'Reminder sent', sub: 'Jay · Tomorrow at 10:30',
  },
];

function HeroPill({ pos, delay, pulse, avatar, icon, title, sub }) {
  const Icon = icon ? Ic[icon] : null;
  return (
    <div className="float-pill hide-mobile" style={{ ...pos, animationDelay: delay }}>
      {avatar && (
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: avatar.bg, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800 }}>{avatar.text}</div>
      )}
      {Icon && <Icon style={{ width: 16, height: 16, color: 'var(--pri)' }}/>}
      <div>
        <div style={{ fontSize: 11.5, fontWeight: 700 }}>{title}</div>
        <div style={{ fontSize: 10.5, color: 'var(--muted)' }}>{sub}</div>
      </div>
      {pulse && <div className="pulse-dot"/>}
    </div>
  );
}

function PageBizSales({ logoVariant = 'default' }) {
  const heroRef = useSR(null);
  useMousePos(heroRef);

  return (
    <div className="web">
      <TopNav active="business" logoVariant={logoVariant} dark/>

      {/* ─── HERO ─── */}
      <section className="biz-hero" ref={heroRef} style={{ padding: '120px 0 110px' }}>
        <div className="container biz-hero-grid" style={{ position: 'relative' }}>
          <div>
            <Rv>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', fontSize: 12, fontWeight: 700, letterSpacing: 0.06, border: '1px solid rgba(255,255,255,0.08)' }}>
                <span className="pulse-dot"/>
                <span>3 MONTHS FREE · CANCEL ANYTIME</span>
              </div>
            </Rv>
            <Rv delay={80}>
              <h1 style={{ fontSize: 'clamp(48px, 7.2cqi, 92px)', fontWeight: 800, letterSpacing: -0.04, lineHeight: 0.95, marginTop: 22 }}>
                Your booking page.<br/>
                Your customers.<br/>
                <span style={{ background: 'linear-gradient(90deg, #FFCFE5 0%, #C8B8FF 60%, #A8D8FF 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
                  No commission.
                </span>
              </h1>
            </Rv>
            <Rv delay={160}>
              <p style={{ fontSize: 'clamp(15px, 1.7cqi, 20px)', opacity: 0.78, marginTop: 24, maxWidth: 480, lineHeight: 1.55 }}>
                Give your business <b style={{ color: '#fff' }}>its own booking page</b> — customers book themselves, reminders cut no-shows, and Bookuno never takes a cut. No marketplace pushing your rivals, no commission. Live in 5 minutes.
              </p>
            </Rv>
            <Rv delay={240}>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <button className="btn primary lg" type="button" onClick={() => { window.location.href = '/app.html#/auth?mode=register&type=business'; }} style={{ height: 56, padding: '0 26px', fontSize: 16 }}>
                  Start free trial <Ic.arrow style={{ width: 18, height: 18 }}/>
                </button>
                <button className="btn lg" type="button" onClick={() => { document.getElementById('how-it-works')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{ height: 56, padding: '0 26px', fontSize: 16, background: 'rgba(255,255,255,0.1)', color: '#fff', backdropFilter: 'blur(10px)' }}>
                  See how it works
                </button>
              </div>
            </Rv>
            <Rv delay={320}>
              <div style={{ marginTop: 26, display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', opacity: 0.78 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Ic.zap style={{ width: 14, height: 14 }}/>
                  <span style={{ fontSize: 13 }}><b style={{ color: '#fff' }}>Live in 5 minutes</b> — storefront, calendar &amp; payments</span>
                </div>
                <span style={{ fontSize: 13 }}>·</span>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
                  <Ic.shield style={{ width: 14, height: 14 }}/>3 months free · cancel anytime
                </div>
              </div>
            </Rv>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
            {/* Phone + its floating pills. Wrapper is position:relative so pills
                stay glued to the device corners instead of free-floating in hero. */}
            <div className="phone-stage-wrap" style={{ position: 'relative' }}>
              {HERO_PILLS.map((pill, i) => <HeroPill key={i} {...pill} />)}
              <Rv delay={300}><HeroPhone/></Rv>
            </div>
          </div>
        </div>
      </section>

      {/* ─── STAT BAND ─── */}
      <section className="stat-band">
        <div className="container">
          <div className="stat-grid">
            <CounterStat end={5} prefix="" suffix=" min" label="From signup to live storefront"/>
            <CounterStat end={3} suffix=" months" label="Free, cancel anytime"/>
            <CounterStat end={0} prefix="£" suffix="" label="Setup fees. None, ever."/>
            <CounterStat end={100} suffix="%" label="Yours to cancel, any time"/>
          </div>
        </div>
      </section>

      {/* ─── REAL CALENDAR STORY ─── */}
      <section id="how-it-works" className="section" style={{ background: '#fff' }}>
        <div className="container col-2" style={{ paddingTop: 56, paddingBottom: 56 }}>
          <Rv>
            <div>
              <div className="micro" style={{ color: 'var(--pri)' }}>HOW IT FEELS</div>
              <h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 4.6cqi, 56px)', fontWeight: 800, letterSpacing: -0.03, lineHeight: 1.04 }}>Watch your calendar fill itself.</h2>
              <p style={{ fontSize: 16, color: 'var(--muted)', marginTop: 16, lineHeight: 1.65, maxWidth: 480 }}>
                Your storefront goes live the moment you finish setup. Customers can find you on the Bookuno marketplace, book any service, and pay through the app — while you carry on with your day.
              </p>
              <div style={{ display: 'grid', gap: 14, marginTop: 26 }}>
                {[
                  { i: Ic.zap, t: 'Real-time availability — no double bookings, ever' },
                  { i: Ic.bell, t: 'Auto SMS + email reminders to cut no-shows' },
                  { i: Ic.card, t: 'Card on file optional — your rules, your way' },
                  { i: Ic.user, t: 'Customer history & notes stick to every booking' },
                ].map((p, i) => {
                  const Icon = p.i;
                  return (
                    <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14.5, lineHeight: 1.5 }}>
                      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--pri-50)', color: 'var(--pri)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                        <Icon style={{ width: 15, height: 15 }}/>
                      </div>
                      <span><b>{p.t.split(' — ')[0]}</b>{p.t.includes(' — ') ? ` — ${p.t.split(' — ')[1]}` : ''}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </Rv>
          <Rv delay={120}><CalendarFills/></Rv>
        </div>
      </section>

      {/* ─── INDUSTRIES MARQUEE ─── */}
      <section style={{ background: 'var(--bg)', padding: '60px 0' }}>
        <div className="container" style={{ textAlign: 'center', marginBottom: 32 }}>
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>BUILT FOR ANY APPOINTMENT BUSINESS</div></Rv>
          <Rv delay={60}>
            <h2 style={{ marginTop: 6, fontSize: 'clamp(28px, 4cqi, 44px)', fontWeight: 800, letterSpacing: -0.03 }}>
              If your business takes appointments, Bookuno fits.
            </h2>
          </Rv>
        </div>
        <div className="marquee-wrap">
          <div className="marquee">
            {[...CATEGORIES, ...CATEGORIES].map((c, i) => {
              const Icon = c.icon;
              const p = GRAD_PALETTES[c.seed];
              return (
                <div key={i} className="marquee-chip">
                  <div className="ico" style={{ background: `linear-gradient(135deg, ${p[0]}, ${p[3]})` }}>
                    <Icon style={{ width: 18, height: 18 }}/>
                  </div>
                  {c.name}
                </div>
              );
            })}
          </div>
        </div>
        <div className="marquee-wrap" style={{ marginTop: 14 }}>
          <div className="marquee" style={{ animationDuration: '75s', animationDirection: 'reverse' }}>
            {['Tattoo studio', 'Driving instructor', 'Dog groomer', 'Music teacher', 'Massage therapist', 'Plumber', 'Holiday cottage', 'MOT centre', 'Yoga studio', 'Wedding planner', 'Locksmith', 'Detailer', 'Photographer', 'Coach', 'Acupuncturist', 'Pilates studio',
              'Tattoo studio', 'Driving instructor', 'Dog groomer', 'Music teacher', 'Massage therapist', 'Plumber', 'Holiday cottage', 'MOT centre',
            ].map((name, i) => (
              <div key={i} className="marquee-chip" style={{ background: 'var(--ink)', color: '#fff', boxShadow: 'none' }}>
                <Ic.check style={{ width: 16, height: 16, color: 'var(--pri-200)' }}/>
                {name}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── WHY BOOKUNO (COMPARE) ─── */}
      <section className="section" style={{ background: '#fff' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <Rv><div className="micro" style={{ color: 'var(--pri)' }}>WHY BOOKUNO</div></Rv>
            <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 52px)', fontWeight: 800, letterSpacing: -0.03 }}>The honest comparison.</h2></Rv>
            <Rv delay={140}><p className="muted" style={{ fontSize: 16, marginTop: 12, maxWidth: 540, margin: '12px auto 0' }}>You've probably tried the others. Here's the difference, no marketing spin.</p></Rv>
          </div>
          <Rv>
            <div className="compare">
              <div className="compare-row compare-head">
                <div className="feat">Feature</div>
                <div className="compare-col-h us">Bookuno</div>
                <div className="compare-col-h">Legacy booking apps</div>
                <div className="compare-col-h">DIY (WhatsApp + spreadsheet)</div>
              </div>
              {[
                { f: 'Set up in under 10 minutes', d: 'Suggested services, hours and policies based on your trade', us: 'yes', alt1: 'mid', alt2: 'no' },
                { f: 'Real-time storefront on the Bookuno app', d: 'Customers find you without lifting a finger', us: 'yes', alt1: 'mid', alt2: 'no' },
                { f: 'Works for ANY business type', d: 'Not just hair & beauty — trades, stays, hire, pro services', us: 'yes', alt1: 'no', alt2: 'yes' },
                { f: 'Mobile-first dashboard', d: 'Run your day from your phone, not a desktop', us: 'yes', alt1: 'mid', alt2: 'no' },
                { f: 'No per-booking fees', d: 'Flat monthly. Keep 100% of what customers pay.', us: 'yes', alt1: 'no', alt2: 'yes' },
                { f: 'Modern UI customers actually like', d: 'Reviews say it best — see below', us: 'yes', alt1: 'no', alt2: 'no' },
                { f: 'SMS + email reminders included', d: 'Automatic reminders help cut no-shows', us: 'yes', alt1: 'mid', alt2: 'no' },
                { f: '3 months free', d: 'Try the full Pro plan free, walk away if it\'s not for you', us: 'yes', alt1: 'no', alt2: 'yes' },
              ].map((r, i) => {
                const mark = (v, h) => v === 'yes' ? <span className="cell yes" data-h={h}><Ic.check style={{ width: 18, height: 18 }}/></span>
                  : v === 'no' ? <span className="cell no" data-h={h}>—</span>
                  : <span className="cell" data-h={h} style={{ color: 'var(--amber)', fontSize: 12, fontWeight: 700 }}>Limited</span>;
                return (
                  <div key={i} className="compare-row">
                    <div>
                      <div className="feat-name">{r.f}</div>
                      <div className="feat-desc">{r.d}</div>
                    </div>
                    {mark(r.us, 'Bookuno')}
                    {mark(r.alt1, 'Legacy apps')}
                    {mark(r.alt2, 'DIY')}
                  </div>
                );
              })}
            </div>
          </Rv>
        </div>
      </section>

      {/* ─── FEATURE BENTO ─── */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <Rv><div className="micro" style={{ color: 'var(--pri)' }}>EVERYTHING YOU NEED</div></Rv>
            <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 52px)', fontWeight: 800, letterSpacing: -0.03 }}>Run the whole business from one app.</h2></Rv>
          </div>
          <div className="bento">

            {/* b-1: Live Calendar — large */}
            <Rv><div className="b-1" style={{ background: 'linear-gradient(135deg, #1A0E4A, #6B57FF)', color: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div className="blob" style={{ width: 220, height: 220, background: '#FF8FCB', top: -60, right: -60, opacity: 0.4 }}/>
              <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <Ic.cal style={{ width: 26, height: 26 }}/>
                <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.025, marginTop: 14, lineHeight: 1.1 }}>Live calendar that travels with you.</h3>
                <p style={{ fontSize: 13, opacity: 0.78, marginTop: 8, lineHeight: 1.5 }}>Mobile-first. Drag bookings, reassign staff, block holidays.</p>
                <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' }}>
                  {['Drag & drop', 'Multi-staff', 'Time-off', 'Holidays'].map(t => (
                    <span key={t} className="chip" style={{ background: 'rgba(255,255,255,0.12)', color: '#fff', fontSize: 11 }}>{t}</span>
                  ))}
                </div>
                {/* Mini calendar grid */}
                <div style={{ marginTop: 16, background: 'rgba(255,255,255,0.08)', borderRadius: 14, padding: '10px 10px 8px', backdropFilter: 'blur(10px)', flex: 1 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, marginBottom: 7 }}>
                    {['Mon','Tue','Wed','Thu','Fri'].map(d => (
                      <div key={d} style={{ textAlign: 'center', fontSize: 9, fontWeight: 800, opacity: 0.6, letterSpacing: 0.08 }}>{d}</div>
                    ))}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4 }}>
                    {[
                      { c: 'var(--pri)',  n: 'Jay · Cut'  },
                      { c: '#FF8FCB',    n: 'Tom · Fade' },
                      null,
                      { c: '#43C49E',    n: 'Hannah'     },
                      null,
                      null,
                      { c: 'var(--pri)', n: 'Mark'       },
                      { c: '#FFB870',    n: 'Ryan · Cut' },
                      null,
                      { c: 'var(--pri)', n: 'Lisa'       },
                    ].map((slot, i) => (
                      <div key={i} style={{ height: 28, borderRadius: 6, background: slot ? slot.c : 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 5px', overflow: 'hidden' }}>
                        {slot && <span style={{ fontSize: 8.5, fontWeight: 700, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{slot.n}</span>}
                      </div>
                    ))}
                  </div>
                </div>
                {/* New-booking toast */}
                <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 9, padding: '8px 12px', borderRadius: 12, background: 'rgba(255,255,255,0.95)', color: '#0F0E1A' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 9, background: 'var(--pri)', color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Ic.bell style={{ width: 14, height: 14 }}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 800 }}>New booking</div>
                    <div style={{ fontSize: 10, color: 'var(--muted)' }}>Sara · Skin fade · Fri 15:30</div>
                  </div>
                  <div className="pulse-dot"/>
                </div>
              </div>
            </div></Rv>

            {/* b-2: Customer CRM */}
            <Rv delay={60}><div className="b-2" style={{ background: '#fff', boxShadow: 'var(--sh-2)' }}>
              <Ic.user style={{ width: 22, height: 22, color: 'var(--pri)' }}/>
              <h3 style={{ fontSize: 16, fontWeight: 800, marginTop: 10, letterSpacing: -0.02 }}>Customer CRM</h3>
              <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, marginBottom: 12 }}>Notes, visit history, allergy alerts — all sticky.</p>
              <div style={{ display: 'grid', gap: 6 }}>
                {[
                  { init: 'TH', name: 'Tom Hardy',    tag: 'VIP',       tagC: '#C07B00', bg: 'linear-gradient(135deg, #FFB4A2, #FF7B9C)' },
                  { init: 'HB', name: 'Hannah Brent', tag: '⚠ Allergy', tagC: '#CC2B2B', bg: 'linear-gradient(135deg, #A8E0FF, #7C5BFF)' },
                  { init: 'JM', name: 'Jay Malik',    tag: 'Regular',   tagC: 'var(--pri)', bg: 'linear-gradient(135deg, #C5F0CF, #3DA9FF)' },
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 10, background: 'var(--bg)' }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: c.bg, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800, flexShrink: 0 }}>{c.init}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12, fontWeight: 700 }}>{c.name}</div>
                    </div>
                    <span style={{ padding: '2px 8px', borderRadius: 99, background: 'rgba(0,0,0,0.05)', fontSize: 10, fontWeight: 700, color: c.tagC, flexShrink: 0 }}>{c.tag}</span>
                  </div>
                ))}
              </div>
            </div></Rv>

            {/* b-3: Marketing tools */}
            <Rv delay={120}><div className="b-3" style={{ background: '#fff', boxShadow: 'var(--sh-2)' }}>
              <Ic.gift style={{ width: 22, height: 22, color: 'var(--pri)' }}/>
              <h3 style={{ fontSize: 16, fontWeight: 800, marginTop: 10, letterSpacing: -0.02 }}>Marketing tools built in</h3>
              <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, marginBottom: 12 }}>Offers, gift cards, loyalty rewards, SMS campaigns.</p>
              <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', alignItems: 'center' }}>
                <div style={{ padding: '7px 14px', borderRadius: 12, background: 'linear-gradient(135deg, #FF8FCB, #7B5BFF)', color: '#fff' }}>
                  <div style={{ fontSize: 15, fontWeight: 800, lineHeight: 1 }}>20% OFF</div>
                  <div style={{ fontSize: 10, fontWeight: 600, opacity: 0.9, marginTop: 1 }}>loyalty reward</div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {[
                    { i: Ic.bell, t: 'SMS campaign' },
                    { i: Ic.gift, t: 'Gift cards' },
                  ].map(({ i: Icon, t }, k) => (
                    <div key={k} style={{ padding: '5px 10px', borderRadius: 10, background: 'var(--bg)', fontWeight: 700, fontSize: 11.5, display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon style={{ width: 13, height: 13, color: 'var(--pri)' }}/> {t}
                    </div>
                  ))}
                </div>
              </div>
            </div></Rv>

            {/* b-4: Take payments */}
            <Rv delay={180}><div className="b-4" style={{ background: '#fff', boxShadow: 'var(--sh-2)' }}>
              <Ic.card style={{ width: 22, height: 22, color: 'var(--pri)' }}/>
              <h3 style={{ fontSize: 15, fontWeight: 800, marginTop: 10, letterSpacing: -0.015 }}>Take payments</h3>
              <p style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 4, marginBottom: 12 }}>Card, Apple Pay, Google Pay or pay-on-the-day.</p>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {[
                  { icon: Ic.card,   label: 'Card'       },
                  { icon: Ic.apple,  label: 'Apple Pay'  },
                  { icon: Ic.google, label: 'Google Pay' },
                ].map(({ icon: Icon, label }, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', borderRadius: 9, background: 'var(--ink)', color: '#fff', fontSize: 10.5, fontWeight: 700 }}>
                    <Icon style={{ width: 12, height: 12 }}/>{label}
                  </div>
                ))}
              </div>
            </div></Rv>

            {/* b-5: Insights */}
            <Rv delay={240}><div className="b-5" style={{ background: '#fff', boxShadow: 'var(--sh-2)' }}>
              <Ic.spark style={{ width: 22, height: 22, color: 'var(--pri)' }}/>
              <h3 style={{ fontSize: 15, fontWeight: 800, marginTop: 10, letterSpacing: -0.015 }}>Insights</h3>
              <p style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 4, marginBottom: 10 }}>Revenue, repeat rate, top services.</p>
              <div style={{ display: 'grid', gap: 6 }}>
                {[
                  { val: '£2,840', label: 'This month',  col: 'var(--pri)' },
                  { val: '78%',    label: 'Repeat rate', col: '#43C49E'    },
                ].map(({ val, label, col }, i) => (
                  <div key={i} style={{ padding: '7px 10px', borderRadius: 10, background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 10, color: 'var(--muted)', fontWeight: 600 }}>{label}</div>
                    <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.025, color: col }}>{val}</div>
                  </div>
                ))}
                <div style={{ padding: '5px 10px', borderRadius: 10, background: 'var(--bg)', fontSize: 10.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Ic.tag style={{ width: 12, height: 12, color: 'var(--pri)' }}/> Top: Skin fade
                </div>
              </div>
            </div></Rv>

            {/* b-6: Marketplace listing */}
            <Rv delay={300}><div className="b-6" style={{ background: 'var(--ink)', color: '#fff' }}>
              <Ic.globe style={{ width: 22, height: 22 }}/>
              <h3 style={{ fontSize: 15, fontWeight: 800, marginTop: 10, letterSpacing: -0.015 }}>Marketplace listing</h3>
              <p style={{ fontSize: 11.5, opacity: 0.7, marginTop: 4, marginBottom: 12 }}>Free traffic from consumer apps & web.</p>
              <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                {['iOS app', 'Android', 'Web'].map(p => (
                  <div key={p} style={{ padding: '5px 11px', borderRadius: 8, background: 'rgba(255,255,255,0.1)', fontSize: 10.5, fontWeight: 700 }}>{p}</div>
                ))}
              </div>
            </div></Rv>

          </div>
        </div>
      </section>

      {/* ─── HOW IT WORKS ─── */}
      <section className="section" style={{ background: '#fff' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <Rv><div className="micro" style={{ color: 'var(--pri)' }}>HOW IT WORKS</div></Rv>
            <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 52px)', fontWeight: 800, letterSpacing: -0.03 }}>From signup to first booking, in 3 steps.</h2></Rv>
          </div>
          <div className="swipe-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18, position: 'relative' }}>
            {[
              { n: '01', t: 'Tell us about your business', d: 'Pick your trade — barber, cleaner, gardener, whatever — and we suggest sensible services, durations and prices based on what works.', icon: Ic.tag, c1: '#C8B8FF', c2: '#FFB8DA' },
              { n: '02', t: 'We generate your storefront',  d: 'Mobile-first booking page that looks great out of the box. Goes live the moment you finish setup. Customise everything if you want.', icon: Ic.globe, c1: '#A8E0FF', c2: '#7C5BFF' },
              { n: '03', t: 'Bookings roll in',              d: 'Listed on the Bookuno marketplace from day one. Share your link with regulars. Reminders go out automatically.', icon: Ic.spark, c1: '#C5F0CF', c2: '#3DA9FF' },
            ].map((s, i) => {
              const Icon = s.icon;
              return (
                <Rv key={i} delay={i*100}>
                  <div className="card" style={{ padding: 28, height: '100%', position: 'relative', overflow: 'hidden' }}>
                    <div style={{ position: 'absolute', top: -20, right: -20, width: 120, height: 120, borderRadius: '50%', background: `linear-gradient(135deg, ${s.c1}, ${s.c2})`, opacity: 0.18 }}/>
                    <div style={{ position: 'relative' }}>
                      <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--muted)', letterSpacing: 0.08 }}>{s.n}</div>
                      <div style={{ width: 52, height: 52, borderRadius: 16, background: `linear-gradient(135deg, ${s.c1}, ${s.c2})`, color: '#fff', display: 'grid', placeItems: 'center', marginTop: 12 }}>
                        <Icon style={{ width: 24, height: 24 }}/>
                      </div>
                      <h3 style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.02, marginTop: 18 }}>{s.t}</h3>
                      <p style={{ fontSize: 14, color: 'var(--muted)', marginTop: 8, lineHeight: 1.55 }}>{s.d}</p>
                    </div>
                  </div>
                </Rv>
              );
            })}
          </div>
          <div className="swipe-hint"><span className="track"></span>Swipe</div>
        </div>
      </section>

      {/* ─── WHY OWNERS SWITCH — honest outcome cards, no invented testimonials ─── */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <Rv><div className="micro" style={{ color: 'var(--pri)' }}>WHY OWNERS SWITCH</div></Rv>
            <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 52px)', fontWeight: 800, letterSpacing: -0.03 }}>Built for how you actually work.</h2></Rv>
          </div>
          <div className="swipe-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 18 }}>
            {[
              { i: Ic.msg,    t: 'End the Sunday-night DM pile-up', q: "WhatsApp requests, Instagram DMs and walk-ins all land in one calendar — with confirmations sent for you.", b: 'For barbershops & salons', c1: '#FFB4A2', c2: '#FF7B9C' },
              { i: Ic.clock,  t: 'Take bookings while you sleep', q: "Your storefront checks the diary, takes the booking and sends the confirmation — even at 11pm.", b: 'For studios & therapists', c1: '#A8E0FF', c2: '#7C5BFF' },
              { i: Ic.zap,    t: 'Set up on your phone in minutes', q: "Add services, prices and opening hours, then share one link everywhere you already talk to customers.", b: 'For solo operators', c1: '#C5F0CF', c2: '#3DA9FF' },
              { i: Ic.shield, t: 'Cut no-shows before they happen', q: "Automatic reminders before every appointment, card capture where you want it, and a cancellation policy customers see up front.", b: 'For trades & mobile services', c1: '#FFE4A8', c2: '#FF8E94' },
              { i: Ic.user,   t: 'A team diary that can’t double-book', q: "Every staff member’s availability in one grid, so two customers can never book the same chair.", b: 'For teams & multi-staff shops', c1: '#FFCFE5', c2: '#7B5BFF' },
              { i: Ic.tag,    t: 'One flat plan, no commission', q: "Everything included for one monthly price. Bookuno never takes a cut of your bookings.", b: 'For every service business', c1: '#B8C8FF', c2: '#5550FF' },
            ].map((t, i) => {
              const CardIcon = t.i;
              return (
                <Rv key={i} delay={i*40}>
                  <div className="card" style={{ padding: 22, height: '100%' }}>
                    <div style={{ width: 42, height: 42, borderRadius: 13, background: `linear-gradient(135deg, ${t.c1}, ${t.c2})`, color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <CardIcon style={{ width: 20, height: 20 }}/>
                    </div>
                    <div style={{ fontWeight: 800, fontSize: 16.5, letterSpacing: -0.015, marginTop: 14 }}>{t.t}</div>
                    <p style={{ fontSize: 14.5, lineHeight: 1.55, marginTop: 8, color: 'var(--ink-2)', fontWeight: 500 }}>{t.q}</p>
                    <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line-2)', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.04, textTransform: 'uppercase', color: 'var(--muted)' }}>{t.b}</div>
                  </div>
                </Rv>
              );
            })}
          </div>
          <div className="swipe-hint"><span className="track"></span>Swipe</div>
        </div>
      </section>

      {/* ─── PRICING ─── */}
      <Pricing/>

      {/* ─── FAQ ─── */}
      <FAQ/>

      {/* ─── FINAL CTA ─── */}
      <section style={{ background: 'var(--bg)', padding: '0 0 80px' }}>
        <div className="container">
          <div className="final-cta">
            <div className="blob" style={{ width: 460, height: 460, background: '#FF8FCB', top: -160, right: -160, opacity: 0.5 }}/>
            <div className="blob" style={{ width: 300, height: 300, background: '#A8D8FF', bottom: -100, left: -80, opacity: 0.5 }}/>
            <div style={{ position: 'relative' }}>
              <Rv>
                <div className="micro" style={{ opacity: 0.7 }}>READY WHEN YOU ARE</div>
              </Rv>
              <Rv delay={60}>
                <h2 style={{ marginTop: 8 }}>Your next booking is one click away.</h2>
              </Rv>
              <Rv delay={140}>
                <p style={{ fontSize: 17, opacity: 0.85, marginTop: 18, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
                  Live storefront in 5 minutes. 3 months free. Cancel any time. Honestly — what's stopping you?
                </p>
              </Rv>
              <Rv delay={220}>
                <div style={{ display: 'flex', gap: 12, marginTop: 32, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <button className="btn lg" type="button" onClick={() => { window.location.href = '/app.html#/auth?mode=register&type=business'; }} style={{ height: 60, padding: '0 32px', fontSize: 17, background: '#fff', color: 'var(--ink)' }}>
                    Start free trial <Ic.arrow style={{ width: 18, height: 18 }}/>
                  </button>
                  <button className="btn lg" type="button" onClick={() => { document.getElementById('how-it-works')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{ height: 60, padding: '0 32px', fontSize: 17, background: 'rgba(255,255,255,0.18)', color: '#fff', backdropFilter: 'blur(10px)' }}>
                    See how it works
                  </button>
                </div>
              </Rv>
              <Rv delay={300}>
                <div style={{ marginTop: 22, fontSize: 13, opacity: 0.7 }}>
                  3 months free · Cancel anytime · Live in 5 min
                </div>
              </Rv>
            </div>
          </div>
        </div>
      </section>

      <Footer logoVariant={logoVariant}/>
    </div>
  );
}

Object.assign(window, { PageBizSales });