// Shift10 Landingpage — Hero

const ORBIT_LOGOS = [
  // ring 0 — big 4 LLMs
  { name: "ChatGPT",    ring: 0, src: "https://svgl.app/library/openai.svg" },
  { name: "Claude",     ring: 0, src: "https://svgl.app/library/claude-ai-icon.svg" },
  { name: "Gemini",     ring: 0, src: "https://svgl.app/library/gemini.svg" },
  { name: "Grok",       ring: 0, src: "https://svgl.app/library/grok-light.svg" },
  // ring 1
  { name: "Perplexity", ring: 1, src: "https://svgl.app/library/perplexity.svg" },
  { name: "DeepSeek",   ring: 1, src: "https://svgl.app/library/deepseek.svg" },
  { name: "Ollama",     ring: 1, src: "https://svgl.app/library/ollama_light.svg" },
  // ring 2
  { name: "Hugging Face", ring: 2, src: "https://svgl.app/library/hugging_face.svg" },
  { name: "MCP",          ring: 2, src: "https://svgl.app/library/model-context-protocol-light.svg" },
  // ring 3
  { name: "Midjourney", ring: 3, src: "https://svgl.app/library/midjourney.svg" },
  { name: "Firecrawl",  ring: 3, src: "https://svgl.app/library/firecrawl.svg" },
  // ring 4
  { name: "Manus",      ring: 4, src: "https://svgl.app/library/manus.svg" },
];

function Hero() {
  const lp = useSanityLP();
  const rings = [
    { r: 280, dur: 70,  dir:  1, color: "rgba(0,0,0,0.10)" },
    { r: 420, dur: 95,  dir: -1, color: "rgba(0,0,0,0.08)" },
    { r: 560, dur: 120, dir:  1, color: "rgba(0,0,0,0.07)" },
    { r: 700, dur: 150, dir: -1, color: "rgba(0,0,0,0.05)" },
    { r: 840, dur: 180, dir:  1, color: "rgba(0,0,0,0.04)" },
  ];

  return (
    <section className="hero" style={{ background: "var(--color-white)", padding: "140px 40px 120px", overflow: "hidden" }}>
      <div className="hero-inner" style={{ position: "relative", textAlign: "center", minHeight: 900 }}>

        {/* Orbit stage — centered on the headline */}
        <div className="orbit-stage" style={{
          position: "absolute",
          left: "50%", top: "50%",
          width: 0, height: 0,
          pointerEvents: "none"
        }}>
          {/* Orbit rings */}
          {rings.map((ring, ri) =>
            <div key={ri} style={{
              position: "absolute",
              left: -ring.r, top: -ring.r,
              width: ring.r * 2, height: ring.r * 2,
              borderRadius: "50%",
              border: `1px solid ${ring.color}`
            }} />
          )}

          {/* Logo orbits */}
          {rings.map((ring, ri) => {
            const logos = ORBIT_LOGOS.filter((l) => l.ring === ri);
            return (
              <div key={"r" + ri} style={{
                position: "absolute",
                left: 0, top: 0,
                width: 0, height: 0,
                animation: `orbit-spin ${ring.dur}s linear infinite ${ring.dir < 0 ? "reverse" : ""}`,
                transformOrigin: "0 0"
              }}>
                {logos.map((logo, li) => {
                  const angle = li / logos.length * 360;
                  const rad = angle * Math.PI / 180;
                  const x = Math.cos(rad) * ring.r;
                  const y = Math.sin(rad) * ring.r;
                  return (
                    <div key={logo.name} style={{
                      position: "absolute",
                      left: x, top: y,
                      transform: "translate(-50%, -50%)"
                    }}>
                      <div style={{
                        animation: `orbit-counter ${ring.dur}s linear infinite ${ring.dir < 0 ? "" : "reverse"}`,
                        transformOrigin: "center"
                      }}>
                        <OrbitLogo logo={logo} />
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}

          {/* Center pulse glow */}
          <div style={{
            position: "absolute",
            left: -360, top: -260,
            width: 720, height: 520,
            borderRadius: "50%",
            background: "radial-gradient(ellipse, rgba(255,255,255,1) 30%, rgba(255,255,255,0.85) 50%, transparent 78%)",
            pointerEvents: "none"
          }} />
        </div>

        {/* Foreground content (above orbits) */}
        <div className="orbit-content" style={{ position: "relative", zIndex: 2, paddingTop: 200, paddingBottom: 100 }}>
          <div style={{
            position: "absolute",
            left: "50%", top: "50%",
            transform: "translate(-50%, -50%)",
            width: 900, height: 600,
            background: "radial-gradient(ellipse at center, rgba(255,255,255,1) 30%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0) 75%)",
            pointerEvents: "none",
            zIndex: -1
          }} />
          <div style={{ marginBottom: 32 }}>
            <span className="chip">
              <span className="chip-dot" />
              {lp?.heroChip || '8 Jahre KI Erfahrung'}
            </span>
          </div>

          <h1 className="display" style={{
            maxWidth: "16ch",
            margin: "0 auto",
            fontWeight: 500, fontSize: "clamp(32px, 6vw, 67px)"
          }}>
            {lp?.heroHeadline || 'KI-Workshops für Schweizer KMU.'}<br />
            <em style={{ fontStyle: "normal", color: "var(--color-accent)", fontWeight: 400, fontSize: "clamp(32px, 6vw, 68px)" }}>
              {lp?.heroAccentLine || 'Praxis statt Theorie.'}
            </em>
          </h1>

          <p className="lead" style={{
            marginTop: 28, marginLeft: "auto", marginRight: "auto",
            fontSize: 18, maxWidth: 580
          }}>
            {lp?.heroSubtext || 'Dein Team lernt in 2 Freitagen, wie KI den Arbeitsalltag konkret verbessert — und testet danach eine Woche lang alle Premium-Tools auf unserer Testmaschine. Ohne Abo, ohne Risiko.'}
          </p>

          <div className="row row--center" style={{ marginTop: 36 }}>
            <a href="#kontakt" className="btn btn--accent">
              {lp?.heroCTAPrimary || 'Workshop anfragen'} <span className="btn-arrow">→</span>
            </a>
            <a href="#angebot" className="btn btn--ghost">
              {lp?.heroCTASecondary || 'Tool-Liste ansehen'}
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes orbit-spin {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
        @keyframes orbit-counter {
          from { transform: rotate(0deg); }
          to   { transform: rotate(-360deg); }
        }
      `}</style>
    </section>
  );
}

function OrbitLogo({ logo }) {
  const size = logo.ring === 0 ? 54 : logo.ring === 1 ? 50 : logo.ring === 2 ? 46 : logo.ring === 3 ? 42 : 38;
  return (
    <div
      title={logo.name}
      style={{
        width: size, height: size,
        borderRadius: "50%",
        background: "var(--color-white)",
        border: "1px solid var(--color-neutral-200)",
        display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "0 2px 12px rgba(0,0,0,0.06)",
        opacity: logo.ring === 0 ? 1 : logo.ring === 1 ? 0.92 : logo.ring === 2 ? 0.82 : logo.ring === 3 ? 0.7 : 0.55,
        transition: "transform 200ms var(--ease-out), opacity 200ms",
        cursor: "default"
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "scale(1.12)"; e.currentTarget.style.opacity = 1; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.opacity = ""; }}>
      <img
        src={logo.src}
        alt={logo.name}
        style={{ width: size * 0.55, height: size * 0.55, objectFit: "contain", filter: "grayscale(1) contrast(0.85)" }}
      />
    </div>
  );
}

Object.assign(window, { Hero });