// Games screen — 4 wedding games with rules
const { useState: useStateGm } = React;

const GAMES = [
  {
    id:'flowers',
    title:'çiçek avı',
    kicker:'01',
    desc:'Salona dağılmış 6 küçük buket. Bulan masaya küçük bir hediye.',
    rules:[
      'Buketler 19:30\'da salona saklanır.',
      'Sadece bir tane bulabilirsin (paylaşmak yasak değil ama).',
      'Bulan kişi buketi DJ booth\'a teslim eder, yerine bir koliyle hediye alır.',
      'Saat 21:00\'a kadar bulunmayanları DJ Malik açıklar.',
    ],
    time:'19:30 → 21:00',
    party:'Tüm misafirler',
    hue:0,
  },
  {
    id:'shoe',
    title:'ayakkabı oyunu',
    kicker:'02',
    desc:'Beyza ve Emin sırt sırta, ellerinde birer ayakkabı. Sorulara cevap.',
    rules:[
      'Çift birbirine sırt çevirir, her birinin elinde bir kendi bir eşinin ayakkabısı.',
      'Soru gelince "kim" daha çok yapıyorsa o kişinin ayakkabısı havaya kalkar.',
      'Sorular misafirlerden toplanır — kart kovasına atın.',
      '12 soru sonra biten oyunda en çok ortak cevap = en uzun aşk.',
    ],
    time:'~21:30 · ilk dans öncesi',
    party:'Çift + misafirler',
    hue:1,
  },
  {
    id:'song',
    title:'söyle bakalım',
    kicker:'03',
    desc:'DJ Malik bir çalar bir keser. Şarkıyı ilk söyleyen masa kazanır.',
    rules:[
      'Her tur DJ Malik şarkıyı çalar, 8 saniye sonra keser.',
      'Şarkının BİR SONRAKİ sözünü ilk söyleyen masaya 5 puan.',
      'Bilmeyen masa cezada bir şarkıya kalkar.',
      '5 tur sonunda lider masaya küçük bir sürpriz.',
    ],
    time:'~22:30',
    party:'Masalar yarışıyor',
    hue:2,
  },
  {
    id:'photo',
    title:'foto görevi',
    kicker:'04',
    desc:'10 maddelik liste — biri kürsüden, biri çiftle, biri masan vs.',
    rules:[
      'Bu sayfanın altındaki "Foto Görevi" listesini al.',
      'Liste 10 maddeden oluşuyor; mümkün olduğunca çoğunu çek.',
      'Çektiklerini bu sitedeki "Foto Yükle" ekranından gönder.',
      'En çok görev tamamlayan ilk üç kişiye hediye, gece sonu açıklanır.',
    ],
    time:'19:00 → 23:30 · tüm gece',
    party:'Herkes',
    hue:3,
    hasList:true,
  },
];

const PHOTO_TASKS = [
  'Çiftle birlikte zıplarken bir kare',
  'Aynı masadan bir grup selfie',
  'Bilmediğin bir misafirle samimi bir foto',
  'DJ Booth\'un arkasından bir kadraj',
  'En küçük misafir (kim varsa)',
  'En büyük misafir',
  'Gelin ayakkabısı + damat ayakkabısı yan yana',
  'Pasta kesimi anı',
  'Dans pistinde 5 kişi havada',
  'Bir misafirin "sürpriz" anı',
];

function Games({ onBack }) {
  const [open, setOpen] = useStateGm(null);
  return (
    <ScreenShell onBack={onBack} kicker="06 · OYUNLAR" title="gece boyu eğlence">
      <p className="body-sm" style={{opacity:0.85, marginBottom:18}}>
        Düğün boyunca <strong style={{color:'var(--pink)'}}>4 oyun</strong> oynayacağız. Hepsi gönüllü, hepsinde küçük ödüller var.
      </p>

      <div style={gmStyles.list}>
        {GAMES.map(g => (
          <button key={g.id} onClick={() => setOpen(g)} style={gmStyles.card}>
            <div style={{display:'flex',alignItems:'flex-start',gap:14}}>
              <div style={gmStyles.num}>
                <span className="hand" style={{fontSize:24, color:'var(--burgundy)', lineHeight:1}}>{g.kicker}</span>
              </div>
              <div style={{flex:1, minWidth:0, textAlign:'left'}}>
                <div className="hand" style={{fontSize:30, lineHeight:1, marginBottom:6}}>{g.title}</div>
                <div className="body-sm" style={{opacity:0.85, lineHeight:1.5, marginBottom:10}}>{g.desc}</div>
                <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                  <Pill><Icons.Clock size={11}/>{g.time}</Pill>
                  <Pill>{g.party}</Pill>
                </div>
              </div>
              <Icons.Arrow size={16}/>
            </div>
          </button>
        ))}
      </div>

      {open && <GameDetail game={open} onClose={() => setOpen(null)} />}
    </ScreenShell>
  );
}

