var P = window.P;
var { CardFace, Pill, SectionTitle, Eyebrow, Btn, Stamp, BearAvatar, FoxAvatar, OwlAvatar, ChefAvatar } = window;
var { useState } = React;

// SABOTAGE SHOWCASE --------------------------------------------------------

function Sabotage() {
  const actions = [
    { k: 'healthInspection', name: 'Sağlık Denetimi', count: 2, effect: 'Bir rakibin tüm eli sana açılır. Kimse başkası görmez — sadece sen.' },
    { k: 'mold', name: 'Küf', count: 2, effect: 'Rakibin elindeki Hamur veya Sos kartını yok et. Kart oyundan çıkar.' },
    { k: 'nycRat', name: 'NYC Faresi', count: 2, effect: 'Önceki tam turun discard\'larından 1 kart kap. Geri dönüş stratejisi.' },
    { k: 'badYelpReview', name: 'Kötü Yorum', count: 2, effect: 'Rakibin 1 puanlık Mahalle Dilimi\'ni havuza geri gönder. Aile Sofrası korunaklı.' },
  ];
  return (
    <section style={{ padding: '100px 56px 120px', background: P.disasterDeep, color: P.cream, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: 20, right: 40, fontSize: 220, fontWeight: 900, color: `${P.cream}10`, letterSpacing: -10, lineHeight: 0.8, pointerEvents: 'none' }}>SABOTAJ</div>
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <SectionTitle inverted eyebrow="Aksiyon Kartları" title="Mahallede herkes dost değil." sub="Yumville sadece tarif değil — rakibinin mutfağını sarsmak da oyunun yarısı. Her tur tek aksiyon; zamanlama her şey." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 20 }}>
          {actions.map((a, i) => (
            <div key={a.k} style={{ background: P.brown, border: `3px solid ${P.yellow}`, borderRadius: 18, padding: 20, position: 'relative', boxShadow: `0 6px 0 ${P.disasterBase}`, transform: `rotate(${i%2===0?-1:1}deg)` }}>
              <div style={{ position: 'absolute', top: -14, right: -10 }}>
                <div style={{ background: P.yellow, color: P.brown, border: `2.5px solid ${P.brown}`, borderRadius: 999, padding: '3px 10px', fontSize: 11, fontWeight: 900, letterSpacing: 1, boxShadow: `0 2px 0 ${P.brown}` }}>×{a.count}</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', padding: '6px 0 14px' }}>
                <CardFace kind={a.k} w={120} h={165} />
              </div>
              <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: 2, color: P.yellow, textTransform: 'uppercase' }}>AKSIYON</div>
              <h3 style={{ fontSize: 22, fontWeight: 900, letterSpacing: -0.4, margin: '4px 0 10px', color: P.cream }}>{a.name}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.5, margin: 0, color: P.creamDark, textWrap: 'pretty' }}>{a.effect}</p>
            </div>
          ))}
        </div>

        {/* Joker spotlight */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 32, alignItems: 'center', background: P.jokerDeep, border: `3px solid ${P.gold}`, borderRadius: 22, padding: 32, boxShadow: `0 8px 0 #000a` }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ filter: `drop-shadow(0 16px 24px #000a)`, transform: 'rotate(-4deg)' }}>
              <CardFace kind="jokerChef" w={200} h={275} />
            </div>
          </div>
          <div>
            <Stamp rot={-2} color={P.cream}>Sınırlı · 4 kart</Stamp>
            <h3 style={{ fontSize: 44, fontWeight: 900, letterSpacing: -1.5, lineHeight: 1, color: P.cream, margin: '16px 0 12px' }}>Joker Aşçı.<br/>Tek kullanımlık cadı.</h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: P.creamDark, margin: 0, maxWidth: 520, textWrap: 'pretty' }}>
              Herhangi bir malzeme, topping, hamur, sos veya fırın rolünü karşılar. Ama bir tarifte kullandığın anda <em>oyundan tamamen çıkar</em> — discard'a bile gitmez. Kritik ana sakla; hamur için harcama.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// PLAYERS + TABLE ---------------------------------------------------------

