// FAQ — commonly asked questions about making money in Old School RuneScape,
// plus a form where visitors can submit their own questions or suggestions.
// The form mirrors the Bond Giveaway pattern: a hidden static form is registered
// in index.html for Netlify's build bot; this React form submits via AJAX to "/".

const FAQ_ITEMS = [
  {
    q: "What's the best money making method in OSRS?",
    a: "It depends entirely on your stats and account type. Endgame raids like Tombs of Amascut, Theatre of Blood and Chambers of Xeric can clear 5–7M GP/hr, while bosses such as Vorkath and Zulrah sit around 3–4M. If you're not there yet, AFK skilling and Slayer give steady, lower-risk income. Every guide here lists a live GP/hr so you can pick the best method for your account rather than chasing a number you can't reach.",
  },
  {
    q: "How do I make money as a free-to-play (F2P) player?",
    a: "Strong F2P money makers include mining runite ore in the Wilderness, telegrabbing Wine of Zamorak, killing Hill and Moss Giants for loot, and high-level Woodcutting or Crafting. Most sit in the 150k–450k GP/hr range, with the very best F2P methods reaching 600k+. Our F2P section ranks every method by GP/hr with the required levels, so you can climb as your stats grow.",
  },
  {
    q: "What are the best AFK money making methods?",
    a: "Wintertodt, mining amethyst, blast furnace, cannonball smithing and various fishing spots are the classics — minimal clicks, ideal for multitasking. They won't match active PvM for raw GP/hr, but the effort-to-reward ratio is excellent if you're studying, working, or playing on a second monitor. The AFK Guides page filters the archive down to exactly these.",
  },
  {
    q: "How much GP per hour can I realistically make?",
    a: "Roughly 50k–250k for low-level F2P methods, 300k–1M for mid-level skilling and Slayer, and 3M+ for endgame PvM. Our estimates use live Grand Exchange prices, so the numbers move with the market. Treat them as realistic averages over a long session — your first few hours of any method will always be slower while you learn the rhythm.",
  },
  {
    q: "Is Grand Exchange flipping actually worth it?",
    a: "Yes, and it's one of the few methods that scales with your bank rather than your stats — a level-3 account can flip just as well as a maxed main. The catch is that profit is capped by the GE's 4-hour buy limits and your starting capital. Our GE Flipper tool surfaces live margins, and the Flipping & Merchanting guide covers how to spread capital across items to keep your gold working.",
  },
  {
    q: "What should I do with a brand-new, low-level account?",
    a: "Don't try to force an endgame method early. Focus on quests that unlock money makers (and lump-sum GP rewards), bank standard gathering skills like Fishing, Mining and Woodcutting, and use the Item & Quest Unlocks page to plan the upgrades worth chasing. The 'Day One' character path on the home page is built exactly for this stage.",
  },
  {
    q: "How do I make money as an Ironman?",
    a: "Ironmen can't buy from the GE, so 'money making' means gathering the resources and drops you'd otherwise purchase. The priorities are Slayer for consumables and uniques, skilling for your own supplies, and bossing for gear. Our Ironman Guides page filters the archive to self-sufficient methods and flags anything that relies on trading.",
  },
  {
    q: "What's the fastest way to afford a Membership Bond?",
    a: "A bond costs a few million GP depending on the market. The quickest route is whatever method gives you the highest GP/hr you can actually sustain — often a mid-level boss or a reliable Slayer grind. The 'How to get a Membership Bond' guide walks through every in-game route, and we also give one away free every month on the Bond Giveaway page.",
  },
  {
    q: "Are the GP/hr numbers up to date?",
    a: "The hourly figures are based on live Grand Exchange prices pulled into the guides, so item-driven methods stay current automatically. Method rankings and strategies are reviewed and updated weekly — you can see exactly what changed on the Patch Notes page.",
  },
  {
    q: "I can't find a method I'm looking for. What now?",
    a: "Use the search and category filters on the All Money Making Guides page first — most methods are catalogued there. If it's genuinely missing, send it to us using the form below. We add and update methods every week, and reader suggestions are a big part of what we cover next.",
  },
];

