// BookUno Web — Customer landing extras
// Stats band, "How it works" customer journey, customer testimonials,
// one-tap rebook demo. Shares motion/animation primitives with the
// business landing.

const { useState: useLS, useEffect: useLE, useRef: useLR } = React;

/* ─── Category stock images ─────────────────────────────────
   Stable Unsplash photo URLs per category. The category card has a
   gradient background underneath, so any failed loads still render
   beautifully — the <img> just hides itself onError. */
const CATEGORY_IMAGES = {
  barber:   '/assets/img/cat/barber.jpg',
  beauty:   '/assets/img/cat/beauty.jpg',
  wellness: '/assets/img/cat/wellness.jpg',
  fitness:  '/assets/img/cat/fitness.jpg',
  cleaning: '/assets/img/cat/cleaning.jpg',
  trades:   '/assets/img/cat/trades.jpg',
  garden:   '/assets/img/cat/garden.jpg',
  pet:      '/assets/img/cat/pet.jpg',
  auto:     '/assets/img/cat/auto.jpg',
  camp:     '/assets/img/cat/camp.jpg',
  hire:     '/assets/img/cat/hire.jpg',
  event:    '/assets/img/cat/event.jpg',
  edu:      '/assets/img/cat/edu.jpg',
  creative: '/assets/img/cat/creative.jpg',
};

/* ─── Customer stat band ─────────────────────────────────────
   Counters of social-proof metrics. Reuses biz CounterStat. */
function CustStatsBand() {
  return (
    <section className="cust-stats">
      <div className="container">
        <Rv><div className="micro" style={{ color: '#FFD7E8', opacity: 0.85 }}>WHY CUSTOMERS LOVE BOOKUNO</div></Rv>
        <Rv delay={60}>
          <h2 className="cust-stats-head">A booking calmer than calling around.</h2>
        </Rv>
        <div className="cust-stats-grid">
          <Rv delay={0}><CounterStat end={1} suffix=" min" label="Book in under a minute"/></Rv>
          <Rv delay={80}><CounterStat end={24} suffix="/7" label="Book online anytime"/></Rv>
          <Rv delay={160}><CounterStat end={1} suffix=" app" label="All your bookings in one place"/></Rv>
          <Rv delay={240}><CounterStat end={0} prefix="£" label="No booking fees, ever"/></Rv>
        </div>
      </div>
    </section>
  );
}

/* ─── How it works (customer) ─────────────────────────────────
   Three steps with a small phone mock for each. */
function MiniPhone({ children, label }) {
  return (
    <div className="mini-phone">
      <div className="mini-phone-bezel">
        <div className="mini-phone-screen">
          {children}
        </div>
      </div>
      {label && <div className="mini-phone-label">{label}</div>}
    </div>
  );
}

