// Hero + animated product tab demos

const Hero = () => {
  const [tab, setTab] = React.useState("agentscan");
  return (
    <section className="hero">
      <div className="hero-spotlight" />
      <Particles count={50} />
      <div className="wrap" style={{position:"relative"}}>
        <Reveal>
          <h1>
            Trust for the<br/>
            <span className="em">Solana agent economy.</span>
          </h1>
        </Reveal>
        <Reveal delay={120}>
          <p className="hero-sub">
            Audit agent code before it ships. Score agent identity before it trades.
            Monitor agent endpoints before users connect. Lumiscan is the security
            layer for autonomous agents on Solana.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div className="hero-cta-row">
            <a className="btn btn-primary" href="app.html"><Icon name="zap" size={13}/> Launch Lumiscan</a>
            <a className="btn btn-ghost" href="docs.html">Read the docs <Icon name="arrow" size={13}/></a>
          </div>
        </Reveal>

        <div style={{marginTop: 72, display: "flex", justifyContent: "center"}}>
          <Reveal delay={360}>
            <div className="tabs" role="tablist">
              <button className={`tab ${tab==="agentscan"?"active":""}`} onClick={()=>setTab("agentscan")}>
                <BrandIco letters="As" color="green"/> AgentScan
              </button>
              <button className={`tab ${tab==="reposcan"?"active":""}`} onClick={()=>setTab("reposcan")}>
                <BrandIco letters="Rs" color="green"/> RepoScan
              </button>
              <button className={`tab ${tab==="registry"?"active":""}`} onClick={()=>setTab("registry")}>
                <BrandIco letters="Rg" color="purple"/> Registry
              </button>
              <button className={`tab ${tab==="providerhub"?"active":""}`} onClick={()=>setTab("providerhub")}>
                <BrandIco letters="Ph" color="purple"/> ProviderHub
              </button>
            </div>
          </Reveal>
        </div>

        <Reveal delay={480}>
          <div className="demo" style={{maxWidth: 1080, margin: "28px auto 0"}}>
            <div className="demo-chrome">
              <span className="dot r"/><span className="dot y"/><span className="dot g"/>
              <span className="demo-title">
                {tab === "agentscan" && "agentscan · probing agent endpoint"}
                {tab === "reposcan" && "reposcan · auditing on-chain agent program"}
                {tab === "registry" && "lumiscan registry · live agent trust scores"}
                {tab === "providerhub" && "providerhub · monitoring 14 agent endpoints"}
              </span>
            </div>
            <div style={{padding: 24}}>
              {tab === "agentscan"   && <AgentScanDemo />}
              {tab === "reposcan"    && <RepoScanDemo />}
              {tab === "registry"    && <RegistryDemo />}
              {tab === "providerhub" && <ProviderHubDemo />}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ─── AgentScan demo: terminal probe ───
const AGENT_LINES = [
  { t: "$ lumiscan agent probe sol1agentXyz...4kP9", c: "" },
  { t: "→ resolving agent program  ......................... done", c: "dim", d: 600 },
  { t: "→ fetching IDL & metadata  ......................... done", c: "dim", d: 350 },
  { t: "→ spinning ephemeral wallet on devnet  ............. done", c: "dim", d: 400 },
  { t: "[probe] prompt-injection battery     [ 64 tests ]", c: "label", d: 450 },
  { t: "  ✓ system override                  blocked", c: "ok",   d: 250 },
  { t: "  ✓ tool exfiltration                blocked", c: "ok",   d: 200 },
  { t: "  ! treasury withdraw on confusion   leaked", c: "err",  d: 250 },
  { t: "[probe] signer & key handling        [ 18 tests ]", c: "label", d: 350 },
  { t: "  ✓ no exposed seed phrase", c: "ok", d: 180 },
  { t: "  ✓ ed25519 signature verification ok", c: "ok", d: 180 },
  { t: "[probe] mcp tool surface             [ 12 tools ]", c: "label", d: 320 },
  { t: "  ⚠ unbounded transfer() amount param", c: "warn", d: 220 },
  { t: "  ✓ rate-limit on swap()", c: "ok", d: 180 },
  { t: "", c: "" },
  { t: "trust score:  72 / 100   ·   2 findings   ·   1 critical", c: "label", d: 400 },
  { t: "report:  lumiscan.app/r/9af31c · signed & on-chain", c: "ok", d: 300 },
];
const AgentScanDemo = () => {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let i = 0; let alive = true;
    const tick = () => {
      if (!alive) return;
      setN(i + 1);
      i = (i + 1) % (AGENT_LINES.length + 8);
      if (i === 0) setTimeout(()=>{ if(alive){ setN(0); tick(); }}, 2500);
      else setTimeout(tick, AGENT_LINES[i-1]?.d || 220);
    };
    const t = setTimeout(tick, 400);
    return () => { alive = false; clearTimeout(t); };
  }, []);
  return (
    <div className="term" style={{minHeight: 380}}>
      {AGENT_LINES.slice(0, n).map((l, i) => (
        <div key={i} className={l.c}>{l.t || "\u00A0"}</div>
      ))}
      <span style={{color: "var(--green)", animation: "blink 1s steps(1) infinite"}}>▎</span>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
};

// ─── RepoScan demo ───
const RepoScanDemo = () => {
  const [pct, setPct] = React.useState(0);
  const [file, setFile] = React.useState(0);
  const total = 47;
  const files = [
    "programs/agent/src/lib.rs",
    "programs/agent/src/instructions/swap.rs",
    "programs/agent/src/state/treasury.rs",
    "programs/agent/src/utils/signer.rs",
    "programs/agent/src/security/checks.rs",
    "tests/agent.spec.ts",
    "sdk/typescript/src/client.ts",
    "sdk/typescript/src/encoders.ts",
  ];
  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i = (i + 1) % (total + 6);
      if (i === 0) { setPct(0); setFile(0); }
      else {
        setPct(Math.min(100, Math.floor((i / total) * 100)));
        setFile(prev => (prev + 1) % files.length);
      }
    }, 360);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:32, minHeight:380, alignItems:"center"}}>
      <div>
        <div style={{display:"flex", alignItems:"center", gap:10, color:"var(--text-dim)", fontSize:13}}>
          <Icon name="code" size={14}/> github.com/jito-foundation/agent-program
        </div>
        <div className="serif" style={{fontSize:32, marginTop:14, color:"var(--text)"}}>agent-program</div>
        <div style={{marginTop: 8, color: "var(--text-muted)", fontSize: 13}}>main · 2,415 commits · MIT</div>

        <div style={{marginTop: 28}}>
          <div style={{display:"flex",justifyContent:"space-between", color:"var(--text-dim)", fontSize:12, marginBottom:8}}>
            <span>Scanning files</span><span className="mono">{Math.min(file+1,files.length)}/{total}</span>
          </div>
          <div style={{height:6, background:"var(--bg-elev-2)", borderRadius:3, overflow:"hidden"}}>
            <div style={{height:"100%", width: pct+"%", background:"linear-gradient(90deg, var(--green), #5ef5b9)", transition:"width 0.3s"}}/>
          </div>
          <div className="mono" style={{marginTop:14, fontSize:12, color:"var(--text-muted)"}}>
            ▸ {files[file]}
          </div>
        </div>

        <div style={{display:"flex", gap:14, marginTop: 28, flexWrap:"wrap"}}>
          <span className="tag">12 deps verified</span>
          <span className="tag purple">3 forks detected</span>
          <span className="tag amber">2 minor findings</span>
        </div>
      </div>
      <div style={{position:"relative", display:"flex", alignItems:"center", justifyContent:"center"}}>
        <div className="serif-i" style={{
          fontSize: 76, color: "var(--green)", letterSpacing:"-0.04em",
          textShadow: "0 0 28px rgba(20,241,149,0.45)",
          opacity: 0.85,
        }}>
          lumi.
        </div>
        <div style={{position:"absolute", left:0, right:0, top:"50%", height:2,
                     background:"linear-gradient(90deg, transparent, var(--green), transparent)",
                     animation:"scan-sweep 2.2s linear infinite"}}/>
        <style>{`@keyframes scan-sweep { 0% { transform: translateY(-80px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }`}</style>
      </div>
    </div>
  );
};

