// BookUno Web — Categories browse + Auth (login / signup)

const { useState: useStateP } = React;

/* ─── Categories browse page ─────────────────────────────── */
function serviceLink(name, cat) {
  return `/#/search?cat=${encodeURIComponent(cat)}&q=${encodeURIComponent(name)}`;
}

function PageCategories({ logoVariant = 'default' }) {
  const [q, setQ] = useStateP('');
  const query = q.trim().toLowerCase();
  const cats = CATEGORIES.filter(c => !query || c.name.toLowerCase().includes(query));

  // When filtering, surface matching individual services across every group.
  const matchedServices = query
    ? SERVICE_GROUPS.flatMap(g =>
        g.services
          .filter(s => s.toLowerCase().includes(query) || g.name.toLowerCase().includes(query))
          .map(s => ({ name: s, cat: g.cat, group: g.name }))
      )
    : [];

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

      <section className="cats-hero">
        <div className="container">
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>EXPLORE</div></Rv>
          <Rv delay={60}><h1 className="cats-h1">Browse every kind of local service.</h1></Rv>
          <Rv delay={120}>
            <div className="cats-search">
              <Ic.search style={{ width: 18, height: 18, color: 'var(--muted)' }}/>
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search any service — e.g. plumber, photographer, tutor"/>
            </div>
          </Rv>
        </div>
      </section>

      {query ? (
        /* ── Filtered view: matching services across the whole taxonomy ── */
        <section className="section" style={{ background: '#fff', paddingTop: 20 }}>
          <div className="container">
            {(cats.length > 0 || matchedServices.length > 0) ? (
              <>
                {cats.length > 0 && (
                  <div className="cats cats-lg" style={{ marginBottom: matchedServices.length ? 32 : 0 }}>
                    {cats.map((c, i) => {
                      const Icon = c.icon;
                      return (
                        <a key={c.id}
                          href={`/#/search?cat=${encodeURIComponent(c.id)}`}
                          className={`cat-tile${c.photo ? ' has-photo' : ''}`}
                          style={c.photo ? { '--cat-bg': `url("${c.photo}")` } : {}}>
                          <span className="cat-ic" style={c.photo ? {} : gradVars(c.seed)}><Icon style={{ width: 22, height: 22 }}/></span>
                          <span className="cat-name">{c.name}</span>
                        </a>
                      );
                    })}
                  </div>
                )}
                {matchedServices.length > 0 && (
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                    {matchedServices.map((s, i) => (
                      <a key={i} href={serviceLink(s.name, s.cat)} className="cat-pill">{s.name}</a>
                    ))}
                  </div>
                )}
              </>
            ) : (
              <p style={{ textAlign: 'center', color: 'var(--muted)', padding: '40px 0' }}>No services match "{q}".</p>
            )}
          </div>
        </section>
      ) : (
        <>
          {/* ── Top categories tiles ── */}
          <section className="section" style={{ background: '#fff', paddingTop: 12, paddingBottom: 28 }}>
            <div className="container">
              <div className="cats cats-lg">
                {CATEGORIES.map((c, i) => {
                  const Icon = c.icon;
                  return (
                    <Rv key={c.id} delay={(i % 8) * 30}>
                      <a
                        href={`/#/search?cat=${encodeURIComponent(c.id)}`}
                        className={`cat-tile${c.photo ? ' has-photo' : ''}`}
                        style={c.photo ? { '--cat-bg': `url("${c.photo}")` } : {}}>
                        <span className="cat-ic" style={c.photo ? {} : gradVars(c.seed)}><Icon style={{ width: 22, height: 22 }}/></span>
                        <span className="cat-name">{c.name}</span>
                      </a>
                    </Rv>
                  );
                })}
              </div>
            </div>
          </section>

          {/* ── Popular services pills ── */}
          <section style={{ background: 'var(--bg)', padding: '32px 0' }}>
            <div className="container">
              <Rv><h2 className="cats-section-h">Popular right now</h2></Rv>
              <Rv delay={40}>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 16 }}>
                  {POPULAR_SERVICES.map((s, i) => (
                    <a key={i} href={serviceLink(s.name, s.cat)} className="cat-pill">{s.name}</a>
                  ))}
                </div>
              </Rv>
            </div>
          </section>

          {/* ── All services, grouped ── */}
          <section className="section" style={{ background: '#fff' }}>
            <div className="container">
              <Rv><h2 className="cats-section-h">All services</h2></Rv>
              <Rv delay={40}>
                <p style={{ color: 'var(--muted)', fontSize: 14.5, marginTop: 6, maxWidth: 560 }}>
                  Whatever you do, there's a place for it on Bookuno. Browse the full A–Z below.
                </p>
              </Rv>
              <div className="cats-groups">
                {SERVICE_GROUPS.map((g, i) => (
                  <Rv key={g.id} delay={(i % 6) * 25}>
                    <div className="cats-group">
                      <h3 className="cats-group-h"><span style={{ marginRight: 8 }}>{g.icon}</span>{g.name}</h3>
                      <ul className="cats-group-list">
                        {g.services.map((s, j) => (
                          <li key={j}><a href={serviceLink(s, g.cat)}>{s}</a></li>
                        ))}
                      </ul>
                    </div>
                  </Rv>
                ))}
              </div>
            </div>
          </section>

          {/* ── Can't find it CTA ── */}
          <section style={{ background: 'var(--bg)', padding: '48px 0 72px' }}>
            <div className="container">
              <Rv>
                <div className="cats-cta">
                  <h2 style={{ fontSize: 'clamp(20px, 3cqi, 28px)', fontWeight: 800, letterSpacing: -0.03 }}>Don't see your trade?</h2>
                  <p style={{ marginTop: 10, color: 'var(--muted)', fontSize: 15, lineHeight: 1.6, maxWidth: 460, margin: '10px auto 0' }}>
                    If you offer a local service, you can list it on Bookuno. Set up your booking page in minutes — no booking fees, ever.
                  </p>
                  <div style={{ marginTop: 22 }}>
                    <a className="btn primary lg" href="/#/business"><Ic.tag style={{ width: 16, height: 16 }}/> Get listed</a>
                  </div>
                </div>
              </Rv>
            </div>
          </section>
        </>
      )}

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

