/* global React, Avatar */
// screens-palettes.jsx — 4 alternate-palette mood boards.
// Each card shows the palette stack + a mini mock rendered in that palette,
// so you can feel how the screens would look in each direction.

const PALETTES = [
  {
    id: 'dusk',
    name: 'Augusta at dusk',
    sub: 'Current default · pine on near-black',
    bg: '#0a0a0a', surface: '#141414', surface2: '#1c1c1c', hairline: '#262626',
    text: '#f5f5f4', text2: '#a3a3a3', text3: '#525252',
    accent: '#1f8a5b', accentMute: '#0c3d28',
  },
  {
    id: 'dawn',
    name: 'Augusta at dawn',
    sub: 'Cream-on-coffee · sunlit pine',
    bg: '#14110d', surface: '#1c1814', surface2: '#25201a', hairline: '#2e2820',
    text: '#faf5e9', text2: '#a39a85', text3: '#5a5142',
    accent: '#2b9a6a', accentMute: '#0e4530',
  },
  {
    id: 'fireplace',
    name: 'Clubhouse fireplace',
    sub: 'Warm dark · aged brass accent',
    bg: '#110a07', surface: '#1a120c', surface2: '#221811', hairline: '#2d2117',
    text: '#f7eee2', text2: '#a8957d', text3: '#5e4f3d',
    accent: '#b8814b', accentMute: '#3b2914',
  },
  {
    id: 'moonlit',
    name: 'Moonlit fairway',
    sub: 'Cool charcoal · silver sage',
    bg: '#0a0d0b', surface: '#131816', surface2: '#1c2220', hairline: '#262d2a',
    text: '#f4f6f4', text2: '#97a39b', text3: '#4a534f',
    accent: '#5d8e72', accentMute: '#19342a',
  },
];

function PaletteBoard({ p }) {
  // A single-palette mood board: stack + mini mock.
  return (
    <div style={{
      width: 340, height: 540, background: p.bg, color: p.text,
      fontFamily: "'Inter', -apple-system, system-ui, sans-serif",
      WebkitFontSmoothing: 'antialiased',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Title */}
      <div style={{ padding: '20px 20px 14px' }}>
        <div style={{
          font: '500 11px/16px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 11,
          color: p.text3,
        }}>Palette</div>
        <div style={{ font: '600 20px/26px Inter', color: p.text, marginTop: 2,
          letterSpacing: -0.01 * 20 }}>{p.name}</div>
        <div style={{ font: '400 13px/18px Inter', color: p.text2, marginTop: 2 }}>{p.sub}</div>
      </div>

      {/* Color stack */}
      <div style={{ padding: '0 20px 16px', display: 'flex', gap: 6 }}>
        {[p.bg, p.surface, p.surface2, p.hairline, p.text, p.accent, p.accentMute].map((c, i) => (
          <div key={i} style={{
            flex: 1, height: 28, background: c, borderRadius: 4,
            border: c === p.bg ? `1px solid ${p.hairline}` : 'none',
          }} />
        ))}
      </div>

      {/* Mini mockup: pool card */}
      <div style={{
        margin: '0 16px', background: p.surface, borderRadius: 12, padding: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <span style={{
            font: '500 10px/14px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
            color: p.text3,
          }}>PGA Salary Cap</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '0 8px', height: 20, borderRadius: 999,
            background: hex2rgba(p.accent, 0.15), color: p.accent,
            font: '500 10px/1 Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: p.accent }} />
            Live
          </span>
        </div>
        <div style={{ font: '600 16px/22px Inter', color: p.text }}>PGA Champ · Sunday</div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 12,
        }}>
          {[['Pts', '268.1'], ['Rank', '2/47'], ['PHR', '1428']].map(([l, v], i) => (
            <div key={i}>
              <div style={{
                font: '500 10px/14px Inter', textTransform: 'uppercase', letterSpacing: 0.04 * 10,
                color: p.text3,
              }}>{l}</div>
              <div style={{ font: '700 20px/26px Inter', color: p.text, marginTop: 2,
                fontFeatureSettings: '"tnum"' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Mini roster row */}
      <div style={{
        margin: '12px 16px 0', background: p.surface, borderRadius: 12, overflow: 'hidden',
      }}>
        {[
          { n: 'Scottie Scheffler', pos: 'USA', pts: '87.6', pr: '$56', live: true },
          { n: 'Rory McIlroy',      pos: 'NIR', pts: '71.2', pr: '$52', live: true },
        ].map((g, i) => (
          <div key={i} style={{
            height: 56, padding: '0 14px',
            display: 'flex', alignItems: 'center', gap: 10,
            borderTop: i > 0 ? `1px solid ${p.hairline}` : 'none',
            position: 'relative',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 999,
              background: p.surface2, color: p.text2,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: '600 12px/1 Inter',
            }}>{g.n.split(/\s+/).map(s => s[0]).join('').slice(0, 2)}</div>
            <div style={{ flex: 1 }}>
              <div style={{ font: '600 13px/18px Inter', color: p.text }}>{g.n}</div>
              <div style={{ font: '400 11px/14px Inter', color: p.text2 }}>{g.pos} · Thru 12</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ font: '500 11px/14px Inter', color: p.text2,
                fontFeatureSettings: '"tnum"' }}>{g.pr}</div>
              <div style={{ font: '600 14px/18px Inter', color: p.text,
                fontFeatureSettings: '"tnum"', marginTop: 1 }}>{g.pts}</div>
            </div>
            {g.live && (
              <div style={{
                position: 'absolute', right: 0, top: 8, bottom: 8, width: 2,
                background: p.accent, borderRadius: 1,
              }} />
            )}
          </div>
        ))}
      </div>

      {/* CTA */}
      <div style={{ padding: '16px 16px 20px' }}>
        <button style={{
          height: 44, width: '100%', borderRadius: 8,
          background: p.accent, color: p.bg, border: 'none',
          font: '600 14px/1 Inter', cursor: 'pointer',
        }}>Open lineup</button>
      </div>
    </div>
  );
}

function hex2rgba(hex, a) {
  const x = hex.replace('#', '');
  const r = parseInt(x.slice(0,2), 16), g = parseInt(x.slice(2,4), 16), b = parseInt(x.slice(4,6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

Object.assign(window, { PALETTES, PaletteBoard });