/* Hero + Nav + Marquee */

const Nav = () => {
  return (
    <nav style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 50,
      padding: "20px 48px",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      mixBlendMode: "difference",
    }}>
      <a href="#top" data-cursor="hover" style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 10, color: "var(--paper)" }}>
        <svg width="22" height="22" viewBox="0 0 22 22">
          <circle cx="11" cy="11" r="10" fill="none" stroke="currentColor" strokeWidth="0.8" />
          <circle cx="11" cy="11" r="2" fill="currentColor" />
        </svg>
        <span className="mono-label" style={{ color: "var(--paper)" }}>OOTW · CO</span>
      </a>
      <div style={{ display: "flex", gap: 32, alignItems: "center" }}>
        {["Vision", "Ecosystem", "Approach", "Investor"].map((item) => (
          <a key={item} href={`#${item.toLowerCase()}`} data-cursor="hover" className="nav-link mono-label" style={{
            color: "var(--paper)",
            textDecoration: "none",
            position: "relative",
          }}>{item}</a>
        ))}
      </div>
      <div className="mono-label" style={{ color: "var(--paper)" }}>
        <span style={{ opacity: 0.5 }}>EST.</span> 2025
      </div>
    </nav>
  );
};

const Hero = () => {
  const heroRef = React.useRef(null);
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const parallax = (factor) => ({ transform: `translateY(${scrollY * factor}px)` });

  return (
    <section id="top" ref={heroRef} style={{
      minHeight: "100vh",
      position: "relative",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      paddingTop: 120,
      paddingBottom: 40,
      overflow: "hidden",
    }}>
      {/* Concentric rings background */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: `translate(-50%, -50%) translateY(${scrollY * 0.15}px)`,
        width: "min(120vh, 1400px)",
        height: "min(120vh, 1400px)",
        pointerEvents: "none",
      }}>
        <svg viewBox="0 0 800 800" style={{ width: "100%", height: "100%", opacity: 0.6 }}>
          {[80, 160, 240, 320, 400].map((r, i) => (
            <circle key={r} cx="400" cy="400" r={r} fill="none" stroke="var(--hairline-strong)" strokeWidth="0.5" opacity={0.5 - i * 0.05}>
              <animateTransform attributeName="transform" type="rotate" from={i % 2 ? `0 400 400` : `360 400 400`} to={i % 2 ? `360 400 400` : `0 400 400`} dur={`${80 + i * 20}s`} repeatCount="indefinite" />
            </circle>
          ))}
          {/* tick marks on outer ring */}
          {Array.from({ length: 60 }, (_, i) => i * 6).map((deg) => (
            <line key={deg}
              x1="400" y1="0" x2="400" y2={deg % 30 === 0 ? 14 : 6}
              stroke="var(--paper)"
              strokeWidth="0.4"
              opacity={deg % 30 === 0 ? 0.6 : 0.25}
              transform={`rotate(${deg} 400 400)`}
            />
          ))}
          {/* nucleus */}
          <circle cx="400" cy="400" r="3" fill="var(--magenta)" />
          <circle cx="400" cy="400" r="10" fill="none" stroke="var(--magenta)" strokeWidth="0.5" opacity="0.6" />
        </svg>
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        {/* Top label row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "16vh" }}>
          <div className="reveal in" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          </div>
          <div className="reveal in reveal-d2" style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="mono-coord">[ A NEW CATEGORY IS EMERGING ]</span>
            <span className="mono-coord" style={{ color: "var(--magenta)" }}>WE ARE BUILDING IT.</span>
          </div>
        </div>

        {/* Main hero text */}
        <div style={{ position: "relative" }}>
          <div className="reveal in reveal-d1" style={{ marginBottom: 20 }}>
            <span className="mono-label">— Out Of This World</span>
          </div>

          <h1 className="display reveal in reveal-d2" style={{
            fontSize: "clamp(64px, 14vw, 220px)",
            lineHeight: 0.88,
            letterSpacing: "-0.05em",
            fontWeight: 200,
            fontStyle: "normal",
          }}>
            <span style={{ display: "block" }}>Out</span>
            <span style={{ display: "block", paddingLeft: "8vw" }}>
              Of <span className="display-italic" style={{ color: "var(--magenta)" }}>This</span>
            </span>
            <span style={{ display: "block", paddingLeft: "20vw" }}>
              <span className="display-italic">World</span>
              <span style={{ color: "var(--gold)", fontStyle: "normal", fontSize: "0.4em", verticalAlign: "super", marginLeft: 12 }}>✦</span>
            </span>
          </h1>
        </div>

        <div style={{
          marginTop: 60,
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          gap: 40,
          alignItems: "end",
        }} className="hero-bottom">
          <div className="reveal in reveal-d3">
            <p style={{ fontSize: 18, lineHeight: 1.5, color: "var(--paper-dim)", maxWidth: 360 }}>
              An integrated ecosystem for <em style={{ color: "var(--paper)" }}>consciousness</em>, <em style={{ color: "var(--paper)" }}>wellness</em>, and <em style={{ color: "var(--paper)" }}>human evolution</em>.
            </p>
          </div>
          <div className="reveal in reveal-d4" style={{ textAlign: "left" }}>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", maxWidth: 320 }}>
              We build the bridge between inner transformation and real-world systems — bringing coherence, intelligence, and elevated experience into the fabric of modern life.
            </p>
          </div>
          <div className="reveal in reveal-d5" style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
            <a href="#vision" className="btn btn-primary" data-cursor="hover">
              <span>Explore the Vision</span>
              <span className="btn-arrow">→</span>
            </a>
            <a href="#investor" className="btn btn-gold" data-cursor="hover">
              <span>Investor Inquiry</span>
              <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: "absolute",
          bottom: -20, left: "50%",
          transform: "translateX(-50%)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 12,
          opacity: 0.7,
        }} className="reveal in reveal-d5">
          <span className="mono-coord" style={{ fontSize: 9 }}>SCROLL · DESCEND</span>
          <div style={{ width: 1, height: 32, background: "var(--paper)", animation: "scrollLine 2s ease-in-out infinite" }} />
        </div>
        <style>{`
          @keyframes scrollLine {
            0%, 100% { transform: scaleY(0.3); transform-origin: top; }
            50%      { transform: scaleY(1); transform-origin: top; }
          }
          @media (max-width: 760px) {
            .hero-bottom { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

const Marquee = () => {
  const items = [
    "Consciousness",
    "Wellness",
    "Technology",
    "Culture",
    "Infrastructure",
    "Embodiment",
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((item, i) => (
          <span key={i} className="marquee-item">{item}</span>
        ))}
      </div>
      <div className="marquee-track" aria-hidden="true">
        {[...items, ...items, ...items].map((item, i) => (
          <span key={i} className="marquee-item">{item}</span>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Nav, Hero, Marquee });