/* ─── Auth (login / signup) ──────────────────────────────── */
function PageAuth({ logoVariant = 'default', mode: initial = 'login' }) {
  const [mode, setMode] = useStateP(initial);
  const [name, setName] = useStateP('');
  const [email, setEmail] = useStateP('');
  const [password, setPassword] = useStateP('');
  const [loading, setLoading] = useStateP(false);
  const [error, setError] = useStateP('');
  const [resetSent, setResetSent] = useStateP(false);

  const isSignup = mode === 'signup';
  const isForgot = mode === 'forgot';

  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const api = window.BOOKUNO_API;
      if (!api) throw new Error('Auth not available');
      if (isForgot) {
        await api.resetPassword(email.trim());
        setResetSent(true);
        setLoading(false);
        return;
      }
      if (isSignup) {
        await api.signUp({ email: email.trim(), password, name: name.trim() });
      } else {
        await api.signIn(email.trim(), password);
      }
      window.location.href = '/app.html#/account';
    } catch (err) {
      setError(err?.message || 'Something went wrong. Please try again.');
    } finally {
      setLoading(false);
    }
  }

  async function handleSocial(provider) {
    setError('');
    try {
      const api = window.BOOKUNO_API;
      if (!api) throw new Error('Auth not available');
      await api.signInWithProvider(provider, { redirectTo: window.location.origin + '/app.html#/account' });
    } catch (err) {
      setError(err?.message || 'Could not open sign-in window.');
    }
  }

  function switchMode(newMode) { setMode(newMode); setError(''); setResetSent(false); }

  return (
    <div className="web auth-page">
      <div className="auth-split">
        {/* Form side */}
        <div className="auth-form-side">
          <a href="/#/discover" className="auth-logo"><BULogo variant={logoVariant} size={30}/></a>
          <div className="auth-card">
            {isForgot ? (
              resetSent ? (
                <>
                  <h1 className="auth-h1">Check your email</h1>
                  <p className="auth-sub">If an account exists for <b>{email}</b>, a password reset link has been sent.</p>
                  <p className="auth-switch"><a href="/#/auth" onClick={(e) => { e.preventDefault(); switchMode('login'); }}>Back to sign in</a></p>
                </>
              ) : (
                <>
                  <h1 className="auth-h1">Reset password</h1>
                  <p className="auth-sub">Enter your email and we'll send you a reset link.</p>
                  {error && <div style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--danger-bg)', color: 'var(--danger)', fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>{error}</div>}
                  <form onSubmit={handleSubmit} className="auth-fields">
                    <label className="auth-field">
                      <span>Email</span>
                      <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@email.com" autoComplete="email" required/>
                    </label>
                    <button type="submit" className="btn primary lg block" disabled={loading}>
                      {loading ? 'Sending…' : 'Send reset link'}
                      {!loading && <Ic.arrow style={{ width: 16, height: 16 }}/>}
                    </button>
                  </form>
                  <p className="auth-switch"><a href="/#/auth" onClick={(e) => { e.preventDefault(); switchMode('login'); }}>Back to sign in</a></p>
                </>
              )
            ) : (
              <>
                <h1 className="auth-h1">{isSignup ? 'Create your account' : 'Welcome back'}</h1>
                <p className="auth-sub">{isSignup ? 'Book local services in seconds — no booking fees, ever.' : 'Log in to manage your bookings and saved businesses.'}</p>

                <div className="auth-social">
                  <button className="btn outline block" onClick={() => handleSocial('apple')}><Ic.apple style={{ width: 16, height: 16 }}/> Continue with Apple</button>
                  <button className="btn outline block" onClick={() => handleSocial('google')}><Ic.google style={{ width: 16, height: 16 }}/> Continue with Google</button>
                </div>
                <div className="auth-or"><span>or</span></div>

                {error && (
                  <div style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--danger-bg)', color: 'var(--danger)', fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>{error}</div>
                )}

                <form onSubmit={handleSubmit} className="auth-fields">
                  {isSignup && (
                    <label className="auth-field">
                      <span>Full name</span>
                      <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Sara Reza" autoComplete="name" required/>
                    </label>
                  )}
                  <label className="auth-field">
                    <span>Email</span>
                    <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@email.com" autoComplete="email" required/>
                  </label>
                  <label className="auth-field">
                    <span>Password</span>
                    <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder={isSignup ? 'Create a password' : '••••••••'} autoComplete={isSignup ? 'new-password' : 'current-password'} required/>
                  </label>
                  {!isSignup && <a href="#" className="auth-forgot" onClick={e => { e.preventDefault(); switchMode('forgot'); }}>Forgot password?</a>}
                  <button type="submit" className="btn primary lg block" disabled={loading}>
                    {loading ? (isSignup ? 'Creating account…' : 'Logging in…') : (isSignup ? 'Create account' : 'Log in')}
                    {!loading && <Ic.arrow style={{ width: 16, height: 16 }}/>}
                  </button>
                </form>

                <p className="auth-switch">
                  {isSignup ? 'Already have an account? ' : "New to Bookuno? "}
                  <a href={isSignup ? '/#/auth' : '/#/auth?mode=register'} onClick={(e) => { e.preventDefault(); switchMode(isSignup ? 'login' : 'signup'); }}>
                    {isSignup ? 'Log in' : 'Create an account'}
                  </a>
                </p>
                {isSignup && <p className="auth-legal">By creating an account you agree to our Terms &amp; Privacy Policy.</p>}
              </>
            )}
          </div>
          <a href="/#/business" className="auth-biz">Running a business? Get listed →</a>
        </div>

        {/* Brand side */}
        <div className="auth-brand-side">
          <div className="auth-brand-blob"/>
          <div className="auth-brand-inner">
            <div className="auth-quote">"Switched from spreadsheets on a Sunday — fully booked by Friday."</div>
            <div className="auth-quote-by">
              <span className="auth-quote-av">MS</span>
              <div><div className="auth-quote-nm">Mark Sutton</div><div className="auth-quote-biz">Knot &amp; Comb · Manchester</div></div>
            </div>
            <div className="auth-stats">
              <div><b>UK-wide</b><span>early access</span></div>
              <div><b>3 months</b><span>free</span></div>
              <div><b>0%</b><span>commission</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Help Centre ────────────────────────────────────────── */