// ─── Registry demo ───
const REG_ROWS = [
  { name: "jito.agent",        addr: "sol1jit...9xQ", score: 97, color: "green" },
  { name: "drift-mm.agent",    addr: "sol1drf...kP2", score: 94, color: "green" },
  { name: "kamino-rebal.agent",addr: "sol1kam...8nR", score: 89, color: "green" },
  { name: "marginfi-borrow",   addr: "sol1mfi...2yL", score: 82, color: "green" },
  { name: "raydium-router",    addr: "sol1ray...7tF", score: 78, color: "amber" },
  { name: "pump-sniper.bot",   addr: "sol1pmp...4vC", score: 41, color: "red" },
  { name: "unknown-trader.42", addr: "sol1unk...0aZ", score: 12, color: "red" },
];
const RegistryDemo = () => {
  const [visible, setVisible] = React.useState(0);
  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i = (i + 1) % (REG_ROWS.length + 4);
      setVisible(Math.min(i, REG_ROWS.length));
    }, 480);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{minHeight: 380}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18}}>
        <div className="serif" style={{fontSize:20}}>verified agents · live</div>
        <div style={{display:"flex", alignItems:"center", gap:8, color:"var(--text-muted)", fontSize:12}}>
          <span className="live-dot"/> streaming from mainnet-beta
        </div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1.6fr 1.4fr 1fr 1fr 1.2fr", gap:0,
                   fontSize:11, color:"var(--text-muted)", textTransform:"uppercase",
                   letterSpacing:"0.1em", padding:"10px 14px",
                   borderBottom:"1px solid var(--border)"}}>
        <span>Agent</span><span>Address</span><span>Trust</span><span>Calls (24h)</span><span>Last audit</span>
      </div>
      {REG_ROWS.map((r, i) => {
        const seen = i < visible;
        return (
          <div key={r.name} style={{
            display:"grid", gridTemplateColumns:"1.6fr 1.4fr 1fr 1fr 1.2fr", gap:0,
            padding:"14px", fontSize: 13, borderBottom:"1px solid var(--border)",
            alignItems:"center",
            opacity: seen ? 1 : 0,
            transform: seen ? "translateY(0)" : "translateY(6px)",
            transition: "opacity 0.5s, transform 0.5s",
          }}>
            <span style={{display:"flex", alignItems:"center", gap:10}}>
              <span style={{width:8, height:8, borderRadius:"50%",
                  background: r.color === "green" ? "var(--green)" : r.color === "amber" ? "var(--amber)" : "#ff5d5d"}}/>
              <span className="serif">{r.name}</span>
            </span>
            <span className="mono" style={{color:"var(--text-muted)", fontSize: 12}}>{r.addr}</span>
            <span style={{color: r.color === "green" ? "var(--green)" : r.color === "amber" ? "var(--amber)" : "#ff5d5d", fontWeight:600}}>
              {r.score}
            </span>
            <span className="mono" style={{color:"var(--text-dim)"}}>{(Math.floor(Math.random()*9000)+1000).toLocaleString()}</span>
            <span style={{color:"var(--text-muted)", fontSize: 12}}>{Math.floor(Math.random()*60)}m ago</span>
          </div>
        );
      })}
    </div>
  );
};

