import { useState, useEffect } from "react";

/*  CONSTANTS FROM YOUR INFRASTRUCTURE  */
const BLUE_ABYSS  = "#071428";
const BLUE_DEEP   = "#0B1D3A";
const BLUE_BORDER = "#1E4070";
const GOLD        = "#E8B84B";
const GOLD_DIM    = "#A07D2E";
const EMERALD     = "#10B981";
const TEXT        = "#E2E8F0";
const TEXT_MID    = "#94A3B8";
const MONO        = "'JetBrains Mono','Fira Code',monospace";
const DISPLAY     = "'Playfair Display','Instrument Serif',serif";

export default function AerospaceModule() {
  const [resonance, setResonance] = useState(0);

  return (
    <div style={{
      background: BLUE_ABYSS,
      minHeight: "100vh",
      color: TEXT,
      padding: "60px 28px",
      position: "relative",
      overflow: "hidden"
    }}>
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: `linear-gradient(${BLUE_BORDER}20 1px, transparent 1px), linear-gradient(90deg, ${BLUE_BORDER}20 1px, transparent 1px)`,
        backgroundSize: "40px 40px",
        pointerEvents: "none"
      }} />

      <div style={{ maxWidth: 1000, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", position: "relative", zIndex: 2 }}>
        <div>
          <div style={{ fontFamily: MONO, fontSize: 10, color: EMERALD, letterSpacing: 4, marginBottom: 20 }}>
            MODULE 04 // AEROSPACE & PROPULSION
          </div>
          <h2 style={{ fontFamily: DISPLAY, fontSize: 56, lineHeight: 1.1, marginBottom: 24 }}>
            Harmonic<br /><span style={{ color: GOLD }}>Resonance</span>
          </h2>
          <div style={{
            border: `1px solid ${BLUE_BORDER}`,
            padding: 24,
            borderRadius: 12,
            background: "rgba(11, 29, 58, 0.5)",
            backdropFilter: "blur(10px)"
          }}>
            <p style={{ fontSize: 14, color: TEXT_MID, lineHeight: 1.8, marginBottom: 20 }}>
              Physical motion is not a matter of thrust, but of symmetry. We anchor 
              the airframe to the 11th dimension, neutralizing drag through 
              astrometric synchronization.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div style={{ border: `1px solid ${BLUE_BORDER}`, padding: 12, borderRadius: 8 }}>
                <div style={{ fontFamily: MONO, fontSize: 8, color: GOLD_DIM }}>PROPULSION</div>
                <div style={{ fontFamily: MONO, fontSize: 12, color: TEXT }}>INVARIANT DRIVE</div>
              </div>
              <div style={{ border: `1px solid ${BLUE_BORDER}`, padding: 12, borderRadius: 8 }}>
                <div style={{ fontFamily: MONO, fontSize: 8, color: GOLD_DIM }}>EMISSIONS</div>
                <div style={{ fontFamily: MONO, fontSize: 12, color: EMERALD }}>0.000%</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
          <div style={{
            width: 300, height: 300,
            borderRadius: "50%",
            border: `1px solid ${GOLD_DIM}40`,
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
            <div style={{
              width: 80, height: 80,
              background: GOLD,
              borderRadius: "50%",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: `0 0 60px ${GOLD}40`,
              zIndex: 3
            }}>
              <span style={{ fontFamily: MONO, fontWeight: 700, color: BLUE_ABYSS }}>10</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}