/* sections-audience.jsx — Audience switcher (B2C/B2B) + Fit filter */

function Audience() {
  const [mode, setMode] = React.useState("b2c");
  const d = AUDIENCE[mode];
  return (
    <section className="section" id="para-quem">
      <div className="container">
        <div className="section-head reveal" style={{ marginBottom: 8 }}>
          <span className="eyebrow">Para quem</span>
          <h2 className="section-title">Quem decide em português — e não pode hesitar em inglês.</h2>
        </div>
        <div className="reveal" style={{ marginTop: 28 }}>
          <div className="seg" role="tablist">
            <button className={mode === "b2c" ? "active" : ""} onClick={() => setMode("b2c")}>
              Para você
            </button>
            <button className={mode === "b2b" ? "active" : ""} onClick={() => setMode("b2b")}>
              Para a sua empresa
            </button>
          </div>

          <div className="aud-card" key={mode}>
            <div>
              <h3>{d.h}</h3>
              <p className="lead">{d.lead}</p>
              <a className="btn-link" href={CTA_URL} target="_blank" rel="noopener" style={{ marginTop: 22, display: "inline-flex" }}>
                Agendar diagnóstico <Icon name="arrow" />
              </a>
            </div>
            <ul className="aud-points">
              {d.points.map((p, i) => (
                <li key={i}><Icon name="check" /> {p}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FitFilter() {
  return (
    <section className="section section-paper2">
      <div className="container">
        <div className="section-head reveal" style={{ maxWidth: 640 }}>
          <span className="eyebrow">Sinceridade comercial</span>
          <h2 className="section-title">Não aceito todo mundo. E isso protege você.</h2>
          <p className="section-sub">São no máximo 20 profissionais por semestre. Antes de qualquer proposta, eu preciso saber se faz sentido para os dois — senão, não começamos.</p>
        </div>

        <div className="fit-grid">
          <div className="fit-col fit-no reveal">
            <h3><span className="fit-tag">Não é para você se</span></h3>
            <ul className="fit-list">
              {FIT_NO.map((t, i) => (
                <li key={i}><Icon name="x" /> <span>{t}</span></li>
              ))}
            </ul>
          </div>

          <div className="fit-col fit-yes reveal">
            <h3><span className="fit-tag">É para você se</span></h3>
            <ul className="fit-list">
              {FIT_YES.map((it, i) => (
                <li key={i}>
                  <Icon name="check" />
                  <span>{it.t}{it.b && <b>{it.b}</b>}{it.t2 || ""}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Audience, FitFilter });