// Hero — 3 variants toggleable via Tweaks

function Hero({ lang, variant, accent }) {
  const L = LANG_COPY[lang];
  if (variant === 'constellation') return <HeroConstellation L={L} accent={accent} />;
  if (variant === 'grid') return <HeroGrid L={L} />;
  return <HeroBold L={L} accent={accent} />;
}

// ───── A · Bold editorial (default) ─────
function HeroBold({ L, accent }) {
  return (
    <section id="top" className="hero" style={{ position: 'relative', minHeight: '100vh', padding: '160px 40px 80px', overflow: 'hidden' }}>
      <ConstellationBg />
      <HeroStars />

      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.05fr)', gap: 24, alignItems: 'center' }}>
          <div>
            <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 40, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)' }}>
              <span style={{ width: 24, height: 1, background: 'var(--accent)' }} />
              <span>{L.hero.eyebrow}</span>
            </div>

            <h1 className="reveal" style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(48px, 6.5vw, 96px)',
              lineHeight: 0.95, letterSpacing: -0.03,
              fontWeight: 500, margin: 0,
              color: 'var(--fg)',
            }}>
              {L.hero.title1}<br />
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>
                {L.hero.title2}
              </span>{' '}
              {L.hero.title3}
            </h1>

            <p className="reveal" style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--muted)', maxWidth: 520, margin: '40px 0 0', textWrap: 'pretty' }}>
              {L.hero.sub}
            </p>
            <div className="reveal" style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#contact" className="btn-primary">{L.hero.cta1}</a>
              <a href="#services" className="btn-ghost">{L.hero.cta2}</a>
            </div>
          </div>

          <div className="reveal" style={{ position: 'relative', aspectRatio: '559 / 366', width: '115%', maxWidth: 760, justifySelf: 'start', marginLeft: '-8%' }}>
            <div aria-hidden="true" style={{
              position: 'absolute', inset: '-12%',
              background: 'radial-gradient(circle at 50% 50%, rgba(58, 165, 194, 0.25), transparent 65%)',
              filter: 'blur(24px)',
            }} />
            <img src="assets/brand/cygnus-bird-cream.png" alt="Cygnus — cisne constelación"
              style={{
                position: 'relative',
                width: '100%', height: '100%', objectFit: 'contain',
                opacity: 1,
              }} />
          </div>
        </div>

        <div className="reveal" style={{ marginTop: 96, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
          {L.hero.stats.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: -1, lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', fontFamily: 'var(--font-mono)', letterSpacing: 0.5 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── B · Constellation (brand asset: cisne + mapa estelar) ─────
function HeroConstellation({ L, accent }) {
  return (
    <section id="top" className="hero" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', padding: '140px 40px 80px', overflow: 'hidden', background: 'var(--bg)' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/brand/cygnus-bird.png)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.55, mixBlendMode: 'luminosity',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(90deg, var(--bg) 0%, rgba(12,29,38,0.7) 50%, rgba(12,29,38,0.3) 100%)',
      }} />
      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', zIndex: 2, width: '100%' }}>
        <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)' }}>
          <span style={{ width: 24, height: 1, background: 'var(--accent)' }} />
          <span>{L.hero.eyebrow}</span>
        </div>
        <h1 className="reveal" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 7vw, 108px)', lineHeight: 0.98, letterSpacing: -0.03, fontWeight: 500, margin: 0, maxWidth: 900 }}>
          {L.hero.title1} <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>{L.hero.title2}</span> {L.hero.title3}
        </h1>
        <p className="reveal" style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--fg)', opacity: 0.85, marginTop: 32, maxWidth: 560 }}>{L.hero.sub}</p>
        <div className="reveal" style={{ marginTop: 40, display: 'flex', gap: 12 }}>
          <a href="#contact" className="btn-primary">{L.hero.cta1}</a>
          <a href="#services" className="btn-ghost">{L.hero.cta2}</a>
        </div>
        <div className="reveal" style={{ marginTop: 80, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--accent)', opacity: 0.8 }}>
          Inspired by innovation.
        </div>
      </div>
    </section>
  );
}