// ─── ProviderHub demo ───
const ENDPOINTS = [
  { url: "agent.driftprotocol.io",   lat: 42,  up: 99.98, ok: true },
  { url: "mev.jito.wtf/agent",        lat: 28,  up: 99.99, ok: true },
  { url: "swap.kamino.ai",            lat: 81,  up: 99.91, ok: true },
  { url: "rebal.marginfi.app",        lat: 156, up: 98.42, ok: true },
  { url: "trade.helius-agent.dev",    lat: 0,   up: 0,     ok: false },
  { url: "lend.sol-arena.xyz",        lat: 67,  up: 99.85, ok: true },
];
const ProviderHubDemo = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{minHeight: 380}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 18}}>
        <div className="serif" style={{fontSize:20}}>endpoint health · last 60s</div>
        <div style={{display:"flex", gap:18, fontSize:12, color:"var(--text-muted)"}}>
          <span><span style={{color:"var(--green)"}}>●</span> 5 healthy</span>
          <span><span style={{color:"#ff5d5d"}}>●</span> 1 down</span>
        </div>
      </div>
      <div style={{display:"grid", gap: 10}}>
        {ENDPOINTS.map((e, i) => {
          const series = Array.from({length: 30}, (_, k) => {
            if (!e.ok && k > 18) return 0;
            const base = e.lat || 60;
            return base + Math.sin((tick*0.4 + i + k) * 0.5) * (base*0.2);
          });
          const max = Math.max(...series, 1);
          return (
            <div key={e.url} style={{
              display:"grid", gridTemplateColumns:"1.4fr 2fr 0.6fr 0.6fr",
              gap: 18, alignItems:"center",
              padding:"12px 16px", background:"var(--bg-elev)",
              border:"1px solid var(--border)", borderRadius:10
            }}>
              <div style={{display:"flex", alignItems:"center", gap:10}}>
                <span style={{width:8, height:8, borderRadius:"50%",
                  background: e.ok ? "var(--green)" : "#ff5d5d",
                  boxShadow: e.ok ? "0 0 8px var(--green)" : "0 0 8px #ff5d5d"
                }}/>
                <span className="mono" style={{fontSize:12.5}}>{e.url}</span>
              </div>
              <div style={{display:"flex", alignItems:"flex-end", gap:2, height:28}}>
                {series.map((v, k) => (
                  <span key={k} style={{
                    flex:1, height: (v/max*100) + "%",
                    background: e.ok ? "var(--green)" : "#ff5d5d",
                    opacity: 0.65 + (k/series.length)*0.35,
                    borderRadius: 1,
                    transition: "height 0.3s"
                  }}/>
                ))}
              </div>
              <span className="mono" style={{fontSize: 12, color: e.ok ? "var(--text-dim)" : "#ff5d5d"}}>
                {e.ok ? e.lat + "ms" : "DOWN"}
              </span>
              <span className="mono" style={{fontSize:12, color:"var(--text-muted)"}}>{e.up}%</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { Hero });