function HowItWorks() {
  return (
    <section className="section cust-hiw">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>HOW IT WORKS</div></Rv>
          <Rv delay={60}><h2 style={{ marginTop: 6, fontSize: 'clamp(30px, 4.4cqi, 48px)', fontWeight: 800, letterSpacing: -0.03 }}>From a vague thought to "I'm booked" — in under a minute.</h2></Rv>
          <Rv delay={140}><p style={{ marginTop: 12, color: 'var(--muted)', fontSize: 16, maxWidth: 580, margin: '12px auto 0', lineHeight: 1.55 }}>Three taps to your next appointment. No phone calls, no DMs, no waiting on "we'll get back to you".</p></Rv>
        </div>
        <div className="cust-hiw-grid">
          <Rv delay={0}>
            <div className="cust-hiw-step">
              <div className="cust-hiw-num">01 · SEARCH</div>
              <div className="cust-hiw-mock">
                <MiniPhone>
                  <MiniStatusBar/>
                  <div className="mp-body">
                    <div className="mp-eyebrow">DISCOVER</div>
                    <div className="mp-h">What are you<br/>booking today?</div>
                    <div className="mp-search">
                      <Ic.search style={{ width: 16, height: 16, color: 'var(--pri)' }}/>
                      <span className="typing-mini">Saturday haircut</span>
                    </div>
                    <div className="mp-chips">
                      {['Hair','Beauty','Wellness','Trades'].map(t => (
                        <span key={t} className="mp-chip">{t}</span>
                      ))}
                    </div>
                    <div className="mp-eyebrow" style={{ marginTop: 14 }}>TRENDING NEAR YOU</div>
                    <div className="mp-trend-grid">
                      {[0,1,2,3].map(i => (
                        <div key={i} className="mp-trend-tile" style={{ background: `linear-gradient(135deg, ${GRAD_PALETTES[i][0]}, ${GRAD_PALETTES[i][3]})` }}>
                          <div className="mp-trend-label">{['Barbers','Beauty','Yoga','Trades'][i]}</div>
                          <div className="mp-trend-meta">{[124, 89, 67, 142][i]} nearby</div>
                        </div>
                      ))}
                    </div>
                  </div>
                </MiniPhone>
              </div>
              <h3>Search like you talk.</h3>
              <p>Type what you actually need — "haircut Saturday near me", "deep clean before guests", "yoga Sunday morning" — and Bookuno gets it.</p>
            </div>
          </Rv>
          <Rv delay={120}>
            <div className="cust-hiw-step">
              <div className="cust-hiw-num">02 · BOOK</div>
              <div className="cust-hiw-mock">
                <MiniPhone>
                  <MiniStatusBar/>
                  <div style={{ height: 110, width: '100%', background: 'linear-gradient(135deg, #FFB4A2, #FF7B9C)', position: 'relative' }}>
                    <button style={{ position: 'absolute', top: 14, right: 14, width: 32, height: 32, borderRadius: 11, background: 'rgba(255,255,255,0.95)', color: 'var(--ink)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(0,0,0,0.15)' }}>
                      <Ic.heart style={{ width: 14, height: 14 }}/>
                    </button>
                    <div style={{ position: 'absolute', bottom: 12, left: 16, color: '#fff' }}>
                      <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.02 }}>Knot &amp; Comb</div>
                      <div style={{ fontSize: 11, opacity: 0.95, display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600 }}><Ic.star style={{ width: 10, height: 10, color: 'var(--amber)' }}/>4.9 · Barber · 0.4 mi</div>
                    </div>
                  </div>
                  <div className="mp-body" style={{ paddingTop: 14 }}>
                    <div className="mp-eyebrow">PICK A SLOT</div>
                    <div className="mp-days">
                      {['Sat 1','Sun 2','Mon 3','Tue 4','Wed 5'].map((d, i) => {
                        const [dow, num] = d.split(' ');
                        const sel = i === 0;
                        return (
                          <div key={d} className={`mp-day ${sel ? 'sel' : ''}`}>
                            <div className="mp-day-dow">{dow}</div>
                            <div className="mp-day-num">{num}</div>
                          </div>
                        );
                      })}
                    </div>
                    <div className="mp-times">
                      {[
                        { t: '10:00' }, { t: '11:30' }, { t: '12:00' },
                        { t: '13:30', sel: false }, { t: '14:30', sel: true }, { t: '15:30' },
                      ].map(({t, sel}) => (
                        <div key={t} className={`mp-time ${sel ? 'sel' : ''}`}>{t}</div>
                      ))}
                    </div>
                    <div className="mp-confirm">
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 800 }}>Skin fade · 14:30</div>
                        <div style={{ fontSize: 10.5, opacity: 0.65 }}>45 min · with Mark</div>
                      </div>
                      <div style={{ fontSize: 16, fontWeight: 800 }}>£24</div>
                    </div>
                  </div>
                </MiniPhone>
              </div>
              <h3>Pick a time. Done.</h3>
              <p>See live availability across staff. Tap the slot. Bookuno locks it in — and your reminder goes out the day before, automatically.</p>
            </div>
          </Rv>
          <Rv delay={240}>
            <div className="cust-hiw-step">
              <div className="cust-hiw-num">03 · ENJOY</div>
              <div className="cust-hiw-mock">
                <MiniPhone>
                  <div style={{ background: 'linear-gradient(180deg, #1A0E4A 0%, #6B57FF 100%)', color: '#fff', height: '100%', position: 'relative', overflow: 'hidden' }}>
                    <div className="blob" style={{ width: 220, height: 220, background: '#FF8FCB', top: 50, right: -50, opacity: 0.4 }}/>
                    <MiniStatusBar dark/>
                    <div style={{ position: 'relative', padding: '50px 18px 18px', textAlign: 'center' }}>
                      <div style={{ fontSize: 10.5, fontWeight: 800, opacity: 0.7, letterSpacing: 0.12 }}>BOOKING CONFIRMED</div>
                      <div style={{ width: 76, height: 76, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', margin: '20px auto 0', display: 'grid', placeItems: 'center', position: 'relative' }}>
                        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'rgba(255,255,255,0.14)', animation: 'pulseDot 1.6s ease-in-out infinite' }}/>
                        <Ic.check style={{ width: 38, height: 38, position: 'relative' }}/>
                      </div>
                      <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.025, marginTop: 18 }}>See you Saturday</div>
                      <div style={{ fontSize: 12.5, opacity: 0.85, marginTop: 4 }}>Sat 1 Jun · 14:30</div>
                      <div style={{ marginTop: 18, padding: 12, borderRadius: 14, background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(8px)', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 10 }}>
                        <div style={{ textAlign: 'center', padding: '6px 8px', borderRadius: 9, background: 'rgba(255,255,255,0.2)', minWidth: 38 }}>
                          <div style={{ fontSize: 8.5, fontWeight: 700, opacity: 0.85 }}>SAT</div>
                          <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.02 }}>01</div>
                        </div>
                        <div style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ fontWeight: 800, fontSize: 12.5 }}>Skin fade</div>
                          <div style={{ fontSize: 10.5, opacity: 0.8 }}>Knot &amp; Comb · with Mark</div>
                        </div>
                      </div>
                      <div style={{ marginTop: 14, display: 'flex', gap: 6, justifyContent: 'center' }}>
                        <span style={{ padding: '7px 12px', borderRadius: 10, background: '#fff', color: 'var(--ink)', fontSize: 11, fontWeight: 800 }}>+ Calendar</span>
                        <span style={{ padding: '7px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.2)', color: '#fff', fontSize: 11, fontWeight: 800 }}>Share</span>
                      </div>
                    </div>
                  </div>
                </MiniPhone>
              </div>
              <h3>Get on with your day.</h3>
              <p>It's in your calendar. We'll nudge you the day before. Run out of time? Reschedule from the app in two taps.</p>
            </div>
          </Rv>
        </div>
      </div>
    </section>
  );
}

