/* global React, Icon, FaqItem */

function SupportPage({ navigate }) {
  const [cat, setCat] = React.useState('start');

  const cats = [
    { id: 'start', label: 'Getting started' },
    { id: 'record', label: 'Recording' },
    { id: 'schedule', label: 'Scheduling & delivery' },
    { id: 'recipients', label: 'Recipients' },
    { id: 'privacy', label: 'Privacy & security' },
    { id: 'billing', label: 'Billing' },
    { id: 'after', label: 'When something happens to me' },
  ];

  const FAQS = {
    start: [
      { q: "How do I record my first memory?", a: "Sign up, press 'Begin a memory' on your home screen, and choose a prompt — or skip prompts and just speak. You can pause, re-record, and save whenever you're ready. There's no wrong way to do this." },
      { q: "Do I need any special equipment?", a: "No. Your phone or laptop is fine. We'll use whatever camera and microphone you have — and we boost the audio quality automatically." },
      { q: "Can I try it without paying?", a: "Yes. The free Keepsake plan gives you one full hour of recordings, three recipients, and full encryption. No card needed to start." },
    ],
    record: [
      { q: "Can I re-record if I don't like the take?", a: "As many times as you'd like. We only keep what you save. Drafts are encrypted on your device only — they never reach our servers." },
      { q: "Is there a time limit per video?", a: "Individual recordings can be up to 60 minutes each. On Family and Legacy plans, total recording time is unlimited." },
      { q: "Can I edit a recording after I save it?", a: "You can trim the start and end, add a written note, change recipients, and reschedule it. We don't offer mid-video edits — we want what you save to stay honest." },
    ],
    schedule: [
      { q: "What kinds of delivery dates can I set?", a: "A specific date, a recurring date (e.g. every birthday), a milestone (their 18th, their wedding), or a triggered event you define. You can change any of these at any time." },
      { q: "Can I deliver a message immediately?", a: "Yes — you can send right away or schedule for later. Both work the same way." },
      { q: "What if a recipient isn't ready to receive it?", a: "We send a gentle email first, letting them know a message is waiting. They open it when they're ready. We never auto-play, and we never notify on a holiday or anniversary unless you ask us to." },
    ],
    recipients: [
      { q: "How do recipients access their messages?", a: "They receive an email with a private link. They verify their identity (phone or ID) the first time, and can revisit any unlocked message whenever they'd like, as long as they live." },
      { q: "Can I add or remove recipients later?", a: "Yes, on any message and at any time. Changes take effect immediately." },
      { q: "What if a recipient passes before they receive a message?", a: "You'll be notified, and you can either redirect the message to a different person or hold it back. Nothing is delivered without your active confirmation in those cases." },
    ],
    privacy: [
      { q: "Can Everlasting Memory watch my videos?", a: "No. Your recordings are encrypted on your device with keys we never see. We can't watch them. We can't show them to anyone. We've published our threat model so you can verify this yourself." },
      { q: "Do you train AI on my recordings?", a: "Never. Not now, not later, not under any new policy. This is in our terms of service and our company charter." },
      { q: "Where are my recordings stored?", a: "Encrypted, on geographically redundant storage in the EU and the US. You can choose a single-region option on Family and Legacy plans." },
    ],
    billing: [
      { q: "What payment methods do you accept?", a: "All major cards, plus Apple Pay, Google Pay, and bank transfer for yearly plans." },
      { q: "Can I get a refund?", a: "Yes — within 30 days, no questions asked. Just reply to any email from us." },
      { q: "Do you offer financial assistance?", a: "Yes. If the Family or Legacy plan would be a real burden, write to us. We'll quietly upgrade you. No paperwork." },
    ],
    after: [
      { q: "What happens to my account if I pass away?", a: "Your scheduled messages continue to deliver as planned. A trusted contact you nominated can mark your account as 'in memoriam', which preserves everything exactly as you left it." },
      { q: "Can I leave instructions for my family?", a: "Yes. Every Family and Legacy plan includes a written 'final note' that's delivered to your nominated contact when your account is marked in memoriam." },
      { q: "What if Everlasting Memory shuts down?", a: "We have a published succession plan and a funded endowment for storage. Your recordings are exportable at any time. If we close, you get them back — encrypted, with the keys you control." },
    ],
  };

  const faqs = FAQS[cat];
  const activeLabel = cats.find(c => c.id === cat).label;

  return (
    <div>
      <section className="page-hero" data-em-surface="ink">
        <div className="page-hero__vignette" />
        <div className="page-hero__inner">
          <div className="em-eyebrow page-hero__eyebrow">Support</div>
          <h1 className="page-hero__title">
            We <em>answer</em> our own emails.
          </h1>
          <p className="page-hero__lede">
            No tickets. No hold music. A real person, usually within a day. And a few things
            you can probably solve faster yourself, just below.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="support-grid">
            <aside className="support-side">
              <div className="support-side__label">Help topics</div>
              <div className="support-side__cats">
                {cats.map(c => (
                  <button
                    key={c.id}
                    className={"support-side__cat" + (c.id === cat ? " is-active" : "")}
                    onClick={() => setCat(c.id)}
                    aria-pressed={c.id === cat}
                  >{c.label}</button>
                ))}
              </div>
              <div className="support-side__contact">
                <h4>Still need a person?</h4>
                <p>Write to us. We read every message, and most people hear back the same day.</p>
                <a href="mailto:hello@everlastingmemory.com" className="btn btn--outline-ink btn--sm" style={{ width: '100%', justifyContent: 'center', display: 'flex' }}>
                  hello@everlastingmemory.com
                </a>
              </div>
            </aside>

            <div>
              <div style={{ marginBottom: 32 }}>
                <div className="em-eyebrow">{activeLabel}</div>
                <h2 className="em-h1" style={{ fontSize: 36, marginTop: 8 }}>
                  Common questions about <em style={{ fontStyle: 'italic', color: 'var(--em-antique-gold)', fontWeight: 400 }}>{activeLabel.toLowerCase()}</em>.
                </h2>
              </div>
              <div className="faq fade-in" key={cat}>
                {faqs.map((f, i) => (
                  <FaqItem key={i} q={f.q} a={f.a} defaultOpen={i === 0} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.SupportPage = SupportPage;