/* Matter Protocol — Hero Variation A
 * "literal block-composition"
 * Headline + sub + CTAs left, snapped strategy diagram right.
 */

function HeroA() {
  const t = window.matterTokens;
  return (
    <div style={{
      width: '100%',
      height: '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={{
        flex: 1,
        display: 'grid',
        gridTemplateColumns: '1.05fr 1fr',
        gap: 80,
        padding: '90px 80px 70px',
        position: 'relative',
      }}>
        {/* 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 to a vault, take LP capital non-custodially.
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href="#" 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,
            }}>
              start building
              <span style={{ opacity: 0.6 }}>→</span>
            </a>
            <a href="#" 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}`,
            }}>read the docs</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>
  );
}

function StrategyCardA() {
  const t = window.matterTokens;
  return (
    <div style={{
      width: 460,
      background: t.surface,
      border: `1px solid ${t.line}`,
      borderRadius: 18,
      padding: 22,
      boxShadow: `0 1px 0 ${t.line}, 0 30px 60px -30px rgba(20,19,15,0.16)`,
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      position: 'relative',
    }}>
      {/* Card head */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 22, height: 22, borderRadius: 6,
            background: t.ink, color: t.lime,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: "'Geist Mono', monospace", fontSize: 12, fontWeight: 500,
          }}>S</span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, color: t.ink, letterSpacing: '-0.005em' }}>
              mean-rev-eth
            </div>
            <div style={{
              fontFamily: "'Geist Mono', monospace",
              fontSize: 10.5,
              color: t.muted,
              letterSpacing: '0.04em',
              textTransform: 'uppercase',
            }}>strategy · 4 primitives</div>
          </div>
        </div>
        <span style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 10.5,
          color: t.muted,
          textTransform: 'uppercase',
          letterSpacing: '0.08em',
          padding: '4px 8px',
          border: `1px solid ${t.line2}`,
          borderRadius: 6,
        }}>composed</span>
      </div>

      <div style={{ height: 1, background: t.line, margin: '2px 0' }} />

      {/* Stack of primitives */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'relative' }}>
        <PrimitiveBlock category="entry" name="emaCross" params="fast: 12 · slow: 26" />
        <PrimitiveBlock category="risk" name="volTarget" params="sigma: 0.18 · lookback: 30d" />
        <PrimitiveBlock category="rebalance" name="timeRebal" params="daily · 00:00 UTC" />
        <PrimitiveBlock category="exit" name="trailStop" params="pct: 4.5 · activate: +2%" />
        <PrimitiveBlock category="entry" name="add a primitive" dashed />
      </div>

      {/* Footer with deploy */}
      <div style={{ height: 1, background: t.line, margin: '2px 0' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 11.5,
          color: t.muted,
        }}>
          types ✓ · interfaces ✓ · ready to deploy
        </div>
        <button onClick={() => window.matterUI?.openAccess?.()} style={{
          background: t.lime,
          color: t.ink,
          fontSize: 13,
          fontWeight: 500,
          padding: '8px 14px',
          borderRadius: 8,
          border: 'none',
          letterSpacing: '-0.005em',
          cursor: 'pointer',
        }}>deploy →</button>
      </div>
    </div>
  );
}

Object.assign(window, { HeroA });