/* ─── Mini iOS status bar (time + signal/battery) ─────────── */
function MiniStatusBar({ dark = false }) {
  const color = dark ? '#fff' : '#15111F';
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      height: 42,
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
      padding: '14px 26px 0',
      zIndex: 5,
      pointerEvents: 'none',
      fontSize: 12, fontWeight: 700, color,
    }}>
      <span>9:41</span>
      <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>
        <svg width="14" height="9" viewBox="0 0 14 10"><rect x="0" y="6" width="2.4" height="3.4" rx="0.5" fill={color}/><rect x="3.6" y="4" width="2.4" height="5.4" rx="0.5" fill={color}/><rect x="7.2" y="2" width="2.4" height="7.4" rx="0.5" fill={color}/><rect x="10.8" y="0" width="2.4" height="9.4" rx="0.5" fill={color}/></svg>
        <svg width="20" height="10" viewBox="0 0 22 11"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke={color} strokeOpacity={dark ? 0.6 : 0.45} fill="none"/><rect x="2" y="2" width="13" height="7" rx="1.2" fill={color}/></svg>
      </span>
    </div>
  );
}

/* ─── Quick-book demo — small phone showing "Rebook in one tap" ── */
function QuickRebook() {
  const [tap, setTap] = useLS(false);
  const [confirmed, setConfirmed] = useLS(false);
  useLE(() => {
    let cancelled = false;
    const run = async () => {
      while (!cancelled) {
        setTap(false); setConfirmed(false);
        await new Promise(r => setTimeout(r, 1800));
        if (cancelled) return;
        setTap(true);
        await new Promise(r => setTimeout(r, 450));
        if (cancelled) return;
        setConfirmed(true);
        await new Promise(r => setTimeout(r, 2200));
        if (cancelled) return;
      }
    };
    run();
    return () => { cancelled = true; };
  }, []);
  return (
    <section className="section cust-rebook">
      <div className="container col-2 lead-left">
        <Rv>
          <div>
            <div className="micro" style={{ color: 'var(--pri)' }}>THE BOOKUNO MOMENT</div>
            <h2 style={{ marginTop: 8, fontSize: 'clamp(28px, 4.6cqi, 52px)', fontWeight: 800, letterSpacing: -0.03, lineHeight: 1.04 }}>
              Rebook your regular in one tap.
            </h2>
            <p style={{ marginTop: 16, color: 'var(--muted)', fontSize: 16, lineHeight: 1.6, maxWidth: 480 }}>
              Bookuno remembers what you like and when you like it. Your favourite barber, cleaner, yoga teacher, dog walker — one home-screen widget away.
            </p>
            <div style={{ display: 'grid', gap: 12, marginTop: 22, maxWidth: 480 }}>
              {[
                { i: Ic.heart, t: 'Saved businesses with one-tap rebook' },
                { i: Ic.bell,  t: 'Reminders the day before, every time' },
                { i: Ic.cal,   t: 'Adds itself to your calendar — no copy/paste' },
                { i: Ic.shield, t: 'Free for life. No ads. No subscription.' },
              ].map((p, i) => {
                const Icon = p.i;
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5 }}>
                    <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--pri-50)', color: 'var(--pri)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Icon style={{ width: 16, height: 16 }}/>
                    </div>
                    {p.t}
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
              <button className="btn primary lg"><Ic.apple style={{ width: 16, height: 16 }}/> App Store</button>
              <button className="btn outline lg"><Ic.google style={{ width: 16, height: 16 }}/> Google Play</button>
            </div>
          </div>
        </Rv>
        <Rv delay={120}>
          <div className="rebook-stage">
            <div className="blob" style={{ width: 280, height: 280, background: '#FF8FCB', top: 20, right: 0, opacity: 0.32 }}/>
            <div className="blob" style={{ width: 220, height: 220, background: '#7B5BFF', bottom: 30, left: -10, opacity: 0.35 }}/>

            {/* Phone */}
            <div className="rebook-phone">
              <div className="rebook-phone-bezel">
                <div className="rebook-phone-screen">
                  {/* iOS status bar */}
                  <div className="rebook-status">
                    <span>9:41</span>
                    <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>
                      <svg width="16" height="10" 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="22" height="11" 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>
                  <div className="rebook-body">
                    <div className="rebook-greeting">
                      <div className="rebook-eyebrow">YOUR FAVOURITES</div>
                      <div className="rebook-title">Tap to book again</div>
                    </div>
                    <div className="rebook-rows">
                      {[
                        { n: 'Knot & Comb',     s: 'Skin fade · 45 min',    when: 'Last visit: 3 weeks ago', p: '£24', seed: 0, id: 'barber',  fav: true },
                        { n: 'Stillpoint',      s: 'Vinyasa flow · 60 min', when: 'Last visit: last Thursday', p: '£14', seed: 2, id: 'wellness' },
                        { n: 'Brightline',      s: 'Deep clean · 2 hr',     when: 'Last visit: 2 months ago', p: '£62', seed: 3, id: 'cleaning' },
                        { n: 'Greenroot',       s: 'Lawn cut · 1 hr',       when: 'Last visit: 3 weeks ago', p: '£35', seed: 6, id: 'garden' },
                      ].map((b, i) => (
                        <div key={i} className={`rebook-row ${b.fav && tap ? 'tapped' : ''} ${b.fav && confirmed ? 'confirmed' : ''}`}>
                          <div className="rebook-img" style={{ background: `linear-gradient(135deg, ${GRAD_PALETTES[b.seed][0]}, ${GRAD_PALETTES[b.seed][3]})` }}>
                            {CATEGORY_IMAGES[b.id] && (
                              <img src={CATEGORY_IMAGES[b.id]} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
                            )}
                          </div>
                          <div className="rebook-info">
                            <div className="rebook-name">{b.n}</div>
                            <div className="rebook-svc">{b.s}</div>
                            <div className="rebook-when">{b.when}</div>
                          </div>
                          <button className="rebook-btn">
                            {b.fav && confirmed ? <><Ic.check style={{ width: 13, height: 13 }}/> Booked</> : 'Rebook'}
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
              {/* Tap ring */}
              <div className={`rebook-tap ${tap ? 'on' : ''}`}/>
              {/* Confirmation toast */}
              <div className={`rebook-toast ${confirmed ? 'on' : ''}`}>
                <Ic.check style={{ width: 14, height: 14, color: '#fff' }}/>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 800 }}>Booked for Sat 14:30</div>
                  <div style={{ fontSize: 10.5, opacity: 0.85 }}>Knot &amp; Comb · Skin fade · £24</div>
                </div>
              </div>
            </div>
          </div>
        </Rv>
      </div>
    </section>
  );
}

/* ─── Trending chips (under hero search) ─────────────────── */
function TrendingChips() {
  const chips = ['Saturday haircut', 'Sports massage', 'End-of-tenancy clean', 'Sunday yoga', 'Dog grooming', 'Boiler service', 'MOT'];
  return (
    <div className="trend-chips">
      <span className="trend-label">Try</span>
      {chips.map((c) => (
        <a key={c} href={`/app.html#/search?q=${encodeURIComponent(c)}`} className="trend-chip">{c}</a>
      ))}
    </div>
  );
}

Object.assign(window, { CustStatsBand, HowItWorks, QuickRebook, TrendingChips, MiniPhone, MiniStatusBar, CATEGORY_IMAGES });