// ===== Info / static pages =====
const { useState: useIS } = React;

const InfoPage = () => {
  const params = new URLSearchParams(location.search);
  const topic = params.get("topic") || "about";
  const t = INFO_TOPICS[topic] || INFO_TOPICS.about;

  return (
    <PageWrapper>
      {() => (
        <main>
          <section className="shell page-hero">
            <div className="breadcrumb" style={{ paddingTop: 0 }}>
              <a href="index.html">Home</a>
              <Icon name="chevR" />
              <span>{t.title}</span>
            </div>
            <div className="page-hero-row">
              <div>
                <div className="section-title" style={{ marginBottom: 4 }}>
                  <div className="eyebrow">{t.eyebrow}</div>
                </div>
                <h1 className="page-title">{t.title}</h1>
                <p className="page-sub" style={{ marginTop: 10 }}>{t.sub}</p>
              </div>
              <div className="info-nav">
                {[
                  ["about","About"], ["showroom","Showroom"], ["blog","Blog"],
                  ["faq","FAQ"], ["warranty","Warranty"], ["shipping","Shipping"],
                  ["support","Support"], ["contact","Contact"],
                ].map(([k,l]) => (
                  <a key={k} href={`info.html?topic=${k}`} className={`info-link ${topic === k ? "active" : ""}`}>{l}</a>
                ))}
              </div>
            </div>
          </section>

          <section className="shell info-body">
            {t.stats && (
              <div className="info-stats">
                {t.stats.map(([n, l], i) => (
                  <div className="info-stat" key={i}>
                    <div className="n">{n}</div>
                    <div className="l">{l}</div>
                  </div>
                ))}
              </div>
            )}

            {t.body && (
              <div className="info-blocks">
                {t.body.map((b, i) => (
                  <div className="info-block" key={i}>
                    <div className="info-num">{String(i+1).padStart(2,"0")}</div>
                    <div>
                      <h3>{b.h}</h3>
                      <p>{b.p}</p>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {t.faq && (
              <div className="faq-list">
                {t.faq.map(([q, a], i) => <FaqItem key={i} q={q} a={a} idx={i} />)}
              </div>
            )}

            {t.contact && <ContactForm />}

            {t.cta && (
              <div className="info-cta-row">
                <a className="btn btn-primary" href={t.cta.href}>{t.cta.label} <Icon name="arrow" /></a>
              </div>
            )}

            <div className="info-help">
              <div>
                <h4>Need a hand?</h4>
                <p>Our team responds in &lt; 5 min on chat during business hours.</p>
              </div>
              <div className="info-help-actions">
                <a className="btn btn-ghost" href="info.html?topic=faq">Read the FAQ</a>
                <a className="btn btn-primary" href="info.html?topic=contact"><Icon name="chat" /> Contact us</a>
              </div>
            </div>
          </section>

          <Footer />
        </main>
      )}
    </PageWrapper>
  );
};

const FaqItem = ({ q, a, idx }) => {
  const [open, setOpen] = useIS(idx === 0);
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button onClick={() => setOpen(!open)} className="faq-q">
        <span>{q}</span>
        <Icon name="chev" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s" }} />
      </button>
      {open && <div className="faq-a"><p>{a}</p></div>}
    </div>
  );
};

const ContactForm = () => {
  const [reason, setReason] = useIS("question");
  const [sent, setSent] = useIS(false);
  const [form, setForm] = useIS({ name: "", email: "", phone: "", msg: "" });
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  if (sent) return (
    <div className="info-confirm">
      <div className="confirm-tick"><Icon name="check" /></div>
      <h3>Message received</h3>
      <p>Thanks {form.name.split(" ")[0]}, we'll reply within 24 hours on weekdays.</p>
      <a className="btn btn-ghost" href="index.html">Back to shop</a>
    </div>
  );

  return (
    <div className="contact-grid">
      <div className="contact-channels">
        <a className="channel-card" href="tel:+213560110230">
          <div className="channel-ico"><Icon name="phone" /></div>
          <div>
            <strong>Call us</strong>
            <span>0560 11 02 30</span>
            <small>9 AM – 9 PM, 7 days</small>
          </div>
        </a>
        <a className="channel-card" href="mailto:hello@store.dz">
          <div className="channel-ico"><Icon name="mail" /></div>
          <div>
            <strong>Email</strong>
            <span>hello@store.dz</span>
            <small>24h reply on weekdays</small>
          </div>
        </a>
        <button className="channel-card" type="button">
          <div className="channel-ico"><Icon name="chat" /></div>
          <div>
            <strong>Live chat</strong>
            <span>Bottom-right corner</span>
            <small>Median reply 3 min</small>
          </div>
        </button>
        <a className="channel-card" href="info.html?topic=showroom">
          <div className="channel-ico"><Icon name="pin" /></div>
          <div>
            <strong>Visit showroom</strong>
            <span>12 Rue Didouche Mourad</span>
            <small>Algiers · Sat–Thu 10–20</small>
          </div>
        </a>
      </div>

      <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <h3 style={{ marginTop: 0 }}>Send us a message</h3>
        <div className="ck-field">
          <span>What can we help with?</span>
          <div className="reason-row">
            {[["question","General question"],["order","About an order"],["rma","Warranty / repair"],["b2b","Business inquiry"]].map(([k,l]) => (
              <button type="button" key={k} className={`reason-pill ${reason === k ? "active" : ""}`} onClick={() => setReason(k)}>
                {l}
              </button>
            ))}
          </div>
        </div>
        <div className="ck-grid">
          <label className="ck-field">
            <span>Full name *</span>
            <input required value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Yacine Benkhelifa" />
          </label>
          <label className="ck-field">
            <span>Email *</span>
            <input required type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="you@gamer.dz" />
          </label>
        </div>
        <label className="ck-field">
          <span>Phone (optional)</span>
          <div className="phone-wrap">
            <span className="phone-flag">🇩🇿 +213</span>
            <input value={form.phone} onChange={(e) => set("phone", e.target.value)} placeholder="0560 11 02 30" inputMode="tel" />
          </div>
        </label>
        <label className="ck-field">
          <span>Your message *</span>
          <textarea required rows="5" value={form.msg} onChange={(e) => set("msg", e.target.value)} placeholder="Tell us what's on your mind…"></textarea>
        </label>
        <button className="btn btn-primary" type="submit">Send message <Icon name="arrow" /></button>
      </form>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<InfoPage />);