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: "AUTHORIZE",
    title: "Ratify: Authorization Evidence Inside the Enclave",
    description: "Ratify reads your authority corpus and system evidence and returns cited, reviewer-ready findings mapped to the controls your Authorizing Official uses: gap analysis, SSP narrative drafts, and POA&M triage. It runs continuously inside your boundary, aligned with the Cybersecurity Risk Management Construct. The operator, not the software, makes the decision: every determination passes through a named human before it enters the record.",
    tags: ["Continuous ATO", "CSRMC", "NIST SP 800-53", "Cited Findings", "Zero Egress"],
    status: "live",
  },
  {
    icon: "resources",
    label: "CONTAIN",
    title: "AI Agents Inside the Boundary",
    description: "Every model runs inside your boundary with no path to the open internet. The egress guard is built and measured: it verifies zero external connections on every run. We are extending Ratify to register each AI agent with an authority envelope that defines what it may touch, to suspend an agent that steps outside it, and to restore it only on a named human's decision.",
    tags: ["Zero Egress", "Authority Envelopes", "Suspension and Restoration", "Agent Registry"],
    status: "dev",
  },
  {
    icon: "code",
    label: "ATTEST",
    title: "AI-Written Code That Arrives Accredited",
    description: "AI proposes changes; an accountable engineer adjudicates each one, and that decision is recorded as an attestation with its provenance. Software reaches authorization with its evidence package already assembled. Patent application filed.",
    tags: ["Attestation", "Provenance", "Secure SDLC", "Patent Filed"],
    status: "dev",
  },
];

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"}
            >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",
          }}>
            Secure AI for Defense
          </div>

          <h1 style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: "clamp(36px, 6vw, 72px)",
            fontWeight: 400, color: "#ffffff",
            margin: 0, lineHeight: 1.1,
            maxWidth: 800,
          }}>
            AI you can{" "}
            <span style={{ color: "#00d4aa" }}>
              <TypeWriter text="authorize." speed={60} 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",
          }}>
            Adaptt AI runs AI inside disconnected defense enclaves and produces the evidence
            Authorizing Officials need to approve it. Ratify, our flagship, operates on a single
            workstation with no external network egress.
          </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",
            }}>
              How It Works
              <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",
            }}>
              View 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 Gap</div>
                <h2 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontSize: "clamp(28px, 4vw, 40px)",
                  fontWeight: 400, color: "#ffffff",
                  margin: 0, lineHeight: 1.2,
                }}>
                  Every AI capability has to be authorized before it operates.
                </h2>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 24,
                }}>
                  Programs inside classified enclaves can run capable open-weight models on
                  hardware they already own. Before any of it operates, an Authorizing Official has to
                  sign for it, and that signature rests on evidence: which controls apply, how each one
                  is met, and who decided. Assembled by hand, that evidence is slow to build and goes
                  stale between assessments.
                </p>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 16,
                }}>
                  Adaptt AI produces that evidence inside the boundary. Ratify returns cited,
                  reviewer-ready findings continuously, and every determination carries a named human
                  decision. We are extending the same evidence and control plane to the AI agents and
                  AI-written code that programs want to field next.
                </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)",
                    }} />
                    DISCONNECTED ENCLAVE
                  </div>

                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                    {[
                      { name: "Ratify", sub: "Authorization evidence", color: "#00d4aa" },
                      { name: "Local Model", sub: "Open-weight, on your hardware", color: "#00d4aa" },
                      { name: "Egress Guard", sub: "Zero egress, verified per run", color: "#00d4aa" },
                      { name: "Operator", sub: "Named human decides", color: "#00d4aa" },
                      { name: "Agent Governance", sub: "In development", color: "#ffb74d" },
                      { name: "Code Attestation", sub: "In development", 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: 0, suffix: "", label: "External Network Egress", sub: "Verified on every run" },
            { value: 1, suffix: "", label: "Workstation Footprint", sub: "Runs on hardware you own" },
            { value: 6, suffix: "", label: "Provisional Patents Filed", sub: "May to September 2026" },
            { value: 110, suffix: "/110", label: "CMMC Level 2 (Self)", sub: "Self-assessment posted in SPRS" },
          ].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,
            }}>
              Authorize. Contain. Attest.
            </h2>
            <p style={{
              fontSize: "16px", color: "#5a6474",
              lineHeight: 1.7, marginTop: 16, maxWidth: 580,
            }}>
              Ratify operates today. The same evidence and control plane is being extended
              to the AI agents and AI-written code that programs want to field next. Each capability
              below is labeled with its status.
            </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>
                    <div style={{
                      marginLeft: "auto",
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: "9px",
                      color: uc.status === "live" ? "#00d4aa" : "#ffb74d",
                      background: uc.status === "live" ? "rgba(0,212,170,0.1)" : "rgba(255,183,77,0.1)",
                      border: `1px solid ${uc.status === "live" ? "rgba(0,212,170,0.2)" : "rgba(255,183,77,0.2)"}`,
                      padding: "2px 8px", borderRadius: 3,
                      letterSpacing: "0.1em", whiteSpace: "nowrap",
                    }}>{uc.status === "live" ? "LIVE" : "IN DEV"}</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].status === "live"
                  ? "linear-gradient(90deg, #00d4aa, transparent)"
                  : "linear-gradient(90deg, #1e2530, transparent)",
              }} />

              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "11px",
                color: USE_CASES[activeUseCase].status === "live" ? "#00d4aa" : "#ffb74d",
                letterSpacing: "0.15em", marginBottom: 16,
                display: "flex", alignItems: "center", gap: 8,
              }}>
                {USE_CASES[activeUseCase].label}
                <span style={{
                  fontSize: "9px",
                  color: USE_CASES[activeUseCase].status === "live" ? "#00d4aa" : "#ffb74d",
                  background: USE_CASES[activeUseCase].status === "live" ? "rgba(0,212,170,0.1)" : "rgba(255,183,77,0.1)",
                  padding: "2px 8px", borderRadius: 3,
                }}>{USE_CASES[activeUseCase].status === "live" ? "LIVE" : "IN DEVELOPMENT"}</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].status === "live" && (
                <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)",
                }}>
                  View 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 authority corpus to a signed decision.
            </h2>
          </FadeSection>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
          }}>
            {[
              {
                step: "01",
                title: "Configure",
                description: "We load your authority corpus: the control baseline, policies, and system documentation that govern your boundary. Every finding cites back to those documents.",
              },
              {
                step: "02",
                title: "Deploy",
                description: "Ratify installs inside your enclave on a single workstation. The model runs locally, and the egress guard verifies zero external connections on every run.",
              },
              {
                step: "03",
                title: "Operate",
                description: "Ratify assesses continuously on the schedule you set and returns cited findings with their evidence. The operator, not the software, makes the decision.",
              },
            ].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>

      {/* ========== 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 AI</div>
                <h2 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontSize: "clamp(28px, 4vw, 36px)",
                  fontWeight: 400, color: "#ffffff",
                  margin: 0, lineHeight: 1.2,
                }}>
                  Built by people who get enclaves authorized.
                </h2>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 24,
                }}>
                  Adaptt LLC was founded in 2021 to bring DevSecOps practice to Department of War
                  software programs. In late 2025, Adaptt concluded that generative AI would
                  transform the DevSecOps pipeline and began building the Adaptt Secure Build-to-Operate
                  Platform to enable its rapid adoption across secure, disconnected environments.
                </p>
                <p style={{
                  fontSize: "16px", color: "#6a7486",
                  lineHeight: 1.8, marginTop: 16,
                }}>
                  Founder Scott Worden has delivered solutions to Department of War challenges for more
                  than two decades, and most recently led a team of Information System Security Officers
                  to achieve ATO for five classified enclaves at the U.S. Space Force Tools, Applications
                  and Processing Lab.
                </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,
                }}>Company Facts</div>
                {[
                  { title: "Veteran-Owned Small Business", desc: "SBA VetCert certified. Adaptt LLC, CAGE 12TS2. Colorado." },
                  { title: "CMMC Level 2 (Self) 110/110", desc: "Final self-assessment and NIST SP 800-171 Basic Assessment posted in SPRS." },
                  { title: "Six Provisional Patent Applications", desc: "Filed May to September 2026. Assigned to Adaptt LLC." },
                  { title: "Engine-Neutral", desc: "The model is a replaceable, measured component. Open-weight models run on hardware you already own." },
                ].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,
            }}>
              See Ratify work.
            </h2>
            <p style={{
              fontSize: "16px", color: "#5a6474",
              lineHeight: 1.7, marginTop: 20, marginBottom: 36,
            }}>
              The demo walks through the Ratify assessment flow on NIST SP 800-53 Access Control
              controls with recorded sample output: gap analysis, SSP narrative draft, and POA&M
              triage. For a live session inside your environment, contact us.
            </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",
              }}>
                View 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>
  );
}
