/* Hero with 3 variants: axis / orbit / ticker */

function HeroAxisVisual() {
  // Animated rotating axis system
  return (
    <svg viewBox="0 0 600 600" className="hero-axis-svg" style={{ width: "100%", height: "100%" }}>
      <defs>
        <radialGradient id="glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.35"/>
          <stop offset="60%" stopColor="var(--accent)" stopOpacity="0.05"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="300" cy="300" r="280" fill="url(#glow)" />

      {/* Concentric axis rings */}
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-1 60s linear infinite" }}>
        <circle cx="300" cy="300" r="260" fill="none" stroke="var(--line-2)" strokeDasharray="1 6"/>
        <circle cx="300" cy="300" r="260" fill="none" stroke="var(--accent)" strokeOpacity="0.9" strokeWidth="1.5" strokeDasharray="40 1000" />
      </g>
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-2 42s linear infinite" }}>
        <circle cx="300" cy="300" r="200" fill="none" stroke="var(--line-2)" strokeDasharray="1 4"/>
        <circle cx="300" cy="300" r="200" fill="none" stroke="var(--accent)" strokeOpacity="0.7" strokeWidth="1" strokeDasharray="80 800" />
      </g>
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-3 28s linear infinite reverse" }}>
        <circle cx="300" cy="300" r="140" fill="none" stroke="var(--line-2)"/>
        <circle cx="300" cy="300" r="140" fill="none" stroke="var(--accent)" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="30 400" />
      </g>

      {/* Axis crosshair */}
      <line x1="20" y1="300" x2="580" y2="300" stroke="var(--line)" />
      <line x1="300" y1="20" x2="300" y2="580" stroke="var(--line)" />

      {/* Orbital nodes */}
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-1 30s linear infinite" }}>
        <circle cx="560" cy="300" r="4" fill="var(--accent)"/>
        <circle cx="560" cy="300" r="10" fill="var(--accent)" opacity="0.18"/>
      </g>
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-2 22s linear infinite reverse" }}>
        <circle cx="500" cy="300" r="3" fill="var(--fg)"/>
      </g>
      <g style={{ transformOrigin: "300px 300px", animation: "hero-rot-3 16s linear infinite" }}>
        <circle cx="440" cy="300" r="3" fill="var(--accent)"/>
      </g>

      {/* Center node */}
      <circle cx="300" cy="300" r="28" fill="var(--bg)" stroke="var(--line-2)"/>
      <circle cx="300" cy="300" r="6" fill="var(--accent)"/>

      {/* Axis labels */}
      <g fontFamily="var(--mono)" fontSize="10" fill="var(--fg-mute)" letterSpacing="1">
        <text x="300" y="14" textAnchor="middle">BEFORE</text>
        <text x="300" y="594" textAnchor="middle">AFTER</text>
        <text x="8" y="304">HUMAN</text>
        <text x="592" y="304" textAnchor="end">AI-NATIVE</text>
      </g>

      <style>{`
        @keyframes hero-rot-1 { to { transform: rotate(360deg); } }
        @keyframes hero-rot-2 { to { transform: rotate(360deg); } }
        @keyframes hero-rot-3 { to { transform: rotate(360deg); } }
      `}</style>
    </svg>
  );
}

function HeroOrbitVisual() {
  // Cleaner — satellites orbiting a nucleus
  return (
    <svg viewBox="0 0 600 600" style={{ width: "100%", height: "100%" }}>
      {/* Orbits */}
      {[110, 170, 240, 280].map((r, i) => (
        <ellipse key={i} cx="300" cy="300" rx={r} ry={r * 0.92}
          fill="none" stroke="var(--line-2)" strokeDasharray={i % 2 ? "2 6" : undefined}
          transform={`rotate(${i * 18} 300 300)`} />
      ))}

      {[
        { r: 110, size: 4, dur: 18, col: "var(--accent)" },
        { r: 170, size: 5, dur: 28, col: "var(--fg)" },
        { r: 240, size: 4, dur: 40, col: "var(--accent)" },
        { r: 280, size: 3, dur: 56, col: "var(--fg-dim)" }
      ].map((o, i) => (
        <g key={i} style={{ transformOrigin: "300px 300px", animation: `orbit-${i} ${o.dur}s linear infinite` }}>
          <circle cx={300 + o.r} cy="300" r={o.size} fill={o.col}/>
          <circle cx={300 + o.r} cy="300" r={o.size + 6} fill={o.col} opacity="0.18"/>
        </g>
      ))}

      {/* Nucleus */}
      <circle cx="300" cy="300" r="60" fill="none" stroke="var(--line-2)"/>
      <circle cx="300" cy="300" r="36" fill="var(--bg-2)" stroke="var(--line-2)"/>
      <circle cx="300" cy="300" r="8" fill="var(--accent)"/>

      <style>{`
        @keyframes orbit-0 { to { transform: rotate(360deg); } }
        @keyframes orbit-1 { to { transform: rotate(360deg); } }
        @keyframes orbit-2 { to { transform: rotate(360deg); } }
        @keyframes orbit-3 { to { transform: rotate(360deg); } }
      `}</style>
    </svg>
  );
}

function Hero({ variant = "axis" }) {
  return (
    <section className="hero" id="top">
      <div className="hero-grid" />
      <div className="container hero-content">
        <Reveal>
          <div className="eyebrow">NurtureAxis — AI-Native Transformation</div>
        </Reveal>

        <Reveal delay={1}>
          <h1 className="hero-title">
            We turn teams into <em>AI-native</em> operators.
          </h1>
        </Reveal>

        <Reveal delay={2}>
          <p className="hero-sub">
            Hands-on engagements that rebuild your software and retrain your team around AI.
            From a 30-person e-commerce platform to two products with 15,000+ users of our own —
            we've done it, and we'll do it with you.
          </p>
        </Reveal>

        <Reveal delay={3}>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary">
              Book a discovery call <Arrow/>
            </a>
            <a href="#services" className="btn btn-ghost">
              See engagement models
            </a>
          </div>
        </Reveal>

        {variant === "ticker" && (
          <Reveal delay={4}>
            <div className="ticker-row">
              <div className="ticker-track">
                {Array(2).fill(0).flatMap((_, dup) => [
                  "AI-native transformation",
                  "Product builds in 12 weeks",
                  "Team retraining",
                  "15,000+ combined users",
                  "Ex-Google · Oracle · Flipkart · Udaan · 6sense",
                  "End-to-end engineering",
                  "Executive alignment",
                ].map((t, i) => <span key={`${dup}-${i}`}>{t}</span>))}
              </div>
            </div>
          </Reveal>
        )}
      </div>

      {variant !== "ticker" && (
        <div className="hero-visual" aria-hidden="true">
          {variant === "orbit" ? <HeroOrbitVisual /> : <HeroAxisVisual />}
        </div>
      )}

    </section>
  );
}

Object.assign(window, { Hero });