/* Matter Protocol — Hero adapted for the full landing page (auto-height) */

function HeroLanding() {
  const t = window.matterTokens;
  return (
    <div style={{
      width: '100%',
      background: t.bg,
      color: t.ink,
      fontFamily: "'Geist', system-ui, sans-serif",
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <MatterNav />

      {/* Subtle dot-grid background */}
      <div style={{
        position: 'absolute',
        inset: '60px 0 0 0',
        backgroundImage: `radial-gradient(${t.line2} 1px, transparent 1px)`,
        backgroundSize: '32px 32px',
        backgroundPosition: '0 0',
        opacity: 0.5,
        pointerEvents: 'none',
        maskImage: 'linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%)',
      }} />

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.05fr 1fr',
        gap: 80,
        padding: '90px 80px 110px',
        position: 'relative',
        maxWidth: 1600,
        margin: '0 auto',
        width: '100%',
      }}>
        {/* LEFT — copy */}
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, maxWidth: 600 }}>
          <div style={{
            fontFamily: "'Geist Mono', monospace",
            fontSize: 11.5,
            textTransform: 'uppercase',
            letterSpacing: '0.12em',
            color: t.muted,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 10,
          }}>
            <span style={{
              padding: '3px 7px',
              background: t.ink,
              color: t.bg,
              borderRadius: 4,
              letterSpacing: '0.06em',
              fontWeight: 500,
            }}>v0.4 · primitives sdk</span>
            <span>now in invite-only alpha</span>
          </div>

          <h1 style={{
            margin: 0,
            fontSize: 76,
            lineHeight: 0.98,
            letterSpacing: '-0.028em',
            fontWeight: 500,
            color: t.ink,
            textTransform: 'lowercase',
          }}>
            snap-together<br />
            strategies.<br />
            <span style={{ color: t.muted }}>ship in an afternoon.</span>
          </h1>

          <p style={{
            margin: 0,
            fontSize: 18,
            lineHeight: 1.5,
            color: t.ink2,
            maxWidth: 500,
          }}>
            matter is a library of typed trading primitives — entry, risk, rebalance, exit. compose them into an agent, deploy non-custodially, take LP capital without writing the boilerplate.
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href="#" onClick={(e) => { e.preventDefault(); window.matterUI?.openAccess?.(); }} style={{
              background: t.ink,
              color: t.bg,
              fontSize: 15,
              fontWeight: 500,
              padding: '14px 22px',
              borderRadius: 10,
              textDecoration: 'none',
              letterSpacing: '-0.005em',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              cursor: 'pointer',
            }}>
              start building
              <span style={{ opacity: 0.6 }}>→</span>
            </a>
            <a href="#composer-section" onClick={(e) => { e.preventDefault(); document.querySelector('#composer-section')?.scrollIntoView({ behavior: 'smooth' }); }} style={{
              background: 'transparent',
              color: t.ink,
              fontSize: 15,
              fontWeight: 500,
              padding: '14px 18px',
              borderRadius: 10,
              textDecoration: 'none',
              letterSpacing: '-0.005em',
              border: `1px solid ${t.line2}`,
              cursor: 'pointer',
            }}>try the composer</a>
          </div>

          <div style={{
            marginTop: 8,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 10,
            padding: '8px 12px 8px 8px',
            background: t.paper,
            border: `1px solid ${t.line}`,
            borderRadius: 8,
            fontFamily: "'Geist Mono', monospace",
            fontSize: 12.5,
            color: t.ink2,
            width: 'fit-content',
          }}>
            <span style={{
              width: 18, height: 18, borderRadius: 4,
              background: t.bg,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: t.muted, fontSize: 11,
            }}>$</span>
            <span><span style={{ color: t.muted }}>npm i </span>@matter/sdk</span>
            <span style={{ color: t.soft, marginLeft: 4 }}>·</span>
            <span style={{ color: t.muted }}>typescript</span>
          </div>
        </div>

        {/* RIGHT — assembled strategy */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <StrategyCardA />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroLanding });