/* SEL.IA — "Aplicações por área" landing section: 3 area tabs, each mounts a demo embed. */
const AREA_TABS = [
  { id:"reg",   label:"Regulatória", icon:"search",   sub:"Busca integrada entre SEI, DOU, Diretoria, sessões e participação social." },
  { id:"tec",   label:"Técnica",     icon:"database", sub:"Converse com os dados da BDGD em linguagem natural — com gráficos." },
  { id:"atend", label:"Atendimento", icon:"message",  sub:"Assistente regulatório que responde dúvidas do consumidor com a norma." },
];

const AreasSection = () => {
  const [tab, setTab] = React.useState("reg");
  const [paused, setPaused] = React.useState(false);
  const cur = AREA_TABS.find((t) => t.id === tab);
  // Auto-advance to the next area if the user doesn't click (pauses on hover).
  React.useEffect(() => {
    if (paused) return;
    const idx = AREA_TABS.findIndex((t) => t.id === tab);
    const t = setTimeout(() => setTab(AREA_TABS[(idx + 1) % AREA_TABS.length].id), 24000);
    return () => clearTimeout(t);
  }, [tab, paused]);
  return (
    <section className="section dark-band" id="areas"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="container">
        <div className="section-header reveal">
          <div className="section-eyebrow">Aplicações por área</div>
          <h2>Uma plataforma,<br/>cada área no seu fluxo.</h2>
          <p>A SEL.IA aplicada às rotinas regulatória, técnica e de atendimento. Escolha a área — ou veja as três girarem.</p>
        </div>

        <div className="profile-tabs reveal" role="tablist">
          {AREA_TABS.map((t) => (
            <button key={t.id} role="tab" aria-selected={tab === t.id}
              className={`profile-tab ${tab === t.id ? "active" : ""}`} onClick={() => setTab(t.id)}>
              <LandIcon name={t.icon} size={15}/>{t.label}
            </button>
          ))}
        </div>

        <div className="reveal">
          <div className="area-sub">{cur.sub}</div>
          <div className="area-embed" key={tab}>
            {tab === "reg"   && <BuscaEmbed/>}
            {tab === "tec"   && <DadosEmbed/>}
            {tab === "atend" && <AtendimentoEmbed/>}
          </div>
        </div>
      </div>
    </section>
  );
};
window.AreasSection = AreasSection;