function Players() {
  const seats = [
    { A: ChefAvatar, name: 'Sen', tag: 'İnsan Oyuncu', note: 'Başlayan el · 7 kart', color: P.yellow },
    { A: BearAvatar, name: 'Ayı', tag: 'Bot · agresif', note: 'Hamur üzerine kurar; erken Dilim çıkarır.', color: P.green },
    { A: FoxAvatar, name: 'Tilki', tag: 'Bot · kurnaz', note: 'Discard\'ı kolluyor; Kötü Yorum sever.', color: P.orange },
    { A: OwlAvatar, name: 'Baykuş', tag: 'Bot · sabırlı', note: 'Topping biriktir, Aile Sofrası avlar.', color: P.disasterBase },
  ];
  return (
    <section style={{ padding: '100px 56px 120px', background: P.cream, position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle eyebrow="Masa Düzeni" title="Dört sandalye. Dört karakter. Biri sen." sub="İnsan + 3 bot ile başla. Her botun farklı bir stratejisi var — biri hızlı, biri kolaycı, biri puan avcısı." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {seats.map((s, i) => (
            <div key={s.name} style={{ background: P.creamDark, border: `3px solid ${P.brown}`, borderRadius: 18, padding: 22, boxShadow: `0 5px 0 ${P.brown}`, textAlign: 'center', transform: `translateY(${i%2?0:10}px)` }}>
              <div style={{ display: 'inline-block', background: s.color, borderRadius: '50%', padding: 4, border: `3px solid ${P.brown}`, boxShadow: `0 3px 0 ${P.brown}` }}>
                <s.A size={96} />
              </div>
              <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: 2, color: P.brownLite, marginTop: 14, textTransform: 'uppercase' }}>{s.tag}</div>
              <h3 style={{ fontSize: 28, fontWeight: 900, letterSpacing: -0.5, color: P.brown, margin: '4px 0 10px' }}>{s.name}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: P.brownLite, margin: 0, textWrap: 'pretty' }}>{s.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// EDITIONS ----------------------------------------------------------------

function Editions() {
  const editions = [
    { code: 'v1', name: 'Pizza Piazza', sub: 'İtalyan · Mahalle', status: 'çıktı', base: P.orange, deep: P.pizzaDeep, icon: (
      <svg viewBox="0 0 64 64" width="64" height="64"><circle cx="32" cy="32" r="26" fill={P.orange} stroke={P.brown} strokeWidth="3"/><path d="M 32 12 L 52 48 Q 32 54, 12 48 Z" fill={P.yellow} stroke={P.brown} strokeWidth="2.5" strokeLinejoin="round"/><circle cx="26" cy="32" r="3" fill={P.red}/><circle cx="38" cy="34" r="3" fill={P.red}/><circle cx="32" cy="42" r="2.5" fill={P.red}/></svg>
    ) },
    { code: 'v2', name: 'Kebab Bazaar', sub: 'Türk · Çarşı', status: '2026', base: P.red, deep: P.sauceDeep, icon: (
      <svg viewBox="0 0 64 64" width="64" height="64"><rect x="28" y="8" width="4" height="48" fill={P.brownLite} stroke={P.brown} strokeWidth="2"/><circle cx="30" cy="18" r="6" fill={P.red} stroke={P.brown} strokeWidth="2"/><circle cx="30" cy="30" r="6" fill={P.green} stroke={P.brown} strokeWidth="2"/><circle cx="30" cy="42" r="6" fill={P.red} stroke={P.brown} strokeWidth="2"/></svg>
    ) },
    { code: 'v3', name: 'Baklava Sokak', sub: 'Tatlıcı · Şerbet', status: 'yakında', base: P.yellow, deep: P.goldDeep, icon: (
      <svg viewBox="0 0 64 64" width="64" height="64"><path d="M 10 20 L 54 20 L 48 50 L 16 50 Z" fill={P.yellow} stroke={P.brown} strokeWidth="3" strokeLinejoin="round"/><path d="M 16 30 L 48 30 M 20 40 L 44 40 M 28 20 L 24 50 M 36 20 L 40 50" stroke={P.brown} strokeWidth="1.5"/><circle cx="32" cy="35" r="3" fill={P.green} stroke={P.brown} strokeWidth="1.5"/></svg>
    ) },
    { code: 'v4', name: 'Burger Block', sub: 'Amerikan · Sokak', status: 'yakında', base: P.brownLite, deep: P.brown, icon: (
      <svg viewBox="0 0 64 64" width="64" height="64"><path d="M 10 24 Q 32 10, 54 24 L 54 30 L 10 30 Z" fill={P.orangeLite} stroke={P.brown} strokeWidth="2.5" strokeLinejoin="round"/><rect x="8" y="30" width="48" height="6" fill={P.green} stroke={P.brown} strokeWidth="2"/><rect x="10" y="36" width="44" height="6" fill={P.brown}/><rect x="8" y="42" width="48" height="8" rx="3" fill={P.orange} stroke={P.brown} strokeWidth="2.5"/></svg>
    ) },
  ];
  return (
    <section style={{ padding: '100px 56px 120px', background: `linear-gradient(180deg, ${P.pizzaDeep} 0%, ${P.brown} 100%)`, color: P.cream, position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitle inverted eyebrow="Yumville Evreni" title="Pizza bir başlangıç. Dört edition yolda." sub="Aynı motor, farklı mutfaklar. Kebap, baklava, burger — her edition yeni kart seti, yeni mahalle, aynı sabotaj kuralları." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {editions.map((e, i) => (
            <div key={e.code} style={{ background: i===0 ? P.cream : `${P.brown}bb`, color: i===0 ? P.brown : P.cream, border: `3px solid ${i===0 ? P.gold : P.cream}55`, borderRadius: 18, padding: 22, position: 'relative', boxShadow: `0 6px 0 #0006` }}>
              <div style={{ position: 'absolute', top: 14, right: 14, fontSize: 10, fontWeight: 900, letterSpacing: 1.5, background: i===0 ? P.green : P.disasterBase, color: P.cream, padding: '3px 8px', borderRadius: 4, border: `1.5px solid ${P.brown}` }}>{e.status.toUpperCase()}</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: e.base, border: `3px solid ${P.brown}`, borderRadius: 14, padding: 10, boxShadow: `0 3px 0 ${P.brown}` }}>
                {e.icon}
              </div>
              <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: 2, marginTop: 18, opacity: 0.7 }}>EDITION · {e.code.toUpperCase()}</div>
              <h3 style={{ fontSize: 26, fontWeight: 900, letterSpacing: -0.8, margin: '4px 0 4px', lineHeight: 1 }}>{e.name}</h3>
              <div style={{ fontSize: 13, fontWeight: 700, opacity: 0.8, fontStyle: 'italic' }}>{e.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// CTA FOOTER ---------------------------------------------------------------

function CTA() {
  return (
    <section style={{ padding: '120px 56px', background: P.red, color: P.cream, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 8, background: `repeating-linear-gradient(45deg, ${P.yellow} 0 14px, ${P.red} 14px 28px)` }} />
      <div aria-hidden style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 8, background: `repeating-linear-gradient(45deg, ${P.yellow} 0 14px, ${P.red} 14px 28px)` }} />
      <div style={{ position: 'absolute', top: 60, left: 80, transform: 'rotate(-18deg)', opacity: 0.85 }}><CardFace kind="classicPepperoni" w={120} h={165} /></div>
      <div style={{ position: 'absolute', top: 80, right: 100, transform: 'rotate(15deg)', opacity: 0.85 }}><CardFace kind="familyFeast" w={120} h={165} /></div>
      <div style={{ position: 'absolute', bottom: 60, left: 140, transform: 'rotate(10deg)', opacity: 0.85 }}><CardFace kind="mold" w={100} h={138} /></div>
      <div style={{ position: 'absolute', bottom: 80, right: 160, transform: 'rotate(-12deg)', opacity: 0.85 }}><CardFace kind="jokerChef" w={100} h={138} /></div>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 800, margin: '0 auto' }}>
        <Stamp rot={-3} color={P.cream}>Ücretsiz · Tarayıcıda</Stamp>
        <h2 style={{ fontSize: 92, fontWeight: 900, letterSpacing: -3, lineHeight: 0.9, margin: '24px 0 20px', textWrap: 'balance' }}>Fırını aç.<br/>Mahalle seni bekliyor.</h2>
        <p style={{ fontSize: 18, lineHeight: 1.5, opacity: 0.92, margin: '0 auto 32px', maxWidth: 560 }}>
          3 bota karşı oyna. 30 dakika. Tarayıcıda, kurulum yok. Pizza Piazza şimdi, Kebab Bazaar yolda.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
          <Btn variant="secondary">Oyuna Başla ▸</Btn>
          <Btn variant="ghost">Kurallar</Btn>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: P.brown, color: P.creamDark, padding: '36px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, borderTop: `3px solid ${P.red}`, flexWrap: 'wrap', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="24" height="24" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill={P.orange} stroke={P.cream} strokeWidth="2"/><path d="M 16 6 L 24 22 Q 16 26, 8 22 Z" fill={P.yellow} stroke={P.cream} strokeWidth="1.5"/></svg>
        <span style={{ fontWeight: 900, color: P.cream, fontSize: 15 }}>YumVille · Pizza Piazza</span>
      </div>
      <div style={{ opacity: 0.7 }}>Yapım · Mahalle Stüdyoları · 2026</div>
      <div style={{ display: 'flex', gap: 18 }}>
        {['Kurallar','Güncelleme','İletişim','Gizlilik'].map((x)=>(<a key={x} href="#" onClick={(e)=>e.preventDefault()} style={{ color: P.creamDark, textDecoration: 'none', fontWeight: 700 }}>{x}</a>))}
      </div>
    </footer>
  );
}

Object.assign(window, { Sabotage, Players, Editions, CTA, Footer });