// manifesto.jsx
const Manifesto = () => {
  const { t } = useLang();
  const m = t.manifesto;
  return (
    <section className="manifesto" id="manifesto">
      <div className="manifesto-grid">
        <div>
          <Reveal><div className="eyebrow">{m.eyebrow}</div></Reveal>
          <Reveal delay={1}>
            <p className="manifesto-pull">{m.pull}</p>
          </Reveal>
        </div>
        <div>
          <div className="manifesto-body">
            {m.body.map((para, i) => (
              <Reveal key={i} delay={i+1}><p>{para}</p></Reveal>
            ))}
          </div>
          <Reveal delay={4}>
            <div className="manifesto-pillars">
              {m.pillars.map((p, i) => (
                <div key={i}>
                  <div className="p-num">{p.n}</div>
                  <div className="p-label">{p.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>

      {/* Credenciais - Lastro reputacional */}
      {m.credentials && (
        <div className="credentials-block">
          <div className="credentials-head">
            <Reveal><div className="eyebrow">{m.credentialsEyebrow}</div></Reveal>
            <Reveal delay={1}><h3 className="section-subtitle">{m.credentialsTitle}</h3></Reveal>
            <Reveal delay={2}><p className="credentials-body">{m.credentialsBody}</p></Reveal>
          </div>
          <div className="credentials-grid">
            {m.credentials.map((c, i) => (
              <Reveal key={i} delay={i+1}>
                <div className="cred-item">
                  <div className="cred-k">{c.k}</div>
                  <div className="cred-l">{c.l}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      )}

      {/* Tripé - Fayol / Porter / Damodaran */}
      {m.tripod && (
        <div className="tripod-block">
          <div className="tripod-head">
            <Reveal><div className="eyebrow">{m.tripodEyebrow}</div></Reveal>
            <Reveal delay={1}><h3 className="section-subtitle">{m.tripodTitle}</h3></Reveal>
            <Reveal delay={2}><p className="tripod-body">{m.tripodBody}</p></Reveal>
          </div>

          <div className="tripod-constellation-frame">
            <TripodConstellationLight/>
          </div>

          <div className="tripod-grid">
            {m.tripod.map((th, i) => (
              <Reveal key={i} delay={i+1}>
                <article className="tripod-card">
                  <div className="tripod-num">{th.n} / 03</div>
                  <h4 className="tripod-name">{th.name}</h4>
                  <div className="tripod-subtitle">{th.subtitle}</div>
                  <p className="tripod-text">{th.body}</p>
                  <ul className="tripod-tags">
                    {th.tags.map((tag, j) => <li key={j}>{tag}</li>)}
                  </ul>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      )}
    </section>
  );
};

// === Tripod Constellation (light variant, lives in Sobre Nós) ===
const TripodConstellationLight = () => {
  const { lang } = useLang();
  const L = lang || 'pt';
  const labels = L === 'pt'
    ? { f: 'FAYOL', p: 'PORTER', d: 'DAMODARAN', fs: 'Disciplina', ps: 'Escolha', ds: 'Rigor financeiro', center: 'PARECER' }
    : { f: 'FAYOL', p: 'PORTER', d: 'DAMODARAN', fs: 'Discipline', ps: 'Choice', ds: 'Financial rigor', center: 'JUDGMENT' };

  return (
    <div className="tripod-wrap tripod-wrap--light" aria-hidden="true">
      <svg className="tripod-svg" viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="nodeGlowL" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#B8860B" stopOpacity="0.55"/>
            <stop offset="40%" stopColor="#FEBF2C" stopOpacity="0.22"/>
            <stop offset="100%" stopColor="#FEBF2C" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="centerGlowL" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#181715" stopOpacity="0.55"/>
            <stop offset="60%" stopColor="#181715" stopOpacity="0.10"/>
            <stop offset="100%" stopColor="#181715" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="lineGradL" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#181715" stopOpacity="0.10"/>
            <stop offset="50%" stopColor="#181715" stopOpacity="0.45"/>
            <stop offset="100%" stopColor="#181715" stopOpacity="0.10"/>
          </linearGradient>
        </defs>

        {/* Outer guide rings */}
        <circle cx="260" cy="260" r="240" fill="none" stroke="rgba(24,23,21,0.08)" strokeWidth="1"/>
        <circle cx="260" cy="260" r="180" fill="none" stroke="rgba(24,23,21,0.10)" strokeWidth="1" strokeDasharray="2 6"/>
        <circle cx="260" cy="260" r="100" fill="none" stroke="rgba(24,23,21,0.12)" strokeWidth="1"/>

        {/* Triangle connections */}
        <g className="tripod-edges">
          <line x1="260" y1="80" x2="100" y2="380" stroke="url(#lineGradL)" strokeWidth="1.2"/>
          <line x1="100" y1="380" x2="420" y2="380" stroke="url(#lineGradL)" strokeWidth="1.2"/>
          <line x1="420" y1="380" x2="260" y2="80" stroke="url(#lineGradL)" strokeWidth="1.2"/>

          <line className="tripod-spoke" x1="260" y1="80" x2="260" y2="260" stroke="rgba(24,23,21,0.20)" strokeWidth="1"/>
          <line className="tripod-spoke" x1="100" y1="380" x2="260" y2="260" stroke="rgba(24,23,21,0.20)" strokeWidth="1"/>
          <line className="tripod-spoke" x1="420" y1="380" x2="260" y2="260" stroke="rgba(24,23,21,0.20)" strokeWidth="1"/>
        </g>

        {/* Pulses along edges */}
        <g className="tripod-pulses">
          <circle r="3.5" fill="#B8860B">
            <animateMotion dur="6s" repeatCount="indefinite" path="M260,80 L100,380 L420,380 L260,80 Z"/>
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.05;0.95;1" dur="6s" repeatCount="indefinite"/>
          </circle>
          <circle r="2.5" fill="#181715" opacity="0.55">
            <animateMotion dur="9s" begin="2s" repeatCount="indefinite" path="M100,380 L420,380 L260,80 L100,380 Z"/>
          </circle>
        </g>

        {/* Center node - PARECER */}
        <g className="tripod-center">
          <circle cx="260" cy="260" r="44" fill="url(#centerGlowL)"/>
          <circle cx="260" cy="260" r="14" fill="none" stroke="rgba(24,23,21,0.45)" strokeWidth="1"/>
          <circle cx="260" cy="260" r="4" fill="#181715"/>
          <text x="260" y="298" textAnchor="middle" fill="rgba(24,23,21,0.55)" fontSize="9" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="600">{labels.center}</text>
        </g>

        {/* Three nodes */}
        <g className="tripod-node tripod-node-f">
          <circle cx="260" cy="80" r="28" fill="url(#nodeGlowL)"/>
          <circle cx="260" cy="80" r="6" fill="#B8860B"/>
          <text x="260" y="42" textAnchor="middle" fill="#181715" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="700">{labels.f}</text>
          <text x="260" y="58" textAnchor="middle" fill="rgba(24,23,21,0.55)" fontSize="9" letterSpacing="2" fontFamily="'Open Sans', sans-serif">{labels.fs}</text>
        </g>
        <g className="tripod-node tripod-node-p">
          <circle cx="100" cy="380" r="28" fill="url(#nodeGlowL)"/>
          <circle cx="100" cy="380" r="6" fill="#B8860B"/>
          <text x="100" y="426" textAnchor="middle" fill="#181715" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="700">{labels.p}</text>
          <text x="100" y="442" textAnchor="middle" fill="rgba(24,23,21,0.55)" fontSize="9" letterSpacing="2" fontFamily="'Open Sans', sans-serif">{labels.ps}</text>
        </g>
        <g className="tripod-node tripod-node-d">
          <circle cx="420" cy="380" r="28" fill="url(#nodeGlowL)"/>
          <circle cx="420" cy="380" r="6" fill="#B8860B"/>
          <text x="420" y="426" textAnchor="middle" fill="#181715" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="700">{labels.d}</text>
          <text x="420" y="442" textAnchor="middle" fill="rgba(24,23,21,0.55)" fontSize="9" letterSpacing="2" fontFamily="'Open Sans', sans-serif">{labels.ds}</text>
        </g>
      </svg>
    </div>
  );
};

window.TripodConstellationLight = TripodConstellationLight;

window.Manifesto = Manifesto;