const { useState: useStateB } = React;
const PB = window.P;
const { CardFace: CardFaceB, Pill: PillB, SectionTitle: SectionTitleB, Eyebrow: EyebrowB, Btn: BtnB, Stamp: StampB, BearAvatar: BearB, FoxAvatar: FoxB, OwlAvatar: OwlB, ChefAvatar: ChefB } = window;

// HOW TO PLAY -------------------------------------------------------------

function HowToPlay() {
  const phases = [
    {
      n: '01',
      name: 'AKSIYON',
      sub: 'Rakiplerini yavaşlat',
      body: 'Tur başına 1 aksiyon kartı oyna. Sağlık Denetimi, Küf, NYC Faresi veya Kötü Yorum — birine zarar ver ya da geri dön.',
      color: P.disasterBase,
      ink: P.cream,
    },
    {
      n: '02',
      name: 'KART ÇEK',
      sub: 'Elini 7\'ye kadar doldur',
      body: 'Desteden çek, ya da önceki oyuncunun discard\'ından en üstteki kartı kap. Ne attığın önemli — rakibe malzeme bırakma.',
      color: P.doughDeep,
      ink: P.brown,
    },
    {
      n: '03',
      name: 'ÜRETIM',
      sub: 'Hamur, sos, pizza yap',
      body: '3 malzeme → Hamur veya Sos. Hamur + Sos + Fırın + 1 topping → Dilim (1P). 3 topping ile → Aile Sofrası (3P).',
      color: P.pizzaBase,
      ink: P.brown,
    },
    {
      n: '04',
      name: 'KART AT',
      sub: 'Bir kart discard yığınına',
      body: '1 kart at, tur biter. Pizza kartları son çare — elinde pizza dışı kart varsa önce onu atmalısın.',
      color: P.toppingBase,
      ink: P.cream,
    },
  ];

  return (
    <section
      style={{
        padding: '100px 56px 120px',
        background: P.brown,
        color: P.cream,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: `repeating-linear-gradient(90deg, ${P.yellow} 0 16px, ${P.brown} 16px 32px)` }} />
      <div aria-hidden style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 6, background: `repeating-linear-gradient(90deg, ${P.yellow} 0 16px, ${P.brown} 16px 32px)` }} />

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionTitleB
          inverted
          eyebrow="Nasıl Oynanır"
          title="Dört faz. Yüz yirmi sekiz kart. Tek fırın."
          sub="Her tur aynı dört adımdan geçer: Aksiyon → Çek → Üret → At. Zeyiner hızla kavrar; uzman oyuncular zamanlama ve discard ekonomisi ile kazanır."
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 20 }}>
          {phases.map((p, i) => (
            <div
              key={p.n}
              style={{
                background: p.color,
                color: p.ink,
                borderRadius: 20,
                border: `3px solid ${P.brown}`,
                boxShadow: `0 6px 0 ${P.brown}`,
                padding: 24,
                position: 'relative',
                minHeight: 280,
                transform: `translateY(${i % 2 === 0 ? 0 : 16}px)`,
              }}
            >
              <div style={{ fontSize: 60, fontWeight: 900, letterSpacing: -3, lineHeight: 0.9, opacity: 0.5 }}>{p.n}</div>
              <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: 2, marginTop: 8 }}>FAZ · {p.name}</div>
              <h3 style={{ fontSize: 26, fontWeight: 900, letterSpacing: -0.5, margin: '12px 0 10px', lineHeight: 1.05 }}>{p.sub}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, opacity: 0.9, textWrap: 'pretty' }}>{p.body}</p>
              {i < 3 && (
                <div style={{ position: 'absolute', top: '50%', right: -20, fontSize: 28, color: P.yellow, fontWeight: 900, zIndex: 2 }}>▸</div>
              )}
            </div>
          ))}
        </div>

        {/* Recipe strip */}
        <div style={{ marginTop: 72, background: P.cream, color: P.brown, borderRadius: 22, border: `3px solid ${P.brown}`, boxShadow: `0 6px 0 ${P.brown}`, padding: '28px 36px', display: 'flex', alignItems: 'center', gap: 28 }}>
          <div style={{ flex: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: 2, color: P.red }}>TARIF · AILE SOFRASI</div>
            <div style={{ fontSize: 24, fontWeight: 900, letterSpacing: -0.5, marginTop: 4 }}>6 kart → 3 puan</div>
          </div>
          <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 6, alignItems: 'center' }}>
            {[
              { k: 'dough', lbl: 'Hamur' },
              { op: '+' },
              { k: 'sauce', lbl: 'Sos' },
              { op: '+' },
              { k: 'professionalOven', lbl: 'Fırın' },
              { op: '+' },
              { k: 'classicPepperoni', lbl: '' },
              { k: 'mushrooms', lbl: '' },
              { k: 'greenPeppers', lbl: '' },
              { op: '=' },
              { k: 'familyFeast', lbl: '3P' },
            ].map((e, idx) =>
              e.op ? (
                <div key={idx} style={{ fontSize: 28, fontWeight: 900, color: P.brownLite, width: 18, textAlign: 'center' }}>{e.op}</div>
              ) : (
                <div key={idx}>
                  <CardFaceB kind={e.k} w={54} h={74} />
                </div>
              )
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// CARD CODEX ---------------------------------------------------------------

function CardCodex() {
  const [filter, setFilter] = useState('all');
  const groups = {
    all: ['flour','water','yeast','tomatoes','secretSpiceMix','oliveOil','classicPepperoni','mushrooms','blackOlives','greenPeppers','professionalOven','dough','sauce','neighborhoodSlice','familyFeast','healthInspection','mold','nycRat','badYelpReview','jokerChef'],
    ingredient: ['flour','water','yeast','tomatoes','secretSpiceMix','oliveOil'],
    topping: ['classicPepperoni','mushrooms','blackOlives','greenPeppers'],
    crafted: ['dough','sauce','neighborhoodSlice','familyFeast','professionalOven'],
    sabotage: ['healthInspection','mold','nycRat','badYelpReview','jokerChef'],
  };
  const labels = [
    ['all', 'Hepsi', 20],
    ['ingredient', 'Malzeme', 6],
    ['topping', 'Topping', 4],
    ['crafted', 'Üretilen + Araç', 5],
    ['sabotage', 'Aksiyon + Joker', 5],
  ];
  const NAMES = {
    flour: 'Un', water: 'Su', yeast: 'Maya', tomatoes: 'Domates', secretSpiceMix: 'Baharat', oliveOil: 'Zeytinyağı',
    classicPepperoni: 'Pepperoni', mushrooms: 'Mantar', blackOlives: 'Siyah Zeytin', greenPeppers: 'Yeşil Biber',
    professionalOven: 'Profesyonel Fırın', dough: 'Hamur', sauce: 'Sos',
    neighborhoodSlice: 'Mahalle Dilimi', familyFeast: 'Aile Sofrası',
    healthInspection: 'Sağlık Denetimi', mold: 'Küf', nycRat: 'NYC Faresi', badYelpReview: 'Kötü Yorum', jokerChef: 'Joker Aşçı',
  };
  const COUNTS = {
    flour:10,water:10,yeast:10,tomatoes:10,secretSpiceMix:10,oliveOil:10,
    classicPepperoni:6,mushrooms:6,blackOlives:6,greenPeppers:6,
    professionalOven:8,dough:8,sauce:8,
    neighborhoodSlice:4,familyFeast:4,
    healthInspection:2,mold:2,nycRat:2,badYelpReview:2,jokerChef:4,
  };
  const kinds = groups[filter];

  return (
    <section style={{ padding: '100px 56px 120px', background: P.cream, position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <SectionTitleB
            eyebrow="Kart Kodeksi"
            title="Yirmi kart tipi. Her biri bir rol."
            sub="Malzemelerden pizzaya uzanan zincir, dört aksiyon kartı ve her şeyi karşılayan Joker Aşçı ile tamamlanır."
          />
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {labels.map(([id, label, n]) => (
              <button
                key={id}
                onClick={() => setFilter(id)}
                style={{
                  background: filter === id ? P.brown : P.cream,
                  color: filter === id ? P.cream : P.brown,
                  border: `2.5px solid ${P.brown}`,
                  borderRadius: 999,
                  padding: '8px 16px',
                  fontWeight: 900,
                  fontSize: 12,
                  letterSpacing: 1.2,
                  cursor: 'pointer',
                  textTransform: 'uppercase',
                  boxShadow: filter === id ? `0 3px 0 ${P.red}` : `0 3px 0 ${P.brown}`,
                  fontFamily: 'inherit',
                  transition: 'all .15s',
                }}
              >
                {label} · {n}
              </button>
            ))}
          </div>
        </div>

        <div
          style={{
            marginTop: 36,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
            gap: 18,
          }}
        >
          {kinds.map((k) => (
            <div
              key={k}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: 10,
                padding: 12,
                background: P.creamDark,
                border: `2.5px solid ${P.brown}`,
                borderRadius: 14,
                boxShadow: `0 4px 0 ${P.brown}`,
                transition: 'transform .2s, box-shadow .2s',
                cursor: 'pointer',
              }}
              onMouseEnter={(e)=>{ e.currentTarget.style.transform='translateY(-3px) rotate(-1deg)'; e.currentTarget.style.boxShadow=`0 7px 0 ${P.brown}`; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow=`0 4px 0 ${P.brown}`; }}
            >
              <div style={{ filter: `drop-shadow(0 4px 6px ${P.brown}55)` }}>
                <CardFaceB kind={k} w={100} h={138} />
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 12, fontWeight: 900, color: P.brown, letterSpacing: 0.2 }}>{NAMES[k]}</div>
                <div style={{ fontSize: 10, fontWeight: 800, color: P.brownLite, letterSpacing: 1, marginTop: 2 }}>×{COUNTS[k]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowToPlay, CardCodex });