function PageHelp({ logoVariant = 'default' }) {
  const [tab, setTab] = useStateP('customer');
  const [q, setQ] = useStateP('');
  const [openFaq, setOpenFaq] = useStateP(0);

  function switchTab(t) { setTab(t); setOpenFaq(0); }

  const CUST_TOPICS = [
    { icon: Ic.cal,    label: 'Bookings',           desc: 'Make, change or cancel',      grad: 'linear-gradient(135deg,#C8B8FF,#7B5BFF)' },
    { icon: Ic.card,   label: 'Payments & refunds', desc: 'How money flows',              grad: 'linear-gradient(135deg,#A8E0FF,#3DA9FF)' },
    { icon: Ic.user,   label: 'Your account',       desc: 'Settings, password, data',     grad: 'linear-gradient(135deg,#C5F0CF,#43C49E)' },
    { icon: Ic.star,   label: 'Reviews',            desc: 'Leave or update a review',     grad: 'linear-gradient(135deg,#FFE4A8,#FFB870)' },
  ];
  const BIZ_TOPICS = [
    { icon: Ic.zap,    label: 'Getting started',      desc: 'Setup guide for new accounts', grad: 'linear-gradient(135deg,#C8B8FF,#6B57FF)' },
    { icon: Ic.cal,    label: 'Calendar & bookings',  desc: 'Manage your schedule',          grad: 'linear-gradient(135deg,#A8E0FF,#7C5BFF)' },
    { icon: Ic.card,   label: 'Payments & payouts',   desc: 'How money reaches you',         grad: 'linear-gradient(135deg,#C5F0CF,#3DA9FF)' },
    { icon: Ic.bell,   label: 'No-shows & cancels',   desc: 'Policies and automation',       grad: 'linear-gradient(135deg,#FFB4A2,#FF7B9C)' },
  ];

  const CUST_GUIDES = [
    { title: 'How to make your first booking',           meta: '3 min read' },
    { title: 'Cancelling or rescheduling a booking',     meta: '2 min read' },
    { title: 'How to request a refund',                  meta: '2 min read' },
    { title: 'What to do if you miss an appointment',    meta: '2 min read' },
    { title: 'How to leave a review',                    meta: '1 min read' },
    { title: 'Managing your account and notifications',  meta: '3 min read' },
    { title: 'Adding or changing a payment method',      meta: '1 min read' },
    { title: 'How to find the right business for you',   meta: '2 min read' },
  ];
  const BIZ_GUIDES = [
    { title: 'Setting up your services and pricing',     meta: '4 min read' },
    { title: 'How to block time off or holidays',        meta: '2 min read' },
    { title: 'Handling a customer cancellation',         meta: '2 min read' },
    { title: 'How to issue a full or partial refund',    meta: '2 min read' },
    { title: 'Adding and managing staff members',        meta: '3 min read' },
    { title: 'Setting up no-show protection',            meta: '3 min read' },
    { title: 'Connecting Stripe for payouts',            meta: '3 min read' },
    { title: 'How to run a promotional offer',           meta: '2 min read' },
  ];

  const CUST_FAQS = [
    { q: 'Is Bookuno free for customers?',
      a: 'Yes, completely free. Bookuno never charges customers a booking fee — what you see is what the business charges, nothing added on top. You only pay what the service costs.' },
    { q: 'How does booking work?',
      a: 'Search for a service by name, category or location. Pick a business, choose an available slot and confirm. You\'ll get a booking request confirmation and a reminder before your appointment.' },
    { q: 'How does payment work?',
      a: 'Depending on the business, you\'ll either pay through the app (card, Apple Pay or Google Pay) when you confirm, or pay on the day. Each business sets their own preference — it\'s shown clearly before you book.' },
    { q: 'Can I cancel or reschedule?',
      a: 'Yes. Go to My Bookings, tap the booking and select Cancel or Reschedule. Whether you get a full refund depends on the business\'s cancellation policy, which you\'ll always see before you confirm.' },
    { q: 'What happens if I miss my booking?',
      a: 'Missed bookings are handled according to the business\'s no-show policy. Some businesses charge a no-show fee if you have a card on file. If you think you\'ve been incorrectly charged, contact the business directly or email help@bookuno.co.uk.' },
    { q: 'How do refunds work?',
      a: 'If you cancel within the free-cancel window set by the business, your payment is returned to your original payment method within 3–5 business days. Some businesses offer partial refunds for late cancellations — the exact policy is always shown before you confirm.' },
    { q: 'The business cancelled on me — what now?',
      a: 'If a business cancels your booking, you receive an automatic full refund regardless of their cancellation policy. You\'ll also get a notification straight away so you can rebook elsewhere quickly.' },
    { q: 'Can I book on behalf of someone else?',
      a: 'Yes. When booking, you can add a different name for the appointment. Just make sure you include any notes the business might need — for example allergies or accessibility requirements — in the booking notes field.' },
    { q: 'My confirmation never arrived',
      a: 'Check your spam or junk folder first. If it\'s still missing, log in and open My Bookings — your booking will be listed there if it went through. Still stuck? Email help@bookuno.co.uk with the business name and approximate booking time.' },
    { q: 'How do I delete my account?',
      a: 'Go to Settings → Account → Delete account. Your personal data is permanently removed within 30 days in line with UK GDPR. Any upcoming bookings will be automatically cancelled and refunded beforehand.' },
  ];
  const BIZ_FAQS = [
    { q: 'How long does setup take?',
      a: 'Most businesses are live in under 10 minutes. Pick your trade, confirm the services we suggest based on your industry, set your opening hours and your booking page goes live instantly — no technical knowledge needed.' },
    { q: 'How do I set my cancellation policy?',
      a: 'In your dashboard go to Settings → Booking policies. You can set a free-cancel window (e.g. 24 hours), a late-cancel fee and a no-show fee. Customers see your policy before they confirm, so there are no surprises.' },
    { q: 'What happens when a customer cancels?',
      a: 'Your cancellation policy applies automatically. Customers inside the free-cancel window get a full refund. Outside it, the fee you\'ve set is retained and included in your next payout. No manual action needed.' },
    { q: 'How do I handle a no-show?',
      a: 'Open the booking in your app and tap Mark as no-show. If you\'ve set a no-show fee and the customer has a card on file, the charge is applied automatically. You\'ll receive the payout in your next settlement.' },
    { q: 'How do payouts work?',
      a: 'Bookuno uses Stripe for all payments. Once your Stripe account is connected, payouts land in your bank account on a rolling 2-business-day schedule. You can see a full breakdown — per booking, per period — in your Insights tab.' },
    { q: 'Can I accept walk-ins alongside online bookings?',
      a: 'Yes. Your calendar shows real-time availability. For walk-ins, simply open the calendar and tap the empty slot to create a booking manually. It blocks the time instantly so there\'s no double-booking.' },
    { q: 'Can I cancel on a customer?',
      a: 'Yes. From the booking tap Cancel and add a short note for the customer. They receive an automatic full refund and a notification. Cancellations affect your reliability rating, so try to give as much notice as possible.' },
    { q: 'How do I issue a refund?',
      a: 'Open the booking, tap Refund, and choose full or partial. Partial refunds let you enter an exact amount. Refunds are processed immediately and arrive in the customer\'s account within 3–5 business days.' },
    { q: 'What if a customer disputes a charge?',
      a: 'Email business@bookuno.co.uk as soon as possible with the booking reference. We\'ll provide full transaction records and help you respond to the dispute through Stripe\'s resolution process.' },
    { q: 'How do I edit or remove a service?',
      a: 'In your dashboard go to Services, tap the service and make your changes. To remove it, scroll to the bottom and tap Delete service. Any existing bookings for that service are unaffected.' },
  ];

  const isCust = tab === 'customer';
  const topics = isCust ? CUST_TOPICS : BIZ_TOPICS;
  const guides = (isCust ? CUST_GUIDES : BIZ_GUIDES).filter(g => !q || g.title.toLowerCase().includes(q.toLowerCase()));
  const faqs   = (isCust ? CUST_FAQS   : BIZ_FAQS).filter(f => !q || f.q.toLowerCase().includes(q.toLowerCase()) || f.a.toLowerCase().includes(q.toLowerCase()));

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

      {/* Hero */}
      <section className="help-hero">
        <div className="container">
          <Rv><div className="micro" style={{ color: 'var(--pri)' }}>HELP CENTRE</div></Rv>
          <Rv delay={60}><h1 className="help-h1">How can we help?</h1></Rv>
          <Rv delay={120}>
            <div className="help-search">
              <Ic.search style={{ width: 18, height: 18, color: 'var(--muted)' }}/>
              <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search guides, FAQs, topics…"/>
              {q && <button className="help-search-clear" onClick={() => setQ('')}><Ic.close style={{ width: 14, height: 14 }}/></button>}
            </div>
          </Rv>
          <Rv delay={180}>
            <div className="help-tabs">
              <button className={isCust ? 'on' : ''} onClick={() => switchTab('customer')}>
                <Ic.user style={{ width: 14, height: 14 }}/> Customer help
              </button>
              <button className={!isCust ? 'on' : ''} onClick={() => switchTab('business')}>
                <Ic.tag style={{ width: 14, height: 14 }}/> Business help
              </button>
            </div>
          </Rv>
        </div>
      </section>

      {/* Topic cards */}
      {!q && (
        <section className="section" style={{ background: '#fff', paddingTop: 0 }}>
          <div className="container">
            <div className="help-topics">
              {topics.map((t, i) => {
                const Icon = t.icon;
                return (
                  <Rv key={`${tab}-${i}`} delay={i * 50}>
                    <button type="button" className="help-topic card" onClick={() => setQ(t.label)} style={{ width: '100%', textAlign: 'left' }}>
                      <div className="help-topic-ic" style={{ background: t.grad }}>
                        <Icon style={{ width: 20, height: 20 }}/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="help-topic-title">{t.label}</div>
                        <div className="help-topic-desc">{t.desc}</div>
                      </div>
                      <Ic.chev style={{ width: 16, height: 16, color: 'var(--muted-2)', flexShrink: 0 }}/>
                    </button>
                  </Rv>
                );
              })}
            </div>
          </div>
        </section>
      )}

      {/* How-to guides */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <Rv>
            <h2 className="help-section-h">
              {q ? `Guides matching "${q}"` : 'Popular guides'}
            </h2>
          </Rv>
          {guides.length ? (
            <div className="help-guides">
              {guides.map((g, i) => (
                <Rv key={i} delay={i * 25}>
                  <div className="help-guide card" style={{ cursor: 'default' }}>
                    <div className="help-guide-ic">
                      <Ic.spark style={{ width: 15, height: 15, color: 'var(--pri)' }}/>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div className="help-guide-title">{g.title}</div>
                      <div className="help-guide-meta">{g.meta} · <a href="mailto:help@bookuno.co.uk" style={{ color: 'var(--pri)', fontWeight: 600 }}>Email us</a></div>
                    </div>
                  </div>
                </Rv>
              ))}
            </div>
          ) : (
            <p style={{ color: 'var(--muted)', fontSize: 14, padding: '12px 0' }}>No guides match "{q}".</p>
          )}
        </div>
      </section>

      {/* FAQs */}
      <section className="section" style={{ background: '#fff' }}>
        <div className="container" style={{ maxWidth: 860 }}>
          <Rv>
            <h2 className="help-section-h">
              {q ? `FAQs matching "${q}"` : 'Frequently asked questions'}
            </h2>
          </Rv>
          {faqs.length ? faqs.map((item, i) => (
            <Rv key={`${tab}-faq-${i}`} delay={i * 20}>
              <div className={`faq-item ${openFaq === i ? 'open' : ''}`} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{item.q}</span>
                  <span className="faq-icon"><Ic.plus style={{ width: 16, height: 16 }}/></span>
                </div>
                <div className="faq-a">{item.a}</div>
              </div>
            </Rv>
          )) : (
            <p style={{ color: 'var(--muted)', fontSize: 14, padding: '12px 0' }}>No FAQs match "{q}".</p>
          )}
        </div>
      </section>

      {/* Still need help */}
      <section style={{ background: 'var(--bg)', padding: '60px 0 80px' }}>
        <div className="container">
          <Rv>
            <div className="help-contact-cta">
              <div className="help-contact-icon">
                <Ic.msg style={{ width: 26, height: 26 }}/>
              </div>
              <h2 style={{ fontSize: 'clamp(22px, 3.5cqi, 32px)', fontWeight: 800, letterSpacing: -0.03, marginTop: 16 }}>Still need help?</h2>
              <p style={{ marginTop: 10, color: 'var(--muted)', fontSize: 15, lineHeight: 1.6, maxWidth: 440, margin: '10px auto 0' }}>
                Can't find what you're looking for? Our team usually replies within a few hours.
              </p>
              <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 24, flexWrap: 'wrap' }}>
                <a className="btn primary lg" href="mailto:help@bookuno.co.uk">
                  <Ic.mail style={{ width: 16, height: 16 }}/> Email us
                </a>
                {!isCust && (
                  <a className="btn outline lg" href="mailto:business@bookuno.co.uk">
                    <Ic.tag style={{ width: 16, height: 16 }}/> Business support
                  </a>
                )}
              </div>
            </div>
          </Rv>
        </div>
      </section>

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

Object.assign(window, { PageCategories, PageAuth, PageHelp });