// Mobile/tablet-only enhancements (business page). Desktop is untouched:
// every component here renders only when useIsMobile() is true, or is hidden
// ≥1025px via CSS. FAQ is the one piece shown on desktop too.
(function () {
  if (document.getElementById('wa-bizmob-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-bizmob-styles';
  s.textContent = `
  /* ============ MOBILE TRUST STRIP (below hero) ============ */
  .m-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
    padding:15px 20px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
    background:rgba(45,140,255,.06);}
  .m-trust .it{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
    color:var(--text);letter-spacing:-.005em;line-height:1;}
  .m-trust .it svg{color:#34d399;flex-shrink:0;}

  /* ============ STICKY MOBILE CTA BAR ============ */
  .m-cta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(7,11,22,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--border);box-shadow:0 -8px 30px -12px rgba(0,0,0,.7);
    transform:translateY(130%);transition:transform .32s cubic-bezier(.2,.7,.3,1);}
  .m-cta.show{transform:none;}
  .m-cta .btn{flex:1;min-height:54px;padding:15px 16px;font-size:16px;border-radius:14px;}
  .m-cta-spacer{height:calc(74px + env(safe-area-inset-bottom,0px));}

  /* ============ SEND ME THIS LINK ============ */
  .m-send-sec{padding:8px 0 4px;}
  .m-send{max-width:540px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:24px 22px;box-shadow:0 2px 18px -10px rgba(0,0,0,.6);}
  .m-send .eyebrow{margin-bottom:14px;}
  .m-send h3{font-size:21px;line-height:1.12;margin-bottom:8px;letter-spacing:-.01em;}
  .m-send p.sub{color:var(--muted);font-size:14.5px;line-height:1.5;margin-bottom:18px;}
  .m-send form{display:flex;flex-direction:column;gap:11px;}
  .m-send input{width:100%;min-height:52px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:13px;padding:0 16px;color:var(--text);font-family:inherit;font-size:16px;}
  .m-send input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(45,140,255,.18);}
  .m-send button{min-height:54px;font-size:16px;}
  .m-send .reassure{display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:12px;color:var(--dim);margin-top:14px;text-align:center;}
  .m-send .reassure svg{flex-shrink:0;}
  .m-send-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 0;}
  .m-send-ok .ic{width:52px;height:52px;border-radius:15px;background:rgba(52,211,153,.14);
    display:grid;place-items:center;margin-bottom:8px;}

  /* ============ FAQ ACCORDION (mobile + desktop) ============ */
  .faq-wrap{max-width:780px;margin:46px auto 0;}
  .faq-item{border-bottom:1px solid var(--lt-border);}
  .faq-item:first-child{border-top:1px solid var(--lt-border);}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:22px 6px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:17.5px;
    color:var(--lt-text);text-align:left;line-height:1.35;min-height:64px;background:none;}
  .faq-q:hover{color:#fff;}
  .faq-ic{position:relative;width:22px;height:22px;flex-shrink:0;}
  .faq-ic::before,.faq-ic::after{content:'';position:absolute;background:var(--pink);border-radius:2px;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s;}
  .faq-ic::before{top:10px;left:2px;right:2px;height:2.5px;}
  .faq-ic::after{left:10px;top:2px;bottom:2px;width:2.5px;}
  .faq-item.open .faq-ic::after{transform:scaleY(0);opacity:0;}
  .faq-a{overflow:hidden;height:0;transition:height .32s cubic-bezier(.2,.7,.3,1);}
  .faq-a-in{padding:0 6px 24px;color:var(--lt-muted);font-size:15.5px;line-height:1.62;max-width:680px;}
  @media(max-width:1024px){
    .faq-q{font-size:16.5px;padding:20px 4px;}
    .faq-a-in{font-size:15px;}
  }

  /* ============ NAV: cross-page link + mobile hamburger ============ */
  .nav-right{display:flex;align-items:center;gap:16px;}
  .nav-cross{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--muted);
    border:1px solid var(--border);border-radius:999px;padding:9px 15px;white-space:nowrap;
    transition:color .15s,border-color .15s,background .15s;}
  .nav-cross:hover{color:var(--text);border-color:rgba(45,140,255,.45);background:rgba(45,140,255,.07);}
  .nav-cross i{color:var(--pink);font-size:16px;}
  .nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:46px;height:46px;border-radius:12px;}
  .nav-burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--text);
    transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .2s;}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .nav-sheet{display:none;}
  @media(min-width:1025px) and (max-width:1220px){
    .nav .nav-links{gap:20px;}
    .nav-right{gap:11px;}
    .nav-cross{padding:8px 12px;font-size:13px;}
  }
  @media(max-width:1024px){
    .nav .nav-links{display:none;}
    .nav-right{display:none;}
    .nav-burger{display:flex;}
    .nav-sheet{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;
      background:rgba(7,11,22,.985);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
      border-bottom:1px solid var(--border);box-shadow:0 26px 54px -22px rgba(0,0,0,.75);
      max-height:calc(100vh - 70px);overflow:auto;animation:navsheet .22s ease;}
    @keyframes navsheet{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
    .nav-sheet a{display:flex;align-items:center;gap:12px;padding:17px 28px;font-size:17px;font-weight:600;
      color:var(--text);min-height:56px;border-bottom:1px solid var(--border-soft);}
    .nav-sheet a:active{background:rgba(255,255,255,.05);}
    .nav-sheet a i{color:var(--pink);font-size:18px;flex-shrink:0;}
    .nav-sheet .nav-sheet-cross{color:var(--pink);}
  }

  /* ============ MOBILE UX AUDIT — tap targets, spacing, hero ============ */
  @media(max-width:1024px){
    .section{padding:58px 0;}
    .biz-hero{padding:34px 0 52px;}
    .nav-inner{height:64px;}
    .btn{min-height:50px;}
    .btn-sm{min-height:42px;}
    .bizp-grid{gap:18px;}
    .who-card,.biz-col,.ex-card{padding:24px;}
  }
  @media(max-width:560px){
    .wrap{padding:0 20px;}
    .biz-hero-cta{flex-direction:column;align-items:stretch;gap:11px;}
    .biz-hero-cta .btn{width:100%;min-height:54px;justify-content:center;}
    .biz-hero h1{font-size:clamp(32px,8.4vw,44px);}
    .biz-hero .lede{font-size:16px;}
    .bizp-card{padding:26px 22px;}
    .check-grid{grid-template-columns:1fr;}
    .cta-box{padding:56px 22px;}
    .foot-grid{flex-direction:column;gap:24px;}
    .foot-right{align-items:flex-start;text-align:left;}
    .foot-links{gap:18px 22px;}
    /* modal forms: comfortable on small screens */
    .modal{padding:26px 20px;}
    .field input,.field textarea,.field select{font-size:16px;min-height:50px;}
    .frow{grid-template-columns:1fr;}
  }
  `;
  document.head.appendChild(s);
})();

// ── responsive hook: true on mobile + tablet (≤1024px) ───────────────────────
function useIsMobile(query) {
  const q = query || '(max-width: 1024px)';
  const get = () => typeof window !== 'undefined' && window.matchMedia(q).matches;
  const [m, setM] = React.useState(get);
  React.useEffect(() => {
    const mq = window.matchMedia(q);
    const h = () => setM(mq.matches);
    h();
    mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h); };
  }, [q]);
  return m;
}

function BizCheck({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 6 9 17l-5-5" />
    </svg>);
}

// ── trust strip directly below the hero ─────────────────────────────────────
function MobileTrustStrip() {
  const items = ['Shared calendars supported', 'Permissions preserved', 'Integrations remain intact'];
  return (
    <div className="m-trust">
      {items.map((t) => <span className="it" key={t}><BizCheck size={15} />{t}</span>)}
    </div>);
}

// ── sticky CTA bar: Buy Now + Request Quote ──────────────────────────────────
function BizMobileStickyCTA({ onQuote }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const anchor = document.querySelector('.hero-car') || document.querySelector('.biz-hero');
    let io, onScroll;
    if (anchor && 'IntersectionObserver' in window) {
      io = new IntersectionObserver((es) => es.forEach((e) => setShow(!e.isIntersecting)), { threshold: 0 });
      io.observe(anchor);
    } else {
      onScroll = () => setShow(window.scrollY > 480);
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
    }
    return () => { if (io) io.disconnect(); if (onScroll) window.removeEventListener('scroll', onScroll); };
  }, []);
  const goPricing = () => {
    const el = document.getElementById('pricing');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 8, behavior: 'smooth' });
  };
  return (
    <div className={'m-cta' + (show ? ' show' : '')}>
      <button className="btn btn-ghost" onClick={onQuote}>Request Quote</button>
      <button className="btn btn-primary" onClick={goPricing}>Buy Now <span className="arrow">→</span></button>
    </div>);
}

