/* eslint-disable */
// Neuron — main app
const { useEffect, useRef, useState } = React;

// Replace with your real Solana mint address
const NEURON_CA = "Nik5oLA1aunchPump6xR3aLM1ntAddre5sH3rExxxxx";

function Nav() {
  return (
    <nav className="top">
      <div className="inner">
        <div className="brand">
          <span className="mark" />
          <span>Neuron</span>
          <span className="v">v0.4</span>
        </div>
        <ul>
          <li><a href="#demo">Demo</a></li>
          <li><a href="#how">How it works</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <a href="/try" className="btn btn-primary">
          <span className="btn-inner">Launch your coin <span className="arrow">→</span></span>
        </a>
      </div>
    </nav>
  );
}

function Hero({ onCopyCA, copied }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{marginBottom: 28}}>Built for Printr · live on Solana</div>
            <h1>
              The first AI agent <em>for Printr.</em>
            </h1>
            <p className="lead">
              Give Neuron a narrative. The agent names your coin, buys the domain,
              ships the site, and mints it on Printr. You sign once. It's your coin.
            </p>
            <div className="cta-row">
              <button onClick={onCopyCA} className="btn btn-primary" style={{cursor: 'pointer'}} aria-label="Copy contract address">
                <span className="btn-inner">
                  {copied ? <>CA copied <span className="check" style={{marginLeft: 2}}/></> : <>Buy Neuron <span className="arrow">→</span></>}
                </span>
              </button>
              <a href="#how" className="btn btn-ghost">
                See how it works
              </a>
            </div>
          </div>

          <div className="terminal">
            <div className="term-bar">
              <div className="lights"><span/><span/><span/></div>
              <div className="title mono">neuron — /run/preview</div>
              <div className="stat mono"><span style={{display: 'inline-block', width: 5, height: 5, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 6px var(--green)'}}/>LIVE</div>
            </div>
            <div className="term-body">
              <HeroLog />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroLog() {
  const items = [
    { ts: '00:00:01', lvl: 'info', txt: <><span className="key">vibe</span> <span className="muted">=</span> <span className="val">"fees buy stocks"</span></> },
    { ts: '00:00:04', lvl: 'info', txt: <>scanning narratives</> },
    { ts: '00:00:09', lvl: 'ok',   txt: <>narrative locked</> },
    { ts: '00:00:14', lvl: 'ok',   txt: <>chosen: <span className="val">$VAULT</span></> },
    { ts: '00:00:21', lvl: 'ok',   txt: <>domain purchased</> },
    { ts: '00:00:38', lvl: 'ok',   txt: <>site live</> },
    { ts: '00:01:12', lvl: 'ok',   txt: <>treasury wired</> },
    { ts: '00:01:24', lvl: 'ok',   txt: <>token deployed</> },
    { ts: '00:01:38', lvl: 'ok',   txt: <span className="accent">handoff complete</span> },
  ];
  return (
    <>
      {items.map((it, i) => (
        <div className="term-line" key={i} style={{opacity: 0, animation: `fadeIn 0.4s ${i * 0.18}s forwards`}}>
          <span className="gutter">{it.ts}</span>
          <span className={`lvl-${it.lvl}`}>{it.lvl === 'ok' ? '✓' : '›'}</span>
          <span className="body">{it.txt}</span>
        </div>
      ))}
      <div className="term-line" style={{opacity: 0, animation: 'fadeIn 0.4s 1.6s forwards'}}>
        <span className="gutter">›</span>
        <span className="body"><span className="cursor"/></span>
      </div>
    </>
  );
}

function LiveTicker() {
  const items = [
    { tag: '$VAULT',  desc: 'fees buy real stocks',    time: '12s ago' },
    { tag: '$YIELD',  desc: 'tokenized t-bill basket', time: '47s ago' },
    { tag: '$INDEX',  desc: 'on-chain S&P exposure',   time: '2m ago' },
    { tag: '$WEIGHTS',desc: 'open-weight models',      time: '4m ago' },
    { tag: '$RIG',    desc: 'compute as commodity',    time: '6m ago' },
    { tag: '$FORGE',  desc: 'autonomous saas',         time: '9m ago' },
    { tag: '$BOND',   desc: 'fixed-income mirror',     time: '11m ago' },
    { tag: '$AGENT',  desc: 'agent infrastructure',    time: '14m ago' },
  ];
  // duplicate for seamless scroll
  const looped = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {looped.map((it, i) => (
          <div className="ticker-item" key={i}>
            <span className="ticker-dot" />
            <span className="ticker-tag">{it.tag}</span>
            <span>{it.desc}</span>
            <span className="ticker-time">{it.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Demo() {
  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Live agent</span>
          <h2>Narrative to mint. <em>In a few minutes.</em></h2>
          <p>A run, end to end — narrative, brand, domain, site, mint. This one
          ships a coin whose trading fees route into a tokenized-equity treasury.</p>
        </div>
        <LiveDemo />
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Pipeline</span>
          <h2>Three steps. <em>Hands off.</em></h2>
          <p>You bring the idea, or none — Neuron will find one. The agent runs
          the pipeline. You approve, you sign, you own the coin and everything
          around it.</p>
        </div>
        <div className="steps reveal">
          <Step
            num="01 — Narrative"
            title="It finds your angle."
            body="Drop in a vibe, or let the agent scan tech twitter, GitHub trending, and arXiv. It scores narratives by 30-day momentum and picks something fresh for your coin to ride."
            visual={<NarrativeViz/>}
          />
          <Step
            num="02 — Website"
            title="It ships your site."
            body="The agent registers a clean domain in your name, generates a single-page site with your ticker, copy, and tokenomics, and deploys to the edge. Real DNS, real HTTPS, your link to share."
            visual={<SiteViz/>}
          />
          <Step
            num="03 — Launch"
            title="You mint on Printr."
            body="The agent deploys via Printr — omnichain liquidity, configurable fee router, metadata and IPFS handled. You sign once with your wallet. Your coin, your keys, your fees."
            visual={<LaunchViz/>}
          />
        </div>
      </div>
    </section>
  );
}

function Step({ num, title, body, visual }) {
  return (
    <div className="step">
      <div className="num">{num}</div>
      <h3>{title}</h3>
      <p>{body}</p>
      <div className="visual">{visual}</div>
    </div>
  );
}

function NarrativeViz() {
  const items = ['ai compute', 'embodied agents', 'context wars', 'open weights', 'mcp protocol', 'vibe coding'];
  const widths = [35, 48, 62, 88, 41, 56];
  return (
    <div style={{padding: 18, height: '100%', display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center', fontFamily: 'var(--mono)'}}>
      {items.map((it, i) => (
        <div key={it} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontSize: 11, color: i === 3 ? 'var(--fg)' : 'var(--fg-mute)',
        }}>
          <span style={{minWidth: 96}}>{it}</span>
          <div style={{
            flex: 1, height: 2, borderRadius: 1,
            background: 'rgba(255,255,255,0.05)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              width: `${widths[i]}%`,
              background: i === 3 ? 'var(--cy)' : 'rgba(255,255,255,0.25)',
              boxShadow: i === 3 ? '0 0 8px var(--cy-glow)' : 'none',
            }}/>
          </div>
          <span style={{minWidth: 26, textAlign: 'right', color: i === 3 ? 'var(--cy-2)' : 'var(--fg-faint)'}}>{widths[i]}</span>
        </div>
      ))}
    </div>
  );
}

function SiteViz() {
  return (
    <div style={{
      padding: 18, height: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width: '100%', maxWidth: 240,
        border: '1px solid var(--hairline-2)',
        borderRadius: 6,
        padding: 14,
        background: 'var(--bg)',
        fontFamily: 'var(--mono)',
      }}>
        <div style={{display: 'flex', gap: 4, marginBottom: 10, alignItems: 'center'}}>
          <span style={{width: 5, height: 5, borderRadius: '50%', background: 'rgba(255,255,255,0.12)'}}/>
          <span style={{width: 5, height: 5, borderRadius: '50%', background: 'rgba(255,255,255,0.12)'}}/>
          <span style={{width: 5, height: 5, borderRadius: '50%', background: 'rgba(255,255,255,0.12)'}}/>
          <span style={{marginLeft: 'auto', fontSize: 9, color: 'var(--fg-faint)'}}>openweight.fun</span>
        </div>
        <div style={{fontSize: 16, color: 'var(--fg)', marginBottom: 4, letterSpacing: '-0.01em'}}>$WEIGHTS</div>
        <div style={{fontSize: 9, color: 'var(--fg-mute)', marginBottom: 10}}>open weights, open future.</div>
        <div style={{height: 1, width: '70%', background: 'var(--hairline-3)', marginBottom: 8}}/>
        <div style={{display: 'flex', gap: 4}}>
          <div style={{flex: 1, height: 14, borderRadius: 3, background: 'var(--fg)'}}/>
          <div style={{flex: 1, height: 14, border: '1px solid var(--hairline-2)', borderRadius: 3}}/>
        </div>
      </div>
    </div>
  );
}

function LaunchViz() {
  return (
    <div style={{
      padding: 18, height: '100%',
      display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'center',
      fontFamily: 'var(--mono)', fontSize: 11,
    }}>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>venue</span>
        <span style={{color: 'var(--fg)'}}>printr</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>chain</span>
        <span style={{color: 'var(--fg)'}}>solana mainnet</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>tx</span>
        <span style={{color: 'var(--fg-dim)'}}>4Gh2…rPq8</span>
      </div>
      <div style={{
        marginTop: 4, padding: '7px 10px',
        border: '1px solid var(--cy-line)',
        borderRadius: 4,
        background: 'var(--cy-soft)',
        color: 'var(--cy-2)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span className="check"/>
        <span>confirmed · 412ms</span>
      </div>
    </div>
  );
}

function WhatYouGet() {
  return (
    <section className="section" id="what">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Deliverables</span>
          <h2>You get all of it. <em>Not just a token.</em></h2>
          <p>Neuron hands over four real things — your coin, your site, your domain,
          your repo. All under your account, all yours to keep.</p>
        </div>

        <div className="bento reveal">
          <div className="bento-tile span-3 span-tall">
            <div className="label">01 · Token</div>
            <h3>SPL token, <em>your authority</em></h3>
            <p>Minted on Solana via Printr, your wallet as authority. Omnichain
            liquidity, configurable fee router. Metadata, IPFS, and deploy tx all
            handled — you sign once.</p>
            <div className="figure">
              <TokenFig/>
            </div>
          </div>

          <div className="bento-tile span-3">
            <div className="label">02 · Domain</div>
            <h3>Real domain, <em>in your name</em></h3>
            <p>The agent buys a clean .fun, .io, .run, or .dog domain at cost,
            registered to your account. Real DNS, real HTTPS, no wrapper.</p>
          </div>

          <div className="bento-tile span-3">
            <div className="label">03 · Website</div>
            <h3>Static site, <em>edge-hosted</em></h3>
            <p>React + Tailwind, deployed to the edge in seconds. Single-page,
            with your ticker, copy, and tokenomics. One-click redeploy.</p>
          </div>

          <div className="bento-tile span-2">
            <div className="label">04 · Repo</div>
            <h3>Source you own.</h3>
            <p>The agent commits the site to a git repo under your account. Hand it
            off to your dev whenever.</p>
          </div>

          <div className="bento-tile span-2">
            <div className="label">05 · Dashboard</div>
            <h3>One control panel.</h3>
            <p>Re-deploy, update copy, swap art, track holders. No CLI, no SSH,
            no Vercel.</p>
          </div>

          <div className="bento-tile span-2">
            <div className="label">06 · Receipts</div>
            <h3>Every step, logged.</h3>
            <p>Full audit trail of agent actions, txs, and signatures. Export
            anytime — proof it was you.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function TokenFig() {
  return (
    <div style={{
      padding: 16, height: '100%',
      display: 'flex', flexDirection: 'column', gap: 8,
      fontFamily: 'var(--mono)', fontSize: 11,
    }}>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>ticker</span>
        <span style={{color: 'var(--fg)'}}>$WEIGHTS</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>supply</span>
        <span style={{color: 'var(--fg)'}}>1,000,000,000</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>authority</span>
        <span style={{color: 'var(--fg-dim)'}}>your wallet</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span style={{color: 'var(--fg-mute)'}}>tx</span>
        <span style={{color: 'var(--cy-2)'}}>4Gh2…rPq8 ✓</span>
      </div>
    </div>
  );
}

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Pricing</span>
          <h2>One flat fee. <em>No team bag.</em></h2>
          <p>The agent charges a flat 0.05 SOL per full run. Domain at cost,
          Solana fees at cost. If a step fails before mint, you don't pay.</p>
        </div>

        <div className="pricing reveal">
          <div className="left">
            <div className="price-tag">
              <span className="num">0.05</span>
              <span className="unit">SOL · per launch</span>
            </div>
            <h3>Per full run, end-to-end.</h3>
            <p>Narrative, brand, domain, site, mint. One price, one signature,
            you own everything that comes out the other side.</p>
          </div>
          <div className="right">
            <div className="row"><span className="ico">+</span> Domain registered at cost (~$10–15)</div>
            <div className="row"><span className="ico">+</span> Solana network fees at cost (&lt; $1)</div>
            <div className="row"><span className="ico">+</span> Edge hosting included for 12 months</div>
            <div className="row"><span className="ico">+</span> Source repo under your account</div>
            <div className="row"><span className="ico">+</span> Pause &amp; redirect at every step</div>
            <div className="row"><span className="ico">+</span> No team allocation, no hidden bag</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "So whose coin is it — mine or yours?",
      a: "Yours. Fully. Neuron is just the agent that does the work — keys, fees, contract authority, domain, and site repo all stay with your wallet and account. We take a flat fee per launch and that's it. No hidden allocation, no team bag.",
    },
    {
      q: "Why tech and finance narratives?",
      a: "Because that's where the agent has an edge. It reads HN, arXiv, GitHub trending, on-chain RWA flows, and AI/infra twitter. Dog coins don't need a research agent — there are 4,000 already.",
    },
    {
      q: "Where does my coin actually launch?",
      a: "On Printr — Solana mainnet, omnichain liquidity, configurable fee router. The agent handles metadata, IPFS, and the deploy tx. You sign with your wallet. Neuron is built natively for Printr only.",
    },
    {
      q: "Can I edit the website it generates for me?",
      a: "Yes — it's your site. It ships as a static React + Tailwind project on the edge. You get the repo, the domain, and a one-click redeploy from the dashboard. Or hand it off to your dev.",
    },
    {
      q: "What does it cost me?",
      a: "Free for now — Neuron isn't charging an agent fee while we're early. Domain at cost. Solana fees at cost. If a step fails before mint, you don't pay.",
    },
    {
      q: "Can I steer it mid-run?",
      a: "Yes — every run pauses at narrative-locked, brand-locked, and pre-mint. You can redirect, regenerate, or cancel. Once the deploy tx fires, it's on-chain and final — and on-chain in your name.",
    },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Questions</span>
          <h2>Things people ask <em>before they sign.</em></h2>
        </div>
        <div className="faq-grid reveal">
          {items.map((it, i) => (
            <details className="faq-item" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus"/>
              </summary>
              <div className="answer">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section-tight">
      <div className="container">
        <div className="final-cta reveal">
          <div className="eyebrow" style={{justifyContent: 'center', display: 'inline-flex', marginBottom: 24}}>
            Ready when you are
          </div>
          <h2>Give it a vibe.<br/><em>Get a coin.</em></h2>
          <p>One signature, a few minutes, fully yours. No team bag, no rug, no wrapper.</p>
          <div className="cta-row">
            <a href="/try" className="btn btn-primary">
              <span className="btn-inner">Launch your coin <span className="arrow">→</span></span>
            </a>
            <a href="#faq" className="btn btn-ghost">Read the FAQ</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="inner">
          <div style={{maxWidth: 320}}>
            <div className="brand" style={{marginBottom: 18}}>
              <span className="mark"/><span>Neuron</span><span className="v">v0.4</span>
            </div>
            <p style={{fontSize: 14, color: 'var(--fg-dim)', lineHeight: 1.6, letterSpacing: '-0.005em'}}>
              The agent that launches your tech memecoin on Solana —
              narrative, domain, site, and mint. You sign once. It's yours.
            </p>
          </div>
          <div className="col">
            <h4>Product</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="/try">Launch your coin</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Connect</h4>
            <ul>
              <li><a href="https://x.com/neuronprintr" target="_blank" rel="noopener noreferrer">Twitter / X ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="copyright">
          <span>© 2026 Neuron · All systems nominal</span>
          <span>Not financial advice · Trade carefully</span>
        </div>
      </div>
    </footer>
  );
}

function useScrollReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach((el) => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useBentoCursor() {
  useEffect(() => {
    const tiles = document.querySelectorAll('.bento-tile');
    const handlers = [];
    tiles.forEach((tile) => {
      const onMove = (e) => {
        const r = tile.getBoundingClientRect();
        tile.style.setProperty('--mx', `${e.clientX - r.left}px`);
        tile.style.setProperty('--my', `${e.clientY - r.top}px`);
      };
      tile.addEventListener('mousemove', onMove);
      handlers.push([tile, onMove]);
    });
    return () => handlers.forEach(([t, h]) => t.removeEventListener('mousemove', h));
  }, []);
}

function CopyToast({ show }) {
  return (
    <div className={`copy-toast ${show ? 'on' : ''}`}>
      <span className="check"/>
      <span>Contract address copied</span>
      <span className="ca-mono">{NEURON_CA.slice(0, 4)}…{NEURON_CA.slice(-4)}</span>
    </div>
  );
}

function App() {
  useScrollReveal();
  useBentoCursor();
  const [copied, setCopied] = useState(false);
  const tRef = useRef(null);

  const copyCA = async () => {
    try {
      await navigator.clipboard.writeText(NEURON_CA);
    } catch {
      // fallback
      const ta = document.createElement('textarea');
      ta.value = NEURON_CA;
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch {}
      document.body.removeChild(ta);
    }
    setCopied(true);
    if (tRef.current) clearTimeout(tRef.current);
    tRef.current = setTimeout(() => setCopied(false), 2200);
  };

  return (
    <>
      <Nav/>
      <Hero onCopyCA={copyCA} copied={copied}/>
      <LiveTicker/>
      <Demo/>
      <HowItWorks/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>
      <Chatbot/>
      <CopyToast show={copied}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);