// BookUno Web — Public landing (responsive)

function PageLanding({ logoVariant = 'default' }) {
  return (
    <div className="web">
      <TopNav active="discover" logoVariant={logoVariant} dark/>

      {/* HERO */}
      <section className="hero">
        <div className="blob" style={{ width: 460, height: 460, background: '#FF8FCB', top: -100, right: -120 }}/>
        <div className="blob" style={{ width: 380, height: 380, background: '#7B5BFF', bottom: -120, left: -100 }}/>
        <div className="blob" style={{ width: 320, height: 320, background: '#A8D8FF', top: 60, left: '40%', opacity: 0.35 }}/>

        <div className="hero-inner hero-grid">
          <div className="hero-copy">
            <Rv>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(10px)', fontSize: 12, fontWeight: 700, letterSpacing: 0.05 }}>
                <Ic.spark style={{ width: 14, height: 14, color: '#FFD7E8' }}/>
                EARLY ACCESS · LONDON FIRST
              </div>
            </Rv>
            <Rv delay={80}>
              <h1 style={{ marginTop: 22 }}>
                London booking.<br/>
                <span className="grad-text">Done properly.</span>
              </h1>
            </Rv>
            <Rv delay={140}>
              <p className="lead">Barbers, salons, wellness studios and more — find a business, pick a time, and send your booking request in seconds. No phone calls, no waiting around.</p>
            </Rv>
            <Rv delay={220}>
              <div className="hero-search-v2">
                <div className="hsv2-row">
                  <div className="hsv2-input">
                    <Ic.search/>
                    <input placeholder="Search by service, business, or city…" defaultValue=""/>
                  </div>
                  <button className="hsv2-submit" type="button" onClick={() => { window.location.href = '/app.html#/search'; }}>
                    <Ic.search/>
                    <span>Search</span>
                  </button>
                </div>
                <div className="hsv2-meta">
                  <button className="hsv2-chip">
                    <Ic.pin/>
                    <span className="hsv2-chip-strong">Manchester</span>
                    <span className="hsv2-chip-dim">change</span>
                  </button>
                  <button className="hsv2-chip">
                    <Ic.cal/>
                    <span className="hsv2-chip-strong">Any time</span>
                  </button>
                  <button className="hsv2-chip">
                    <Ic.tag/>
                    <span>Add filters</span>
                  </button>
                </div>
              </div>
            </Rv>
            <Rv delay={300}>
              <div className="hero-trust">
                <div className="hero-trust-item">
                  <Ic.shield style={{ width: 16, height: 16 }}/> Verified local pros
                </div>
                <div className="hero-trust-item">
                  <Ic.star style={{ width: 16, height: 16, color: 'var(--amber)' }}/> 4.9 average rating
                </div>
                <div className="hero-trust-item">
                  <Ic.zap style={{ width: 16, height: 16 }}/> Request a booking
                </div>
                <div className="hero-trust-item">
                  <Ic.bell style={{ width: 16, height: 16 }}/> Free for customers
                </div>
              </div>
            </Rv>
            <TrendingChips/>
          </div>

          {/* Customer journey phone — single big iPhone, 5-scene loop */}
          <div className="hero-phone-col">
            <Rv delay={260}>
              <CustomerJourneyPhone/>
            </Rv>
          </div>
        </div>
      </section>

      {/* Stats band — animated proof */}
      <CustStatsBand/>

      {/* Categories */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-h">
            <div>
              <div className="micro" style={{ color: 'var(--pri)' }}>BROWSE</div>
              <h2 style={{ marginTop: 6 }}>Barbers, beauty &amp; wellness — and growing.</h2>
              <p>Starting with the services you book most. More categories coming as we grow.</p>
            </div>
            <a href="/app.html#/search" style={{ color: 'var(--pri)', fontWeight: 700, fontSize: 14 }}>See all categories →</a>
          </div>
          <div className="cats">
            {CATEGORIES.slice(0, 12).map((c, i) => {
              const Icon = c.icon;
              const palette = GRAD_PALETTES[c.seed];
              const imgUrl = CATEGORY_IMAGES[c.id] || '';
              return (
                <Rv key={c.id} delay={i*30}>
                  <a href="/app.html#/search" className="cat-card cat-card-img" style={{ background: `linear-gradient(135deg, ${palette[0]}, ${palette[3]})` }}>
                    {imgUrl && <img className="cat-card-bg" src={imgUrl} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>}
                    <div className="cat-card-overlay"/>
                    <div className="cat-card-top">
                      <div className="icon" style={{ background: 'rgba(255,255,255,0.92)', color: 'var(--ink)' }}>
                        <Icon style={{ width: 22, height: 22 }}/>
                      </div>
                    </div>
                    <div className="cat-card-meta">
                      <div className="name">{c.name}</div>
                      <div className="count">{Math.floor(80 + i*73 % 800)} businesses</div>
                    </div>
                  </a>
                </Rv>
              );
            })}
          </div>
        </div>
      </section>

      {/* How it works — customer journey, 3 steps with mini phones */}
      <HowItWorks/>

      {/* Featured */}
      <section className="section" style={{ background: '#fff' }}>
        <div className="container">
          <div className="section-h">
            <div>
              <div className="micro" style={{ color: 'var(--pri)' }}>FEATURED</div>
              <h2 style={{ marginTop: 6 }}>Featured local businesses</h2>
              <p>Browse businesses taking bookings on Bookuno across the UK.</p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn outline sm">Map view</button>
              <a href="/app.html#/search" style={{ color: 'var(--pri)', fontWeight: 700, fontSize: 14, alignSelf: 'center' }}>All featured →</a>
            </div>
          </div>
          <div className="sf-grid">
            {BUSINESSES.slice(0, 8).map((b, i) => (
              <Rv key={b.id} delay={i*40}>
                <a href="/app.html#/b/north-street-barbers" className="sf-card">
                  <div className="cover" style={{ position: 'relative' }}>
                    <Cover seed={b.seed} h={180} r={0} label={b.cat}>
                      {i === 0 && <div style={{ position: 'absolute', top: 14, left: 14, padding: '4px 10px', borderRadius: 999, background: '#fff', color: 'var(--pri-700)', fontSize: 11, fontWeight: 800, letterSpacing: 0.04 }}>NEW</div>}
                      <button style={{ position: 'absolute', top: 14, right: 14, width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.92)', color: 'var(--ink)', display: 'grid', placeItems: 'center' }}>
                        <Ic.heart style={{ width: 16, height: 16 }}/>
                      </button>
                    </Cover>
                  </div>
                  <div className="body">
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <div style={{ fontWeight: 800, fontSize: 16, letterSpacing: -0.015 }}>{b.name}</div>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 13, fontWeight: 700 }}>
                        <Ic.star style={{ width: 13, height: 13, color: 'var(--amber)' }}/>{b.rating}
                      </div>
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Ic.pin style={{ width: 12, height: 12 }}/>{b.dist} · from {b.from}
                    </div>
                    <div style={{ marginTop: 12, padding: '8px 12px', borderRadius: 10, background: 'var(--pri-50)', color: 'var(--pri-700)', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Ic.clock style={{ width: 12, height: 12 }}/>Next: {b.next}
                    </div>
                  </div>
                </a>
              </Rv>
            ))}
          </div>
        </div>
      </section>

      {/* Why bookuno — feature triplet */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-h" style={{ display: 'block', textAlign: 'center', maxWidth: 720, margin: '0 auto 36px' }}>
            <div className="micro" style={{ color: 'var(--pri)' }}>WHY BOOKUNO</div>
            <h2 style={{ marginTop: 6 }}>One app for local booking.</h2>
            <p style={{ marginTop: 8 }}>No phone calls, no waiting around. Real availability from local businesses, all in one place.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
            {[
              { icon: Ic.zap,    title: 'Book a slot in seconds', body: 'See real availability from local businesses. Pick a slot, request your booking, and get a confirmation.' },
              { icon: Ic.shield, title: 'Verified local pros',   body: 'Every business is reviewed by real customers. Ratings come straight from completed bookings — never bought.' },
              { icon: Ic.bell,   title: 'Smart reminders',       body: 'Email and SMS nudges before every appointment. We track your bookings so you can stop thinking about it.' },
              { icon: Ic.cal,    title: 'All bookings, one place', body: 'Manage everything — from a campsite to a sports massage — from one beautiful dashboard.' },
              { icon: Ic.heart,  title: 'Save your favourites',  body: 'Build your own little black book of barbers, cleaners, trainers and trades you can trust.' },
              { icon: Ic.card,   title: 'Pay your way',          body: 'Some businesses take card up-front, others pay-on-the-day. Always your choice, never hidden fees.' },
            ].map((f, i) => {
              const Icon = f.icon;
              return (
                <Rv key={i} delay={i*40}>
                  <div className="card hover" style={{ padding: 24, height: '100%' }}>
                    <div style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--pri-50)', color: 'var(--pri)', display: 'grid', placeItems: 'center' }}>
                      <Icon style={{ width: 24, height: 24 }}/>
                    </div>
                    <h3 style={{ fontSize: 18, fontWeight: 800, marginTop: 18, letterSpacing: -0.015 }}>{f.title}</h3>
                    <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 8, lineHeight: 1.55 }}>{f.body}</p>
                  </div>
                </Rv>
              );
            })}
          </div>
        </div>
      </section>

      {/* Rebook demo — one-tap rebook animated */}
      <QuickRebook/>

      {/* For Business */}
      <section className="section" style={{ background: '#fff' }}>
        <div className="container col-2 lead-left" >
          <Rv>
            <div>
              <div className="micro" style={{ color: 'var(--pri)' }}>FOR BUSINESS</div>
              <h2 style={{ marginTop: 6, fontSize: 'clamp(28px, 4cqi, 44px)' }}>Run your booking calendar from your phone.</h2>
              <p style={{ marginTop: 14, color: 'var(--muted)', fontSize: 16, lineHeight: 1.55, maxWidth: 480 }}>Barbers, cleaners, gardeners, wellness studios, painters, plumbers, campsites — whatever you do, set up a storefront in 5 minutes and start taking real bookings.</p>
              <div style={{ display: 'grid', gap: 10, marginTop: 24, maxWidth: 480 }}>
                {[
                  'Live calendar across all your staff',
                  'Customer messaging built in',
                  'Auto-generated storefront, mobile-first',
                  'Marketing tools, offers & gift cards',
                  'Cancel any time — 3 months free',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
                    <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--pri-50)', color: 'var(--pri)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Ic.check style={{ width: 12, height: 12 }}/>
                    </div>
                    {t}
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn primary lg">Set up your business <Ic.arrow style={{ width: 16, height: 16 }}/></button>
                <button className="btn outline lg">See pricing</button>
              </div>
            </div>
          </Rv>
          <Rv delay={120}>
            <div style={{ position: 'relative', height: 540, display: 'grid', placeItems: 'center' }}>
              <div className="blob" style={{ width: 320, height: 320, background: '#FF8FCB', top: 40, left: 40, opacity: 0.35 }}/>
              <div className="blob" style={{ width: 260, height: 260, background: '#7B5BFF', bottom: 40, right: 40, opacity: 0.4 }}/>
              {/* Mock dashboard preview */}
              <div style={{ position: 'relative', width: '100%', maxWidth: 520, borderRadius: 24, background: '#fff', boxShadow: '0 30px 80px rgba(40,30,80,0.25)', overflow: 'hidden', border: '1px solid var(--line)' }}>
                <div style={{ padding: 22, background: 'linear-gradient(135deg, var(--pri-700), var(--pri))', color: '#fff' }}>
                  <div className="micro" style={{ opacity: 0.7 }}>{new Date().toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }).toUpperCase()} · TODAY</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 6 }}>
                    <div>
                      <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.025 }}>Knot &amp; Comb</div>
                      <div style={{ fontSize: 12, opacity: 0.8, marginTop: 2 }}>Manchester · 4 staff</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 12, opacity: 0.7 }}>Today</div>
                      <div style={{ fontSize: 22, fontWeight: 800 }}>£186</div>
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 14 }}>
                    {[['8', 'Booked'], ['92%', 'Filled'], ['4.9', 'Rating']].map(([v, l], i) => (
                      <div key={i} style={{ padding: '8px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(8px)' }}>
                        <div style={{ fontSize: 18, fontWeight: 800 }}>{v}</div>
                        <div style={{ fontSize: 10.5, opacity: 0.8 }}>{l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div style={{ padding: 18 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.1, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 10 }}>Schedule</div>
                  {[
                    { t: '09:00', n: 'Tom Hayes', s: 'Skin fade · 45 min', c: 'var(--green)' },
                    { t: '10:00', n: 'Hannah B.', s: 'Beard trim · 15 min', c: 'var(--pri)' },
                    { t: '11:30', n: 'Jay Patel', s: 'Classic cut · 30 min', c: 'var(--green)' },
                  ].map((r, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: i ? '1px solid var(--line-2)' : 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 13, width: 44, color: 'var(--muted)' }}>{r.t}</div>
                      <div style={{ width: 3, alignSelf: 'stretch', borderRadius: 2, background: r.c }}/>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 700 }}>{r.n}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{r.s}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Rv>
        </div>
      </section>

      {/* App download */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="col-2 lead-pri" style={{ background: 'linear-gradient(135deg, #1A0E4A 0%, #6B57FF 100%)', borderRadius: 32, padding: '56px 40px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
            <div className="blob" style={{ width: 380, height: 380, background: '#FF8FCB', top: -120, right: -120, opacity: 0.4 }}/>
            <Rv>
              <div style={{ position: 'relative' }}>
                <div className="micro" style={{ opacity: 0.7 }}>GET THE APP</div>
                <h2 style={{ marginTop: 6, fontSize: 'clamp(28px, 4cqi, 44px)' }}>Carry your bookings in your pocket.</h2>
                <p style={{ opacity: 0.85, fontSize: 16, lineHeight: 1.55, marginTop: 14, maxWidth: 480 }}>Notifications, saved businesses and one-tap rebooking. Free, no ads, no tracking.</p>
                <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                  <button className="btn lg" style={{ background: '#fff', color: 'var(--ink)' }}><Ic.apple style={{ width: 18, height: 18 }}/> App Store</button>
                  <button className="btn lg" style={{ background: 'rgba(255,255,255,0.18)', color: '#fff' }}><Ic.google style={{ width: 18, height: 18 }}/> Google Play</button>
                </div>
              </div>
            </Rv>
            <Rv delay={140} className="hide-mobile">
              <AppDownloadPhone/>
            </Rv>
          </div>
        </div>
      </section>

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

Object.assign(window, { PageLanding });