function ConstellationGraphic({ accent }) {
  const c = accent || 'var(--accent)';
  return (
    <svg viewBox="0 0 600 600" style={{ width: '100%', height: '100%' }}>
      <defs>
        <radialGradient id="glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={c} stopOpacity="0.15" />
          <stop offset="100%" stopColor={c} stopOpacity="0" />
        </radialGradient>
        <filter id="blur"><feGaussianBlur stdDeviation="2" /></filter>
      </defs>
      <circle cx="300" cy="300" r="280" fill="url(#glow)" />
      {/* Cygnus constellation — Deneb / Sadr / Gienah / Delta / Albireo */}
      <g>
        {[
          [300, 120, 8, 'Deneb'],
          [300, 310, 6, 'Sadr'],
          [180, 320, 5, 'Gienah'],
          [420, 320, 5, 'Delta'],
          [240, 430, 4, 'η'],
          [370, 480, 4, 'Albireo'],
        ].map(([x, y, r, name], i) => (
          <g key={i} className="star" style={{ animation: `twinkle ${2 + i * 0.4}s ease-in-out infinite`, animationDelay: `${i * 0.3}s`, transformOrigin: `${x}px ${y}px` }}>
            <circle cx={x} cy={y} r={r * 2.5} fill={c} opacity="0.2" filter="url(#blur)" />
            <circle cx={x} cy={y} r={r} fill="#fff" />
          </g>
        ))}
        {/* connecting lines */}
        <g stroke={c} strokeWidth="1" fill="none" opacity="0.4">
          <line x1="300" y1="120" x2="300" y2="310" />
          <line x1="300" y1="310" x2="180" y2="320" />
          <line x1="300" y1="310" x2="420" y2="320" />
          <line x1="300" y1="310" x2="240" y2="430" />
          <line x1="240" y1="430" x2="370" y2="480" />
        </g>
        {/* scattered distant stars */}
        {Array.from({ length: 40 }).map((_, i) => {
          const x = (i * 137) % 600;
          const y = (i * 211) % 600;
          return <circle key={i} cx={x} cy={y} r={Math.random() * 1.2 + 0.3} fill="#fff" opacity={Math.random() * 0.5 + 0.2} />;
        })}
      </g>
    </svg>
  );
}

// ───── C · Services grid ─────
function HeroGrid({ L }) {
  const svcs = L.services.items.slice(0, 4);
  return (
    <section id="top" className="hero" style={{ position: 'relative', minHeight: '100vh', padding: '140px 40px 60px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <h1 className="reveal" style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(44px, 7vw, 96px)', lineHeight: 0.95, letterSpacing: -0.03, fontWeight: 600, margin: 0, maxWidth: 1100,
        }}>
          {L.hero.title1} <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>{L.hero.title2}</span> {L.hero.title3}
        </h1>
        <p className="reveal" style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--muted)', marginTop: 32, maxWidth: 640 }}>{L.hero.sub}</p>

        <div className="reveal" style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 2, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 2 }}>
          {svcs.map((s, i) => (
            <div key={i} className="grid-tile" style={{ padding: 32, background: 'var(--bg)', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1, color: 'var(--accent)' }}>0{i + 1}</div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: -0.5, margin: 0, lineHeight: 1.1 }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', marginTop: 8, lineHeight: 1.5 }}>{s.short}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BackgroundGlow({ accent }) {
  const c = accent || 'var(--accent)';
  return (
    <>
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%',
        width: 700, height: 700, borderRadius: '50%',
        background: `radial-gradient(circle, ${c} 0%, transparent 60%)`,
        opacity: 0.08, filter: 'blur(80px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: '-30%', left: '-15%',
        width: 600, height: 600, borderRadius: '50%',
        background: `radial-gradient(circle, ${c} 0%, transparent 60%)`,
        opacity: 0.05, filter: 'blur(80px)', pointerEvents: 'none',
      }} />
    </>
  );
}

// Subtle constellation/equation pattern overlay — from Cygnus brand asset
function ConstellationBg({ opacity = 0.08 }) {
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
      backgroundImage: 'url(assets/brand/constellation-map.png)',
      backgroundSize: 'cover', backgroundPosition: 'center',
      opacity, mixBlendMode: 'screen',
    }} />
  );
}

// White twinkling stars scattered across the hero section, with sparkle bursts
function HeroStars() {
  // top/left as % of the hero section. size in px. delay desync.
  // type 'dot' = soft glowing dot; 'sparkle' = 4-point starburst.
  const stars = [
    // upper band
    { top: '8%',  left: '6%',   size: 2, delay: '1.2s', type: 'dot' },
    { top: '12%', left: '22%',  size: 3, delay: '0.4s', type: 'sparkle' },
    { top: '5%',  left: '38%',  size: 1.5, delay: '2.0s', type: 'dot' },
    { top: '18%', left: '54%',  size: 2, delay: '0.9s', type: 'dot' },
    { top: '9%',  left: '70%',  size: 4, delay: '0.2s', type: 'sparkle' },
    { top: '14%', left: '86%',  size: 2, delay: '1.8s', type: 'dot' },
    { top: '22%', left: '95%',  size: 1.5, delay: '0.6s', type: 'dot' },

    // middle band
    { top: '32%', left: '14%',  size: 2, delay: '1.6s', type: 'dot' },
    { top: '38%', left: '32%',  size: 5, delay: '0.0s', type: 'sparkle' },
    { top: '44%', left: '48%',  size: 2, delay: '2.4s', type: 'dot' },
    { top: '36%', left: '64%',  size: 3, delay: '1.0s', type: 'sparkle' },
    { top: '42%', left: '78%',  size: 2, delay: '0.5s', type: 'dot' },
    { top: '50%', left: '90%',  size: 1.5, delay: '2.2s', type: 'dot' },
    { top: '54%', left: '4%',   size: 2, delay: '0.7s', type: 'dot' },

    // lower band
    { top: '62%', left: '20%',  size: 3, delay: '1.4s', type: 'sparkle' },
    { top: '68%', left: '44%',  size: 2, delay: '0.3s', type: 'dot' },
    { top: '72%', left: '58%',  size: 1.5, delay: '2.6s', type: 'dot' },
    { top: '66%', left: '74%',  size: 2, delay: '1.1s', type: 'dot' },
    { top: '78%', left: '12%',  size: 2, delay: '0.8s', type: 'dot' },
    { top: '84%', left: '36%',  size: 4, delay: '0.1s', type: 'sparkle' },
    { top: '82%', left: '66%',  size: 2, delay: '1.9s', type: 'dot' },
    { top: '88%', left: '88%',  size: 2.5, delay: '0.6s', type: 'dot' },
  ];
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1, overflow: 'hidden' }}>
      {stars.map((s, i) => (
        <Star key={i} {...s} index={i} />
      ))}
    </div>
  );
}

function Star({ top, left, size, delay, type, index }) {
  const dur = 2.4 + (index % 4) * 0.5; // 2.4-3.9s, varied
  if (type === 'sparkle') {
    // 4-point sparkle drawn with crossed gradients + central dot
    return (
      <span style={{
        position: 'absolute', top, left,
        width: size * 8, height: size * 8,
        transform: 'translate(-50%, -50%)',
        animation: `starPulse ${dur}s ease-in-out ${delay} infinite`,
        willChange: 'opacity, transform',
      }}>
        {/* horizontal ray */}
        <span style={{
          position: 'absolute', top: '50%', left: 0, right: 0, height: 1,
          transform: 'translateY(-50%)',
          background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent)',
        }} />
        {/* vertical ray */}
        <span style={{
          position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1,
          transform: 'translateX(-50%)',
          background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.95), transparent)',
        }} />
        {/* core */}
        <span style={{
          position: 'absolute', top: '50%', left: '50%',
          width: size * 1.6, height: size * 1.6,
          transform: 'translate(-50%, -50%)',
          borderRadius: '50%',
          background: '#fff',
          boxShadow: `0 0 ${size * 3}px #fff, 0 0 ${size * 6}px rgba(255,255,255,0.6), 0 0 ${size * 12}px rgba(140,200,230,0.4)`,
        }} />
      </span>
    );
  }
  // simple twinkling dot
  return (
    <span style={{
      position: 'absolute', top, left,
      width: size, height: size,
      transform: 'translate(-50%, -50%)',
      borderRadius: '50%',
      background: '#fff',
      boxShadow: `0 0 ${size * 2}px #fff, 0 0 ${size * 5}px rgba(255,255,255,0.55), 0 0 ${size * 10}px rgba(160,210,235,0.35)`,
      animation: `starTwinkle ${dur}s ease-in-out ${delay} infinite`,
      willChange: 'opacity, transform',
    }} />
  );
}

// inject star keyframes once
(function injectStarStyles() {
  if (document.getElementById('hero-star-styles')) return;
  const s = document.createElement('style');
  s.id = 'hero-star-styles';
  s.textContent = `
    @keyframes starTwinkle {
      0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
      40%      { opacity: 0.25; transform: translate(-50%, -50%) scale(0.7); }
      70%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
    }
    @keyframes starPulse {
      0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1) rotate(0deg); }
      50%      { opacity: 0.4; transform: translate(-50%, -50%) scale(0.65) rotate(45deg); }
    }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, { Hero, HeroBold, HeroConstellation, HeroGrid, ConstellationGraphic, BackgroundGlow, ConstellationBg, HeroStars, Star });