const { useState, useEffect, useRef } = React;

// Animated counter component
const Counter = ({ end, duration = 2000, suffix = "" }) => {
  const [count, setCount] = useState(0);
  const [started, setStarted] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setStarted(true); },
      { threshold: 0.3 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!started) return;
    const steps = 40;
    const increment = end / steps;
    let current = 0;
    const timer = setInterval(() => {
      current += increment;
      if (current >= end) { setCount(end); clearInterval(timer); }
      else setCount(Math.floor(current));
    }, duration / steps);
    return () => clearInterval(timer);
  }, [started, end, duration]);

  return <span ref={ref}>{count}{suffix}</span>;
};

// Typing effect for hero
const TypeWriter = ({ text, speed = 40, delay = 500 }) => {
  const [displayed, setDisplayed] = useState("");
  const [showCursor, setShowCursor] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => {
      let i = 0;
      const interval = setInterval(() => {
        setDisplayed(text.slice(0, i + 1));
        i++;
        if (i >= text.length) {
          clearInterval(interval);
          setTimeout(() => setShowCursor(false), 2000);
        }
      }, speed);
      return () => clearInterval(interval);
    }, delay);
    return () => clearTimeout(timeout);
  }, [text, speed, delay]);

  return (
    <span>
      {displayed}
      {showCursor && <span style={{ animation: "blink 1s step-end infinite", color: "#00d4aa" }}>|</span>}
    </span>
  );
};

// Fade-in on scroll
const FadeSection = ({ children, delay = 0 }) => {
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setTimeout(() => setVisible(true), delay); },
      { threshold: 0.1 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [delay]);

  return (
    <div
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(24px)",
        transition: "opacity 0.7s ease, transform 0.7s ease",
      }}
    >
      {children}
    </div>
  );
};

const USE_CASES = [
  {
    icon: "shield",
    label: "CONTINUOUS ATO",
    title: "AI-Powered RMF Compliance",
    description: "Automated control assessment, SSP narrative generation, and POA&M triage across your entire NIST 800-53 baseline. Accelerate compliance workflows from months to hours and maintain continuous authorization as your system evolves. Ingest directly from eMASS, map to CNSSI 1253, and export to OSCAL for machine-readable compliance artifacts that integrate with next-generation authorization workflows.",
    tags: ["RMF", "NIST 800-53", "eMASS", "cATO", "SSP", "CNSSI 1253", "OSCAL"],
    active: true,
  },
  {
    icon: "code",
    label: "SOVEREIGN AI DEVELOPMENT",
    title: "AI Pair Programming Inside the SCIF",
    description: "Give every developer on the enclave the same AI-assisted coding experience available in the commercial world — code generation, intelligent autocomplete, code review, refactoring, and documentation — powered by open-source LLMs running on local GPU infrastructure. No data ever crosses the air gap. Your developers get Copilot-class capabilities; your code stays classified.",
    tags: ["Code Generation", "AI Autocomplete", "Code Review", "Documentation", "Refactoring"],
    active: false,
  },
  {
    icon: "deploy",
    label: "CYBER-HARDENED DEPLOYMENT",
    title: "AI-Powered DevSecOps Pipelines",
    description: "Automate your build, test, scan, and deploy workflows with AI that understands your security requirements. Intelligent CI/CD pipelines that generate test cases, identify vulnerabilities before deployment, and validate compliance at every stage — accelerating your software factory without compromising your security posture.",
    tags: ["CI/CD", "DevSecOps", "Automated Testing", "SAST/DAST", "Build Verification"],
    active: false,
  },
  {
    icon: "data",
    label: "INTELLIGENT DATA WORKFLOWS",
    title: "Classified Data, Labeled at Scale",
    description: "Your most valuable training data can't leave the enclave — which means commercial labeling services aren't an option. Adaptt brings AI-powered labeling, classification, entity extraction, and annotation directly into your air-gapped environment. Accelerate the data pipelines that feed your ML/AI models without exposing classified imagery, signals, or documents to external services.",
    tags: ["Data Labeling", "Annotation", "Entity Extraction", "Classification", "ISR", "NLP"],
    active: false,
    isNew: true,
  },
  {
    icon: "resources",
    label: "THREAT-INFORMED OPERATIONS",
    title: "Continuous Cyber Defense",
    description: "AI-driven threat detection, vulnerability correlation, and automated response recommendations — all running inside the enclave. Map findings to your control baseline in real time, so your security posture stays current as threats evolve. No external telemetry. No cloud dependency. Your threat intelligence stays sovereign.",
    tags: ["STIGs", "Threat Intel", "Vulnerability Management", "Incident Response"],
    active: false,
  },
];

