// Phone mockups for the landing page — faithful recreations of the Figma
// high-fidelity screens (light bg, mint alternating rows, teal/forest accent).

const t = window.A;

// ─── Figma-accurate color tokens (from /All-Screens2 source jsx) ─
const fig = {
  bg:       '#F2F2F2',
  group:    '#FAFAFA',
  surface:  '#FEFEFE',
  text:     '#232323',
  textMute: '#A1A1A1',
  textDim:  '#636363',
  forest:   '#004C35',   // primary dark green
  teal:     '#328185',   // accent (links, View Active Bets)
  mint:     '#E2F3F0',   // even rows
  mintAlt:  '#E1F7F7',   // alt mint
  outline:  '#E2E2E2',
  filled:   '#FEFEFE',
  green:    '#0A7E31',   // bright green for status pills
};

function PhoneShell({ w = 220, h = 460, children, featured, image, alt }) {
  return (
    <div style={{
      width: w, height: h, borderRadius: w * 0.16,
      border: '1.5px solid rgba(201,168,76,0.28)',
      background: 'linear-gradient(160deg, #1F4233 0%, #0E2219 55%, #162E22 100%)',
      boxShadow: '0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06)',
      padding: 6, position: 'relative', overflow: 'hidden',
      flexShrink: 0,
      transform: featured ? 'translateY(-24px)' : 'translateY(0)',
    }}>
      {/* gold notch only when no image (image already has iOS status bar) */}
      {!image && (
        <div style={{
          position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)',
          width: w * 0.28, height: 5, background: 'rgba(201,168,76,0.22)', borderRadius: 3, zIndex: 5,
        }}/>
      )}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 4,
        background: 'linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 55%)',
      }}/>
      <div style={{
        width: '100%', height: '100%', borderRadius: w * 0.14,
        overflow: 'hidden', background: fig.bg,
        fontFamily: "'Open Sans', -apple-system, sans-serif",
        position: 'relative', zIndex: 1,
      }}>
        {image ? (
          <img src={image} alt={alt || ''}
               style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }}/>
        ) : children}
      </div>
    </div>
  );
}

// shared mini app bar
function AppBar({ title }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', padding: '22px 12px 12px',
      background: fig.bg,
    }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={fig.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 10 }}>
        <path d="M15 18l-6-6 6-6"/>
      </svg>
      <span style={{ font: `700 13px/1 inherit`, color: fig.text }}>{title}</span>
    </div>
  );
}

// hole + par pill row
function HolePill({ hole = 6, par = 4 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '4px 0 10px' }}>
      <span style={{ font: `700 11px/1 inherit`, color: fig.text }}>Hole</span>
      <span style={{
        background: fig.forest, color: '#fff',
        width: 18, height: 18, borderRadius: 999,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        font: `700 10px/1 inherit`,
      }}>{hole}</span>
      <span style={{
        marginLeft: 6,
        border: `1px solid ${fig.outline}`,
        background: fig.surface,
        borderRadius: 999, padding: '3px 8px',
        font: `400 10px/1 inherit`, color: fig.text,
      }}>Par: {par}</span>
    </div>
  );
}

// segmented chips (figma style — outlined pills, dark green when active)
function ChipRow({ items, activeIdx }) {
  return (
    <div style={{ padding: '0 10px', display: 'flex', flexWrap: 'wrap', gap: 5 }}>
      {items.map((label, i) => {
        const active = i === activeIdx;
        return (
          <span key={label} style={{
            border: `1px solid ${active ? fig.forest : fig.outline}`,
            background: active ? fig.forest : fig.surface,
            color: active ? '#fff' : fig.text,
            borderRadius: 999, padding: '4px 9px',
            font: `${active ? 700 : 400} 9px/1 inherit`,
            whiteSpace: 'nowrap',
          }}>{label}</span>
        );
      })}
    </div>
  );
}

