/* AUREN — Landing page part 1: nav, hero, marquee, problem/solution, features */
const D = window.AURENData;

/* ---------------- Marketing Nav ---------------- */
function MarketingNav({ go }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onS); onS();
    return () => window.removeEventListener('scroll', onS);
  }, []);
  const links = [['Features', 'features'], ['How it works', 'how'], ['Token', 'token'], ['Roadmap', 'roadmap']];
  const jump = (id) => { setOpen(false); document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, height: 'var(--nav-h)',
      display: 'flex', alignItems: 'center',
      background: scrolled ? 'rgba(5,7,12,0.82)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--line)' : 'transparent'),
      transition: 'all .35s var(--ease)',
    }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', width: '100%', padding: '0 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={() => go('landing')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'none', border: 'none', cursor: 'pointer' }}>
          <img src="assets/auren-logo.png" alt="AUREN" style={{ height: 38, width: 38, objectFit: 'contain', filter: 'drop-shadow(0 0 10px rgba(24,224,255,0.4))' }} />
          <span className="font-display" style={{ fontSize: 21, fontWeight: 800, letterSpacing: '.16em', color: '#fff' }}>AUREN</span>
        </button>
        <div className="mk-links" style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
          {links.map(([l, id]) => (
            <button key={id} onClick={() => jump(id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-2)', fontSize: 14.5, fontWeight: 500, fontFamily: 'var(--font-body)', transition: 'color .2s' }}
              onMouseEnter={e => e.target.style.color = '#fff'} onMouseLeave={e => e.target.style.color = 'var(--text-2)'}>{l}</button>
          ))}
        </div>
        <div className="mk-cta" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="https://x.com/aurencompute" target="_blank" rel="noopener noreferrer" aria-label="AUREN on X"
            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 'var(--r-sm)', border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.03)', color: 'var(--text-2)', transition: 'all .2s var(--ease)' }}
            onMouseEnter={e => { e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--line)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-2)'; e.currentTarget.style.borderColor = 'var(--line-2)'; }}>
            <Icon name="xlogo" size={16} />
          </a>
          <Button variant="ghost" size="sm" onClick={() => go('auth-login')}>Sign in</Button>
          <Button variant="primary" size="sm" iconRight="arrow" onClick={() => go('auth-signup')}>Launch App</Button>
        </div>
        <button className="mk-burger" onClick={() => setOpen(o => !o)} style={{ display: 'none', background: 'none', border: 'none', color: '#fff', cursor: 'pointer' }}>
          <Icon name={open ? 'x' : 'menu'} size={24} />
        </button>
      </div>
      {open && (
        <div style={{ position: 'absolute', top: 'var(--nav-h)', left: 0, right: 0, background: 'rgba(5,7,12,0.97)', borderBottom: '1px solid var(--line)', padding: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {links.map(([l, id]) => <button key={id} onClick={() => jump(id)} style={{ background: 'none', border: 'none', textAlign: 'left', color: 'var(--text-1)', fontSize: 16, padding: '12px 8px', cursor: 'pointer', fontFamily: 'var(--font-body)' }}>{l}</button>)}
          <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
            <Button variant="ghost" size="sm" full onClick={() => go('auth-login')}>Sign in</Button>
            <Button variant="primary" size="sm" full onClick={() => go('auth-signup')}>Launch App</Button>
          </div>
          <a href="https://x.com/aurencompute" target="_blank" rel="noopener noreferrer"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 4, padding: '12px 8px', color: 'var(--text-1)', fontSize: 16, fontFamily: 'var(--font-body)' }}>
            <Icon name="xlogo" size={18} /> Follow on X
          </a>
        </div>
      )}
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ go }) {
  const heroRef = useThreeScene((c) => window.AURENThree.heroMesh(c), []);
  const s = D.networkStats;
  const liveStats = [
    { v: s.activeNodes, label: 'Active nodes', suffix: '' },
    { v: s.totalGpus, label: 'GPUs online', suffix: '' },
    { v: s.networkTflops, label: 'PetaFLOPS', dec: 1 },
    { v: s.regions, label: 'Regions', suffix: '' },
  ];
  return (
    <header style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      {/* canvas behind/right */}
      <div ref={heroRef} style={{ position: 'absolute', inset: 0, left: '32%', zIndex: 1, opacity: 0.95 }} className="hero-canvas-wrap" />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 50% at 75% 45%, rgba(24,200,255,0.10), transparent 70%)', zIndex: 0 }} />
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 28px', width: '100%', position: 'relative', zIndex: 3 }}>
        <div style={{ maxWidth: 640 }}>
          <div className="hero-in">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px 6px 8px', borderRadius: 100, background: 'rgba(24,224,255,0.06)', border: '1px solid var(--line-cyan)', marginBottom: 28 }}>
              <Badge color="cyan" dot>Live</Badge>
              <span style={{ fontSize: 13, color: 'var(--text-1)', fontWeight: 500 }}>Powered by Idle Protocol</span>
            </div>
            <h1 className="font-display" style={{ fontSize: 'clamp(40px, 7vw, 78px)', fontWeight: 800, lineHeight: 0.98, letterSpacing: '-.02em', marginBottom: 26 }}>
              <span className="text-chrome">The autonomous</span><br />
              <span className="text-chrome">compute </span><span className="text-cyan-grad">mesh</span>
            </h1>
            <p style={{ fontSize: 'clamp(16px, 2vw, 20px)', color: 'var(--text-2)', lineHeight: 1.62, maxWidth: 520, marginBottom: 36, textWrap: 'pretty' }}>
              GPU clusters connect into a programmable network. Workloads route dynamically. Execution settles automatically — the infrastructure layer for autonomous AI.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 56 }}>
              <Button variant="primary" size="lg" iconRight="arrow" onClick={() => go('auth-signup')}>Launch App</Button>
              <Button variant="outline" size="lg" icon="cube" onClick={() => document.getElementById('how')?.scrollIntoView({ behavior: 'smooth' })}>How it works</Button>
            </div>
            <div style={{ display: 'flex', gap: 'clamp(20px,4vw,48px)', flexWrap: 'wrap' }}>
              {liveStats.map((st, i) => <HeroStat key={i} {...st} />)}
            </div>
          </div>
        </div>
      </div>
      {/* scroll cue */}
      <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', zIndex: 3, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, opacity: 0.6 }}>
        <span className="eyebrow" style={{ fontSize: 10 }}>Scroll</span>
        <div style={{ width: 1, height: 38, background: 'linear-gradient(var(--cyan), transparent)' }} />
      </div>
    </header>
  );
}
function HeroStat({ v, label, suffix = '', dec = 0 }) {
  const n = useCountUp(v, 1800, dec);
  return (
    <div>
      <div className="font-display" style={{ fontSize: 'clamp(22px,3vw,30px)', fontWeight: 700, color: '#fff', lineHeight: 1 }}>
        {n.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec })}{suffix}
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 6, fontFamily: 'var(--font-mono)', letterSpacing: '.04em' }}>{label}</div>
    </div>
  );
}