// ── "Send me this link" lead capture (UI only — backend wired separately) ────
function SendLinkCard() {
  const [email, setEmail] = React.useState('');
  const [sector, setSector] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.trim() || !sector || busy) return;
    setBusy(true);
    setError('');
    fetch('/api/send-link', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email.trim(), source: 'business', sector })
    })
      .then((r) => r.json().then((data) => ({ ok: r.ok, data })))
      .then(({ ok, data }) => {
        setBusy(false);
        if (ok && data && data.success) setSent(true);
        else setError((data && data.error) || 'Something went wrong. Please try again.');
      })
      .catch(() => { setBusy(false); setError("Couldn't reach the server. Please try again."); });
  };
  return (
    <section className="section m-send-sec" style={{ paddingTop: 30, paddingBottom: 30 }}>
      <div className="wrap">
        <div className="m-send">
          {sent ? (
            <div className="m-send-ok">
              <div className="ic"><BizCheck size={26} /></div>
              <h3>Link sent ✓</h3>
              <p className="sub" style={{ marginBottom: 0 }}>Check your inbox — we've sent you the Business Overview PDF, plus a link you can forward to your team or open on your desktop later.</p>
            </div>
          ) : (<>
            <span className="eyebrow"><span className="dot"></span>Share &amp; review later</span>
            <h3>Need to share this internally?<br />Send yourself a link to review later.</h3>
            <p className="sub">We'll email you a link so you can review it on desktop or forward it to a colleague who needs to sign off.</p>
            <form onSubmit={submit}>
              <input type="email" required placeholder="you@yourcompany.com" value={email} onChange={(e) => setEmail(e.target.value)} aria-label="Work email address" />
              <select required value={sector} onChange={(e) => setSector(e.target.value)} aria-label="What best describes your organisation?" style={{ width: '100%', padding: '13px 16px', borderRadius: 10, border: '1px solid var(--lt-border)', background: 'var(--lt-surface)', color: sector ? 'var(--lt-text)' : 'var(--lt-muted)', fontSize: 15, marginTop: 10 }}>
                <option value="" disabled>What best describes your organisation?</option>
                <option value="education">Education</option>
                <option value="business">Business / Corporate</option>
                <option value="healthcare">Healthcare &amp; Professional Services</option>
                <option value="other">Other organisation</option>
              </select>
              <button className="btn btn-primary" type="submit" disabled={busy} style={{ marginTop: 10 }}>{busy ? 'Sending…' : <>Send Link <span className="arrow">→</span></>}</button>
            </form>
            {error ? <p style={{ color: '#e6536b', fontSize: 13, marginTop: 8 }}>{error}</p> : null}
            <div className="reassure">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
              No spam — just your link. Unsubscribe any time.
            </div>
          </>)}
        </div>
      </div>
    </section>);
}

// ── FAQ accordion (shown on mobile and desktop) ──────────────────────────────
const WA_BIZ_FAQS = [
  ['Can I delete only old events?', 'Yes. Set a cut-off date and Wipe Away removes only the events before it — leaving recent and future bookings exactly where they are. You can also clear a calendar\u2019s entire history in one pass.'],
  ['Will my calendar remain intact?', 'Completely. Wipe Away only ever removes events. The calendar itself — its name, colour, sharing permissions, integrations and URL — is left exactly as it was.'],
  ['Are recurring events supported?', 'Yes. Wipe Away deletes every past instance of a recurring series up to your chosen date, without touching future occurrences.'],
  ['Can I choose which calendars to clean?', 'Yes. Wipe Away lists every calendar you can access and you select only the ones to clean — resource, shared and departmental calendars included. The rest stay untouched.'],
  ['What happens to permissions and sharing?', 'Nothing changes. Sharing permissions, access levels, subscriptions and booking links are all preserved — only the events inside the calendar are removed.'],
  ['Can I undo a cleanup?', 'Deletions are permanent, so Wipe Away always shows a count and asks you to confirm before anything is removed. For shared or resource calendars we recommend exporting a backup first.'],
  ['Does it work with shared calendars?', 'Yes — it\u2019s exactly what Wipe Away is built for. It cleans shared and resource calendars you have edit access to, while leaving the sharing setup and everyone\u2019s access intact.'],
  ['Does it work with Google Workspace?', 'Yes. Wipe Away works across Google Workspace environments, subject to your admin\u2019s sharing and access settings, and requests only the minimum permissions needed.']];

function FaqRow({ q, a, open, onToggle }) {
  const ref = React.useRef(null);
  const [h, setH] = React.useState(0);
  React.useEffect(() => { if (ref.current) setH(open ? ref.current.scrollHeight : 0); }, [open]);
  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button className="faq-q" aria-expanded={open} onClick={onToggle}>
        <span>{q}</span><span className="faq-ic" aria-hidden="true"></span>
      </button>
      <div className="faq-a" style={{ height: h }}>
        <div className="faq-a-in" ref={ref}>{a}</div>
      </div>
    </div>);
}

function FAQ({ items }) {
  const data = items || WA_BIZ_FAQS;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <SectionHead lt eyebrow="FAQ" title="Questions, answered." sub="What teams and admins ask before running a cleanup." />
        <div className="faq-wrap">
          {data.map((f, i) =>
            <FaqRow key={f[0]} q={f[0]} a={f[1]} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
        </div>
      </div>
    </section>);
}

Object.assign(window, { useIsMobile, MobileTrustStrip, BizMobileStickyCTA, SendLinkCard, FAQ, WA_BIZ_FAQS, BizCheck });