// hero.jsx — Y2K hero with massive type + chrome orb
const { useRef: __hr, useEffect: __he, useState: __hs } = React;

function Hero({ t, variant = 'orb' }) {
  if (variant === 'split') return <HeroSplit t={t} />;
  if (variant === 'stack') return <HeroStack t={t} />;
  return <HeroOrb t={t} />;
}

/* ════════════════════════════════════════════════════════
   HERO ORB — staggered display type with big chrome orb
   ════════════════════════════════════════════════════════ */
function HeroOrb({ t }) {
  const mouse = useMouse();
  const scrollY = useScrollY();
  const [wordIdx, setWordIdx] = __hs(0);

  __he(() => {
    const i = setInterval(() => setWordIdx(v => (v + 1) % t.h1_words.length), 1800);
    return () => clearInterval(i);
  }, [t]);

  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      paddingTop: 100, paddingBottom: 60, overflow: 'hidden',
    }}>
      {/* Top meta strip */}
      <div className="wrap" style={{
        position: 'relative', zIndex: 5,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'var(--ink-mute)', marginBottom: 40
      }}>
        <span><span style={{
          display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
          background: 'var(--magenta)', marginRight: 8, verticalAlign: 'middle',
          boxShadow: '0 0 8px var(--magenta)'
        }}/>{t.h1_loc}</span>
        <span style={{ flex: 1, textAlign: 'center' }}>EST · MMXXII</span>
        <span>{t.h1_year}</span>
      </div>

      <div className="wrap" style={{
        position: 'relative', zIndex: 3,
      }}>
        <div style={{ position: 'relative' }}>
          {/* Floating chrome orb — positioned absolutely within text layout */}
          <div style={{
            position: 'absolute',
            right: '4%', top: '8%',
            zIndex: 2, pointerEvents: 'none',
            transform: `translate3d(${(mouse.x - 0.5) * 30}px, ${(mouse.y - 0.5) * 20 - scrollY * 0.25}px, 0)`,
            transition: 'transform 0.1s linear'
          }}>
            <ChromeOrb size={420} mouse={mouse} kind="iridescent" />
          </div>

          {/* Y2K Badge giratorio */}
          <div className="y2k-wrap" style={{
            position: 'absolute',
            right: '0%', top: '-2%',
            zIndex: 4,
            transform: `translate3d(0, ${-scrollY * 0.4}px, 0)`
          }}>
            <Y2KBadge text={t.h1_sticker} size={180} dark={true} />
          </div>

          {/* Stars sprinkled */}
          <Star size={48} color="var(--magenta)" style={{
            position: 'absolute', left: '46%', top: '8%', zIndex: 3,
            transform: `rotate(${scrollY * 0.5}deg)`
          }} />
          <Star size={28} color="var(--azure)" style={{
            position: 'absolute', right: '38%', top: '52%', zIndex: 1,
            transform: `rotate(${-scrollY * 0.5}deg)`
          }} />
          <Star size={20} color="var(--lime)" style={{
            position: 'absolute', left: '4%', bottom: '12%', zIndex: 3,
            transform: `rotate(${scrollY * 0.5}deg)`
          }} />

          {/* DISPLAY TYPE — staggered stair */}
          <h1 className="display reveal" style={{
            fontSize: 'clamp(80px, 16vw, 240px)',
            position: 'relative', zIndex: 3,
            color: 'var(--ink)',
          }}>
            <div style={{ overflow: 'hidden' }}>
              <span style={{ display: 'inline-block' }}>{t.h1_top}</span>
            </div>
            <div style={{
              overflow: 'hidden', paddingLeft: 'clamp(40px, 8vw, 140px)',
              fontStyle: 'italic',
              fontVariationSettings: '"wdth" 100'
            }}>
              <span style={{ display: 'inline-block' }}>{t.h1_middle_1}</span>
            </div>
            <div style={{
              overflow: 'hidden',
              fontWeight: 800,
              fontVariationSettings: '"wdth" 75',
              marginTop: 'clamp(-6px, -0.8vw, -16px)'
            }}>
              <span style={{ display: 'inline-block' }}>{t.h1_middle_2}</span>
            </div>
            <div style={{
              overflow: 'hidden', paddingLeft: 'clamp(40px, 6vw, 80px)',
              marginTop: 'clamp(-10px, -1.2vw, -24px)'
            }}>
              <span className="irid-text" style={{ display: 'inline-block' }}>{t.h1_middle_3}</span>
            </div>
          </h1>

          {/* Bottom row */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.3fr 1fr',
            gap: 64, marginTop: 56,
            alignItems: 'end', position: 'relative', zIndex: 3
          }}>
            <div>
              <p className="reveal" style={{
                fontSize: 20, lineHeight: 1.4, maxWidth: 540,
                color: 'var(--ink)', marginBottom: 40, fontWeight: 400
              }}>
                {t.h1_sub}
              </p>
              <div className="reveal" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Magnetic strength={0.25}>
                  <a href="#work" className="btn chrome-btn">
                    {t.cta_explore} <span className="arrow">↗</span>
                  </a>
                </Magnetic>
                <Magnetic strength={0.25}>
                  <a href="#contact" className="btn ghost">
                    {t.cta_brief}
                  </a>
                </Magnetic>
              </div>
            </div>

            {/* Word rotator */}
            <div className="reveal" style={{ paddingBottom: 8 }}>
              <div className="kicker" style={{ marginBottom: 12 }}>
                Hacemos —
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1,
                overflow: 'hidden', height: '1em', letterSpacing: '-0.04em'
              }}>
                <div style={{
                  transform: `translateY(-${wordIdx}em)`,
                  transition: 'transform 0.6s var(--ease-snap)'
                }}>
                  {t.h1_words.map((w, i) => (
                    <div key={i} style={{
                      height: '1em', lineHeight: '1em',
                      color: ['var(--magenta)', 'var(--azure)', 'var(--lime)', 'var(--tangerine)'][i % 4]
                    }}>{w}.</div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom marquee */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        borderTop: '1.5px solid var(--ink)',
        borderBottom: '1.5px solid var(--ink)',
        background: 'var(--paper)',
        padding: '14px 0', overflow: 'hidden'
      }}>
        <div className="marquee">
          <div className="marquee-track" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, letterSpacing: '0.12em' }}>
            {Array(2).fill(0).map((_, k) => (
              <React.Fragment key={k}>
                {t.marquee_words.map((w, i) => (
                  <span key={i + k * 10} style={{ display: 'inline-flex', alignItems: 'center', gap: '3rem' }}>
                    <span style={{ color: 'var(--ink)' }}>{w}</span>
                    <Star size={14} color="var(--magenta)" />
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════
   HERO SPLIT — type left, big orb right (variant)
   ════════════════════════════════════════════════════════ */
function HeroSplit({ t }) {
  const mouse = useMouse();
  const scrollY = useScrollY();

  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      paddingTop: 140, overflow: 'hidden',
    }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center', minHeight: '80vh'
        }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 32 }}>
              <span className="dot"></span>{t.svc_eye}
            </div>
            <h1 className="display reveal" style={{
              fontSize: 'clamp(64px, 9vw, 140px)',
              marginBottom: 32
            }}>
              <div>{t.h1_top}</div>
              <div style={{ fontStyle: 'italic' }}>{t.h1_middle_1}</div>
              <div style={{ fontVariationSettings: '"wdth" 75', fontWeight: 800 }}>{t.h1_middle_2}</div>
              <div className="irid-text">{t.h1_middle_3}</div>
            </h1>
            <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', marginBottom: 40, maxWidth: 540 }}>
              {t.h1_sub}
            </p>
            <div className="reveal" style={{ display: 'flex', gap: 12 }}>
              <a href="#work" className="btn chrome-btn">{t.cta_explore} <span className="arrow">↗</span></a>
              <a href="#contact" className="btn ghost">{t.cta_brief}</a>
            </div>
          </div>
          <div style={{
            transform: `translate3d(${(mouse.x - 0.5) * 30}px, ${(mouse.y - 0.5) * 20 - scrollY * 0.2}px, 0)`
          }}>
            <AsteriskBadge size={500} spin={true} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════════════════════════════════════
   HERO STACK — stacked centered with orb backdrop
   ════════════════════════════════════════════════════════ */
function HeroStack({ t }) {
  const mouse = useMouse();
  const scrollY = useScrollY();
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh',
      paddingTop: 120, paddingBottom: 60, overflow: 'hidden',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      {/* Centered orb backdrop */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: `translate(-50%, -50%) translate3d(0, ${-scrollY * 0.2}px, 0)`,
        zIndex: 1
      }}>
        <AsteriskBadge size={620} spin={true} />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 3, textAlign: 'center' }}>
        <div className="kicker reveal" style={{ marginBottom: 32 }}>
          <span className="dot"></span>{t.svc_eye}
        </div>
        <h1 className="display reveal" style={{
          fontSize: 'clamp(80px, 14vw, 200px)',
          mixBlendMode: 'difference', color: 'white',
          marginBottom: 32
        }}>
          <div>{t.h1_top}</div>
          <div style={{ fontStyle: 'italic' }}>{t.h1_middle_2}</div>
          <div>{t.h1_middle_3}</div>
        </h1>
        <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', marginBottom: 40, maxWidth: 540, marginInline: 'auto' }}>
          {t.h1_sub}
        </p>
        <div className="reveal" style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <a href="#work" className="btn chrome-btn">{t.cta_explore} <span className="arrow">↗</span></a>
          <a href="#contact" className="btn ghost">{t.cta_brief}</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroOrb, HeroSplit, HeroStack });