// hero.jsx, Dark editorial hero
const { useEffect: useEffectH, useState: useStateH } = React;

const Hero = () => {
  const { t, lang } = useLang();
  const [mode, setMode] = useStateH('editorial');

  // Listen for tweak-driven mode changes
  useEffectH(() => {
    const onTweak = () => {
      const m = document.body.dataset.hero || 'editorial';
      setMode(m);
    };
    onTweak();
    const obs = new MutationObserver(onTweak);
    obs.observe(document.body, { attributes: true, attributeFilter: ['data-hero'] });
    return () => obs.disconnect();
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true">
        <img
          className="hero-bg-image"
          src="assets/hero/hero-2k.jpg"
          srcSet="assets/hero/hero-1k.jpg 1200w, assets/hero/hero-2k.jpg 2400w"
          sizes="100vw"
          alt=""
          decoding="async"
          fetchpriority="high"
        />
        <div className="hero-bg-overlay"/>
      </div>
      <AmbientOrbs/>
      <div className="hero-left">
        <h1 className="hero-title">
          {mode === 'editorial' && (
            <>
              <Reveal as="span" style={{display:'block'}}>{t.hero.title1}</Reveal>
              <Reveal delay={2} as="span" style={{display:'block'}}>
                <span className="em">{t.hero.titleEm}</span>
              </Reveal>
            </>
          )}
          {mode === 'question' && (
            <>
              <Reveal as="span" style={{display:'block'}}>
                {lang === 'pt' ? 'O que move ' : 'What moves '}
                <span className="em">{lang === 'pt' ? 'caixa' : 'cash'}</span>
                {lang === 'pt' ? ',' : ','}
              </Reveal>
              <Reveal delay={2} as="span" style={{display:'block'}}>
                {lang === 'pt' ? 'e o que ' : 'and what '}
                <span className="em">{lang === 'pt' ? 'destrói?' : 'destroys it?'}</span>
              </Reveal>
            </>
          )}
          {mode === 'statement' && (
            <>
              <Reveal as="span" style={{display:'block'}}>
                <span className="thin">{lang === 'pt' ? 'Entregamos ' : 'We ship '}</span>
                <span className="em">{lang === 'pt' ? 'resultado.' : 'outcomes.'}</span>
              </Reveal>
              <Reveal delay={2} as="span" style={{display:'block'}}>
                <span className="thin">{lang === 'pt' ? 'Não ' : 'Not '}</span>
                {lang === 'pt' ? 'slides.' : 'slides.'}
              </Reveal>
            </>
          )}
        </h1>
        <Reveal delay={3}>
          <p className="hero-sub">{t.hero.sub}</p>
        </Reveal>
        <Reveal delay={4}>
          <div className="hero-actions">
            <a href="#contact" className="cta-btn">
              {t.hero.cta}
              <ArrowIcon/>
            </a>
            <a href="#services" className="cta-btn ghost">
              {t.nav.services}
              <ArrowIcon/>
            </a>
          </div>
        </Reveal>
      </div>

    </section>
  );
};

// === Tripod Constellation: Fayol / Porter / Damodaran (DARK variant - unused, kept for reference) ===
const TripodConstellation = ({ lang }) => {
  const labels = lang === '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" aria-hidden="true">
      <svg className="tripod-svg" viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FEBF2C" stopOpacity="0.95"/>
            <stop offset="40%" stopColor="#FEBF2C" stopOpacity="0.35"/>
            <stop offset="100%" stopColor="#FEBF2C" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#F4F0E8" stopOpacity="0.9"/>
            <stop offset="60%" stopColor="#F4F0E8" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#F4F0E8" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#F4F0E8" stopOpacity="0.05"/>
            <stop offset="50%" stopColor="#F4F0E8" stopOpacity="0.45"/>
            <stop offset="100%" stopColor="#F4F0E8" stopOpacity="0.05"/>
          </linearGradient>
        </defs>

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

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

          {/* lines from each node to center */}
          <line className="tripod-spoke" x1="260" y1="80" x2="260" y2="260" stroke="rgba(244,240,232,0.18)" strokeWidth="1"/>
          <line className="tripod-spoke" x1="100" y1="380" x2="260" y2="260" stroke="rgba(244,240,232,0.18)" strokeWidth="1"/>
          <line className="tripod-spoke" x1="420" y1="380" x2="260" y2="260" stroke="rgba(244,240,232,0.18)" strokeWidth="1"/>
        </g>

        {/* Pulse along edges */}
        <g className="tripod-pulses">
          <circle r="3" fill="#FEBF2C">
            <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" fill="#F4F0E8" opacity="0.7">
            <animateMotion dur="9s" begin="2s" repeatCount="indefinite" path="M100,380 L420,380 L260,80 L100,380 Z"/>
          </circle>
        </g>

        {/* Center node - PARECER / JUDGMENT */}
        <g className="tripod-center">
          <circle cx="260" cy="260" r="44" fill="url(#centerGlow)"/>
          <circle cx="260" cy="260" r="14" fill="none" stroke="rgba(244,240,232,0.7)" strokeWidth="1"/>
          <circle cx="260" cy="260" r="4" fill="#F4F0E8"/>
          <text x="260" y="296" textAnchor="middle" fill="rgba(244,240,232,0.55)" fontSize="9" letterSpacing="3" fontFamily="'Open Sans', sans-serif">{labels.center}</text>
        </g>

        {/* Three nodes */}
        <g className="tripod-node tripod-node-f">
          <circle cx="260" cy="80" r="28" fill="url(#nodeGlow)"/>
          <circle cx="260" cy="80" r="6" fill="#FEBF2C"/>
          <text x="260" y="46" textAnchor="middle" fill="#F4F0E8" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="600">{labels.f}</text>
          <text x="260" y="62" textAnchor="middle" fill="rgba(244,240,232,0.5)" 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(#nodeGlow)"/>
          <circle cx="100" cy="380" r="6" fill="#FEBF2C"/>
          <text x="100" y="426" textAnchor="middle" fill="#F4F0E8" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="600">{labels.p}</text>
          <text x="100" y="442" textAnchor="middle" fill="rgba(244,240,232,0.5)" 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(#nodeGlow)"/>
          <circle cx="420" cy="380" r="6" fill="#FEBF2C"/>
          <text x="420" y="426" textAnchor="middle" fill="#F4F0E8" fontSize="13" letterSpacing="3" fontFamily="'Open Sans', sans-serif" fontWeight="600">{labels.d}</text>
          <text x="420" y="442" textAnchor="middle" fill="rgba(244,240,232,0.5)" fontSize="9" letterSpacing="2" fontFamily="'Open Sans', sans-serif">{labels.ds}</text>
        </g>
      </svg>
    </div>
  );
};

window.Hero = Hero;
window.TripodConstellation = TripodConstellation;