// BookUno Web — Business Sales Landing (premium, motion-heavy)
// Hero + stats + calendar story + comparison + industries + features
// Pricing + testimonials + FAQ + final CTA

const { useState: useSS, useEffect: useSE, useRef: useSR } = React;

/* ─── Hook: mouse-follow position ─────────────────────────── */
function useMousePos(ref) {
  useSE(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width) * 100;
      const y = ((e.clientY - r.top) / r.height) * 100;
      el.style.setProperty('--mx', `${x}%`);
      el.style.setProperty('--my', `${y}%`);
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
}

/* ─── Hook: animated counter ──────────────────────────────── */
function useCounter(end, duration = 1800) {
  const [val, setVal] = useSS(0);
  const ref = useSR(null);
  const started = useSR(false);
  useSE(() => {
    const el = ref.current; if (!el) return;
    const start = () => {
      if (started.current) return;
      started.current = true;
      const startTime = performance.now();
      const tick = (t) => {
        const elapsed = t - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);
        setVal(Math.round(end * eased));
        if (progress < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    // Fallback: even if IO never fires (e.g. inside a preview iframe whose
    // viewport never overlaps the element), animate after a short delay.
    const fallback = setTimeout(start, 800);
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          clearTimeout(fallback);
          start();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { clearTimeout(fallback); io.disconnect(); };
  }, [end, duration]);
  return [val, ref];
}

function CounterStat({ end, suffix = '', prefix = '', label }) {
  const [v, ref] = useCounter(end);
  return (
    <div className="stat-item" ref={ref}>
      <div className="stat-num">{prefix}{v.toLocaleString()}{suffix}</div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

/* ─── Customer + Business journey phones ─────────────────── */
function HeroPhone() {
  const [phase, setPhase] = useSS(0);
  const [showSpark, setShowSpark] = useSS(false);
  const [showNotif, setShowNotif] = useSS(false);

  useSE(() => {
    let cancelled = false;
    const run = async () => {
      while (!cancelled) {
        // Phase 0 → search (2.4s)
        setPhase(0); setShowSpark(false); setShowNotif(false);
        await new Promise(r => setTimeout(r, 2400));
        if (cancelled) return;
        // Phase 1 → results (2.2s)
        setPhase(1);
        await new Promise(r => setTimeout(r, 2200));
        if (cancelled) return;
        // Phase 2 → storefront / pick time (2.4s)
        setPhase(2);
        await new Promise(r => setTimeout(r, 2400));
        if (cancelled) return;
        // Phase 3 → confirmed (1.8s) → spark fires partway through
        setPhase(3);
        await new Promise(r => setTimeout(r, 600));
        if (cancelled) return;
        setShowSpark(true);
        await new Promise(r => setTimeout(r, 700));
        if (cancelled) return;
        setShowNotif(true);
        await new Promise(r => setTimeout(r, 1800));
        if (cancelled) return;
      }
    };
    run();
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="journey-stage">
      {/* Business phone — back-right, tilted, smaller */}
      <BizPhone notif={showNotif}/>

      {/* Spark flying between phones */}
      {showSpark && (
        <div className="spark fly" style={{
          left: 200, top: 380,
          '--ex': '180px', '--ey': '-200px',
        }}/>
      )}

      {/* Customer phone — front-left, larger */}
      <CustPhone phase={phase}/>
    </div>
  );
}

/* Customer phone — cycles search → results → store → confirmed */
function CustPhone({ phase }) {
  return (
    <div style={{
      position: 'absolute', left: 0, top: 30, zIndex: 3,
      width: 280, height: 560,
      borderRadius: 38, background: '#1A1727', padding: 6,
      boxShadow: '0 40px 80px rgba(10,5,40,0.5), 0 0 0 1px rgba(255,255,255,0.06)',
    }}>
      <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 80, height: 22, borderRadius: 14, background: '#000', zIndex: 5 }}/>
      <div style={{
        width: '100%', height: '100%', borderRadius: 32, overflow: 'hidden',
        background: '#FAF8FF', position: 'relative', color: '#0F0E1A',
      }}>
        {/* Status bar */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 38, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '12px 22px 0', zIndex: 30, fontSize: 11, fontWeight: 700, color: '#15111F', pointerEvents: 'none' }}>
          <span>9:41</span>
          <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
            <svg width="11" height="8" viewBox="0 0 14 10"><rect x="0" y="6" width="2.4" height="3.4" rx="0.5" fill="#15111F"/><rect x="3.6" y="4" width="2.4" height="5.4" rx="0.5" fill="#15111F"/><rect x="7.2" y="2" width="2.4" height="7.4" rx="0.5" fill="#15111F"/><rect x="10.8" y="0" width="2.4" height="9.4" rx="0.5" fill="#15111F"/></svg>
            <svg width="16" height="8" viewBox="0 0 22 11"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="#15111F" strokeOpacity="0.45" fill="none"/><rect x="2" y="2" width="13" height="7" rx="1.2" fill="#15111F"/></svg>
          </span>
        </div>

        {/* Screen 0 · Search */}
        <div className={`phone-screen ${phase === 0 ? 'act' : ''}`} style={{ padding: '46px 14px 14px' }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--muted)', letterSpacing: 0.1 }}>1 · CUSTOMER OPENS BOOKUNO</div>
          <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.025, marginTop: 6, lineHeight: 1.1 }}>Hi Sara,<br/>what are you booking?</h3>
          <div style={{ marginTop: 16, background: '#fff', borderRadius: 14, padding: '10px 12px', boxShadow: '0 8px 24px rgba(40,30,80,0.12)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Ic.search style={{ width: 16, height: 16, color: 'var(--pri)' }}/>
            <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)' }}>
              {phase === 0 && <span className="typing">Haircut Manchester</span>}
            </span>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' }}>
            {['Barber','Hair','Beauty','Wellness'].map(t => (
              <span key={t} style={{ padding: '6px 10px', borderRadius: 999, background: '#fff', fontSize: 10.5, fontWeight: 700, boxShadow: '0 2px 6px rgba(40,30,80,0.06)' }}>{t}</span>
            ))}
          </div>
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: 0.08, color: 'var(--muted)' }}>POPULAR NOW</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 8 }}>
              {[0,1,2,3].map(i => (
                <div key={i} style={{ height: 60, borderRadius: 12, background: `linear-gradient(135deg, ${GRAD_PALETTES[i][0]}, ${GRAD_PALETTES[i][3]})`, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', bottom: 6, left: 8, color: '#fff', fontSize: 9.5, fontWeight: 800 }}>{['Barbers','Beauty','Wellness','Trades'][i]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Screen 1 · Results */}
        <div className={`phone-screen ${phase === 1 ? 'act' : ''}`} style={{ padding: '46px 14px 14px' }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--muted)', letterSpacing: 0.1 }}>2 · CUSTOMER FINDS YOU</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <h3 style={{ fontSize: 15, fontWeight: 800, letterSpacing: -0.02 }}>Haircut · 184 results</h3>
          </div>
          <div style={{ display: 'flex', gap: 5, marginTop: 8, flexWrap: 'wrap' }}>
            {['Sort: Best','£','★ 4.5+','Open now'].map((t, i) => (
              <span key={t} style={{ padding: '4px 8px', borderRadius: 999, background: i === 0 ? 'var(--ink)' : 'var(--chip)', color: i === 0 ? '#fff' : 'var(--ink)', fontSize: 9.5, fontWeight: 700 }}>{t}</span>
            ))}
          </div>
          <div style={{ display: 'grid', gap: 8, marginTop: 12 }}>
            {[
              { n: 'Knot & Comb',      r: 4.9, p: '£18', sel: true,  seed: 0 },
              { n: 'The Cuttery',      r: 4.7, p: '£22',             seed: 5 },
              { n: 'Sharp & Co.',      r: 4.8, p: '£20',             seed: 3 },
            ].map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, padding: 8, borderRadius: 12, background: '#fff', boxShadow: b.sel ? '0 0 0 2px var(--pri), 0 12px 24px var(--pri-glow)' : '0 4px 12px rgba(40,30,80,0.06)', transition: 'box-shadow 0.3s' }}>
                <div style={{ width: 50, height: 50, borderRadius: 10, background: `linear-gradient(135deg, ${GRAD_PALETTES[b.seed][0]}, ${GRAD_PALETTES[b.seed][3]})`, flexShrink: 0 }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 800 }}>{b.n}</div>
                  <div style={{ fontSize: 9, color: 'var(--muted)', marginTop: 2 }}>0.4 mi · from {b.p}</div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 9, fontWeight: 700, marginTop: 2 }}>
                    <Ic.star style={{ width: 8, height: 8, color: 'var(--amber)' }}/>{b.r}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Screen 2 · Storefront / pick time */}
        <div className={`phone-screen ${phase === 2 ? 'act' : ''}`}>
          <div style={{ width: '100%', height: 110, background: `linear-gradient(135deg, ${GRAD_PALETTES[0][0]}, ${GRAD_PALETTES[0][3]})`, position: 'relative' }}>
            <div style={{ position: 'absolute', bottom: 12, left: 14, color: '#fff' }}>
              <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.02 }}>Knot &amp; Comb</div>
              <div style={{ fontSize: 10, opacity: 0.85, display: 'inline-flex', alignItems: 'center', gap: 4 }}><Ic.star style={{ width: 9, height: 9, color: 'var(--amber)' }}/>4.9 · Barber</div>
            </div>
          </div>
          <div style={{ padding: '12px 14px' }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--muted)', letterSpacing: 0.1 }}>3 · CUSTOMER BOOKS A TIME</div>
            <div style={{ display: 'flex', gap: 5, marginTop: 8, overflowX: 'auto', scrollbarWidth: 'none' }}>
              {['Tue 28','Wed 29','Thu 30','Fri 31','Sat 1'].map((d, i) => {
                const [dow, num] = d.split(' ');
                return (
                  <div key={d} style={{ flex: '0 0 38px', padding: '6px 4px', borderRadius: 8, background: i === 0 ? 'var(--ink)' : '#fff', color: i === 0 ? '#fff' : 'var(--ink)', boxShadow: i === 0 ? 'none' : '0 2px 6px rgba(40,30,80,0.08)', textAlign: 'center' }}>
                    <div style={{ fontSize: 8, fontWeight: 600, opacity: i === 0 ? 0.7 : 0.55 }}>{dow}</div>
                    <div style={{ fontSize: 14, fontWeight: 800 }}>{num}</div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginTop: 10 }}>
              {['10:00','11:30','12:00','13:30','15:30','16:30'].map((t) => {
                const sel = t === '15:30';
                return (
                  <div key={t} style={{ height: 30, borderRadius: 8, background: sel ? 'var(--pri)' : '#fff', color: sel ? '#fff' : 'var(--ink)', boxShadow: sel ? '0 6px 16px var(--pri-glow)' : '0 2px 6px rgba(40,30,80,0.06)', display: 'grid', placeItems: 'center', fontSize: 10.5, fontWeight: 700, transition: 'all 0.3s', transform: sel ? 'scale(1.04)' : 'none' }}>{t}</div>
                );
              })}
            </div>
            <div style={{ marginTop: 12, padding: '10px 12px', borderRadius: 12, background: 'var(--ink)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 11, fontWeight: 700 }}>Skin fade · 15:30</span>
              <span style={{ fontSize: 12, fontWeight: 800 }}>£24</span>
            </div>
            <div style={{ marginTop: 8, padding: '11px 12px', borderRadius: 12, background: 'var(--pri)', color: '#fff', textAlign: 'center', fontSize: 12, fontWeight: 800, boxShadow: '0 8px 20px var(--pri-glow)' }}>
              Confirm booking →
            </div>
          </div>
        </div>

        {/* Screen 3 · Confirmed */}
        <div className={`phone-screen ${phase === 3 ? 'act' : ''}`} style={{ background: 'linear-gradient(180deg, #1A0E4A 0%, #6B57FF 100%)', color: '#fff', padding: '46px 14px 14px', textAlign: 'center' }}>
          <div className="blob" style={{ width: 200, height: 200, background: '#FF8FCB', top: 80, right: -60, opacity: 0.4 }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, opacity: 0.7, letterSpacing: 0.1 }}>4 · BOOKING CONFIRMED</div>
            <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', margin: '24px auto 0', display: 'grid', placeItems: 'center', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'rgba(255,255,255,0.12)', animation: 'pulseDot 1.6s ease-in-out infinite' }}/>
              <Ic.check style={{ width: 42, height: 42, color: '#fff', position: 'relative' }}/>
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.025, marginTop: 16, lineHeight: 1.05 }}>You're booked.</h3>
            <p style={{ fontSize: 12, opacity: 0.85, marginTop: 6 }}>Tue 28 May · 15:30</p>
            <div style={{ marginTop: 18, padding: 12, borderRadius: 14, background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left' }}>
              <div style={{ textAlign: 'center', padding: '6px 8px', borderRadius: 8, background: 'rgba(255,255,255,0.16)', minWidth: 36 }}>
                <div style={{ fontSize: 8, fontWeight: 700, opacity: 0.8 }}>TUE</div>
                <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.02 }}>28</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 800, fontSize: 11 }}>Skin fade</div>
                <div style={{ fontSize: 9.5, opacity: 0.8 }}>Knot &amp; Comb · with Mark</div>
              </div>
            </div>
          </div>
        </div>

        {/* Home indicator */}
        <div style={{ position: 'absolute', bottom: 5, left: '50%', transform: 'translateX(-50%)', width: 92, height: 4, borderRadius: 99, background: phase === 3 ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.32)', zIndex: 60 }}/>
      </div>

      {/* Phase label below phone */}
      <div style={{ position: 'absolute', bottom: -38, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6, alignItems: 'center' }}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{ width: phase === i ? 22 : 6, height: 4, borderRadius: 4, background: phase === i ? '#fff' : 'rgba(255,255,255,0.3)', transition: 'all 0.4s' }}/>
        ))}
      </div>
    </div>
  );
}

/* Business phone — receives the booking */
function BizPhone({ notif }) {
  return (
    <div style={{
      position: 'absolute',
      right: -20, top: 110, zIndex: 1,
      width: 230, height: 460,
      borderRadius: 32, background: '#1A1727', padding: 5,
      boxShadow: '0 30px 60px rgba(10,5,40,0.55), 0 0 0 1px rgba(255,255,255,0.06)',
      transform: 'rotate(6deg)',
    }}>
      <div style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)', width: 68, height: 18, borderRadius: 12, background: '#000', zIndex: 5 }}/>
      <div style={{
        width: '100%', height: '100%', borderRadius: 27, overflow: 'hidden',
        background: 'linear-gradient(180deg, #2B1373 0%, #6B57FF 100%)', color: '#fff',
        padding: '42px 12px 12px', position: 'relative',
      }}>
        {/* Notification toast */}
        {notif && (
          <div className="biz-notif" style={{ minWidth: 180, padding: '8px 12px' }}>
            <div style={{ width: 28, height: 28, borderRadius: 10, 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: 10.5, fontWeight: 800, color: 'var(--ink)' }}>NEW BOOKING</div>
              <div style={{ fontSize: 9.5, color: 'var(--muted)' }}>Sara · Skin fade · Tue 15:30</div>
            </div>
          </div>
        )}

        <div style={{ fontSize: 9, fontWeight: 700, opacity: 0.75, letterSpacing: 0.1 }}>BUSINESS · YOU</div>
        <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.025, marginTop: 2 }}>Hi Mark</div>

        {/* Stat strip */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5, marginTop: 10, padding: 8, borderRadius: 12, background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(8px)' }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, transition: 'color 0.3s', color: notif ? '#FFD7E8' : '#fff' }}>{notif ? 8 : 7}</div>
            <div style={{ fontSize: 8.5, opacity: 0.8 }}>Booked today</div>
          </div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, transition: 'color 0.3s', color: notif ? '#FFD7E8' : '#fff' }}>£{notif ? 186 : 162}</div>
            <div style={{ fontSize: 8.5, opacity: 0.8 }}>Revenue</div>
          </div>
        </div>

        <div style={{ marginTop: 12, fontSize: 9, fontWeight: 800, opacity: 0.85, letterSpacing: 0.1 }}>SCHEDULE · TUE</div>
        <div style={{ display: 'grid', gap: 5, marginTop: 6 }}>
          {[
            { t: '11:30', n: 'Jay P.', s: 'Cut',     c: '#FF8FCB' },
            { t: '13:00', n: 'Tom H.', s: 'Fade',    c: '#FFE4A8' },
            { t: '15:30', n: 'Sara R.', s: 'Skin fade', c: 'var(--pri)', isNew: true },
            { t: '16:30', n: 'Maria C.', s: 'Beard',  c: '#43C49E' },
          ].map((r, i) => {
            const visible = !r.isNew || notif;
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px', borderRadius: 8, background: r.isNew && notif ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.1)', color: r.isNew && notif ? '#0F0E1A' : '#fff', opacity: visible ? 1 : 0.25, transform: r.isNew && notif ? 'scale(1.04)' : 'none', boxShadow: r.isNew && notif ? '0 8px 18px rgba(255,255,255,0.4)' : 'none', transition: 'all 0.5s cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: r.c, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 800, flexShrink: 0 }}>{r.n[0]}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 9.5, fontWeight: 700, lineHeight: 1.1 }}>{r.t} · {r.n}</div>
                  <div style={{ fontSize: 8.5, opacity: r.isNew && notif ? 0.65 : 0.75, marginTop: 1 }}>{r.s} · 45 min</div>
                </div>
                {r.isNew && notif && (
                  <div style={{ fontSize: 8, fontWeight: 800, padding: '2px 5px', borderRadius: 4, background: 'var(--pri)', color: '#fff', letterSpacing: 0.05, flexShrink: 0 }}>NEW</div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Label */}
      <div style={{ position: 'absolute', top: -28, right: 10, padding: '4px 10px', borderRadius: 999, background: 'rgba(255,255,255,0.95)', color: 'var(--ink)', fontSize: 10, fontWeight: 800, letterSpacing: 0.04, transform: 'rotate(-6deg)', transformOrigin: 'right' }}>
        ← Your dashboard
      </div>
    </div>
  );
}

/* ─── Animated calendar fills ─────────────────────────────── */
function CalendarFills() {
  const ref = useSR(null);
  const [evts, setEvts] = useSS([]);
  useSE(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((e) => {
      if (e[0].isIntersecting && evts.length === 0) {
        const list = [
          { d: 1, t: 0, b: 'var(--pri)', n: 'Cut' },
          { d: 2, t: 2, b: '#FF8FCB', n: 'Beard' },
          { d: 3, t: 0, b: 'var(--pri)', n: 'Cut' },
          { d: 4, t: 1, b: '#43C49E', n: 'Shave' },
          { d: 1, t: 3, b: '#FFB870', n: 'Cut' },
          { d: 5, t: 2, b: 'var(--pri)', n: 'Cut' },
          { d: 6, t: 0, b: '#FF8FCB', n: 'Color' },
          { d: 2, t: 3, b: '#43C49E', n: 'Cut' },
          { d: 4, t: 0, b: 'var(--pri)', n: 'Cut' },
          { d: 5, t: 1, b: '#FFB870', n: 'Cut' },
          { d: 6, t: 2, b: 'var(--pri)', n: 'Cut' },
          { d: 7, t: 1, b: '#43C49E', n: 'Trim' },
          { d: 7, t: 3, b: 'var(--pri)', n: 'Cut' },
          { d: 3, t: 1, b: '#FFB870', n: 'Beard' },
        ];
        list.forEach((e, i) => setTimeout(() => setEvts(p => [...p, e]), 200 + i * 200));
      }
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const times = ['09:00', '11:00', '14:00', '16:00'];
  return (
    <div className="cal-demo" ref={ref}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div className="micro" style={{ color: 'var(--muted)' }}>WEEK 22 · MAY</div>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.02, marginTop: 2 }}>Knot &amp; Comb · Mark</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="pulse-dot"/>
          <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--green)' }}>Live</span>
        </div>
      </div>
      <div className="cal-cells">
        <div className="h"></div>
        {days.map(d => <div key={d} className="h">{d}</div>)}
        {times.map((t, ti) => (
          <React.Fragment key={t}>
            <div className="h" style={{ fontSize: 9.5 }}>{t}</div>
            {days.map((_, di) => {
              const found = evts.find(e => e.d - 1 === di && e.t === ti);
              return (
                <div key={di} style={{ height: 36, position: 'relative' }}>
                  {found && (
                    <div className="cal-evt in" style={{ background: found.b }}>{found.n}</div>
                  )}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
      <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderRadius: 10, background: 'var(--bg)', fontSize: 12 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 700 }}>
          <Ic.zap style={{ width: 14, height: 14, color: 'var(--pri)' }}/>
          {evts.length} new {evts.length === 1 ? 'booking' : 'bookings'} this week
        </span>
        <span style={{ color: 'var(--muted)' }}>£{evts.length * 22}</span>
      </div>
    </div>
  );
}

/* ─── Pricing toggle ──────────────────────────────────────── */
function Pricing() {
  const [billing, setBilling] = useSS('yearly');
  const plans = [
    {
      name: 'Pro',
      desc: 'Everything you need to run and grow your bookings.',
      mo: 29, yr: 19,
      sel: true, badge: 'ALL-IN-ONE',
      features: [
        'Mobile-first storefront & booking page',
        'Live calendar, unlimited bookings',
        'SMS + email reminders',
        'Unlimited staff & locations',
        'Insights, exports & financial reports',
        'Marketing campaigns (SMS, email, offers)',
        'Gift cards & loyalty rewards',
        'Priority support',
      ],
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>PRICING · KEEP IT SIMPLE</div></Rv>
          <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 52px)', fontWeight: 800, letterSpacing: -0.03 }}>One plan. One price. Cancel any time.</h2></Rv>
          <Rv delay={140}><p className="muted" style={{ fontSize: 16, marginTop: 12 }}>Free for 3 months. No setup fees. No long contracts. Cancel any time.</p></Rv>
          <Rv delay={200}>
            <div className="price-toggle" style={{ marginTop: 22 }}>
              <span className="pill-bg" style={{ left: billing === 'monthly' ? 5 : 'calc(50% + 2.5px)', width: 'calc(50% - 7.5px)' }}/>
              <button className={billing === 'monthly' ? 'on' : ''} onClick={() => setBilling('monthly')}>Monthly</button>
              <button className={billing === 'yearly' ? 'on' : ''} onClick={() => setBilling('yearly')}>Yearly · save 25%</button>
            </div>
          </Rv>
        </div>
        <div className="swipe-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18, maxWidth: 880, margin: '0 auto' }}>
          {plans.map((p, i) => {
            const price = billing === 'yearly' ? p.yr : p.mo;
            return (
              <Rv key={i} delay={i*80}>
                <div style={{ position: 'relative', borderRadius: 24, padding: 28, background: p.sel ? 'linear-gradient(180deg, #1A0E4A 0%, #2B1373 100%)' : '#fff', color: p.sel ? '#fff' : 'var(--ink)', border: p.sel ? 'none' : '1px solid var(--line)', boxShadow: p.sel ? '0 30px 80px rgba(40,30,80,0.4)' : 'var(--sh-2)', overflow: 'hidden' }}>
                  {p.sel && <div className="blob" style={{ width: 240, height: 240, background: '#FF8FCB', top: -100, right: -100, opacity: 0.4 }}/>}
                  <div style={{ position: 'relative' }}>
                    {p.badge && (
                      <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 6, background: 'var(--pri)', color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: 0.06, marginBottom: 16 }}>{p.badge}</div>
                    )}
                    <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.025 }}>{p.name}</div>
                    <div style={{ fontSize: 13.5, opacity: p.sel ? 0.75 : 0.6, color: p.sel ? '#fff' : 'var(--muted)', marginTop: 4 }}>{p.desc}</div>
                    <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                      <span style={{ fontSize: 56, fontWeight: 800, letterSpacing: -0.04, lineHeight: 1 }}>£{price}</span>
                      <span style={{ fontSize: 14, opacity: 0.7 }}>/mo</span>
                    </div>
                    <div style={{ fontSize: 11.5, opacity: 0.7, marginTop: 4 }}>
                      {billing === 'yearly' ? `Billed yearly · £${price * 12}` : 'Billed monthly'}
                    </div>
                    <button className={`btn ${p.sel ? '' : 'primary'} lg block`} style={{ marginTop: 22, background: p.sel ? '#fff' : undefined, color: p.sel ? 'var(--ink)' : undefined }} onClick={() => { window.location.href = '/app.html#/auth?mode=register&type=business'; }}>
                      Start 3 months free <Ic.arrow style={{ width: 16, height: 16 }}/>
                    </button>
                    <div style={{ display: 'grid', gap: 8, marginTop: 22 }}>
                      {p.features.map((f, k) => (
                        <div key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13.5, lineHeight: 1.45 }}>
                          <div style={{ width: 18, height: 18, borderRadius: '50%', background: p.sel ? 'rgba(255,255,255,0.18)' : 'var(--pri-50)', color: p.sel ? '#fff' : 'var(--pri)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1 }}>
                            <Ic.check style={{ width: 11, height: 11 }}/>
                          </div>
                          {f}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </Rv>
            );
          })}
        </div>
        <div className="swipe-hint"><span className="track"></span>Swipe</div>
        <Rv delay={200}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 32, padding: '20px 28px', borderRadius: 18, background: '#fff', boxShadow: 'var(--sh-1)', flexWrap: 'wrap', justifyContent: 'center' }}>
            {[
              { i: Ic.shield, t: 'No setup fees' },
              { i: Ic.shield, t: '3 months free' },
              { i: Ic.shield, t: 'Cancel anytime' },
              { i: Ic.shield, t: 'Cancel any time' },
            ].map((b, i) => {
              const Icon = b.i;
              return (
                <div key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700 }}>
                  <Icon style={{ width: 16, height: 16, color: 'var(--pri)' }}/>{b.t}
                </div>
              );
            })}
          </div>
        </Rv>
      </div>
    </section>
  );
}

/* ─── FAQ accordion ───────────────────────────────────────── */
function FAQ() {
  const items = [
    { q: 'How long does setup actually take?', a: 'Most businesses are live within 5–10 minutes. Pick your business type, confirm a handful of services we suggest, set your hours and you\'re done. You can refine everything from your dashboard later.' },
    { q: 'Do I need to take card payments?', a: 'No. You can keep things "pay-on-the-day" with no payment processed through us, or take card up-front for high-value or no-show-prone services. Switch any time, per service.' },
    { q: 'What happens after my free trial ends?', a: 'We\'ll remind you 2 days before. If you don\'t add a card, the account pauses — no charges, no data lost. Come back and re-activate whenever you\'re ready.' },
    { q: 'Can my team use it too?', a: 'Yes. On Pro you can add unlimited staff, each with their own calendar, permissions and customer history.' },
    { q: 'Will I lose my existing customers?', a: 'No. We help you import customer details and bookings on day one, and we can send a polite SMS letting your regulars know your new booking link.' },
    { q: 'My business is a bit unusual. Does Bookuno still work?', a: 'Probably yes. We power barbers, cleaners, gardeners, painters, plumbers, fitness, wellness, campsites, hire, events, lessons and pro services. If you take appointments or rent time, we\'ll fit.' },
    { q: 'How do cancellations work?', a: 'You set your own policy: free up to X hours, partial refund after, or no cancellations. Customers see it clearly before they book, and we send reminders 24 h before to cut no-shows.' },
    { q: 'Where does the Bookuno marketplace traffic come from?', a: 'Customers find businesses through our consumer apps (iOS, Android), the bookuno.com search, and direct shares of your storefront link. There\'s nothing to pay extra for listings.' },
  ];
  const [open, setOpen] = useSS(0);
  return (
    <section className="section" style={{ background: '#fff' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>FAQ</div></Rv>
          <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(32px, 5cqi, 48px)', fontWeight: 800, letterSpacing: -0.03 }}>Questions, answered.</h2></Rv>
        </div>
        <div>
          {items.map((it, i) => (
            <Rv key={i} delay={i*30}>
              <div className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="faq-icon"><Ic.plus style={{ width: 16, height: 16 }}/></span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            </Rv>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useMousePos, useCounter, CounterStat, HeroPhone, CalendarFills, Pricing, FAQ });