/* ---------------- Logo marquee / trust ---------------- */
function TrustBar() {
  const items = ['IDLE PROTOCOL', 'NVIDIA H100', 'AMD MI300X', 'AUTONOMOUS AGENTS', 'GPU MARKETS', 'AI INFERENCE', 'MACHINE SETTLEMENT'];
  const row = [...items, ...items];
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '22px 0', overflow: 'hidden', position: 'relative', background: 'var(--bg-1)' }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', background: 'linear-gradient(90deg, var(--bg-1), transparent 12%, transparent 88%, var(--bg-1))' }} />
      <div style={{ display: 'flex', gap: 56, whiteSpace: 'nowrap', animation: 'marquee 32s linear infinite', width: 'max-content' }}>
        {row.map((t, i) => (
          <span key={i} style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '.22em', color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 56 }}>
            {t}<span style={{ width: 5, height: 5, borderRadius: 5, background: 'var(--cyan)', opacity: 0.5 }} />
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Problem / Solution ---------------- */
function ProblemSolution() {
  return (
    <section style={{ padding: 'clamp(80px,12vh,140px) 0', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 28px' }}>
        <Reveal><SectionHead eyebrow="The shift" title="AI infrastructure is fragmented. AUREN makes it one fabric." center /></Reveal>
        <div className="ps-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 56 }}>
          <Reveal delay={60}>
            <Panel style={{ padding: 36, height: '100%', position: 'relative', overflow: 'hidden' }}>
              <Badge color="red">The Problem</Badge>
              <h3 className="font-display" style={{ fontSize: 24, fontWeight: 700, margin: '18px 0 14px', color: '#fff' }}>Compute lives in silos</h3>
              <p style={{ color: 'var(--text-2)', lineHeight: 1.65, marginBottom: 24 }}>
                Resources are isolated, inference scaling is centralized, and workload coordination is inefficient for autonomous systems that need elastic, machine-native capacity.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Isolated GPU clusters', 'Centralized inference scaling', 'Manual coordination overhead', 'No machine-native settlement'].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--text-2)', fontSize: 14.5 }}>
                    <span style={{ color: 'var(--red)', display: 'flex' }}><Icon name="x" size={16} /></span>{t}
                  </div>
                ))}
              </div>
            </Panel>
          </Reveal>
          <Reveal delay={140}>
            <Panel glow style={{ padding: 36, height: '100%', position: 'relative', overflow: 'hidden', borderColor: 'var(--line-cyan)' }}>
              <div style={{ position: 'absolute', top: 0, right: 0, width: 200, height: 200, background: 'radial-gradient(circle at 70% 30%, rgba(24,224,255,0.14), transparent 70%)', pointerEvents: 'none' }} />
              <Badge color="cyan">The Solution</Badge>
              <h3 className="font-display" style={{ fontSize: 24, fontWeight: 700, margin: '18px 0 14px', color: '#fff' }}>An autonomous compute mesh</h3>
              <p style={{ color: 'var(--text-1)', lineHeight: 1.65, marginBottom: 24 }}>
                GPU clusters connect into programmable networks. Workloads route dynamically to optimal capacity, and execution settles automatically through Idle-powered rails.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Unified programmable mesh', 'Dynamic workload routing', 'Autonomous capacity scaling', 'Instant machine settlement'].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--text-1)', fontSize: 14.5 }}>
                    <span style={{ color: 'var(--cyan)', display: 'flex' }}><Icon name="check" size={16} /></span>{t}
                  </div>
                ))}
              </div>
            </Panel>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Core Features ---------------- */
function Features() {
  return (
    <section id="features" style={{ padding: 'clamp(80px,12vh,140px) 0', position: 'relative', background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 28px' }}>
        <Reveal><SectionHead eyebrow="Core capabilities" title="Everything the machine economy needs to compute" sub="Six primitives that turn isolated accelerators into one elastic, self-coordinating fabric." center /></Reveal>
        <div className="feat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginTop: 56 }}>
          {D.features.map((f, i) => (
            <Reveal key={f.title} delay={i * 70}>
              <Panel hover className="feat-card" style={{ padding: 30, height: '100%', cursor: 'default' }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(24,224,255,0.08)', border: '1px solid var(--line-cyan)', color: 'var(--cyan)', marginBottom: 22, boxShadow: 'inset 0 0 16px rgba(24,224,255,0.12)' }}>
                  <Icon name={f.icon} size={26} stroke={1.5} />
                </div>
                <h3 className="font-display" style={{ fontSize: 18.5, fontWeight: 600, color: '#fff', marginBottom: 10, letterSpacing: '.005em' }}>{f.title}</h3>
                <p style={{ color: 'var(--text-2)', fontSize: 14.5, lineHeight: 1.6, textWrap: 'pretty' }}>{f.desc}</p>
              </Panel>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MarketingNav, Hero, TrustBar, ProblemSolution, Features });