/* AizeLM — Solana Perpetual Intelligence landing component
   Default export: AizeLanding
   Tailwind utilities only. Hand-rolled lucide-style SVG icons (stroke 1.75, round caps).
*/

const { useState, useEffect, useRef, useCallback } = React;

/* ----------------------------- ICONS (lucide-style) ----------------------------- */
const Icon = ({ children, size = 16, className = "", strokeWidth = 1.75 }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
       fill="none" stroke="currentColor" strokeWidth={strokeWidth}
       strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
    {children}
  </svg>
);
const Copy        = (p) => <Icon {...p}><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></Icon>;
const Check       = (p) => <Icon {...p}><polyline points="20 6 9 17 4 12"/></Icon>;
const Menu        = (p) => <Icon {...p}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></Icon>;
const XIcon       = (p) => <Icon {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>;
const ArrowUR     = (p) => <Icon {...p}><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></Icon>;
const Zap         = (p) => <Icon {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></Icon>;
const Activity    = (p) => <Icon {...p}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></Icon>;
const Globe       = (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></Icon>;
const Code        = (p) => <Icon {...p}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></Icon>;
const Aperture    = (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></Icon>;
const Bot         = (p) => <Icon {...p}><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></Icon>;
const Users       = (p) => <Icon {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></Icon>;
const Flame       = (p) => <Icon {...p}><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></Icon>;
const MsgCircle   = (p) => <Icon {...p}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></Icon>;
const CheckCircle = (p) => <Icon {...p}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></Icon>;
const RefreshCw   = (p) => <Icon {...p}><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14"/></Icon>;
const Circle      = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/></Icon>;
const Github      = (p) => <Icon {...p}><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></Icon>;
const TrendUp     = (p) => <Icon {...p}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></Icon>;
const Target      = (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></Icon>;
const Shield      = (p) => <Icon {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></Icon>;
const BarChart    = (p) => <Icon {...p}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></Icon>;
const Cpu         = (p) => <Icon {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></Icon>;
const Layers      = (p) => <Icon {...p}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></Icon>;

/* ----------------------------- CONSTANTS ----------------------------- */
const PUMP_URL   = "https://pump.fun/";
const GITHUB_URL = "#";
const X_URL      = "https://x.com/AizeLMSol";
const DOCS_URL   = "docs.html";

/* ----------------------------- BRAND MARK ----------------------------- */
const Mark = ({ size = 30 }) => (
  <div
    className="relative shrink-0 overflow-hidden border border-neutral-700"
    style={{ width: size, height: size }}
  >
    <img
      src="assets/logo.jpg"
      alt="AizeLM"
      className="w-full h-full object-cover grayscale contrast-125"
    />
    <span className="absolute inset-0 ring-1 ring-inset ring-aize-blue/0 hover:ring-aize-blue transition"/>
  </div>
);

/* ----------------------------- PRIMITIVES ----------------------------- */
const MonoLabel = ({ children, className = "" }) => (
  <span className={`font-mono tracking-[0.2em] text-[11px] uppercase text-neutral-500 ${className}`}>
    {children}
  </span>
);

const SectionFrame = ({ id, num, label, eyebrow, ghost, children, screenLabel }) => {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setVis(true)),
      { threshold: 0.08 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section
      id={id}
      data-screen-label={screenLabel}
      ref={ref}
      className={`relative isolate overflow-hidden border-t border-neutral-900/80 transition-all duration-1000 ease-out ${vis ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
    >
      <div className={`pointer-events-none select-none absolute ${num === "05" ? "left-2 sm:left-10 top-4" : "right-2 sm:right-10 top-4"} font-sans font-black leading-none text-[#141414] text-[28vw] sm:text-[18vw] lg:text-[14vw]`}>
        {num}
      </div>
      {ghost && (
        <div className="pointer-events-none select-none absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-center">
          <span className="font-sans font-black tracking-tight text-[18vw] leading-none text-[#0E0E0E] whitespace-nowrap">
            {ghost}
          </span>
        </div>
      )}
      {children}
    </section>
  );
};

/* ----------------------------- DOTTED BG ----------------------------- */
const DotBG = ({ className = "", opacity = 1 }) => (
  <div
    className={`pointer-events-none absolute inset-0 ${className}`}
    style={{
      backgroundImage: "radial-gradient(circle, #1e3a4f 1px, transparent 1px)",
      backgroundSize: "14px 14px",
      maskImage: "radial-gradient(ellipse at center, black 30%, transparent 75%)",
      WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 75%)",
      opacity,
    }}
  />
);

/* ----------------------------- NAV ----------------------------- */
const NAV_LINKS = [
  ["About", "#about"],
  ["Intelligence", "#features"],
  ["Tokenomics", "#tokenomics"],
  ["Roadmap", "#roadmap"],
  ["Narrative", "docs.html"],
  ["Community", "#community"],
];

const Nav = () => {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`fixed inset-x-0 top-0 z-50 transition-colors ${scrolled ? "bg-black/70 backdrop-blur-md border-b border-neutral-900" : ""}`}>
      <div className="mx-auto flex h-16 max-w-[1400px] items-center justify-between px-4 sm:px-8">
        <a href="#top" className="flex items-center gap-2 group">
          <Mark />
          <span className="font-mono tracking-[0.18em] text-sm">AIZELM</span>
        </a>
        <nav className="hidden lg:flex items-center gap-1 rounded-full border border-neutral-800 bg-neutral-950/60 px-2 py-1.5">
          {NAV_LINKS.map(([label, href]) => (
            <a key={label} href={href}
               className="px-3 py-1.5 font-mono text-[11px] tracking-[0.18em] text-neutral-400 hover:text-white transition-colors">
              {label.toUpperCase()}
            </a>
          ))}
        </nav>
        <div className="hidden md:flex items-center gap-2">
          <a href={X_URL} target="_blank" rel="noopener" className="group inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-950/60 px-4 py-2 font-mono text-[11px] tracking-[0.18em] hover:border-neutral-600 transition-colors">
            X.COM
          </a>
          <a href={PUMP_URL} target="_blank" rel="noopener" className="group inline-flex items-center gap-2 rounded-full border border-aize-blue/60 bg-aize-blue/10 text-aize-blue px-4 py-2 font-mono text-[11px] tracking-[0.18em] hover:bg-aize-blue hover:text-black transition-colors">
            PUMP.FUN <ArrowUR size={12}/>
          </a>
        </div>
        <button onClick={() => setOpen((v) => !v)} className="md:hidden p-2 rounded-md border border-neutral-800" aria-label="Menu">
          {open ? <XIcon size={18}/> : <Menu size={18}/>}
        </button>
      </div>
      {open && (
        <div className="md:hidden bg-black border-t border-neutral-900 px-6 py-6 flex flex-col gap-4">
          {NAV_LINKS.map(([label, href]) => (
            <a key={label} href={href} onClick={() => setOpen(false)}
               className="font-mono text-xs tracking-[0.18em] text-neutral-300">{label.toUpperCase()}</a>
          ))}
          <div className="flex gap-2 pt-2">
            <a href={X_URL} target="_blank" rel="noopener" className="flex-1 rounded-full border border-neutral-800 px-4 py-2 font-mono text-[11px] tracking-[0.18em] text-center">X.COM</a>
            <a href={PUMP_URL} target="_blank" rel="noopener" className="flex-1 rounded-full bg-aize-blue text-black px-4 py-2 font-mono text-[11px] tracking-[0.18em] text-center">PUMP.FUN ↗</a>
          </div>
        </div>
      )}
    </header>
  );
};

/* ----------------------------- CA PILL ----------------------------- */
const CAPill = ({ size = "md", showBuy = true }) => {
  const pad = size === "lg" ? "px-4 py-2.5" : "px-3 py-1.5";
  const text = size === "lg" ? "text-sm" : "text-xs";
  return (
    <div className="inline-flex items-center gap-2 flex-wrap">
      <div className={`inline-flex items-center gap-3 rounded-full border border-neutral-800 bg-neutral-950 ${pad}`}>
        <span className="font-mono tracking-[0.2em] text-[10px] text-neutral-500">CA</span>
        <span className={`font-mono ${text} text-neutral-300`}>TBA</span>
        <span className="inline-flex items-center gap-1.5 rounded-full border border-aize-blue/40 bg-aize-blue/10 px-2 py-0.5 font-mono text-[9px] tracking-[0.2em] text-aize-blue">
          <span className="h-1 w-1 rounded-full bg-aize-blue animate-pulse"/> PRE-LAUNCH
        </span>
      </div>
      {showBuy && (
        <a href={PUMP_URL} target="_blank" rel="noopener" className="inline-flex items-center gap-2 rounded-full bg-aize-blue px-4 py-2.5 font-mono text-[11px] tracking-[0.18em] text-black hover:bg-white transition-colors">
          <Flame size={12}/> PUMP.FUN <ArrowUR size={12}/>
        </a>
      )}
    </div>
  );
};

/* ----------------------------- AIZE PORTRAIT HERO ----------------------------- */
const AizePortraitHero = () => (
  <div className="relative w-full max-w-[480px] mx-auto">
    <div className="absolute -inset-x-6 -bottom-10 h-24 rounded-full bg-aize-blue/15 blur-3xl" aria-hidden="true"/>
    <div className="mb-3 flex items-center justify-between">
      <MonoLabel>NODE / 00 · AIZE</MonoLabel>
      <MonoLabel><span className="text-aize-blue">●</span>&nbsp; ONLINE</MonoLabel>
    </div>
    <div className="relative border border-neutral-800 bg-neutral-950 p-3">
      <div className="relative overflow-hidden">
        <img
          src="assets/logo.jpg"
          alt="AizeLM — perpetual intelligence operator"
          className="block w-full aspect-square object-cover grayscale contrast-125 brightness-90"
        />
        <div className="pointer-events-none absolute inset-0 mix-blend-multiply"
             style={{ background: "linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%)" }}/>
        <div className="pointer-events-none absolute inset-0 mix-blend-overlay opacity-25"
             style={{ background: "linear-gradient(180deg, rgba(56,189,248,0.0) 60%, rgba(56,189,248,0.45) 100%)" }}/>
        <div className="pointer-events-none absolute inset-0 opacity-40 mix-blend-overlay"
             style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px)", backgroundSize: "6px 6px" }}/>
        <span className="absolute top-2 left-2 h-3 w-3 border-t border-l border-aize-blue"/>
        <span className="absolute top-2 right-2 h-3 w-3 border-t border-r border-aize-blue"/>
        <span className="absolute bottom-2 left-2 h-3 w-3 border-b border-l border-aize-blue"/>
        <span className="absolute bottom-2 right-2 h-3 w-3 border-b border-r border-aize-blue"/>
        <div className="absolute bottom-3 left-3 right-3 flex items-end justify-between font-mono text-[10px] tracking-[0.2em] text-neutral-300">
          <span>OPERATOR · PERP MESH</span>
          <span className="text-aize-blue">/ 00</span>
        </div>
      </div>
    </div>
    <div className="mt-3 grid grid-cols-3 gap-px bg-neutral-900 border border-neutral-900 text-center">
      {[["SCOPE","Solana Perps"],["EDGE","LLM Reasoning"],["OUTPUT","Execution"]].map(([k, v]) => (
        <div key={k} className="bg-black px-3 py-2">
          <div className="font-mono text-[9px] tracking-[0.2em] text-neutral-500">{k}</div>
          <div className="mt-1 text-xs text-neutral-300">{v}</div>
        </div>
      ))}
    </div>
  </div>
);

/* ----------------------------- HERO ----------------------------- */
const Hero = () => (
  <section id="top" className="relative isolate min-h-[100vh] pt-24 overflow-hidden">
    <DotBG />
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 pt-4">
      <div className="flex justify-center">
        <CAPill />
      </div>
    </div>

    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8">
      <div className="mt-10 grid grid-cols-3 items-center border-y border-neutral-900 py-4">
        <MonoLabel>Not noise. Signal.</MonoLabel>
        <div className="justify-self-center">
          <a href="#about" className="inline-flex items-center gap-2 rounded-full border border-neutral-800 px-4 py-1.5 font-mono text-[11px] tracking-[0.2em] text-neutral-300 hover:border-aize-blue hover:text-aize-blue transition-colors">
            HOW IT WORKS
          </a>
        </div>
        <MonoLabel className="justify-self-end">Perp Intelligence on Solana.</MonoLabel>
      </div>

      <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-10 pt-16 pb-24">
        <div className="lg:col-span-7 relative z-10">
          <h1 className="font-sans font-black tracking-[-0.04em] leading-[0.92] text-[18vw] sm:text-[12vw] lg:text-[9.5vw] xl:text-[150px]">
            Read. Reason.<br />
            <span className="italic text-aize-blue">Execute.</span>
          </h1>
          <p className="mt-10 max-w-md text-neutral-400 leading-relaxed">
            No signals board. No noise. AizeLM reads Solana perpetual markets — funding rates, open interest, liquidation maps — synthesizes it through an LLM, and executes with precision.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-2">
            <a href={X_URL} target="_blank" rel="noopener" className="inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-950 px-4 py-2.5 font-mono text-[11px] tracking-[0.18em] hover:border-neutral-600 hover:text-white transition-colors">
              X.COM
            </a>
            <a href={GITHUB_URL} target="_blank" rel="noopener" className="inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-950 px-4 py-2.5 font-mono text-[11px] tracking-[0.18em] hover:border-neutral-600 hover:text-white transition-colors">
              <Github size={12}/> GITHUB
            </a>
            <a href={DOCS_URL} className="inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-950 px-4 py-2.5 font-mono text-[11px] tracking-[0.18em] hover:border-neutral-600 hover:text-white transition-colors">
              <MsgCircle size={12}/> NARRATIVE
            </a>
            <a href={PUMP_URL} target="_blank" rel="noopener" className="inline-flex items-center gap-2 rounded-full bg-aize-blue text-black px-4 py-2.5 font-mono text-[11px] tracking-[0.18em] hover:bg-white transition-colors">
              <Flame size={12}/> PUMP.FUN <ArrowUR size={12}/>
            </a>
          </div>
          <div className="mt-10">
            <CAPill size="lg" showBuy={false}/>
          </div>
        </div>

        <div className="lg:col-span-5 relative z-10">
          <AizePortraitHero />
          <div className="mt-6 flex items-center justify-center gap-6 flex-wrap">
            <MonoLabel><span className="text-aize-blue">●</span> &nbsp; LIVE SIGNAL</MonoLabel>
            <MonoLabel>SOLANA PERP</MonoLabel>
            <MonoLabel>0 TAX</MonoLabel>
          </div>
        </div>
      </div>
    </div>

    <SignalLogStrip />
  </section>
);

/* ----------------------------- SIGNAL LOG STRIP ----------------------------- */
const SignalLogStrip = () => (
  <div className="relative border-t border-neutral-900">
    <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-16">
      <div className="flex flex-wrap items-end justify-between gap-6">
        <div>
          <MonoLabel>SIGNAL LOG / ON THE RECORD</MonoLabel>
          <h2 className="mt-3 font-sans font-black tracking-[-0.03em] leading-[0.95] text-5xl sm:text-6xl">
            The model <span className="italic text-aize-blue">read the market.</span>
          </h2>
        </div>
        <a href="#" className="inline-flex items-center gap-2 rounded-full border border-neutral-800 px-4 py-2 font-mono text-[11px] tracking-[0.2em] hover:border-aize-blue hover:text-aize-blue transition-colors">
          ALL READS <ArrowUR size={12}/>
        </a>
      </div>

      <ul className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-3">
        {SIGNAL_LOG.map((q, i) => (
          <li key={i} className="rounded-xl border border-neutral-900 bg-neutral-950/30 p-5 hover:border-aize-blue/60 transition-colors">
            <div className="flex items-center justify-between">
              <span className="font-mono text-[10px] tracking-[0.2em] text-aize-blue">{q.signal}</span>
              <span className="font-mono text-[10px] tracking-[0.15em] text-neutral-600">{q.ago}</span>
            </div>
            <p className="mt-3 text-neutral-200 leading-snug">{q.text}</p>
            <div className="mt-4 flex items-center gap-4 font-mono text-[10px] tracking-[0.15em] text-neutral-500">
              <span className={q.direction === "LONG" ? "text-aize-blue" : "text-red-400"}>↑ {q.direction}</span>
              <span>CONF {q.confidence}</span>
              <span className="text-neutral-700">{q.tag}</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  </div>
);

const SIGNAL_LOG = [
  { signal: "SOL-PERP",  ago: "2H",  text: "Funding rate flipped negative — longs paying shorts 0.04%/8h. OI dropped 12% while price held. Model reads short squeeze setup.", direction: "LONG", confidence: "0.81", tag: "#funding" },
  { signal: "JTO-PERP",  ago: "5H",  text: "Liquidation cluster at 3.20 absorbed. Bid depth rebuilt. Structure suggests accumulation phase before next leg.", direction: "LONG", confidence: "0.74", tag: "#structure" },
  { signal: "WIF-PERP",  ago: "1D",  text: "OI at 90-day high while funding neutral. Market extended. Risk/reward unfavorable at current levels. No trade.", direction: "HOLD", confidence: "0.69", tag: "#risk" },
  { signal: "BONK-PERP", ago: "1D",  text: "Macro risk-off signal from BTC dominance spike. All alt perps: reduce exposure. Model holding flat until clarity.", direction: "HOLD", confidence: "0.88", tag: "#macro" },
];

/* ----------------------------- ABOUT / 02 ----------------------------- */
const About = () => (
  <SectionFrame id="about" num="02" screenLabel="02 About" ghost="PRECISION">
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 py-28 lg:py-36">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <div className="lg:col-span-3">
          <MonoLabel>ABOUT / 02</MonoLabel>
          <div className="mt-10 font-mono text-[11px] leading-[1.8] tracking-[0.18em] text-neutral-400 uppercase">
            Funding.<br/>Open<br/>interest.<br/>Liquidity.<br/>One read.
          </div>
        </div>
        <div className="lg:col-span-9">
          <h2 className="font-sans font-black tracking-[-0.035em] leading-[0.95] text-[10vw] sm:text-[7vw] lg:text-[5.6vw] xl:text-[96px]">
            The market speaks.<br/>
            AizeLM <span className="italic text-aize-blue">reads it.</span>
          </h2>
          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-10 max-w-4xl">
            <p className="text-neutral-300 leading-relaxed">
              AizeLM is a <span className="text-white font-medium">Solana-native perpetual trading intelligence layer</span> powered by large language models. Not a screener. Not a bot. An AI agent that understands market structure and manages perp positions autonomously.
            </p>
            <p className="text-neutral-300 leading-relaxed">
              <span className="text-white font-medium">Funding rate arbitrage.</span> Open interest delta reads. Liquidation heatmaps. All signals synthesized by an LLM into one decision: long, short, or flat. The model reasons — not just reacts.
            </p>
          </div>
        </div>
      </div>
    </div>
  </SectionFrame>
);

/* ----------------------------- INTELLIGENCE / 03 ----------------------------- */
const FEATURES = [
  { n: "01", title: "Funding Scanner",   Icon: Activity,  copy: "Detects funding rate anomalies across Solana perp venues. Negative funding = potential long bias. Positive = fade.", accent: true },
  { n: "02", title: "OI Delta",          Icon: BarChart,  copy: "Open interest directional flow. Tracks where real money is positioned — not where retail thinks it is." },
  { n: "03", title: "Liquidation Maps",  Icon: Target,    copy: "Identifies liquidation clusters above and below price. Knows where the pain hits before it arrives." },
  { n: "04", title: "LLM Synthesis",     Icon: Cpu,       copy: "All signals fed into an LLM reasoning engine. Output: direction, confidence score, and an explainable rationale." },
  { n: "05", title: "Auto Execution",    Icon: Zap,       copy: "Solana RPC order builder. Slippage controlled. Position sized to confidence. Stop-loss automated." },
  { n: "06", title: "Risk Engine",       Icon: Shield,    copy: "No trade is better than a bad trade. Risk-first framework — unfavorable setups return flat, not forced entries." },
  { n: "07", title: "PnL Tracking",      Icon: TrendUp,   copy: "Full audit trail per position. Entry, exit, reasoning, and outcome logged. The model is accountable." },
  { n: "08", title: "Multi-Asset",       Icon: Layers,    copy: "SOL, JTO, WIF, BONK perps and expanding. One reasoning engine across the full Solana perp market." },
];

const FeatureCard = ({ n, title, Icon, copy, accent }) => (
  <div className={`group relative border border-neutral-900 hover:border-aize-blue/60 transition-colors p-6 sm:p-7 min-h-[260px] flex flex-col ${accent ? "bg-gradient-to-b from-aize-blue/[0.06] to-transparent" : ""}`}>
    <div className="flex items-start justify-between">
      <MonoLabel>{n}</MonoLabel>
      <div className={`h-8 w-8 rounded-full border ${accent ? "border-aize-blue/70 text-aize-blue" : "border-neutral-800 text-neutral-500"} flex items-center justify-center group-hover:border-aize-blue/60 group-hover:text-aize-blue transition-colors`}>
        <Icon size={14}/>
      </div>
    </div>
    <div className="mt-auto pt-16">
      <h3 className="text-2xl font-semibold tracking-tight">{title}</h3>
      <p className="mt-3 text-sm text-neutral-400 leading-relaxed text-balance">{copy}</p>
    </div>
    <ArrowUR size={14} className="absolute bottom-5 right-5 text-neutral-700 group-hover:text-aize-blue transition-colors"/>
  </div>
);

const Features = () => (
  <SectionFrame id="features" num="03" screenLabel="03 Intelligence">
    <div className="absolute -left-10 top-1/2 h-64 w-48 opacity-20" style={{ backgroundImage: "radial-gradient(circle, #0369a1 1px, transparent 1px)", backgroundSize: "10px 10px" }}/>
    <div className="absolute -right-10 top-1/3 h-64 w-48 opacity-20" style={{ backgroundImage: "radial-gradient(circle, #0369a1 1px, transparent 1px)", backgroundSize: "10px 10px" }}/>
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 py-28 lg:py-36">
      <div className="flex flex-wrap items-end justify-between gap-6">
        <div>
          <MonoLabel>INTELLIGENCE / 03</MonoLabel>
          <h2 className="mt-8 font-sans font-black tracking-[-0.035em] leading-[0.95] text-[10vw] sm:text-[7vw] lg:text-[5.6vw] xl:text-[96px]">
            What's <span className="italic text-aize-blue">on the wire.</span>
          </h2>
        </div>
        <div className="text-right">
          <p className="font-mono text-[11px] tracking-[0.18em] uppercase text-neutral-500 leading-[1.9]">
            Eight signal layers.<br/>One LLM synthesis engine.<br/>One token underneath.
          </p>
        </div>
      </div>
      <div className="mt-14 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-neutral-900">
        {FEATURES.map((f) => <FeatureCard key={f.n} {...f}/>)}
      </div>
    </div>
  </SectionFrame>
);

/* ----------------------------- TOKENOMICS / 04 ----------------------------- */
const TOKEN_ROWS = [
  ["01", "Total supply",    "1,000,000,000"],
  ["02", "Buy tax",         "0%"],
  ["03", "Sell tax",        "0%"],
  ["04", "Liquidity",       "Burned"],
  ["05", "Mint authority",  "Revoked"],
  ["06", "Freeze authority","Revoked"],
];

const Tokenomics = () => (
  <SectionFrame id="tokenomics" num="04" screenLabel="04 Tokenomics">
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 py-28 lg:py-36">
      <div className="pointer-events-none absolute right-10 top-40 w-[40%] h-[60%] opacity-30"
           style={{ backgroundImage: "radial-gradient(circle, #1e3a4f 1px, transparent 1px)", backgroundSize: "12px 12px" }}/>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <div className="lg:col-span-5">
          <MonoLabel>TOKENOMICS / 04</MonoLabel>
          <h2 className="mt-8 font-sans font-black tracking-[-0.035em] leading-[0.95] text-[10vw] sm:text-[7vw] lg:text-[5.2vw] xl:text-[88px]">
            Numbers,<br/><span className="italic text-aize-blue">no spin.</span>
          </h2>
          <p className="mt-10 font-mono text-[11px] tracking-[0.18em] uppercase text-neutral-500 leading-[2]">
            Token structure on the left.<br/>
            Live network on the right.<br/>
            Both on the record.
          </p>
          <div className="mt-8">
            <div className="inline-flex items-center gap-3 rounded-full border border-neutral-800 bg-neutral-950 px-3 py-1.5">
              <span className="font-mono tracking-[0.2em] text-[10px] text-neutral-500">$AIZE CA</span>
              <span className="font-mono text-xs text-neutral-300">TBA</span>
              <span className="text-neutral-700">|</span>
              <span className="font-mono text-[9px] tracking-[0.2em] text-aize-blue">PRE-LAUNCH</span>
            </div>
          </div>

          <div className="mt-10 rounded-xl border border-neutral-900 bg-neutral-950/40 p-5">
            <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.2em] text-aize-blue">
              <span className="inline-block h-1.5 w-1.5 rounded-full bg-aize-blue animate-pulse"/> LIVE NETWORK
            </div>
            <div className="mt-4 grid grid-cols-3 gap-3">
              {[["4","Perp Markets"],["∞","Signal Reads"],["0","Tax"]].map(([n, l]) => (
                <div key={l} className="rounded-lg border border-neutral-900 bg-black/40 p-4">
                  <div className="text-3xl font-semibold">{n}</div>
                  <div className="mt-1 font-mono text-[9px] tracking-[0.18em] uppercase text-neutral-500">{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="lg:col-span-7">
          <ul className="divide-y divide-neutral-900 border-y border-neutral-900">
            {TOKEN_ROWS.map(([n, k, v]) => (
              <li key={k} className="grid grid-cols-[40px_1fr_auto] items-center gap-6 py-7">
                <span className="font-mono text-[10px] tracking-[0.2em] text-neutral-600">{n}</span>
                <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-neutral-400">{k}</span>
                <span className="text-3xl sm:text-4xl font-semibold tracking-tight">{v}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </SectionFrame>
);

/* ----------------------------- ROADMAP / 05 ----------------------------- */
const PHASES = [
  { n: "01", title: "Market Feed",     status: "shipped",  bullets: ["Solana RPC integration", "Funding rate tracker live", "OI delta pipeline online"] },
  { n: "02", title: "LLM Reasoning",   status: "shipped",  bullets: ["Claude reasoning engine wired", "Confidence scoring system", "Signal → decision pipeline"] },
  { n: "03", title: "Live Execution",  status: "motion",   bullets: ["Solana perp order builder", "Stop-loss / take-profit automation", "Token live on Solana"] },
  { n: "04", title: "Multi-Asset",     status: "queued",   bullets: ["Expand to 10+ Solana perp markets", "Cross-market correlation engine", "Portfolio-level risk management"] },
  { n: "05", title: "Public API",      status: "queued",   bullets: ["Read-only signal endpoint", "Webhook alerts", "Operator strategy SDK"] },
];

const StatusPill = ({ status }) => {
  if (status === "shipped") return <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.2em] text-aize-blue"><CheckCircle size={12}/> SHIPPED</span>;
  if (status === "motion")  return <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.2em] text-aize-blue"><RefreshCw size={12} className="animate-spin" strokeWidth={2}/> IN MOTION</span>;
  return <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.2em] text-neutral-500"><Circle size={12}/> QUEUED</span>;
};

const Roadmap = () => (
  <SectionFrame id="roadmap" num="05" screenLabel="05 Roadmap" ghost="SHIPPED">
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 py-28 lg:py-36">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
          <MonoLabel>ROADMAP / 05</MonoLabel>
          <h2 className="mt-8 font-sans font-black tracking-[-0.035em] leading-[0.95] text-[10vw] sm:text-[7vw] lg:text-[5vw] xl:text-[80px]">
            Forward —<br/><span className="italic text-aize-blue">grounded.</span>
          </h2>
          <p className="mt-10 font-mono text-[11px] tracking-[0.18em] uppercase text-neutral-500 leading-[2]">
            Phases ship when they ship.<br/>Done means done.
          </p>
        </div>
        <div className="lg:col-span-8 relative">
          <div className="absolute left-3 top-2 bottom-2 w-px bg-neutral-900"/>
          <ul className="space-y-14">
            {PHASES.map((p) => (
              <li key={p.n} className="relative pl-12">
                <span className={`absolute left-0 top-2 h-6 w-6 rounded-full border-2 ${p.status === "queued" ? "border-neutral-800 bg-black" : "border-aize-blue bg-aize-blue/20"}`}>
                  {p.status !== "queued" && <span className="absolute inset-1 rounded-full bg-aize-blue"/>}
                </span>
                <div className="flex items-center justify-between gap-4">
                  <MonoLabel>PHASE {p.n}</MonoLabel>
                  <StatusPill status={p.status}/>
                </div>
                <h3 className={`mt-3 font-sans font-black tracking-[-0.02em] text-4xl sm:text-5xl ${p.status === "queued" ? "text-neutral-700" : "text-white"}`}>
                  {p.title}
                </h3>
                <ul className="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-2 text-sm text-neutral-400">
                  {p.bullets.map((b) => (
                    <li key={b} className="flex gap-2"><span className="text-neutral-700">—</span><span>{b}</span></li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </SectionFrame>
);

/* ----------------------------- COMMUNITY / 06 ----------------------------- */
const Community = () => (
  <SectionFrame id="community" num="06" screenLabel="06 Community">
    <div className="relative mx-auto max-w-[1400px] px-4 sm:px-8 py-28 lg:py-36">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <div className="lg:col-span-5">
          <MonoLabel>COMMUNITY / 06</MonoLabel>
          <h2 className="mt-8 font-sans font-black tracking-[-0.035em] leading-[0.95] text-[10vw] sm:text-[7vw] lg:text-[5.2vw] xl:text-[88px]">
            Follow<br/><span className="italic text-aize-blue">the signal.</span>
          </h2>
          <p className="mt-8 max-w-md text-neutral-400 leading-relaxed">
            Live reads, position updates, and alpha drops — all on X. No Discord maze. No hype. Just the model's output, on the record.
          </p>
        </div>
        <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-px bg-neutral-900 border border-neutral-900">
          {[
            { Icon: Globe,    label: "X / Twitter",  handle: "@AizeLMSol",               cta: "FOLLOW", href: X_URL },
            { Icon: Github,   label: "GitHub",        handle: "nujar00t/AizeLM",           cta: "READ",   href: GITHUB_URL },
            { Icon: Flame,    label: "Pump.fun",      handle: "pump.fun · $AIZE TBA",      cta: "BUY",    href: PUMP_URL },
            { Icon: MsgCircle,label: "Narrative",     handle: "The full read →",            cta: "READ",   href: DOCS_URL },
          ].map(({ Icon, label, handle, cta, href }) => (
            <a key={label} href={href} target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener" : undefined} className="group bg-black hover:bg-neutral-950/60 p-7 flex flex-col justify-between min-h-[200px] border-neutral-900 transition-colors hover:border-aize-blue/60">
              <div className="flex items-center justify-between">
                <Icon size={18} className="text-neutral-400 group-hover:text-aize-blue transition-colors"/>
                <ArrowUR size={14} className="text-neutral-700 group-hover:text-aize-blue transition-colors"/>
              </div>
              <div>
                <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-neutral-500">{label}</div>
                <div className="mt-2 text-2xl font-semibold tracking-tight">{handle}</div>
                <div className="mt-4 font-mono text-[10px] tracking-[0.2em] text-neutral-500 group-hover:text-aize-blue transition-colors">{cta} →</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  </SectionFrame>
);

/* ----------------------------- FOOTER ----------------------------- */
const Footer = () => (
  <footer className="relative border-t border-neutral-900">
    <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-14 grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
      <div>
        <a href="#top" className="flex items-center gap-2">
          <Mark />
          <span className="font-mono tracking-[0.18em] text-sm">AIZELM</span>
        </a>
        <p className="mt-4 max-w-xs text-sm text-neutral-500 leading-relaxed">
          Solana perpetual intelligence powered by LLM. Read. Reason. Execute.
        </p>
      </div>
      <div className="grid grid-cols-2 gap-4 font-mono text-[11px] tracking-[0.18em] uppercase text-neutral-500">
        <a href="#about" className="hover:text-white">About</a>
        <a href="#features" className="hover:text-white">Intelligence</a>
        <a href="#tokenomics" className="hover:text-white">Tokenomics</a>
        <a href="#roadmap" className="hover:text-white">Roadmap</a>
        <a href={DOCS_URL} className="hover:text-white">Narrative ↗</a>
        <a href={GITHUB_URL} target="_blank" rel="noopener" className="hover:text-white">GitHub ↗</a>
        <a href={PUMP_URL} target="_blank" rel="noopener" className="hover:text-white">Pump.fun ↗</a>
        <a href={X_URL} target="_blank" rel="noopener" className="hover:text-white">X ↗</a>
      </div>
      <div className="md:text-right">
        <CAPill showBuy={false}/>
        <div className="mt-6 font-mono text-[10px] tracking-[0.18em] uppercase text-neutral-600">
          © 2026 AizeLM · Not financial advice
        </div>
      </div>
    </div>
  </footer>
);

/* ----------------------------- ROOT ----------------------------- */
function AizeLanding() {
  return (
    <main className="min-h-screen bg-black text-white antialiased selection:bg-aize-blue selection:text-black">
      <Nav />
      <Hero />
      <About />
      <Features />
      <Tokenomics />
      <Roadmap />
      <Community />
      <Footer />
    </main>
  );
}

window.AizeLanding = AizeLanding;