function GameDetail({ game, onClose }) {
  return (
    <div style={gmStyles.sheetBg} onClick={onClose}>
      <div style={gmStyles.sheet} onClick={(e) => e.stopPropagation()}>
        <div style={gmStyles.sheetHead}>
          <div className="label-sm" style={{opacity:0.65}}>OYUN {game.kicker}</div>
          <button onClick={onClose} style={gmStyles.xBtn}><Icons.Close size={18}/></button>
        </div>
        <div style={{padding:'4px 24px 30px'}}>
          <div className="hand" style={{fontSize:54, lineHeight:0.95, margin:'4px 0 14px'}}>{game.title}</div>

          <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:18}}>
            <Pill><Icons.Clock size={11}/>{game.time}</Pill>
            <Pill>{game.party}</Pill>
          </div>

          <div className="body-sm" style={{opacity:0.9, marginBottom:22}}>{game.desc}</div>

          <div className="label" style={{opacity:0.75, marginBottom:10}}>KURALLAR</div>
          {game.rules.map((r, i) => (
            <div key={i} style={gmStyles.ruleRow}>
              <div style={gmStyles.ruleNum}>
                <span style={{fontSize:11, fontWeight:600}}>{(i+1).toString().padStart(2,'0')}</span>
              </div>
              <div className="body-sm" style={{flex:1, opacity:0.92}}>{r}</div>
            </div>
          ))}

          {game.hasList && (
            <div style={{marginTop:24}}>
              <div className="label" style={{opacity:0.75, marginBottom:10}}>FOTO GÖREV LİSTESİ</div>
              <div style={{
                background:'var(--pink)', color:'var(--burgundy)',
                borderRadius:18, padding:'18px 20px',
              }}>
                {PHOTO_TASKS.map((t, i) => (
                  <div key={i} style={{
                    display:'flex',alignItems:'center',gap:12,
                    padding:'10px 0',
                    borderTop: i > 0 ? '1px dashed rgba(150,40,64,0.25)' : 'none',
                  }}>
                    <div style={{
                      width:20,height:20, borderRadius:5,
                      border:'1.5px solid var(--burgundy)',
                      flexShrink:0,
                    }}/>
                    <div className="body-sm" style={{color:'var(--burgundy)'}}>{t}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Pill({ children }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:5,
      padding:'5px 10px', borderRadius:999,
      border:'1px solid rgba(255,185,201,0.35)',
      fontFamily:"'Manrope',sans-serif",
      fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase',
      opacity:0.88,
    }}>{children}</span>
  );
}

const gmStyles = {
  list:{display:'flex',flexDirection:'column',gap:10},
  card:{
    width:'100%',
    padding:'16px 16px',
    borderRadius:18,
    border:'1px solid rgba(255,185,201,0.3)',
    background:'rgba(255,185,201,0.05)',
    color:'var(--pink)',
  },
  num:{
    width:42, height:42, borderRadius:12,
    background:'var(--pink)',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0,
  },
  sheetBg:{
    position:'fixed', inset:0, zIndex:60,
    background:'rgba(20,5,10,0.85)',
    backdropFilter:'blur(8px)',
    display:'flex', alignItems:'flex-end',
  },
  sheet:{
    width:'100%', maxWidth:480, margin:'0 auto',
    background:'var(--burgundy)',
    borderTop:'1px solid rgba(255,185,201,0.25)',
    borderRadius:'24px 24px 0 0',
    color:'var(--pink)',
    maxHeight:'92dvh', overflowY:'auto',
  },
  sheetHead:{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'20px 24px 6px',
  },
  xBtn:{
    width:36,height:36,borderRadius:999,
    border:'1px solid rgba(255,185,201,0.4)',
    display:'flex',alignItems:'center',justifyContent:'center',
  },
  ruleRow:{
    display:'flex',alignItems:'flex-start',gap:12,
    padding:'10px 0',
    borderTop:'1px solid rgba(255,185,201,0.12)',
  },
  ruleNum:{
    width:26,height:26,borderRadius:999,
    border:'1.5px solid rgba(255,185,201,0.5)',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0, marginTop:1,
  },
};

window.Games = Games;