function FaqItem({ item, isOpen, onToggle, index }) {
  return (
    <div className={`faq-item${isOpen ? " open" : ""}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={isOpen}>
        <span className="faq-q-num mono">{String(index + 1).padStart(2, "0")}</span>
        <span className="faq-q-text">{item.q}</span>
        <span className="faq-q-icon" aria-hidden="true">{isOpen ? "–" : "+"}</span>
      </button>
      <div className="faq-a-wrap" style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}>
        <div className="faq-a-inner">
          <p className="faq-a">{item.a}</p>
        </div>
      </div>
    </div>
  );
}

function FaqPage({ onNav }) {
  const [open, setOpen] = React.useState(0);

  // ----- Question / suggestion form (Netlify Forms via AJAX, like the bond form) -----
  const [name, setName] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [botField, setBotField] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const encode = (data) =>
    Object.keys(data).map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(data[k])).join("&");

  const onSubmit = (e) => {
    e.preventDefault();
    const msg = message.trim();
    if (!msg || submitting) return;
    setSubmitting(true);
    const finish = () => { setSent(true); setSubmitting(false); };
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "faq-question", name: name.trim(), message: msg, "bot-field": botField }),
    }).then(finish).catch(finish);
  };

  return (
    <div className="page faq-page" data-screen-label="FAQ">
      <header className="page-header">
        <div className="page-eyebrow">Common Questions</div>
        <h1 className="page-title">Money Making <em>FAQ</em></h1>
        <p className="page-subtitle">
          The questions we get asked most about earning GP in Old School RuneScape — answered
          straight. Can't find yours? Ask it right here.
        </p>
      </header>

      <section className="faq-ask">
        <div className="faq-ask-head">
          <div className="page-eyebrow">Still Curious?</div>
          <h2 className="faq-ask-title">Ask a question or <em>suggest a guide</em></h2>
          <p className="faq-ask-sub">
            Got a money-making question we didn't cover, or a method you'd like us to catalogue? Send
            it over — reader suggestions shape what we add each week.
          </p>
        </div>

        {sent ? (
          <div className="faq-success">
            <div className="faq-success-check" aria-hidden="true">✓</div>
            <div className="faq-success-title">Thanks — got it!</div>
            <div className="faq-success-msg">
              {name.trim() ? <strong>{name.trim()}</strong> : "Your question"}, we read every
              submission and the best ones become new guides. Keep an eye on the Patch Notes.
            </div>
            <button className="faq-success-link" onClick={() => onNav && onNav("patchnotes")}>
              See what's new ↗
            </button>
          </div>
        ) : (
          <form
            name="faq-question"
            method="POST"
            data-netlify="true"
            netlify-honeypot="bot-field"
            onSubmit={onSubmit}
            className="faq-form">
            <input type="hidden" name="form-name" value="faq-question" />
            <p className="faq-hp" hidden>
              <label>Leave this empty: <input name="bot-field" value={botField} onChange={(e) => setBotField(e.target.value)} /></label>
            </p>
            <div className="faq-form-row">
              <input
                type="text"
                name="name"
                className="faq-input"
                placeholder="Your name or OSRS username (optional)"
                value={name}
                onChange={(e) => setName(e.target.value)}
                maxLength={40}
                autoComplete="off" />
            </div>
            <div className="faq-form-row">
              <textarea
                name="message"
                className="faq-textarea"
                placeholder="Your question or suggestion…"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                maxLength={600}
                rows={4}
                required />
            </div>
            <div className="faq-form-foot">
              <span className="faq-form-fine mono">{message.length}/600 · We never share your details</span>
              <button type="submit" className="faq-submit" disabled={submitting || !message.trim()}>
                {submitting ? "Sending…" : "Send it in"}
              </button>
            </div>
          </form>
        )}
      </section>

      <div className="faq-list">
        {FAQ_ITEMS.map((item, i) => (
          <FaqItem
            key={i}
            item={item}
            index={i}
            isOpen={open === i}
            onToggle={() => setOpen(open === i ? -1 : i)}
          />
        ))}
      </div>

      <style>{`
        .faq-list {
          max-width: 820px;
          margin-top: 60px;
          border-top: 1px solid var(--hairline-strong);
        }
        .faq-item { border-bottom: 1px solid var(--hairline); }
        .faq-q {
          display: flex;
          align-items: center;
          gap: 16px;
          width: 100%;
          padding: 22px 4px;
          text-align: left;
          background: transparent;
          border: none;
          cursor: pointer;
          transition: padding-left 200ms ease;
        }
        .faq-q:hover { padding-left: 8px; }
        .faq-q-num {
          flex-shrink: 0;
          font-size: 12px;
          color: var(--gilt);
          letter-spacing: 0.12em;
        }
        .faq-q-text {
          flex: 1;
          font-family: var(--display);
          font-size: 18px;
          font-weight: 600;
          line-height: 1.35;
          color: var(--paper);
          text-wrap: pretty;
        }
        .faq-q-icon {
          flex-shrink: 0;
          width: 28px; height: 28px;
          display: flex; align-items: center; justify-content: center;
          font-size: 20px;
          color: var(--gilt);
          border: 1px solid var(--hairline-strong);
          border-radius: 50%;
          transition: border-color 200ms ease, background 200ms ease;
        }
        .faq-item.open .faq-q-icon { border-color: var(--gilt); background: rgba(232,197,119,0.08); }
        .faq-a-wrap {
          display: grid;
          transition: grid-template-rows 320ms cubic-bezier(.2,.7,.2,1);
        }
        .faq-a-inner { overflow: hidden; }
        .faq-a {
          margin: 0;
          padding: 0 44px 24px 44px;
          font-size: 15px;
          line-height: 1.7;
          color: var(--parch);
          text-wrap: pretty;
        }

        .faq-ask {
          max-width: 820px;
          padding: 36px;
          background: rgba(255,255,255,0.018);
          border: 1px solid var(--hairline-strong);
          border-radius: 6px;
        }
        .faq-ask-head { margin-bottom: 26px; }
        .faq-ask-title {
          font-family: var(--display);
          font-size: 30px;
          font-weight: 600;
          color: var(--paper);
          margin: 10px 0 12px;
          line-height: 1.15;
        }
        .faq-ask-title em { color: var(--gilt); font-style: italic; }
        .faq-ask-sub {
          font-size: 15px;
          line-height: 1.6;
          color: var(--parch);
          max-width: 600px;
          margin: 0;
          text-wrap: pretty;
        }
        .faq-form { display: flex; flex-direction: column; gap: 12px; }
        .faq-form-row { display: flex; }
        .faq-input, .faq-textarea {
          width: 100%;
          padding: 13px 16px;
          font-family: var(--mono);
          font-size: 14px;
          letter-spacing: 0.01em;
          color: var(--paper);
          background: rgba(13, 11, 14, 0.7);
          border: 1px solid var(--hairline-strong);
          border-radius: 3px;
          outline: none;
          transition: border-color 200ms ease, box-shadow 200ms ease;
        }
        .faq-textarea { resize: vertical; min-height: 110px; line-height: 1.6; font-family: var(--body); }
        .faq-input::placeholder, .faq-textarea::placeholder { color: var(--hide); }
        .faq-input:focus, .faq-textarea:focus { border-color: var(--gilt); box-shadow: 0 0 0 3px rgba(232,197,119,0.12); }
        .faq-form-foot {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          flex-wrap: wrap;
        }
        .faq-form-fine { font-size: 11px; color: var(--hide-2); letter-spacing: 0.04em; }
        .faq-submit {
          flex-shrink: 0;
          padding: 13px 26px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--ink);
          background: var(--gilt);
          border: 1px solid var(--gilt);
          border-radius: 3px;
          cursor: pointer;
          transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
        }
        .faq-submit:hover:not(:disabled) { background: var(--paper); border-color: var(--paper); box-shadow: 0 0 26px rgba(232,197,119,0.32); }
        .faq-submit:disabled { opacity: 0.45; cursor: not-allowed; }

        .faq-success {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
          padding: 28px;
          border: 1px solid var(--gilt);
          border-radius: 6px;
          background: rgba(232, 197, 119, 0.07);
          animation: faqIn 360ms cubic-bezier(.2,.7,.2,1) both;
        }
        @keyframes faqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .faq-success-check {
          width: 34px; height: 34px;
          display: flex; align-items: center; justify-content: center;
          font-size: 18px; color: var(--ink);
          background: var(--gilt); border-radius: 50%;
        }
        .faq-success-title { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--gilt); }
        .faq-success-msg { font-size: 14px; line-height: 1.6; color: var(--parch); text-wrap: pretty; }
        .faq-success-msg strong { color: var(--paper); }
        .faq-success-link {
          margin-top: 4px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--paper);
          background: transparent;
          border: none;
          cursor: pointer;
          transition: color 200ms ease;
        }
        .faq-success-link:hover { color: var(--gilt); }

        @media (max-width: 620px) {
          .faq-q-text { font-size: 16px; }
          .faq-a { padding-left: 0; padding-right: 0; }
          .faq-ask { padding: 26px 20px; }
          .faq-ask-title { font-size: 25px; }
        }
      `}</style>
    </div>
  );
}

window.FaqPage = FaqPage;
