// FAQ page

function FAQPage() {
  const { lang } = useT();
  const L = window.I18N[lang].faq;
  const [open, setOpen] = useState(0);

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container-narrow">
          <div className="eyebrow">{L.eyebrow} 🤔</div>
          <h1 style={{ marginTop: 18 }}>{L.title}</h1>
        </div>
      </section>

      <section style={{ paddingTop: 20 }}>
        <div className="container-narrow">
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {L.items.map((it, i) => (
              <FaqItem key={i} item={it} idx={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>

          <div className="card mt-6 center" style={{
            background: "var(--blue)", color: "var(--paper)",
            transform: "rotate(-0.5deg)",
            padding: 40,
          }}>
            <Burst size={70} color="var(--orange)" style={{ display: "inline-block" }} />
            <h2 style={{ color: "var(--paper)", marginTop: 12 }}>{lang === "th" ? "ยังมีคำถามอีกใช่มั้ย?" : "Still got questions?"}</h2>
            <p style={{ fontSize: "1.1rem" }}>{lang === "th" ? "ทักเราเลย ตอบใน 1 วันทำการ" : "Hit us up. We reply within 1 business day."}</p>
            <a className="btn btn-red" href="#/contact" onClick={(e) => { e.preventDefault(); location.hash = "#/contact"; }}>
              {lang === "th" ? "ติดต่อเรา" : "Contact us"} →
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function FaqItem({ item, idx, open, onToggle }) {
  const colors = ["var(--red)","var(--blue)","var(--green)","var(--orange)","var(--purple)"];
  const c = colors[idx % colors.length];
  return (
    <div className="card" style={{
      padding: 0, overflow: "hidden",
      background: open ? c : "var(--paper)",
      color: open ? "#fff" : "var(--ink)",
      transform: `rotate(${(idx % 2 === 0 ? -0.3 : 0.3)}deg)`,
      transition: "background 0.2s",
    }}>
      <button onClick={onToggle} style={{
        width: "100%", border: 0, background: "transparent",
        textAlign: "left", padding: "20px 26px",
        color: "inherit", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16,
      }}>
        <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <div style={{
            width: 36, height: 36, borderRadius: 99,
            background: open ? "rgba(255,255,255,0.25)" : c, color: "#fff",
            display: "grid", placeItems: "center",
            fontFamily: "var(--font-display)", fontSize: "0.85rem",
            border: "3px solid var(--ink)",
            flexShrink: 0,
          }}>{String(idx + 1).padStart(2, "0")}</div>
          <div className="display" style={{ fontSize: "1.1rem" }}>{item.q}</div>
        </div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: "1.4rem",
          transform: open ? "rotate(45deg)" : "rotate(0deg)",
          transition: "transform 0.2s",
          flexShrink: 0,
        }}>+</div>
      </button>
      {open && (
        <div style={{ padding: "0 26px 24px 78px", animation: "fadeIn 0.3s ease" }}>
          <p style={{ margin: 0, fontSize: "1.1rem" }}>{item.a}</p>
        </div>
      )}
      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </div>
  );
}

window.FAQPage = FAQPage;