const { Button } = window.WAGMIGlobalDesignSystem_6f9300;

function Logo({ size = 28 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <img src="../assets/logo-mark.svg" alt="" style={{ height: size }} />
      <span style={{ display: 'inline-flex', flexDirection: 'column', fontFamily: 'var(--font-display)', color: 'var(--paper-100)' }}>
        <span style={{ fontSize: size * 0.75, fontWeight: 700, letterSpacing: '0.01em', lineHeight: 0.9 }}>WAGMI</span>
        <span style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontSize: size * 0.32, fontWeight: 500, lineHeight: 1, marginTop: 2 }}>{'GLOBAL'.split('').map((c, i) => <span key={i}>{c}</span>)}</span>
      </span>
    </span>
  );
}
window.Logo = Logo;

function Nav({ onStart }) {
  const links = [['Approach', '#approach'], ['Capabilities', '#capabilities'], ['Studio', '#record'], ['Contact', '#contact']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, backdropFilter: 'blur(14px)', background: 'rgba(8,9,12,0.72)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '15px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ textDecoration: 'none' }}><Logo /></a>
        <nav style={{ display: 'flex', gap: 34 }}>
          {links.map(([l, h]) => (
            <a key={l} href={h} style={{ color: 'var(--text-secondary)', textDecoration: 'none', fontSize: 14.5, fontWeight: 500, letterSpacing: '0.01em' }}
              onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-primary)')}
              onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-secondary)')}>{l}</a>
          ))}
        </nav>
        <Button variant="accent" size="sm" onClick={onStart}>Start a project</Button>
      </div>
    </header>
  );
}
window.Nav = Nav;

function Hero({ onStart }) {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-glow-violet)', opacity: 0.7, pointerEvents: 'none' }} />
      <HeroCubes />
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '110px 32px 96px' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '7px 14px', fontSize: 12, letterSpacing: '0.06em', color: 'var(--text-secondary)' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--lime-500)', boxShadow: '0 0 8px var(--lime-500)' }} />
          Web3 venture studio · Operating since 2017
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 78, lineHeight: 0.98, letterSpacing: '-0.025em', margin: '30px 0 0', color: 'var(--paper-100)', maxWidth: 980 }}>
          We don't advise founders.<br /><span style={{ color: 'var(--lime-500)' }}>We build beside them.</span>
        </h1>
        <p style={{ marginTop: 30, maxWidth: 560, fontSize: 19, lineHeight: 1.55, color: 'var(--text-secondary)' }}>
          Most Web3 projects die in the gap between a great idea and shipped execution. WAGMI Global is the senior operating team that closes it: strategy, product, growth and operations working as one.
        </p>
        <div style={{ display: 'flex', gap: 16, marginTop: 38 }}>
          <Button variant="accent" onClick={onStart}>Start a project</Button>
          <Button variant="ghost" href="#approach">See how we work</Button>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function HeroCubes() {
  const [svg, setSvg] = React.useState('');
  React.useEffect(() => {
    let on = true;
    fetch('../assets/hero-cubes.svg').then((r) => r.text()).then((t) => { if (on) setSvg(t); });
    return () => { on = false; };
  }, []);
  return (
    <div aria-hidden="true" dangerouslySetInnerHTML={{ __html: svg }}
      style={{ position: 'absolute', right: 40, top: 40, width: 620, opacity: 0.5, maskImage: 'radial-gradient(60% 60% at 60% 40%, #000 40%, transparent 78%)', WebkitMaskImage: 'radial-gradient(60% 60% at 60% 40%, #000 40%, transparent 78%)', pointerEvents: 'none' }} />
  );
}
window.HeroCubes = HeroCubes;