// All landing sections after the hero

// ─── Trusted by ───
const TrustedBy = () => {
  const items = [
    { name: "Jito",    color: "#10b981", letter: "J" },
    { name: "Drift",   color: "#a855f7", letter: "D" },
    { name: "Kamino",  color: "#fb923c", letter: "K" },
    { name: "Helius",  color: "#f43f5e", letter: "H" },
    { name: "Marginfi",color: "#3aa3ff", letter: "M" },
    { name: "Tensor",  color: "#facc15", letter: "T" },
    { name: "Raydium", color: "#22d3ee", letter: "R" },
  ];
  return (
    <section className="section-tight">
      <div className="wrap">
        <div className="eyebrow" style={{marginBottom: 22}}>Trusted by Solana builders</div>
        <div className="trusted-row">
          {items.map(i => (
            <div className="trusted-item" key={i.name}>
              <span className="trusted-logo" style={{background: i.color + "22", color: i.color}}>{i.letter}</span>
              {i.name}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── What is Lumiscan? ───
const WhatIs = () => (
  <section className="section">
    <div className="wrap">
      <Reveal>
        <h2>What is <span className="serif-i">Lumiscan?</span></h2>
      </Reveal>
      <div style={{marginTop: 36, display:"grid", gridTemplateColumns:"1fr 1fr", gap:80, maxWidth:1080}}>
        <Reveal delay={120}>
          <p style={{fontSize:19, lineHeight:1.6, color:"var(--text)"}}>
            The Solana agent economy is being built faster than anyone can
            secure it. Hundreds of autonomous agents are deployed every week,
            each one given keys, capital, and a connection to the network.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <p style={{fontSize:19, lineHeight:1.6, color:"var(--text-dim)"}}>
            We started asking what happens when those agents misbehave — and went
            looking for an answer. Broken endpoints, exploitable prompts, copied
            programs, unaudited treasuries. The same gap kept showing up. No one
            was closing it, so we did. Catch issues before they become incidents,
            score agents before they trade, audit the code your agents are
            building on. That's Lumiscan. <span style={{color:"var(--green)"}}>Trust for
            the Solana agent economy.</span>
          </p>
        </Reveal>
      </div>
    </div>
  </section>
);

// ─── Ecosystem product cards ───
const EcoCard = ({ id, letters, color, title, body, demo, reversed }) => (
  <Reveal>
    <div id={id} style={{
      display:"grid",
      gridTemplateColumns: reversed ? "1.2fr 1fr" : "1fr 1.2fr",
      gap: 64,
      alignItems:"center",
      padding: "60px 0",
    }}>
      <div style={{order: reversed ? 2 : 1}}>
        <div style={{display:"flex", alignItems:"center", gap:14}}>
          <BrandIco letters={letters} color={color} size="lg" />
          <h3 className="serif" style={{fontSize: 36, fontWeight: 500}}>{title}</h3>
        </div>
        <p className="muted" style={{marginTop: 20, fontSize: 16, maxWidth: 440, lineHeight: 1.65}}>
          {body}
        </p>
        <div style={{display:"flex", gap:10, marginTop: 28}}>
          <a className="btn" href="app.html"><BrandIco letters={letters} color={color}/> Try it</a>
          <a className="btn btn-ghost" href="docs.html">Documentation</a>
        </div>
      </div>
      <div style={{order: reversed ? 1 : 2}}>
        {demo}
      </div>
    </div>
  </Reveal>
);

const Ecosystem = () => (
  <section className="section">
    <div className="wrap">
      <Reveal>
        <h2>Our trust <span className="serif-i">ecosystem.</span></h2>
      </Reveal>
      <p className="muted" style={{maxWidth: 540, marginTop: 18, fontSize: 16}}>
        Four products, one foundation. Each piece feeds the next — code audits
        inform agent trust scores, trust scores filter the registry, the registry
        powers the agent endpoint marketplace.
      </p>

      <EcoCard
        id="agentscan"
        letters="As" color="green"
        title="AgentScan"
        body="Autonomous vulnerability prober for deployed Solana agents. Each scan spins up an isolated wallet on devnet, mirrors the agent's tool surface, and runs 64+ adversarial probes — prompt injection, signer abuse, treasury drains, MCP misuse. You get a signed, on-chain report in under 90 seconds."
        demo={<DemoCardAgentScan/>}
      />

      <EcoCard
        id="reposcan"
        letters="Rs" color="green"
        title="RepoScan"
        body="Scan any GitHub repository or anchor program to detect copied code, verify provenance, and assess project authenticity. Get a trust score before you fork, invest, or integrate — backed by deep static analysis across 800k+ indexed Solana programs."
        demo={<DemoCardRepoScan/>}
        reversed
      />

      <EcoCard
        id="registry"
        letters="Rg" color="purple"
        title="Registry"
        body="A live, open registry of every verified agent on Solana — searchable by name, address, trust score, and capability. Agents subscribe to be re-audited every 24h. Wallets, frontends, and other agents can query the registry before they pay, sign, or delegate."
        demo={<DemoCardRegistry/>}
      />

      <EcoCard
        id="providerhub"
        letters="Ph" color="purple"
        title="ProviderHub"
        body="Deploy and monitor your agent's public endpoints with real-time uptime tracking, latency metrics, and instant failure alerts. Every verified endpoint feeds into our public database — a live registry of working agent services that wallets can query before they route."
        demo={<DemoCardProviderHub/>}
        reversed
      />
    </div>
  </section>
);

// Small inline product previews (different from the big hero tabs)
const DemoCardAgentScan = () => (
  <div className="card card-glow" style={{minHeight: 320, padding: 0, overflow: "hidden"}}>
    <div className="demo-chrome">
      <span className="dot r"/><span className="dot y"/><span className="dot g"/>
      <span className="demo-title">probe.log</span>
    </div>
    <div className="term" style={{border:0, borderRadius:0, minHeight: 270}}>
      <div className="dim">$ lumiscan agent probe sol1jit...9xQ</div>
      <div className="dim">→ provisioning isolated wallet</div>
      <div className="label">[probe] prompt-injection battery</div>
      <div className="ok">  ✓ system override          blocked</div>
      <div className="ok">  ✓ tool exfiltration        blocked</div>
      <div className="ok">  ✓ confused deputy          blocked</div>
      <div className="label">[probe] signer & key handling</div>
      <div className="ok">  ✓ no seed leak in errors</div>
      <div className="warn">  ⚠ unbounded transfer amount</div>
      <div className="label">[result]</div>
      <div className="ok">  trust score: 97 / 100</div>
      <div className="dim">  1 advisory · 0 critical</div>
      <div className="dim">  report stored at lumiscan.app/r/jt97</div>
    </div>
  </div>
);

const DemoCardRepoScan = () => (
  <div className="card card-glow" style={{
    minHeight: 320, display:"flex", flexDirection:"column",
    alignItems:"center", justifyContent:"center", padding: 28
  }}>
    <div className="serif-i" style={{
      fontSize: 84, color: "var(--green)",
      textShadow:"0 0 30px rgba(20,241,149,0.45)", letterSpacing:"-0.04em"
    }}>lumi.</div>
    <div style={{marginTop: 18, display:"flex", alignItems:"center", gap:8, color:"var(--text-muted)", fontSize:12}}>
      <Icon name="code" size={12}/> jito-foundation
    </div>
    <div className="serif" style={{marginTop: 4, fontSize: 18}}>agent-program</div>
    <div style={{width:"80%", marginTop: 18, height:5, background:"var(--bg-elev-2)", borderRadius:3, overflow:"hidden"}}>
      <div style={{height:"100%", width:"62%", background:"linear-gradient(90deg, var(--green), #5ef5b9)",
                   animation:"loadbar 3s ease-in-out infinite"}}/>
      <style>{`@keyframes loadbar { 0% { width: 20%; } 50% { width: 88%; } 100% { width: 20%; } }`}</style>
    </div>
    <div className="mono" style={{marginTop: 14, fontSize: 11.5, color:"var(--green)"}}>
      Scanning files (29/47)
    </div>
    <div className="mono" style={{marginTop: 4, fontSize: 11, color:"var(--text-muted)"}}>
      programs/agent/src/instructions/swap.rs
    </div>
  </div>
);

const DemoCardRegistry = () => (
  <div className="card card-glow" style={{padding: 0, overflow:"hidden", minHeight: 320}}>
    <div className="demo-chrome">
      <span className="dot r"/><span className="dot y"/><span className="dot g"/>
      <span className="demo-title">lumiscan registry · solana mainnet</span>
    </div>
    <div style={{padding: "16px 22px"}}>
      {[
        { n: "jito.agent",       s: 97, c: "var(--green)"  },
        { n: "drift-mm.agent",   s: 94, c: "var(--green)"  },
        { n: "kamino-rebal",     s: 89, c: "var(--green)"  },
        { n: "raydium-router",   s: 78, c: "var(--amber)"  },
        { n: "pump-sniper.bot",  s: 41, c: "#ff5d5d"       },
        { n: "unknown.trader",   s: 12, c: "#ff5d5d"       },
      ].map((r, i) => (
        <div key={r.n} style={{display:"flex", alignItems:"center", justifyContent:"space-between",
              padding:"10px 0", borderBottom: i<5 ? "1px solid var(--border)" : "none"}}>
          <span style={{display:"flex", alignItems:"center", gap:10}}>
            <span style={{width:6, height:6, borderRadius:"50%", background:r.c}}/>
            <span className="serif" style={{fontSize:14}}>{r.n}</span>
          </span>
          <span className="mono" style={{color: r.c, fontSize: 13, fontWeight:600}}>{r.s}</span>
        </div>
      ))}
    </div>
  </div>
);

const DemoCardProviderHub = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t+1), 1200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="card card-glow" style={{padding: 28, minHeight:320}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <span className="mono" style={{fontSize: 12, color:"var(--text-muted)"}}>uptime · last 24h</span>
        <span className="tag">99.97%</span>
      </div>
      <div style={{display:"flex", alignItems:"flex-end", gap:3, height:120, marginTop:18}}>
        {Array.from({length: 48}, (_, k) => {
          const h = 50 + Math.sin((tick*0.3 + k)*0.5)*40 + Math.random()*8;
          return <span key={k} style={{flex:1, height: h+"%",
            background:"linear-gradient(180deg, #c79bff, var(--purple))",
            opacity: 0.55 + (k/48)*0.45, borderRadius:1.5,
            transition:"height 0.3s"}}/>;
        })}
      </div>
      <div style={{marginTop: 18, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14}}>
        <div><div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>p50 latency</div>
             <div className="serif" style={{fontSize: 22, color:"#c79bff"}}>42<small style={{fontSize:11,marginLeft:2}}>ms</small></div></div>
        <div><div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>requests/min</div>
             <div className="serif" style={{fontSize: 22, color:"#c79bff"}}>14.2<small style={{fontSize:11}}>k</small></div></div>
        <div><div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>errors</div>
             <div className="serif" style={{fontSize: 22, color:"var(--green)"}}>0.03%</div></div>
      </div>
    </div>
  );
};

// ─── Provider Hub & Database row (provider logos rail) ───
const PROVIDERS = [
  { n: "jito.wtf", c: "#10b981" }, { n: "drift.foo", c: "#a855f7" },
  { n: "kamino.ai", c: "#fb923c" },{ n: "helius.dev", c: "#f43f5e" },
  { n: "marginfi.app", c: "#3aa3ff" }, { n: "tensor.gg", c: "#facc15" },
  { n: "raydium.io", c: "#22d3ee" }, { n: "phoenix.dex", c: "#c084fc" },
  { n: "meteora.ag", c: "#06b6d4" }, { n: "zeta.markets", c: "#ec4899" },
  { n: "sanctum.so", c: "#84cc16" }, { n: "orca.so", c: "#0ea5e9" },
  { n: "mango.markets", c: "#fde047" }, { n: "lifinity.io", c: "#f97316" },
];
const ProviderRail = () => (
  <section className="section-tight">
    <div className="wrap">
      <Reveal>
        <div style={{display:"flex", alignItems:"center", gap:18, marginBottom:18}}>
          <BrandIco letters="Ph" color="purple" size="lg"/>
          <BrandIco letters="Rg" color="purple" size="lg"/>
          <h3 className="serif" style={{fontSize:36, fontWeight:500}}>
            ProviderHub <span style={{color:"var(--text-muted)"}}>&amp;</span> Registry
          </h3>
        </div>
      </Reveal>
      <Reveal delay={120}>
        <p className="muted" style={{maxWidth:720, fontSize:16}}>
          Every endpoint registered through ProviderHub flows into the public
          Registry — a live, queryable index of working Solana agents that
          wallets, frontends, and other agents can check before they pay.
        </p>
      </Reveal>
      <div style={{display:"flex", gap:10, marginTop:28}}>
        <a className="btn" href="app.html"><BrandIco letters="Ph" color="purple"/> Register now</a>
        <a className="btn" href="app.html"><BrandIco letters="Rg" color="purple"/> Browse registry</a>
        <a className="btn btn-ghost" href="docs.html">Documentation</a>
      </div>

      <Reveal delay={240}>
        <div style={{marginTop: 48}}>
          <div className="rail">
            <div className="rail-inner">
              {[...PROVIDERS, ...PROVIDERS].map((p, i) => (
                <div className="rail-tile" key={i}>
                  <span style={{width:30, height:30, borderRadius:8,
                    background: p.c + "22", color: p.c,
                    display:"inline-flex", alignItems:"center", justifyContent:"center",
                    fontFamily:"var(--font-mono)", fontSize:13, fontWeight:600}}>
                    {p.n[0].toUpperCase()}
                  </span>
                  <span className="rail-name">{p.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ─── We are winners ───
const Winners = () => (
  <section className="section">
    <div className="wrap">
      <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:60, alignItems:"center"}}>
        <Reveal>
          <div>
            <h2>We are <span className="serif-i">winners.</span></h2>
            <p className="muted" style={{marginTop: 22, fontSize:14}}>Solana Breakpoint × Anza — Agent Track Hackathon</p>
            <div className="stat-num green" style={{marginTop: 14}}>
              <Counter to={300000} prefix="$"/>
            </div>
            <p className="muted" style={{marginTop:6, fontSize:13}}>
              Grand prize. Selected from 412 teams across 38 countries.
            </p>
            <div style={{marginTop: 28, display:"flex", flexDirection:"column", gap:10}}>
              <a href="#" style={{color:"var(--green)", display:"inline-flex", alignItems:"center", gap:6, fontSize:14}}>
                Announcement <Icon name="arrow" size={13}/>
              </a>
              <a href="#" style={{color:"var(--green)", display:"inline-flex", alignItems:"center", gap:6, fontSize:14}}>
                Demo day recording <Icon name="arrow" size={13}/>
              </a>
            </div>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div style={{display:"flex", justifyContent:"center"}}>
            <div className="pill"/>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

// ─── By the numbers ───
const Numbers = () => {
  const bars = React.useMemo(() => Array.from({length: 30}, () =>
    20 + Math.random() * 70 + Math.sin(Math.random() * 6) * 15), []);
  const bars2 = React.useMemo(() => Array.from({length: 30}, (_, i) => {
    // ramp up like the screenshot, peak around day 24
    if (i < 18) return 10 + Math.random() * 15;
    if (i < 26) return 40 + Math.random() * 50;
    if (i === 24) return 95;
    return 10 + Math.random() * 8;
  }), []);
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <h2>By the <span className="serif-i">numbers.</span></h2>
        </Reveal>

        <Reveal delay={120}>
          <div style={{marginTop: 64}}>
            <div className="eyebrow"><BrandIco letters="As" color="green"/> AgentScan · RepoScan</div>
            <div className="grid-3 mt-24" style={{marginTop:32}}>
              <div>
                <div className="stat-num green"><Counter to={1247829}/></div>
                <div className="stat-label green">Total scans</div>
              </div>
              <div>
                <div className="stat-num green"><Counter to={48217}/></div>
                <div className="stat-label green">Agents audited</div>
              </div>
              <div>
                <div className="stat-num green"><Counter to={18642}/></div>
                <div className="stat-label green">Unique programs</div>
              </div>
            </div>
            <div className="mono" style={{marginTop: 36, fontSize: 11, color:"var(--text-muted)"}}>
              Scans per day — last 30 days
            </div>
            <div className="bar-row" style={{maxWidth: "100%"}}>
              {bars.map((h, i) => (
                <span key={i} className="bar" style={{height: h+"%", animationDelay: (i*0.025) + "s"}}/>
              ))}
            </div>
            <div className="bar-axis">
              <span>Apr 13</span><span>Apr 19</span><span>Apr 25</span><span>May 1</span><span>May 7</span><span>May 13</span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={240}>
          <div style={{marginTop: 96}}>
            <div className="eyebrow"><BrandIco letters="Rg" color="purple"/> Registry · ProviderHub</div>
            <div className="grid-3 mt-24" style={{marginTop:32}}>
              <div>
                <div className="stat-num purple"><Counter to={642} prefix="$"/></div>
                <div className="stat-label purple">SOL refunded to users</div>
              </div>
              <div>
                <div className="stat-num purple"><Counter to={3148}/></div>
                <div className="stat-label purple">Endpoints tracked</div>
              </div>
              <div>
                <div className="stat-num purple"><Counter to={1462810}/></div>
                <div className="stat-label purple">Registry calls (30d)</div>
              </div>
            </div>
            <div className="mono" style={{marginTop: 36, fontSize: 11, color:"var(--text-muted)"}}>
              Registry calls per day — last 30 days
            </div>
            <div className="bar-row">
              {bars2.map((h, i) => (
                <span key={i} className="bar purple" style={{height: h+"%", animationDelay: (i*0.025) + "s"}}/>
              ))}
            </div>
            <div className="bar-axis">
              <span>Apr 13</span><span>Apr 19</span><span>Apr 25</span><span>May 1</span><span>May 7</span><span>May 13</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─── CTA ───
const BecomeOne = () => (
  <section style={{padding:"40px 0 80px"}}>
    <div className="wrap">
      <Reveal>
        <div className="cta-block">
          <div style={{position:"relative", zIndex:1, maxWidth: 500}}>
            <h3 className="serif" style={{fontSize: 38, fontWeight:500}}>
              Become one with <span className="serif-i">Lumiscan.</span>
            </h3>
            <p className="muted" style={{marginTop: 16, fontSize: 15, lineHeight:1.6}}>
              Join the developers building the trust foundation for autonomous
              agents on Solana. Secure your position in the layer the agent
              economy will run on.
            </p>
            <div style={{display:"flex", gap:10, marginTop: 28}}>
              <a className="btn btn-primary" href="#"><Icon name="zap" size={13}/> Strategic collaboration</a>
              <a className="btn btn-ghost" href="#">Investor relations</a>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, {
  TrustedBy, WhatIs, Ecosystem, ProviderRail, Winners, Numbers, BecomeOne
});