// ─── Phone 1: Active round — Skins leaderboard ────────────────────
function PhoneActiveRound({ live = false }) {
  // Live mode: rows cycle through 3 states, scores tick up, position swaps.
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!live) return;
    const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion) return;
    const id = setInterval(() => setTick(t => t + 1), 3200);
    return () => clearInterval(id);
  }, [live]);

  const states = [
    [
      ['1', 'André L. (you)', '2', '$15.00', false],
      ['2', 'Connor J.',       '1', '$5.00',  true],
      ['3', 'Jack L.',         '1', '$5.00',  false],
      ['4', 'Daniel D.',       '0', '$0.00',  true],
      ['5', 'Sarah L.',        '0', '$0.00',  false],
      ['6', 'Michael T.',      '0', '$0.00',  true],
    ],
    [
      ['1', 'André L. (you)', '3', '$20.00', false],
      ['2', 'Connor J.',       '1', '$5.00',  true],
      ['3', 'Jack L.',         '1', '$5.00',  false],
      ['4', 'Daniel D.',       '0', '$0.00',  true],
      ['5', 'Sarah L.',        '0', '$0.00',  false],
      ['6', 'Michael T.',      '0', '$0.00',  true],
    ],
    [
      ['1', 'André L. (you)', '3', '$20.00', false],
      ['2', 'Connor J.',       '2', '$10.00', true],
      ['3', 'Jack L.',         '1', '$5.00',  false],
      ['4', 'Michael T.',      '1', '$5.00',  true],
      ['5', 'Daniel D.',       '0', '$0.00',  false],
      ['6', 'Sarah L.',        '0', '$0.00',  true],
    ],
  ];
  const rows = states[tick % states.length];
  const hole = live ? 4 + (tick % 5) : 6;
  const thru = live ? `Hole ${3 + (tick % 4)}` : 'Hole 4';
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: 'inherit' }}>
      <AppBar title="Active Round"/>
      <HolePill hole={hole} par={4}/>
      <div style={{
        margin: '0 8px', background: fig.group, padding: '10px 10px 12px',
        borderRadius: 6, display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{ font: `700 11px/1 inherit`, color: fig.text }}>Leaderboard</div>
        <ChipRow items={['Stableford (1)','Stableford (2)','Match','Stroke','Skins']} activeIdx={4}/>
      </div>

      <div style={{ padding: '10px 12px 0', flex: 1, overflow: 'hidden' }}>
        <div style={{ font: `400 10px/1 inherit`, color: fig.text, marginBottom: 8 }}>
          Thru: <strong style={{ fontWeight: 700 }}>{thru}</strong>
          {live && <span style={{
            display: 'inline-block', marginLeft: 6, width: 5, height: 5, borderRadius: 999,
            background: fig.green, animation: 'anteeBlink 1.4s ease-in-out infinite',
            verticalAlign: 'middle',
          }}/>}
        </div>
        <div style={{
          border: `1px solid ${fig.outline}`, borderRadius: 4, overflow: 'hidden',
          background: fig.surface,
        }}>
          {/* header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '22px 1fr 28px 38px',
            padding: '6px 8px',
            font: `700 8px/1 inherit`, color: fig.textDim,
            background: fig.surface, borderBottom: `1px solid ${fig.outline}`,
          }}>
            <span>Pos</span><span>Player</span><span style={{ textAlign: 'center' }}>Skins</span><span style={{ textAlign: 'right' }}>Value</span>
          </div>
          {rows.map(([pos, name, skins, value, alt], i) => (
            <div key={name} style={{
              display: 'grid', gridTemplateColumns: '22px 1fr 28px 38px',
              padding: '6px 8px',
              background: alt ? fig.mint : fig.surface,
              font: `400 9px/1.1 inherit`, color: fig.text,
              borderTop: i > 0 ? `1px solid ${fig.outline}` : 'none',
              alignItems: 'center',
              transition: 'background 600ms ease',
            }}>
              <span>{pos}</span>
              <span style={{ font: `${name.includes('(you)') ? 600 : 400} 9px/1 inherit` }}>{name}</span>
              <span style={{ textAlign: 'center' }}>{skins}</span>
              <span style={{ textAlign: 'right', fontWeight: 700 }}>{value}</span>
            </div>
          ))}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-around',
          marginTop: 14, gap: 8,
        }}>
          <span style={{ font: `700 10px/1 inherit`, color: fig.teal }}>View Active Bets</span>
          <span style={{ font: `700 10px/1 inherit`, color: fig.teal }}>View Scorecard</span>
        </div>
      </div>

      <div style={{ padding: '10px 12px 14px' }}>
        <div style={{
          background: fig.forest, color: '#fff',
          borderRadius: 6, padding: '10px 0',
          textAlign: 'center', font: `700 11px/1 inherit`,
        }}>Enter Score</div>
      </div>
    </div>
  );
}

// ─── Phone 2: Per-player scorecard ────────────────────────────────
function PhoneScorecard() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: 'inherit' }}>
      <AppBar title="Active Round"/>
      <HolePill hole={6} par={4}/>

      <div style={{
        margin: '0 8px', background: fig.group, padding: '10px',
        borderRadius: 6,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <span style={{ font: `700 10px/1 inherit`, color: fig.text }}>Game Type</span>
          <div style={{ display: 'flex', gap: 3 }}>
            <span style={{
              background: fig.teal, padding: '2px 5px', borderRadius: 3,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill={fig.surface}>
                <rect x="3" y="3" width="6" height="18" rx="1"/>
                <rect x="11" y="3" width="6" height="18" rx="1"/>
                <rect x="19" y="3" width="2" height="18"/>
              </svg>
            </span>
            <span style={{
              border: `1px solid ${fig.outline}`, padding: '2px 5px', borderRadius: 3,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill={fig.text}>
                <rect x="3" y="4" width="18" height="2"/>
                <rect x="3" y="11" width="18" height="2"/>
                <rect x="3" y="18" width="18" height="2"/>
              </svg>
            </span>
          </div>
        </div>
        <ChipRow items={['Stableford (1)','Stableford (2)','Match','Stroke','Skins']} activeIdx={0}/>
        <div style={{ marginTop: 10, font: `700 9px/1 inherit`, color: fig.text }}>Players</div>
        <div style={{ display: 'flex', gap: 4, marginTop: 6, overflow: 'hidden' }}>
          {[
            ['AL', 'André L.', true],
            ['CJ', 'Connor J.', false],
            ['DD', 'Daniel D.', false],
          ].map(([init, name, active]) => (
            <span key={init} style={{
              border: `1px solid ${active ? fig.forest : fig.outline}`,
              background: active ? fig.forest : fig.surface,
              color: active ? '#fff' : fig.text,
              borderRadius: 999, padding: '3px 7px 3px 3px',
              display: 'inline-flex', alignItems: 'center', gap: 4,
              font: `${active ? 700 : 400} 8px/1 inherit`,
            }}>
              <span style={{
                width: 13, height: 13, borderRadius: 999,
                background: active ? '#fff' : fig.mintAlt,
                color: active ? fig.forest : fig.teal,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                font: `700 6px/1 inherit`,
              }}>{init}</span>
              {name}
            </span>
          ))}
        </div>
      </div>

      <div style={{ padding: '10px 12px', flex: 1, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 6 }}>
          <span style={{
            width: 16, height: 16, borderRadius: 999,
            background: fig.mintAlt, color: fig.teal,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            font: `700 7px/1 inherit`,
          }}>AL</span>
          <span style={{ font: `700 11px/1 inherit`, color: fig.text }}>André Lisboa (you)</span>
          <span style={{
            border: `1px solid ${fig.outline}`, borderRadius: 4, padding: '2px 5px',
            font: `400 8px/1 inherit`, color: fig.text,
          }}>HCP: <strong>8.1</strong></span>
        </div>
        <div style={{
          border: `1px solid ${fig.outline}`, borderRadius: 4, overflow: 'hidden',
          background: fig.surface,
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '24px 1fr 36px 32px',
            padding: '5px 8px',
            font: `700 7px/1 inherit`, color: fig.textDim,
            borderBottom: `1px solid ${fig.outline}`,
          }}>
            <span>Hole</span><span>Result</span><span style={{ textAlign: 'center' }}>Strokes</span><span style={{ textAlign: 'right' }}>Pts</span>
          </div>
          {[
            [1, 'Bogey',        '5', '1', false],
            [2, 'Par',          '3', '8', true],
            [3, 'Par',          '6', '0', false],
            [4, 'Birdie',       '4', '1', true],
            [5, 'Double Bogey', '5', '1', false],
          ].map(([hole, res, str, pts, alt], i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '24px 1fr 36px 32px',
              padding: '5px 8px',
              background: alt ? fig.mint : fig.surface,
              font: `400 9px/1.1 inherit`, color: fig.text,
              borderTop: i > 0 ? `1px solid ${fig.outline}` : 'none',
              alignItems: 'center',
            }}>
              <span>{hole}</span>
              <span>{res}</span>
              <span style={{ color: fig.teal, fontWeight: 700, textAlign: 'center' }}>{str}</span>
              <span style={{ fontWeight: 700, textAlign: 'right' }}>{pts}</span>
            </div>
          ))}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 50px',
            padding: '5px 8px', borderTop: `1px solid ${fig.outline}`,
            font: `700 9px/1.1 inherit`, color: fig.text,
          }}>
            <span>Subtotal:</span>
            <span style={{ textAlign: 'right' }}>11 pts</span>
          </div>
        </div>
        <div style={{ marginTop: 8, textAlign: 'right' }}>
          <span style={{ font: `700 9px/1 inherit`, color: fig.teal }}>Add Score  +</span>
        </div>
      </div>
    </div>
  );
}

// ─── Phone 3: Active Wagers (Match Play Nassau / Skins progress) ─
function PhoneWallet() {
  const Row = ({ k, v }) => (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '6px 0', font: `400 9px/1.2 inherit`, color: fig.text,
    }}>
      <span>{k}</span>
      <span style={{ fontWeight: 700 }}>{v}</span>
    </div>
  );
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: 'inherit' }}>
      <AppBar title="Active Wagers"/>

      <div style={{ padding: '4px 12px 12px', flex: 1, overflowY: 'hidden' }}>
        <div style={{
          background: fig.group, padding: '10px 12px',
          borderRadius: 6, marginBottom: 8,
        }}>
          <div style={{ font: `700 11px/1.2 inherit`, color: fig.text }}>Match Play Nassau</div>
          <div style={{ font: `400 9px/1.2 inherit`, color: fig.textDim, marginTop: 2 }}>15 · 15 · 30</div>
          <div style={{ marginTop: 8 }}>
            <span style={{
              background: fig.green, color: '#fff',
              padding: '2px 7px', borderRadius: 999,
              font: `700 8px/1 inherit`,
            }}>In Progress</span>
          </div>
          <div style={{ marginTop: 10, paddingTop: 8, borderTop: `1px solid ${fig.outline}` }}>
            <Row k="Front 9"     v={<span style={{ color: fig.green }}>+1 up · $10</span>}/>
            <Row k="Back 9"      v="All Square"/>
            <Row k="Overall 18"  v={<span style={{ color: '#C0392B' }}>−2 down · $20</span>}/>
          </div>
          <div style={{
            marginTop: 8, paddingTop: 8, borderTop: `1px solid ${fig.outline}`,
            font: `400 8px/1.3 inherit`, color: fig.textDim,
          }}>
            <strong style={{ color: fig.text }}>Active press</strong> · started hole 7
          </div>
        </div>

        <div style={{
          background: fig.group, padding: '10px 12px', borderRadius: 6,
        }}>
          <div style={{ font: `700 11px/1.2 inherit`, color: fig.text }}>Skins</div>
          <div style={{ marginTop: 6 }}>
            <Row k="Skins contested" v="18"/>
            <Row k="Value per skin"  v="$5"/>
            <Row k="Won so far"      v={<span style={{ color: fig.green }}>5</span>}/>
            <Row k="Carryovers"      v="3"/>
          </div>
          <div style={{
            marginTop: 6, paddingTop: 6, borderTop: `1px solid ${fig.outline}`,
            font: `400 9px/1.3 inherit`, color: fig.text,
          }}>Winners: <strong>John (3)</strong>, <strong>Anna (2)</strong></div>
          <div style={{
            marginTop: 6, paddingTop: 6, borderTop: `1px solid ${fig.outline}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span style={{ font: `400 9px/1 inherit`, color: fig.text }}>Total Pot</span>
            <span style={{ font: `700 13px/1 inherit`, color: fig.forest }}>$25</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneShell, PhoneActiveRound, PhoneScorecard, PhoneWallet });