// screen-landing.jsx — Restrained hero per research synthesis.
// Wordmark + live pill top. Headline + subline. Three silver buttons.

function LandingScreen({ onNav }) {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      padding: '24px 20px 120px',
      position: 'relative'
    }}>

      {/* Top bar — wordmark + live status pill */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 'auto'
      }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 10,
          fontFamily: 'var(--font-display)',
          fontWeight: 700,
          fontSize: 15,
          letterSpacing: '-0.01em',
          color: 'var(--text)'
        }}>
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 26, height: 26,
            borderRadius: 7,
            background: 'linear-gradient(180deg, #1F262E, #0F1318)',
            border: '1px solid var(--green-line)',
            boxShadow: '0 0 12px var(--green-glow-2)',
            color: 'var(--green)',
            fontFamily: 'var(--font-mono)',
            fontWeight: 700,
            fontSize: 13,
            textShadow: '0 0 8px var(--green-glow)'
          }}>♠</span>
          POKER JAMIE
        </div>

        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          padding: '6px 10px',
          borderRadius: 999,
          background: 'rgba(0, 224, 138, 0.08)',
          border: '1px solid var(--green-line)',
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.14em',
          color: 'var(--green)',
          textTransform: 'uppercase',
          fontWeight: 600
        }}>
          <span style={{
            width: 6, height: 6,
            borderRadius: '50%',
            background: 'var(--green)',
            boxShadow: '0 0 8px var(--green)',
            animation: 'pulse 1.6s ease-in-out infinite'
          }}/>
          Live · WSOP 2026
        </div>
      </div>

      {/* Hero */}
      <div style={{
        textAlign: 'center',
        maxWidth: 520,
        margin: '0 auto',
        paddingTop: 32,
        paddingBottom: 36
      }}>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 'clamp(40px, 8vw, 68px)',
          lineHeight: 1.02,
          letterSpacing: '-0.035em',
          margin: 0,
          color: 'var(--text)',
          textWrap: 'balance'
        }}>
          Lock equity in <span style={{
            color: 'var(--green)',
            textShadow: '0 0 24px var(--green-glow)'
          }}>3 seconds</span>.
        </h1>
        <p style={{
          marginTop: 18,
          fontSize: 17,
          color: 'var(--text-3)',
          lineHeight: 1.5,
          maxWidth: 380,
          marginLeft: 'auto',
          marginRight: 'auto',
          textWrap: 'balance'
        }}>
          QR. Double-confirm. Done. <span style={{ color: 'var(--text-2)' }}>Don't get Jamied.</span>
        </p>
      </div>

      {/* The three silver buttons */}
      <div style={{
        width: '100%',
        maxWidth: 420,
        margin: '0 auto',
        display: 'flex',
        flexDirection: 'column',
        gap: 12
      }}>
        <HeroBtn
          label="Set the Terms"
          sub="Start a new swap"
          primary
          onClick={() => onNav('/new')}
        />
        <HeroBtn
          label="Scan a Code"
          sub="Lock a swap someone sent you"
          onClick={() => onNav('/scan')}
        />
        <HeroBtn
          label="My Locks"
          sub="View your locked swaps"
          onClick={() => onNav('/swaps')}
        />
      </div>

      {/* Footer trust signal (quiet) */}
      <div style={{
        marginTop: 'auto',
        paddingTop: 56,
        textAlign: 'center'
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.18em',
          color: 'var(--text-mute)',
          textTransform: 'uppercase'
        }}>
          Peer-to-peer · No custody · No house
        </div>
      </div>
    </div>
  );
}

function HeroBtn({ label, sub, primary, onClick }) {
  // Research-spec silver gradient + green glow
  const baseShadow = primary ? [
    'inset 0 1px 0 rgba(255,255,255,0.65)',
    'inset 0 -1px 0 rgba(0,0,0,0.28)',
    '0 0 0 1px #2A323C',
    '0 0 28px rgba(0,224,138,0.40)',
    '0 0 70px rgba(0,224,138,0.18)',
    '0 10px 28px rgba(0,0,0,0.55)'
  ].join(', ') : [
    'inset 0 1px 0 rgba(255,255,255,0.06)',
    '0 0 0 1px var(--border, #2A323C)',
    '0 0 0 1px rgba(255,255,255,0.02)',
    '0 4px 12px rgba(0,0,0,0.5)'
  ].join(', ');

  const hoverShadow = primary ? [
    'inset 0 1px 0 rgba(255,255,255,0.85)',
    'inset 0 -1px 0 rgba(0,0,0,0.28)',
    '0 0 0 1px #2A323C',
    '0 0 38px rgba(0,224,138,0.65)',
    '0 0 96px rgba(0,224,138,0.32)',
    '0 14px 36px rgba(0,0,0,0.7)'
  ].join(', ') : [
    'inset 0 1px 0 rgba(255,255,255,0.08)',
    '0 0 0 1px rgba(0,224,138,0.45)',
    '0 0 24px rgba(0,224,138,0.18)',
    '0 6px 16px rgba(0,0,0,0.6)'
  ].join(', ');

  return (
    <button
      onClick={onClick}
      style={{
        all: 'unset',
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 5,
        padding: primary ? '22px 24px' : '18px 24px',
        borderRadius: 14,
        background: primary
          ? 'linear-gradient(180deg, #E8ECEF 0%, #B8BFC8 55%, #8A929C 100%)'
          : '#151A20',
        color: primary ? '#0B0E11' : 'var(--text)',
        boxShadow: baseShadow,
        transition: 'transform 180ms cubic-bezier(0.4,0,0.2,1), box-shadow 240ms ease, background 240ms ease',
        textAlign: 'center',
        userSelect: 'none',
        position: 'relative'
      }}
      onMouseEnter={e => {
        e.currentTarget.style.transform = 'translateY(-1.5px)';
        e.currentTarget.style.boxShadow = hoverShadow;
        if (!primary) e.currentTarget.style.background = '#1F262E';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = baseShadow;
        if (!primary) e.currentTarget.style.background = '#151A20';
      }}
    >
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: primary ? 20 : 17,
        fontWeight: 700,
        letterSpacing: '-0.015em',
        color: 'inherit'
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.14em',
        color: primary ? '#3A3F47' : 'var(--text-3)',
        textTransform: 'uppercase',
        fontWeight: 600
      }}>{sub}</div>
    </button>
  );
}

window.LandingScreen = LandingScreen;