/* MStheory website — Hero with CSS-3D road scene */
const { Button, Badge } = window.MStheoryDesignSystem_61eb29;

function Hero({ t, onCheckout, onDemo }) {
  const sceneRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  const onMove = (e) => {
    const r = sceneRef.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    setTilt({ x: py * -10, y: px * 16 });
  };

  return (
    <section id="top" style={{ position: "relative", overflow: "hidden", paddingTop: "var(--header-height)" }}>
      {/* spotlight + road */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "var(--grad-spotlight)", pointerEvents: "none" }} />
      <div aria-hidden="true" className="ms-road-wrap">
        <div className="ms-road" />
        <div className="ms-road-fade" />
      </div>

      <div className="ms-container" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "40px", alignItems: "center", minHeight: "calc(100vh - var(--header-height))", paddingBlock: "64px" }}>
        {/* Left: copy */}
        <div className="ms-hero-copy">
          <div style={{ display: "inline-flex", marginBottom: "22px" }}>
            <Badge variant="gold">{t.hero.badge}</Badge>
          </div>
          <h1 style={{ fontSize: "clamp(40px, 5.6vw, 84px)", lineHeight: 1.02, marginBottom: "22px" }}>
            {t.hero.title1} <span className="ms-gold-text">{t.hero.titleHi}</span>
          </h1>
          <p style={{ fontSize: "var(--text-md)", color: "var(--text-secondary)", lineHeight: "var(--lh-relaxed)", maxWidth: "520px", marginBottom: "32px", textWrap: "pretty" }}>
            {t.hero.sub}
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "16px", marginBottom: "14px" }}>
            <Button variant="primary" size="lg" onClick={onCheckout}>{t.hero.cta}</Button>
            <Button variant="ghost" size="lg" iconLeft={<span>▷</span>} onClick={onDemo}>{t.hero.demo}</Button>
          </div>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", letterSpacing: "var(--tracking-wide)", marginBottom: "44px" }}>
            {t.hero.ctaSub}
          </p>

          <div style={{ display: "flex", gap: "36px", flexWrap: "wrap" }}>
            {[["stat1","stat1l"],["stat2","stat2l"],["stat3","stat3l"]].map(([v,l]) => (
              <div key={v}>
                <div className="ms-gold-text" style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-2xl)", fontWeight: "var(--fw-bold)", lineHeight: 1 }}>{t.hero[v]}</div>
                <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", marginTop: "6px", maxWidth: "120px" }}>{t.hero[l]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: 3D badge scene */}
        <div ref={sceneRef} onMouseMove={onMove} onMouseLeave={() => setTilt({ x: 0, y: 0 })}
          style={{ perspective: "1100px", height: "520px", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div className="ms-badge3d" style={{ transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)` }}>
            <div className="ms-badge3d-card">
              <div className="ms-badge3d-shine" />
              <img src="../../assets/logo-mark.svg" alt="" width="120" height="120" style={{ position: "relative" }} />
              <div style={{ position: "relative", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "26px", letterSpacing: "-0.02em", marginTop: "18px" }} className="ms-gold-text">MStheory</div>
              <div style={{ position: "relative", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.22em", color: "var(--text-muted)", marginTop: "8px" }}>THEORIE · CBR · 2026</div>
              <div className="ms-badge3d-chip">B · A · C · D · AM · TX</div>
            </div>
            {/* floating orbiting topic chips */}
            <div className="ms-orbit ms-orbit-1"><img src="../../assets/icons/auto.svg" width="22" /></div>
            <div className="ms-orbit ms-orbit-2"><img src="../../assets/icons/motor.svg" width="22" /></div>
            <div className="ms-orbit ms-orbit-3"><img src="../../assets/icons/vrachtwagen.svg" width="22" /></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;