/* Hero */

function HeroOrb() {
  const ringCount = 5;
  return (
    <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="orbCore" cx="50%" cy="50%">
          <stop offset="0%" stopColor="rgba(120, 200, 240, 0.85)" />
          <stop offset="50%" stopColor="rgba(0, 100, 160, 0.4)" />
          <stop offset="100%" stopColor="rgba(0, 30, 50, 0)" />
        </radialGradient>
        <linearGradient id="ringStroke" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.0)" />
          <stop offset="50%" stopColor="rgba(255,255,255,0.5)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0.0)" />
        </linearGradient>
      </defs>
      <circle cx="400" cy="400" r="120" fill="url(#orbCore)">
        <animate attributeName="r" values="120;138;120" dur="6s" repeatCount="indefinite" />
      </circle>
      {Array.from({ length: ringCount }).map((_, i) => {
        const r = 160 + i * 56;
        const dur = 22 + i * 4;
        const dir = i % 2 === 0 ? 1 : -1;
        return (
          <g key={i} style={{ transformOrigin: "400px 400px" }}>
            <circle cx="400" cy="400" r={r} fill="none" stroke="url(#ringStroke)" strokeWidth="1"
              strokeDasharray={i === 1 ? "2 8" : i === 3 ? "1 12" : "0"}
              opacity={0.5 - i * 0.05}>
              <animateTransform attributeName="transform" type="rotate"
                from={dir > 0 ? `0 400 400` : `360 400 400`}
                to={dir > 0 ? `360 400 400` : `0 400 400`}
                dur={`${dur}s`} repeatCount="indefinite" />
            </circle>
            {Array.from({ length: 3 + i }).map((_, j) => {
              const angle = (j / (3 + i)) * Math.PI * 2;
              const x = 400 + Math.cos(angle) * r;
              const y = 400 + Math.sin(angle) * r;
              return (
                <g key={j}>
                  <circle cx={x} cy={y} r={i === 0 ? 4 : 2.5}
                    fill={i % 2 === 0 ? "#fff" : "rgba(255,200,140,0.9)"} opacity="0.85">
                    <animateTransform attributeName="transform" type="rotate"
                      from={dir > 0 ? `0 400 400` : `360 400 400`}
                      to={dir > 0 ? `360 400 400` : `0 400 400`}
                      dur={`${dur}s`} repeatCount="indefinite" />
                  </circle>
                </g>
              );
            })}
          </g>
        );
      })}
      <circle cx="400" cy="400" r="380" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
    </svg>
  );
}

function Hero({ navigate }) {
  const { t } = useT();
  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="hero-grid" />
        <div className="hero-glow" />
        <div className="hero-orb"><HeroOrb /></div>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow" style={{ animation: "wordUp 1s cubic-bezier(.22,.84,.31,1) both" }}>
          <span className="pulse" /> {t.hero.eyebrow}
        </div>

        <h1>
          <Words text={t.hero.h1a} delay={100} />
          <br />
          <em><Words text={t.hero.h1b} delay={400} stagger={70} /></em>
        </h1>

        <p className="hero-sub" style={{ animation: "wordUp 1s 1.2s cubic-bezier(.22,.84,.31,1) both" }}>
          {t.hero.sub}
        </p>

        <div className="hero-cta" style={{ animation: "wordUp 1s 1.4s cubic-bezier(.22,.84,.31,1) both" }}>
          <a href="#start" className="btn" onClick={(e) => { e.preventDefault(); navigate && navigate("start"); window.scrollTo({ top: 0 }); }}>
            {t.hero.ctaPrimary} <ArrowIcon />
          </a>
          <a href="#services" className="btn ghost" onClick={(e) => { e.preventDefault(); document.querySelector("#services")?.scrollIntoView({ behavior: "smooth" }); }}>
            {t.hero.ctaSecondary}
          </a>
        </div>
      </div>

      <div className="hero-tick">
        <div><span className="dot" /> {t.hero.tickLeft}</div>
        <div>{t.hero.tickMid}</div>
        <div>{t.hero.tickRight}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });