/* sections-content.jsx — ContentPillars ("O método · o que você vai trabalhar")
   6 pilares de conteúdo renderizados como timeline orbital (reaproveita a CSS .orbital-*). */

const CONTENT_PILLARS = [
  {
    id: 1,
    n: "01",
    icon: "chat",
    label: "Confiança",
    t: "Confiança Comunicativa",
    p: "Falar antes de saber tudo. Recuperar o ritmo depois de um erro. Sustentar a voz em audiência hostil sem travar.",
    week: "abrir uma reunião em inglês sem precisar ensaiar antes.",
    energy: 95,
    relatedIds: [4, 6],
  },
  {
    id: 2,
    n: "02",
    icon: "spark",
    label: "Awareness",
    t: "Language Awareness",
    p: "Entender o porquê das estruturas em vez de decorar regras. Saber quando quebrar a regra e quando não.",
    week: "perceber o tom certo de um e-mail antes de mandar.",
    energy: 80,
    relatedIds: [3, 5],
  },
  {
    id: 3,
    n: "03",
    icon: "search",
    label: "Vocabulário",
    t: "Vocabulário Contextual da Área",
    p: "Termos do seu mercado, dos seus produtos e das suas conversas reais — pesquisados antes de cada sessão.",
    week: "explicar seu projeto técnico sem simplificar nem infantilizar.",
    energy: 85,
    relatedIds: [2, 4],
  },
  {
    id: 4,
    n: "04",
    icon: "globe",
    label: "Transferência",
    t: "Transferência Profissional",
    p: "Você já sabe liderar em português. Trazemos esse mesmo nível de autoridade e nuance para o inglês.",
    week: "discordar de um stakeholder sênior sem perder elegância.",
    energy: 90,
    relatedIds: [1, 3],
  },
  {
    id: 5,
    n: "05",
    icon: "clipboard",
    label: "Gramática",
    t: "Gramática Aplicada ao Business",
    p: "Tempos verbais, condicionais e modais que aparecem em reuniões, e-mails e contratos. Zero gramática descontextualizada.",
    week: "hedging em negociação sem soar inseguro.",
    energy: 75,
    relatedIds: [2, 6],
  },
  {
    id: 6,
    n: "06",
    icon: "star",
    label: "Oratória",
    t: "Oratória Executiva",
    p: "Ritmo, pausa, ênfase e respiração — para apresentar em board, palco e calls de alto nível.",
    week: "sustentar 20 minutos de pitch sem perder ritmo nem audiência.",
    energy: 100,
    relatedIds: [1, 5],
  },
];

function ContentPillars() {
  const [angle, setAngle] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const [activeId, setActiveId] = React.useState(null);
  const containerRef = React.useRef(null);
  const orbitRef = React.useRef(null);

  React.useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setAngle((a) => +(((a + 0.3) % 360).toFixed(3))), 50);
    return () => clearInterval(id);
  }, [auto]);

  const onBackdropClick = (e) => {
    if (e.target === containerRef.current || e.target === orbitRef.current) {
      setActiveId(null);
      setAuto(true);
    }
  };

  const toggle = (id) => {
    setActiveId((prev) => {
      if (prev === id) { setAuto(true); return null; }
      setAuto(false);
      const nodeIndex = CONTENT_PILLARS.findIndex((n) => n.id === id);
      const target = (nodeIndex / CONTENT_PILLARS.length) * 360;
      setAngle(270 - target);
      return id;
    });
  };

  const total = CONTENT_PILLARS.length;
  const radius = 200;

  const getPos = (i) => {
    const a = ((i / total) * 360 + angle) % 360;
    const rad = (a * Math.PI) / 180;
    const x = radius * Math.cos(rad);
    const y = radius * Math.sin(rad);
    const z = Math.round(100 + 50 * Math.cos(rad));
    const opacity = Math.max(0.45, Math.min(1, 0.45 + 0.55 * ((1 + Math.sin(rad)) / 2)));
    return { x, y, z, opacity };
  };

  const activeNode = CONTENT_PILLARS.find((n) => n.id === activeId);
  const isRelated = (id) => (activeNode ? activeNode.relatedIds.includes(id) : false);

  return (
    <section className="section section-content-pillars" id="metodo">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", margin: "0 auto" }}>
          <span className="eyebrow">O método · o que você vai trabalhar</span>
          <h2 className="section-title">Seis pilares de conteúdo. Cada um endereça um gap real do executivo bilíngue.</h2>
          <p className="section-lede">Não é inglês genérico. É a arquitetura do que separa quem fala inglês de quem opera em inglês. Clique em cada pilar para ver como ele aparece na sua semana.</p>
        </div>

        <div className="orbital reveal" ref={containerRef} onClick={onBackdropClick}>
          <div className="orbital-stage" ref={orbitRef}>
            <div className="orbital-core">
              <div className="orbital-core__ping orbital-core__ping--1" />
              <div className="orbital-core__ping orbital-core__ping--2" />
              <div className="orbital-core__inner" />
            </div>
            <div className="orbital-track" />

            {CONTENT_PILLARS.map((n, i) => {
              const p = getPos(i);
              const isActive = activeId === n.id;
              const rel = isRelated(n.id);
              return (
                <div
                  key={n.id}
                  className={"orbital-node" + (isActive ? " is-active" : "") + (rel ? " is-related" : "")}
                  style={{
                    transform: `translate(${p.x}px, ${p.y}px)`,
                    zIndex: isActive ? 200 : p.z,
                    opacity: isActive ? 1 : p.opacity,
                  }}
                  onClick={(e) => { e.stopPropagation(); toggle(n.id); }}
                >
                  <div className="orbital-node__halo" />
                  <div className="orbital-node__dot">
                    <Icon name={n.icon} />
                  </div>
                  <div className="orbital-node__title">{n.label}</div>

                  {isActive && (
                    <div className="orbital-card" onClick={(e) => e.stopPropagation()}>
                      <div className="orbital-card__stem" />
                      <div className="orbital-card__head">
                        <span className="orbital-card__step">Pilar {n.n}</span>
                        <span className="orbital-card__id">#{n.n}</span>
                      </div>
                      <h3 className="orbital-card__title">{n.t}</h3>
                      <p className="orbital-card__body">{n.p}</p>
                      <div className="orbital-card__hi">
                        <Icon name="calendar" />
                        <span><b style={{ color: "var(--gold-bright)" }}>Na sua semana:</b> “{n.week}”</span>
                      </div>
                      <div className="orbital-card__energy">
                        <div className="lab">
                          <span><Icon name="spark" /> Profundidade no programa</span>
                          <span className="val">{n.energy}%</span>
                        </div>
                        <div className="bar"><div style={{ width: n.energy + "%" }} /></div>
                      </div>
                      {n.relatedIds.length > 0 && (
                        <div className="orbital-card__rel">
                          <div className="lab">Pilares conectados</div>
                          <div className="chips">
                            {n.relatedIds.map((rid) => {
                              const r = CONTENT_PILLARS.find((x) => x.id === rid);
                              return (
                                <button key={rid} className="chip" onClick={(e) => { e.stopPropagation(); toggle(rid); }}>
                                  {r.label} <Icon name="arrow" />
                                </button>
                              );
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContentPillars });