// Mobile/tablet-only enhancements (consumer page). Desktop is untouched:
// every component here is either rendered only when useIsMobile() is true,
// or hidden ≥1025px via CSS. FAQ is the one piece shown on desktop too.
(function () {
  if (document.getElementById('wa-mob-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-mob-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;white-space:nowrap;}
  .m-cta .btn-primary{flex:1.55;}
  .m-cta .price-tag{font-family:'JetBrains Mono';font-size:11px;opacity:.85;margin-left:3px;}
  body.has-m-cta{padding-bottom:0;}
  .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(--border);}
  .faq-item:first-child{border-top:1px solid var(--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(--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(--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;}
  }

  /* ============ MOBILE PRICING NOTE (consumer, mobile only) ============ */
  .m-price-note{display:none;text-align:center;color:var(--lt-muted);font-size:13.5px;
    line-height:1.5;margin:22px auto 0;max-width:460px;}
  .m-price-note svg{vertical-align:-2px;margin-right:6px;color:var(--pink);}
  @media(max-width:1024px){.m-price-note{display:block;}}

  /* ============ 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 svg{color:var(--pink);flex-shrink:0;}
  .nav-cust{font-size:15px;color:var(--muted);font-weight:500;white-space:nowrap;}
  .nav-cust:hover{color:var(--text);}
  .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;}
  /* narrow-desktop guard so the added cross-link never overflows the nav */
  @media(min-width:1025px) and (max-width:1180px){
    .nav .nav-links{gap:20px;}
    .nav-right{gap:11px;}
    .nav-cross{padding:8px 12px;font-size:13px;}
    .nav-cust{font-size:14px;}
  }
  @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 svg{color:var(--pink);flex-shrink:0;}
    .nav-sheet .nav-sheet-cross{color:var(--pink);}
  }

  /* ============ MOBILE UX AUDIT — tap targets, spacing, hero ============ */
  @media(max-width:1024px){
    .section{padding:60px 0;}
    .hero{padding:34px 0 56px;}
    .nav-inner{height:64px;}
    .btn{min-height:50px;}
    .btn-sm{min-height:42px;}
    .price-grid{gap:18px;}
    .uc-card{min-height:96px;}
  }
  @media(max-width:560px){
    .wrap{padding:0 20px;}
    .hero-cta{flex-direction:column;align-items:stretch;gap:11px;}
    .hero-cta .btn{width:100%;min-height:54px;justify-content:center;}
    .hero h1{font-size:clamp(34px,9vw,46px);}
    .hero .lede{font-size:16.5px;}
    .pcard{padding:26px 22px;}
    .pprice{font-size:46px;}
    .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;}
  }
  `;
  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 MCheck({ 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 = ['Calendar remains intact', 'Permissions preserved', 'Recurring events supported'];
  return (
    <div className="m-trust">
      {items.map((t) => <span className="it" key={t}><MCheck size={15} />{t}</span>)}
    </div>);
}

// ── sticky CTA bar: Buy Now + Get Started ────────────────────────────────────
function MobileStickyCTA({ onBuy, onTrial }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const anchor = document.querySelector('.hero-car') || document.querySelector('.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 > 420);
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
    }
    return () => { if (io) io.disconnect(); if (onScroll) window.removeEventListener('scroll', onScroll); };
  }, []);
  return (
    <div className={'m-cta' + (show ? ' show' : '')}>
      <button className="btn btn-ghost" onClick={onTrial}>Try Free</button>
      <button className="btn btn-primary" onClick={onBuy}>Buy Now <span className="price-tag">FROM $9.99</span> <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 [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.trim() || busy) return;
    setBusy(true);
    setError('');
    fetch('/api/send-link', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email.trim(), source: 'consumer' })
    })
      .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"><MCheck size={26} /></div>
              <h3>Link sent ✓</h3>
              <p className="sub" style={{ marginBottom: 0 }}>Check your inbox — we've sent you a link to pick up right where you left off, on any device.</p>
            </div>
          ) : (<>
            <span className="eyebrow"><span className="dot"></span>Continue later</span>
            <h3>Not at your computer?<br />Send yourself a link and finish later.</h3>
            <p className="sub">We'll email you a link so you can pick up on your laptop whenever it suits you.</p>
            <form onSubmit={submit}>
              <input type="email" required placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value)} aria-label="Email address" />
              <button className="btn btn-primary" type="submit" disabled={busy}>{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_FAQS = [
  ['Can I delete only old events?', 'Yes. Set a cut-off date and Wipe Away removes only the events before it — everything after stays exactly where it is. You can also clear a calendar\u2019s entire history in one go if you prefer.'],
  ['Will my calendar remain intact?', 'Completely. Wipe Away only ever removes events. The calendar itself — its name, colour, sharing settings 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 on your Google account and you tick only the ones you want to clean. The rest are left completely untouched.'],
  ['What happens to permissions and sharing?', 'Nothing changes. Sharing permissions, access levels and subscriptions are all preserved — only the events inside the calendar are removed.'],
  ['Can I undo a cleanup?', 'Deletions are permanent, so Wipe Away always shows you a count and asks you to confirm before anything is removed. If you\u2019d like a safety net, export a backup from Google Calendar first.'],
  ['Does it work with shared calendars?', 'Yes. Wipe Away can clean any shared calendar you have edit access to, leaving the sharing setup and everyone\u2019s access intact.'],
  ['Does it work with Google Workspace?', 'Yes. Wipe Away works with both personal Google accounts and Google Workspace, subject to your organisation\u2019s sharing and access settings.']];

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_FAQS;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <SectionHead eyebrow="FAQ" title="Questions, answered." sub="Everything you might want to know before cleaning up your calendar." />
        <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, MobileStickyCTA, SendLinkCard, FAQ, WA_FAQS, MCheck });
