// FAQ phase — sits after Close. Answers questions people most often ask.
// raise in the live Q&A, plus the safety + privacy + Compass-handoff edges.

const FAQS = [
  {
    q: "I'm in crisis or really struggling right now. What should I do?",
    a: "Please contact a qualified professional or a crisis line in your country. This companion is for personal reflection and education only — it is not a substitute for medical or psychological care. In South Africa: SADAG 24-hour helpline 0800 567 567, or Lifeline 0861 322 322. In an emergency, contact emergency services.",
    safety: true,
  },
  {
    q: "My situation feels genuinely unsustainable, not just stressful.",
    a: "Tools like the RESET method help you carry pressure differently — they do not exist to make impossible situations sustainable. If something is genuinely unsustainable, it is meant to be addressed, not absorbed. Please speak to someone you trust — a manager, a professional, or a support person in your life.",
    safety: true,
  },
  {
    q: "What happens to my answers?",
    a: "They stay on your device, in your browser's local storage. We don't have a database. We don't see them. Nobody else does. If you clear your browser history or use an incognito window, they're gone.",
  },
  {
    q: "Can I come back to this companion later?",
    a: "Yes — just open the same link. As long as you use the same browser, your answers, your stress snapshot and your anchor word will still be there. Bookmark the link if you'd like quick access.",
  },
  {
    q: "Will my anchor word be remembered in Compass?",
    a: "Only if you ticked \"Bring my anchor word with me\" before clicking Open Compass. If you did, Compass will greet you with that word as your north star for the week. If you didn't, Compass starts you fresh — both are fine.",
  },
  {
    q: "How does the 14-day Compass trial work?",
    a: "Click through from the close page, no card needed, no signup wall. After 14 days the full trial ends and you automatically drop to the free-forever tier — you stay in, you just see fewer features. If you'd like to keep everything, you can upgrade monthly, quarterly, or annually from inside Compass.",
  },
  {
    q: "Can I share this with someone else?",
    a: "Please do. Send them the link. They open it on their own device, get their own private experience, and walk out with their own plan. Nothing on their device touches yours.",
  },
  {
    q: "Will I get follow-up emails or marketing?",
    a: "Not from this companion app. We never asked for your email and we don't have it. If you start Compass and create an account there, Compass has its own settings for what you do and don't want to hear about.",
  },
  {
    q: "Can I download the sketchnotes?",
    a: "The sketchnotes are view-only inside this app. To receive supporting resources by email, use the form on the close page.",
  },
  {
    q: "The companion isn't working on my phone — what now?",
    a: "Try refreshing the page. If that fails, switch to your laptop and use the same link. The app works in any modern browser (Chrome, Safari, Firefox, Edge). Older browsers may have issues — contact us at info@truenorth-zone.com.",
  },
];

function FaqItem({ item, idx }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq-item ${open ? "open" : ""} ${item.safety ? "safety" : ""}`}>
      <button
        className="faq-q"
        onClick={() => setOpen(!open)}
        aria-expanded={open}
      >
        <span className="faq-num">{String(idx + 1).padStart(2, "0")}</span>
        <span className="faq-q-text">{item.q}</span>
        <span className={`faq-chev ${open ? "open" : ""}`} aria-hidden="true">▾</span>
      </button>
      {open && (
        <div className="faq-a">
          {item.safety && (
            <div className="faq-safety-mark">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                <line x1="12" y1="9" x2="12" y2="13"/>
                <line x1="12" y1="17" x2="12.01" y2="17"/>
              </svg>
              <span>Safety note</span>
            </div>
          )}
          <p>{item.a}</p>
        </div>
      )}
    </div>
  );
}

function FaqPhase({ go }) {
  return (
    <div className="phase faq-phase">
      <Eyebrow>Frequently asked</Eyebrow>
      <h1 className="display">Questions people ask after the reset.</h1>
      <p className="lede">
        Tap any question to open the answer. Nothing here replaces the professionals already in your life.
      </p>

      <div className="faq-list">
        {FAQS.map((item, i) => (
          <FaqItem key={i} item={item} idx={i} />
        ))}
      </div>

      <window.AskQuestionCard />

      <div className="actions">
        <window.GhostButton onClick={() => go("close")}>
          ← Back to your resources
        </window.GhostButton>
      </div>
    </div>
  );
}

window.FaqPhase = FaqPhase;