// faq-sections.jsx — 틴트라이프 · FAQ page. Uses FAQ (faq-data).
const { useState } = React;

/* renders **bold** spans + \n line breaks within an answer string */
function richText(s) {
  return s.split("\n").map((line, li, arr) => {
    const parts = line.split("**");
    return (
      <React.Fragment key={li}>
        {parts.map((p, pi) => pi % 2 === 1 ? <strong key={pi}>{p}</strong> : <React.Fragment key={pi}>{p}</React.Fragment>)}
        {li < arr.length - 1 && <br />}
      </React.Fragment>
    );
  });
}

function FaqItem({ item, open, onToggle }) {
  return (
    <div className={"faq-item" + (open ? " is-open" : "")}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="faq-q-mark">Q</span>
        <span className="faq-q-text">{item.q}</span>
        <span className="faq-q-icon" aria-hidden="true"></span>
      </button>
      <div className="faq-a-wrap">
        <div className="faq-a">
          <span className="faq-a-mark">A</span>
          <div className="faq-a-text">
            <p>{richText(item.a)}</p>
            {item.link && (
              <a className="faq-a-link" href={item.link.href}>
                {item.link.label}
                <svg width="18" height="9" viewBox="0 0 18 9" fill="none" aria-hidden="true"><path d="M0 4.5h16M16 4.5l-3.6-3.5M16 4.5l-3.6 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function FaqList() {
  const [cat, setCat] = useState("dye");
  const [open, setOpen] = useState({ dye: 0, biz: null });

  const setOpenFor = (idx) =>
    setOpen((o) => ({ ...o, [cat]: o[cat] === idx ? null : idx }));

  const items = FAQ.items[cat];

  return (
    <section className="faq-main" data-screen-label="faq-list">
      <div className="tl-wrap">
        <div className="faq-head tl-center">
          <h1 className="faq-title">{FAQ.intro.title}</h1>
          <p className="faq-sub">{FAQ.intro.sub}</p>
        </div>

        <div className="faq-cats" role="tablist">
          {FAQ.cats.map((c) => (
            <button key={c.id} role="tab" aria-selected={cat === c.id}
              className={"faq-cat" + (cat === c.id ? " is-active" : "")}
              onClick={() => setCat(c.id)}>
              {c.label}
              <span className="faq-cat-n">{FAQ.items[c.id].length}</span>
            </button>
          ))}
        </div>

        <div className="faq-items">
          {items.map((it, i) => (
            <FaqItem key={cat + i} item={it} open={open[cat] === i} onToggle={() => setOpenFor(i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqCta() {
  const c = FAQ.cta;
  return (
    <section className="ed-cta-band" data-screen-label="faq-cta">
      <div className="ed-cta-card">
        <p className="ed-cta-lines">{c.lines.map((l, i) => <React.Fragment key={i}>{l}{i < c.lines.length - 1 && <br />}</React.Fragment>)}</p>
        <a className="ed-cta-tel" href={"tel:" + c.tel}>{c.tel}</a>
        <p className="ed-cta-note">{c.note}</p>
        <a className="ed-cta-btn" href={c.href}>{c.cta}</a>
      </div>
    </section>
  );
}

function Faq() {
  return (
    <React.Fragment>
      <FaqList />
    </React.Fragment>
  );
}

window.Faq = Faq;