const ICON_PATHS = {
  shield: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  ),
  code: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="16 18 22 12 16 6"/>
      <polyline points="8 6 2 12 8 18"/>
      <line x1="14" y1="4" x2="10" y2="20"/>
    </svg>
  ),
  deploy: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
      <line x1="8" y1="21" x2="16" y2="21"/>
      <line x1="12" y1="17" x2="12" y2="21"/>
      <path d="M7 8l3 3-3 3"/>
      <line x1="13" y1="14" x2="17" y2="14"/>
    </svg>
  ),
  resources: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
      <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
      <line x1="12" y1="22.08" x2="12" y2="12"/>
    </svg>
  ),
  data: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="12" cy="5" rx="9" ry="3"/>
      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
    </svg>
  ),
};

function AdapttLanding() {
  const [activeUseCase, setActiveUseCase] = useState(0);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div style={{
      minHeight: "100vh",
      background: "#0a0c10",
      color: "#c8cfd8",
      fontFamily: "'DM Sans', sans-serif",
      position: "relative",
      overflow: "hidden",
    }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap');
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(200vh); } }
        @keyframes gridPulse { 0%, 100% { opacity: 0.03; } 50% { opacity: 0.06; } }
        @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0c10; }
        ::-webkit-scrollbar-thumb { background: #1e2530; border-radius: 3px; }
        a { color: #00d4aa; text-decoration: none; }
        a:hover { text-decoration: underline; }
        * { box-sizing: border-box; }
      `}</style>

      {/* Noise texture */}
      <div style={{
        position: "fixed", inset: 0, opacity: 0.025, zIndex: 0, pointerEvents: "none",
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
      }} />

      {/* Grid overlay */}
      <div style={{
        position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none",
        opacity: 0.03, animation: "gridPulse 8s ease infinite",
        backgroundImage: "linear-gradient(rgba(0,212,170,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,170,0.3) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
      }} />

      {/* ========== NAV ========== */}
      <nav style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        background: scrollY > 50 ? "rgba(10,12,16,0.92)" : "transparent",
        backdropFilter: scrollY > 50 ? "blur(12px)" : "none",
        borderBottom: scrollY > 50 ? "1px solid rgba(26,31,42,0.6)" : "1px solid transparent",
        transition: "all 0.3s ease",
        padding: "0 24px",
      }}>
        <div style={{
          maxWidth: 1120, margin: "0 auto",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          height: 64,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src="/logo.svg" alt="Adaptt" style={{ height: 40, filter: "brightness(0) invert(1)" }} />
          </div>
          <div style={{ display: "flex", gap: 32, alignItems: "center" }}>
            {["Platform", "Capabilities", "About"].map(item => (
              <a key={item} href={`#${item.toLowerCase().replace(" ", "-")}`} style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "11px", color: "#5a6474", letterSpacing: "0.12em",
                textTransform: "uppercase", textDecoration: "none",
                transition: "color 0.2s",
              }}
              onMouseEnter={e => e.target.style.color = "#00d4aa"}
              onMouseLeave={e => e.target.style.color = "#5a6474"}
              >{item}</a>
            ))}
            <a href="#demo" style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "11px", color: "#0a0c10", letterSpacing: "0.1em",
              textTransform: "uppercase", textDecoration: "none",
              background: "#00d4aa", padding: "8px 18px", borderRadius: 4,
              fontWeight: 700, transition: "all 0.2s",
            }}
            onMouseEnter={e => e.target.style.background = "#00b894"}
            onMouseLeave={e => e.target.style.background = "#00d4aa"}
            >Live Demo</a>
          </div>
        </div>
      </nav>

      {/* ========== HERO ========== */}
      <section style={{
        minHeight: "100vh",
        display: "flex", flexDirection: "column", justifyContent: "center",
        padding: "120px 24px 80px",
        position: "relative",
      }}>
        {/* Gradient orb */}
        <div style={{
          position: "absolute", top: "10%", right: "5%",
          width: 500, height: 500,
          background: "radial-gradient(circle, rgba(0,212,170,0.08) 0%, transparent 70%)",
          borderRadius: "50%", filter: "blur(60px)",
          animation: "float 8s ease-in-out infinite",
          pointerEvents: "none",
        }} />

        <div style={{ maxWidth: 1120, margin: "0 auto", width: "100%", position: "relative", zIndex: 1 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: "11px", color: "#00d4aa",
            letterSpacing: "0.25em", textTransform: "uppercase",
            marginBottom: 24, animation: "fadeIn 0.6s ease",
          }}>
            AI where it matters most
          </div>

          <h1 style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: "clamp(36px, 6vw, 72px)",
            fontWeight: 400, color: "#ffffff",
            margin: 0, lineHeight: 1.1,
            maxWidth: 800,
          }}>
            Your adversary has AI.{" "}
            <span style={{ color: "#00d4aa" }}>
              <TypeWriter text="Shouldn't you?" speed={50} delay={800} />
            </span>
          </h1>

          <p style={{
            fontSize: "clamp(16px, 2vw, 20px)",
            color: "#6a7486",
            lineHeight: 1.7, maxWidth: 620,
            marginTop: 28, marginBottom: 48,
            animation: "fadeIn 0.8s ease 0.3s both",
          }}>
            Classified networks house the most powerful AI hardware in the world — with 
            capacity waiting to be unlocked. Compliance requirements gate every new capability 
            before it can operate, while adversaries move at machine speed. Adaptt deploys AI 
            inside air-gapped enclaves to accelerate past those gates — starting with compliance 
            automation and expanding into code generation, pipeline automation, and intelligent 
            data workflows that transform how the DoD builds and ships software.
          </p>

          <div style={{
            display: "flex", gap: 16, flexWrap: "wrap",
            animation: "fadeIn 0.8s ease 0.6s both",
          }}>
            <a href="#capabilities" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "14px 28px",
              background: "linear-gradient(135deg, #00d4aa, #00b894)",
              borderRadius: 5, color: "#0a0c10",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "13px", fontWeight: 700,
              letterSpacing: "0.08em", textTransform: "uppercase",
              textDecoration: "none", transition: "all 0.2s",
            }}>
              Explore Capabilities
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <a href="#demo" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "14px 28px",
              background: "transparent",
              border: "1px solid #1e2530",
              borderRadius: 5, color: "#8a94a6",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "13px", fontWeight: 600,
              letterSpacing: "0.08em", textTransform: "uppercase",
              textDecoration: "none", transition: "all 0.2s",
            }}>
              See Live Demo
            </a>
          </div>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: "absolute", bottom: 40, left: "50%",
          transform: "translateX(-50%)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
          animation: "float 3s ease-in-out infinite",
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: "10px", color: "#3a4454", letterSpacing: "0.2em",
          }}>SCROLL</div>
          <svg width="16" height="24" viewBox="0 0 16 24" fill="none" stroke="#3a4454" strokeWidth="1.5">
            <rect x="1" y="1" width="14" height="22" rx="7"/>
            <circle cx="8" cy="8" r="2" fill="#3a4454" style={{ animation: "float 2s ease-in-out infinite" }}/>
          </svg>
        </div>
      </section>

      {/* ========== THE PROBLEM ========== */}
      <section id="platform" style={{ padding: "100px 24px", position: "relative" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 80,
              alignItems: "center",
            }}>
              <div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "11px", color: "#00d4aa",
                  letterSpacing: "0.2em", textTransform: "uppercase",
                  marginBottom: 16,
                }}>The Opportunity</div>
                <h2 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontSize: "clamp(28px, 4vw, 40px)",
                  fontWeight: 400, color: "#ffffff",
                  margin: 0, lineHeight: 1.2,
                }}>
                  The most powerful AI hardware in defense has untapped potential.
                </h2>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 24,
                }}>
                  Classified labs have GPU clusters capable of running the 
                  same AI models transforming commercial software development. But every new capability 
                  must navigate the RMF lifecycle before it can operate. Manual control assessments, 
                  hand-written SSP narratives, and reactive POA&M management stretch authorization 
                  timelines to 12-18 months. Authorization timelines keep capable hardware from reaching 
                  its full potential — while the threat landscape accelerates.
                </p>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 16,
                }}>
                  Adaptt uses AI to accelerate the very compliance processes that gate AI 
                  adoption — automating RMF workflows inside your enclave so programs can get authorized 
                  faster. Then we go further: putting that GPU power to work for AI-assisted software 
                  development, intelligent data labeling, and automated pipelines — giving every team 
                  in the enclave AI capabilities that never leave the boundary.
                </p>
              </div>

              {/* Architecture diagram */}
              <div style={{
                background: "#0d1017",
                border: "1px solid #1a1f2a",
                borderRadius: 8, padding: 32,
              }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "11px", color: "#5a6474",
                  letterSpacing: "0.15em", marginBottom: 24, textAlign: "center",
                }}>DEPLOYMENT ARCHITECTURE</div>

                {/* Enclave box */}
                <div style={{
                  border: "1px solid rgba(0,212,170,0.3)",
                  borderRadius: 6, padding: 20,
                  background: "rgba(0,212,170,0.03)",
                }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "10px", color: "#00d4aa",
                    letterSpacing: "0.15em", marginBottom: 16,
                    display: "flex", alignItems: "center", gap: 8,
                  }}>
                    <div style={{
                      width: 6, height: 6, background: "#00d4aa", borderRadius: "50%",
                      boxShadow: "0 0 8px rgba(0,212,170,0.5)",
                    }} />
                    CLASSIFIED ENCLAVE / SCIF
                  </div>

                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                    {[
                      { name: "AI Engine", sub: "Llama 3.3 70B", color: "#00d4aa" },
                      { name: "GPU Compute", sub: "Local GPU Clusters", color: "#00d4aa" },
                      { name: "Compliance", sub: "eMASS / RMF / SSP / OSCAL", color: "#ffb74d" },
                      { name: "Dev Tools", sub: "Code Gen / Review / Test", color: "#ffb74d" },
                      { name: "Data Tools", sub: "Labeling / Annotation / ETL", color: "#ffb74d" },
                      { name: "Pipelines", sub: "CI/CD / DevSecOps", color: "#ffb74d" },
                    ].map((item, i) => (
                      <div key={i} style={{
                        background: "#080a0e",
                        border: `1px solid ${item.color}22`,
                        borderRadius: 4, padding: "12px 14px",
                      }}>
                        <div style={{
                          fontFamily: "'JetBrains Mono', monospace",
                          fontSize: "11px", fontWeight: 700, color: item.color,
                        }}>{item.name}</div>
                        <div style={{
                          fontFamily: "'JetBrains Mono', monospace",
                          fontSize: "10px", color: "#5a6474", marginTop: 4,
                        }}>{item.sub}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Air gap indicator */}
                <div style={{
                  display: "flex", alignItems: "center", gap: 12,
                  margin: "16px 0", justifyContent: "center",
                }}>
                  <div style={{ flex: 1, height: 1, background: "#ff5252", opacity: 0.4 }} />
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "10px", color: "#ff5252",
                    letterSpacing: "0.2em", padding: "4px 12px",
                    border: "1px solid rgba(255,82,82,0.3)",
                    borderRadius: 3,
                  }}>AIR GAP</div>
                  <div style={{ flex: 1, height: 1, background: "#ff5252", opacity: 0.4 }} />
                </div>

                {/* External */}
                <div style={{
                  border: "1px solid #1a1f2a",
                  borderRadius: 6, padding: "12px 16px",
                  display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                  opacity: 0.4,
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ff5252" strokeWidth="2">
                    <circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/>
                  </svg>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "10px", color: "#5a6474",
                  }}>ZERO EXTERNAL CONNECTIONS</span>
                </div>
              </div>
            </div>
          </FadeSection>
        </div>
      </section>

      {/* ========== METRICS ========== */}
      <section style={{
        padding: "60px 24px",
        borderTop: "1px solid #1a1f2a",
        borderBottom: "1px solid #1a1f2a",
      }}>
        <div style={{
          maxWidth: 1120, margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40,
          textAlign: "center",
        }}>
          {[
            { value: 400, suffix: "+", label: "NIST 800-53 Controls", sub: "Automated assessment" },
            { value: 0, suffix: "", label: "Cloud Dependencies", sub: "Fully air-gapped" },
            { value: 100, suffix: "%", label: "Data Sovereignty", sub: "Nothing leaves the boundary" },
            { value: 70, suffix: "B", label: "Parameter Model", sub: "Llama 3.3 via Ollama" },
          ].map((m, i) => (
            <FadeSection key={i} delay={i * 100}>
              <div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "clamp(28px, 4vw, 42px)",
                  fontWeight: 700, color: "#00d4aa",
                }}>
                  <Counter end={m.value} />{m.suffix}
                </div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "11px", color: "#e0e4ea",
                  letterSpacing: "0.1em", marginTop: 8,
                }}>{m.label}</div>
                <div style={{
                  fontSize: "12px", color: "#3a4454", marginTop: 4,
                }}>{m.sub}</div>
              </div>
            </FadeSection>
          ))}
        </div>
      </section>

      {/* ========== USE CASES ========== */}
      <section id="capabilities" style={{ padding: "100px 24px" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "11px", color: "#00d4aa",
              letterSpacing: "0.2em", textTransform: "uppercase",
              marginBottom: 16,
            }}>Capabilities</div>
            <h2 style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: "clamp(28px, 4vw, 40px)",
              fontWeight: 400, color: "#ffffff",
              margin: 0, lineHeight: 1.2, maxWidth: 600,
            }}>
              Air-gapped AI. From compliance to code to data.
            </h2>
            <p style={{
              fontSize: "16px", color: "#5a6474",
              lineHeight: 1.7, marginTop: 16, maxWidth: 580,
            }}>
              We start by automating the compliance process that gates every system. Then we 
              expand across the full mission lifecycle — AI-powered development, automated pipelines, 
              and intelligent data workflows — turning classified GPU infrastructure into sovereign 
              AI environments that transform how the DoD builds and operates software.
            </p>
          </FadeSection>

          <div style={{
            display: "grid",
            gridTemplateColumns: "300px 1fr",
            gap: 24,
            marginTop: 48,
          }}>
            {/* Sidebar tabs */}
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {USE_CASES.map((uc, i) => (
                <FadeSection key={i} delay={i * 80}>
                  <button
                    onClick={() => setActiveUseCase(i)}
                    style={{
                      display: "flex", alignItems: "center", gap: 14,
                      padding: "16px 18px", width: "100%",
                      background: activeUseCase === i ? "rgba(0,212,170,0.08)" : "transparent",
                      border: `1px solid ${activeUseCase === i ? "rgba(0,212,170,0.25)" : "transparent"}`,
                      borderRadius: 6, cursor: "pointer",
                      textAlign: "left", transition: "all 0.25s",
                      color: "#c8cfd8",
                    }}
                  >
                    <div style={{
                      color: activeUseCase === i ? "#00d4aa" : "#3a4454",
                      transition: "color 0.25s",
                      flexShrink: 0,
                    }}>
                      {ICON_PATHS[uc.icon]}
                    </div>
                    <div>
                      <div style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: "10px", color: activeUseCase === i ? "#00d4aa" : "#3a4454",
                        letterSpacing: "0.15em", marginBottom: 4,
                        transition: "color 0.25s",
                      }}>{uc.label}</div>
                      <div style={{
                        fontSize: "14px", fontWeight: 600,
                        color: activeUseCase === i ? "#e0e4ea" : "#5a6474",
                        transition: "color 0.25s",
                      }}>{uc.title}</div>
                    </div>
                    {uc.active && (
                      <div style={{
                        marginLeft: "auto",
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: "9px", color: "#00d4aa",
                        background: "rgba(0,212,170,0.1)",
                        border: "1px solid rgba(0,212,170,0.2)",
                        padding: "2px 8px", borderRadius: 3,
                        letterSpacing: "0.1em",
                      }}>LIVE</div>
                    )}
                    {uc.isNew && (
                      <div style={{
                        marginLeft: "auto",
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: "9px", color: "#ffb74d",
                        background: "rgba(255,183,77,0.1)",
                        border: "1px solid rgba(255,183,77,0.2)",
                        padding: "2px 8px", borderRadius: 3,
                        letterSpacing: "0.1em",
                      }}>NEW</div>
                    )}
                  </button>
                </FadeSection>
              ))}
            </div>

            {/* Detail panel */}
            <div style={{
              background: "#0d1017",
              border: "1px solid #1a1f2a",
              borderRadius: 8, padding: 36,
              position: "relative", overflow: "hidden",
            }}>
              {/* Accent line */}
              <div style={{
                position: "absolute", top: 0, left: 0, right: 0,
                height: 2,
                background: USE_CASES[activeUseCase].active
                  ? "linear-gradient(90deg, #00d4aa, transparent)"
                  : "linear-gradient(90deg, #1e2530, transparent)",
              }} />

              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "11px",
                color: USE_CASES[activeUseCase].active ? "#00d4aa" : "#5a6474",
                letterSpacing: "0.15em", marginBottom: 16,
                display: "flex", alignItems: "center", gap: 8,
              }}>
                {USE_CASES[activeUseCase].label}
                {!USE_CASES[activeUseCase].active && !USE_CASES[activeUseCase].isNew && (
                  <span style={{
                    fontSize: "9px", color: "#5a6474",
                    background: "#1a1f2a", padding: "2px 8px",
                    borderRadius: 3,
                  }}>COMING SOON</span>
                )}
                {USE_CASES[activeUseCase].isNew && (
                  <span style={{
                    fontSize: "9px", color: "#ffb74d",
                    background: "rgba(255,183,77,0.1)",
                    border: "1px solid rgba(255,183,77,0.2)",
                    padding: "2px 8px", borderRadius: 3,
                  }}>NEW</span>
                )}
              </div>

              <h3 style={{
                fontFamily: "'Instrument Serif', serif",
                fontSize: "28px", fontWeight: 400,
                color: "#ffffff", margin: "0 0 16px",
              }}>{USE_CASES[activeUseCase].title}</h3>

              <p style={{
                fontSize: "15px", color: "#8a94a6",
                lineHeight: 1.8, marginBottom: 28,
              }}>{USE_CASES[activeUseCase].description}</p>

              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 28 }}>
                {USE_CASES[activeUseCase].tags.map(tag => (
                  <span key={tag} style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "10px", color: "#5a6474",
                    background: "#0a0c10", border: "1px solid #1a1f2a",
                    padding: "4px 10px", borderRadius: 3,
                    letterSpacing: "0.08em",
                  }}>{tag}</span>
                ))}
              </div>

              {USE_CASES[activeUseCase].active && (
                <a href="#demo" style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "12px", color: "#00d4aa",
                  letterSpacing: "0.08em", textTransform: "uppercase",
                  textDecoration: "none", fontWeight: 600,
                  padding: "10px 20px",
                  border: "1px solid rgba(0,212,170,0.3)",
                  borderRadius: 4, transition: "all 0.2s",
                  background: "rgba(0,212,170,0.05)",
                }}>
                  Try Live Demo
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ========== HOW IT WORKS ========== */}
      <section style={{
        padding: "100px 24px",
        borderTop: "1px solid #1a1f2a",
      }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "11px", color: "#00d4aa",
              letterSpacing: "0.2em", textTransform: "uppercase",
              marginBottom: 16,
            }}>How It Works</div>
            <h2 style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: "clamp(28px, 4vw, 40px)",
              fontWeight: 400, color: "#ffffff",
              margin: "0 0 48px", lineHeight: 1.2,
            }}>
              From open-source model to enclave-ready appliance.
            </h2>
          </FadeSection>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
          }}>
            {[
              {
                step: "01",
                title: "Configure",
                description: "We tailor the AI engine to your specific environment — your control baseline, your system architecture, your data formats, your mission requirements. Tailored to your environment from day one.",
              },
              {
                step: "02",
                title: "Deploy",
                description: "The Adaptt appliance installs directly into your enclave. Llama 3.3 70B runs locally via Ollama. No internet, no cloud, no external API calls. Ever.",
              },
              {
                step: "03",
                title: "Operate",
                description: "Continuous, automated analysis on a schedule you define. The AI assesses controls, generates code, labels data, and triages findings — and humans stay in the loop for decisions.",
              },
            ].map((s, i) => (
              <FadeSection key={i} delay={i * 120}>
                <div style={{
                  background: "#0d1017",
                  border: "1px solid #1a1f2a",
                  borderRadius: 8, padding: 28,
                  height: "100%",
                  position: "relative",
                }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "36px", fontWeight: 700,
                    color: "#1a1f2a", marginBottom: 16,
                  }}>{s.step}</div>
                  <h3 style={{
                    fontFamily: "'DM Sans', sans-serif",
                    fontSize: "18px", fontWeight: 700,
                    color: "#e0e4ea", margin: "0 0 12px",
                  }}>{s.title}</h3>
                  <p style={{
                    fontSize: "14px", color: "#6a7486",
                    lineHeight: 1.7, margin: 0,
                  }}>{s.description}</p>
                </div>
              </FadeSection>
            ))}
          </div>
        </div>
      </section>

      {/* ========== DIFFERENTIATION ========== */}
      <section style={{
        padding: "100px 24px",
        borderTop: "1px solid #1a1f2a",
        background: "linear-gradient(180deg, rgba(0,212,170,0.02) 0%, transparent 100%)",
      }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "11px", color: "#00d4aa",
              letterSpacing: "0.2em", textTransform: "uppercase",
              marginBottom: 16,
            }}>What Makes Us Different</div>
            <h2 style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: "clamp(28px, 4vw, 40px)",
              fontWeight: 400, color: "#ffffff",
              margin: "0 0 16px", lineHeight: 1.2, maxWidth: 700,
            }}>
              Not another cloud AI wrapper. A sovereign AI platform for classified networks.
            </h2>
            <p style={{
              fontSize: "16px", color: "#5a6474",
              lineHeight: 1.7, maxWidth: 650, marginBottom: 48,
            }}>
              Most defense AI companies build cloud-first tools and retrofit them for on-prem. 
              Adaptt is built for the air gap from day one — automating the compliance lifecycle, 
              then putting the same GPU infrastructure to work for AI-powered development, intelligent 
              data workflows, and automated pipelines that transform how DoD programs build and ship software.
            </p>
          </FadeSection>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {[
              {
                label: "TYPICAL DEFENSE AI",
                color: "#5a6474",
                borderColor: "#1a1f2a",
                items: [
                  { text: "Focused on mission data processing", desc: "AI applied to intelligence, sensors, and operational data" },
                  { text: "Require data science teams", desc: "To configure, train, and maintain models" },
                  { text: "Cloud-first, adapted for on-prem", desc: "Air-gap support is an afterthought" },
                  { text: "Guardrails and verification layers", desc: "You still build the workflows yourself" },
                ],
              },
              {
                label: "ADAPTT",
                color: "#00d4aa",
                borderColor: "rgba(0,212,170,0.25)",
                items: [
                  { text: "Compliance first, then development", desc: "AI that unlocks authorization, then powers the full software lifecycle behind the fence" },
                  { text: "Operated by your existing teams", desc: "ISSMs, ISSOs, and developers — not data scientists" },
                  { text: "Air-gapped by architecture", desc: "Built for the enclave first, leveraging GPU hardware already deployed" },
                  { text: "Sovereign AI platform", desc: "OSS LLMs on your existing GPUs powering everything from RMF to code generation to data labeling" },
                ],
              },
            ].map((col, ci) => (
              <FadeSection key={ci} delay={ci * 150}>
                <div style={{
                  background: "#0d1017",
                  border: `1px solid ${col.borderColor}`,
                  borderRadius: 8,
                  overflow: "hidden",
                }}>
                  <div style={{
                    padding: "14px 20px",
                    borderBottom: `1px solid ${col.borderColor}`,
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: "11px", color: col.color,
                    letterSpacing: "0.15em",
                    background: ci === 1 ? "rgba(0,212,170,0.04)" : "transparent",
                  }}>{col.label}</div>
                  {col.items.map((item, i) => (
                    <div key={i} style={{
                      padding: "16px 20px",
                      borderBottom: i < col.items.length - 1 ? `1px solid ${ci === 1 ? "rgba(0,212,170,0.1)" : "#151a24"}` : "none",
                    }}>
                      <div style={{
                        fontSize: "14px", fontWeight: 600,
                        color: ci === 1 ? "#e0e4ea" : "#8a94a6",
                        marginBottom: 4,
                        display: "flex", alignItems: "center", gap: 8,
                      }}>
                        {ci === 1 && <span style={{ color: "#00d4aa", fontSize: "12px" }}>&#9670;</span>}
                        {item.text}
                      </div>
                      <div style={{
                        fontSize: "12px",
                        color: ci === 1 ? "#5a6474" : "#3a4454",
                        lineHeight: 1.5,
                      }}>{item.desc}</div>
                    </div>
                  ))}
                </div>
              </FadeSection>
            ))}
          </div>
        </div>
      </section>

      {/* ========== ABOUT / TEAM ========== */}
      <section id="about" style={{
        padding: "100px 24px",
        borderTop: "1px solid #1a1f2a",
      }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80,
            }}>
              <div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "11px", color: "#00d4aa",
                  letterSpacing: "0.2em", textTransform: "uppercase",
                  marginBottom: 16,
                }}>About Adaptt</div>
                <h2 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontSize: "clamp(28px, 4vw, 36px)",
                  fontWeight: 400, color: "#ffffff",
                  margin: 0, lineHeight: 1.2,
                }}>
                  Built by operators who've lived the problem.
                </h2>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 24,
                }}>
                  Adaptt was founded in Boulder by defense technology veterans who spent years 
                  inside classified labs watching the gap widen between what GPU hardware could do 
                  and what authorization timelines allowed. We've sat in the SCIFs. We've written the 
                  SSPs. We've seen the gap between what classified hardware can do and what compliance 
                  timelines allow. And we knew AI could close that gap.
                </p>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 16,
                }}>
                  We built Adaptt to accelerate the compliance process first — because it gates 
                  everything else. From there, we're building the sovereign AI platform that 
                  turns classified enclaves into AI-powered development environments, 
                  revolutionizing how the DoD builds mission applications.
                </p>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: "11px", color: "#5a6474",
                  letterSpacing: "0.15em", textTransform: "uppercase",
                  marginBottom: 8,
                }}>Why Adaptt</div>
                {[
                  { title: "Compliance Is Just the Beginning", desc: "We accelerate the RMF process first because it gates everything. Then we unlock the same infrastructure for AI-powered development, data workflows, and automated pipelines that transform how DoD builds software." },
                  { title: "Sovereign AI Platform", desc: "OSS LLMs running on your existing GPU hardware — powering everything from compliance automation to AI pair programming to intelligent data labeling. Zero cloud. Zero external dependencies." },
                  { title: "Air-Gapped by Architecture", desc: "Designed from day one for classified environments. Not a cloud product with an on-prem option — the enclave is our primary deployment target." },
                  { title: "Maximize Your Compute Investment", desc: "Classified labs have world-class AI hardware with room to do more. Adaptt puts it to work — first for compliance, then for the AI-powered capabilities that will define the next era of defense development." },
                ].map((item, i) => (
                  <div key={i} style={{
                    background: "#0d1017",
                    border: "1px solid #1a1f2a",
                    borderRadius: 6, padding: "16px 20px",
                  }}>
                    <div style={{
                      fontSize: "14px", fontWeight: 600,
                      color: "#e0e4ea", marginBottom: 6,
                    }}>{item.title}</div>
                    <div style={{
                      fontSize: "13px", color: "#5a6474",
                      lineHeight: 1.6,
                    }}>{item.desc}</div>
                  </div>
                ))}
              </div>
            </div>
          </FadeSection>
        </div>
      </section>

      {/* ========== CTA ========== */}
      <section id="demo" style={{
        padding: "100px 24px",
        borderTop: "1px solid #1a1f2a",
        textAlign: "center",
      }}>
        <div style={{ maxWidth: 600, margin: "0 auto" }}>
          <FadeSection>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "11px", color: "#00d4aa",
              letterSpacing: "0.2em", textTransform: "uppercase",
              marginBottom: 16,
            }}>See It In Action</div>
            <h2 style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: "clamp(28px, 4vw, 40px)",
              fontWeight: 400, color: "#ffffff",
              margin: 0, lineHeight: 1.2,
            }}>
              Compliance at machine speed.
            </h2>
            <p style={{
              fontSize: "16px", color: "#5a6474",
              lineHeight: 1.7, marginTop: 20, marginBottom: 36,
            }}>
              See what AI-powered RMF assessment looks like. Our live demo runs the same 
              analysis engine against real NIST 800-53 controls — gap analysis, SSP narrative 
              generation, and POA&M triage in seconds.
            </p>
            <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="/demo" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "16px 32px",
                background: "linear-gradient(135deg, #00d4aa, #00b894)",
                borderRadius: 5, color: "#0a0c10",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "13px", fontWeight: 700,
                letterSpacing: "0.08em", textTransform: "uppercase",
                textDecoration: "none",
              }}>
                Launch Demo
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
              </a>
              <a href="mailto:contact@adaptt.ai" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "16px 32px",
                background: "transparent",
                border: "1px solid #1e2530",
                borderRadius: 5, color: "#8a94a6",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "13px", fontWeight: 600,
                letterSpacing: "0.08em", textTransform: "uppercase",
                textDecoration: "none",
              }}>
                Contact Us
              </a>
            </div>
          </FadeSection>
        </div>
      </section>

      {/* ========== FOOTER ========== */}
      <footer style={{
        padding: "40px 24px",
        borderTop: "1px solid #1a1f2a",
      }}>
        <div style={{
          maxWidth: 1120, margin: "0 auto",
          display: "flex", justifyContent: "space-between",
          alignItems: "center",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src="/logo.svg" alt="Adaptt" style={{ height: 22, filter: "brightness(0) invert(0.4)" }} />
          </div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: "11px", color: "#3a4454",
          }}>
            Boulder, CO
          </div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: "11px", color: "#3a4454",
          }}>
            contact@adaptt.ai
          </div>
        </div>
      </footer>
    </div>
  );
}
