// DIRECTION A — "Oyun Gazetesi" (Editorial / Newspaper)
// An opinionated, magazine-style layout. The hero reads like a newspaper
// masthead + feature article. Underneath, a "today's briefing" strip.
// Below that, category sections laid out like departments.

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useRef: useRefA } = React;

function GazetesiHero({ game, T }) {
  const playingNow = STATE.playing[game.id] ?? 600;
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: '1.3fr 1fr',
      gap: 32,
      padding: '28px 32px 28px',
      background: T.paper,
      border: `1px solid ${T.line}`,
      borderRadius: 18,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase',
          color: T.inkSoft, fontWeight: 700,
        }}>
          <span style={{
            display: 'inline-block', width: 8, height: 8, borderRadius: 999,
            background: '#E8707F',
          }} />
          Bugünün oyunu · {STATE.today.date}
        </div>

        <h1 style={{
          margin: 0,
          fontFamily: 'Fraunces, Georgia, serif',
          fontWeight: 700,
          fontSize: 'clamp(42px, 5.5vw, 72px)',
          lineHeight: 0.95,
          letterSpacing: -2,
          color: T.ink,
        }}>
          {game.name}.
        </h1>
        <p style={{
          margin: 0, maxWidth: 460,
          fontSize: 18, lineHeight: 1.45,
          color: T.ink, opacity: 0.82,
          textWrap: 'pretty',
          fontFamily: 'Fraunces, Georgia, serif',
          fontWeight: 400,
        }}>
          {game.desc} Bugünkü harf seti ortalamanın biraz üzerinde — sesli
          harfler az, zor bir gün.
        </p>

        <div style={{ display: 'flex', gap: 10, marginTop: 6, flexWrap: 'wrap' }}>
          <a href="#" onClick={e => e.preventDefault()} style={{
            padding: '12px 22px', borderRadius: 10,
            background: T.ink, color: T.paper,
            fontWeight: 700, fontSize: 14, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            Oyna · bugünkü bulmaca
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M5 3l7 5-7 5V3z" /></svg>
          </a>
          <a href="#" onClick={e => e.preventDefault()} style={{
            padding: '12px 18px', borderRadius: 10,
            border: `1px solid ${T.line}`, color: T.ink,
            fontWeight: 600, fontSize: 14, textDecoration: 'none',
            background: 'transparent',
          }}>
            Sınırsız mod
          </a>
        </div>

        <div style={{
          marginTop: 18, display: 'flex', gap: 24, flexWrap: 'wrap',
          borderTop: `1px solid ${T.line}`, paddingTop: 16,
        }}>
          <Stat T={T} k="Şu an oynayan"  v={fmtCount(playingNow)} />
          <Stat T={T} k="Ortalama süre"  v="4:12" />
          <Stat T={T} k="Senin serin"    v={`${STATE.streaks[game.id] ?? 0} gün`} />
          <Stat T={T} k="Zorluk"         v="6 / 10" />
        </div>
      </div>

      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: '100%', aspectRatio: '1/1',
          background: game.accent,
          borderRadius: 14,
          position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'flex-end', padding: 18,
        }}>
          <img src={`icons/${game.id}.svg`} alt=""
            style={{
              position: 'absolute', right: -30, top: '50%',
              transform: 'translateY(-50%) scale(1.15)',
              width: '90%', height: '90%', objectFit: 'contain',
              pointerEvents: 'none',
            }} />
          <div style={{
            position: 'relative', zIndex: 1, color: '#fff',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <span style={{
              fontFamily: 'ui-monospace, monospace',
              fontSize: 10, letterSpacing: 1, opacity: 0.85,
              textTransform: 'uppercase',
            }}>No. 1,247</span>
            <TileRow
              letters={['k','e','l','i','m']}
              states={['c','c','p','a','a']}
              size={28}
            />
          </div>
        </div>
      </div>
    </article>
  );
}

function Stat({ T, k, v }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div style={{
        fontSize: 10, letterSpacing: 1.2, textTransform: 'uppercase',
        color: T.inkSoft, fontWeight: 700,
      }}>{k}</div>
      <div style={{
        fontSize: 18, fontWeight: 700, color: T.ink,
        fontFamily: 'Fraunces, Georgia, serif',
        fontVariantNumeric: 'tabular-nums',
      }}>{v}</div>
    </div>
  );
}

function BriefingStrip({ T }) {
  const rows = [
    { id: 'petek',  status: 'done',       note: `Çözüldü · ${fmtTime(STATE.times.petek)}`, emoji: '✓' },
    { id: 'baglac', status: 'done',       note: `Çözüldü · ${fmtTime(STATE.times.baglac)} · 1 hata`, emoji: '✓' },
    { id: 'ipucu',  status: 'inProgress', note: '3/8 kelime bulundu',         emoji: '●' },
    { id: 'caprazla', status: 'inProgress', note: 'Başlandı · 2 tahmin',      emoji: '●' },
    { id: 'kelimely', status: 'featured', note: 'Bugünün öne çıkanı',         emoji: '★' },
    { id: 'duello', status: 'new',        note: 'Arkadaşın seni bekliyor',    emoji: '↗' },
  ];
  const statusColor = {
    done: '#3a9e5c', inProgress: '#c79a1b', featured: '#E8707F', new: '#6B9CF5',
  };
  return (
    <section style={{
      marginTop: 18,
      padding: '14px 18px',
      background: T.paper,
      border: `1px solid ${T.line}`,
      borderRadius: 14,
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 10,
      }}>
        <h3 style={{
          margin: 0, fontSize: 12, letterSpacing: 1.5,
          textTransform: 'uppercase', color: T.inkSoft, fontWeight: 700,
        }}>Bugünkü Özet</h3>
        <span style={{ fontSize: 12, color: T.inkSoft }}>
          <strong style={{ color: T.ink }}>{STATE.today.done.length}</strong> / 23 tamamlandı
        </span>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 10,
      }}>
        {rows.map(row => {
          const g = GAMES.find(x => x.id === row.id);
          return (
            <a key={row.id} href="#" onClick={e => e.preventDefault()} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px',
              border: `1px solid ${T.line}`, borderRadius: 10,
              textDecoration: 'none', color: T.ink,
              background: 'transparent',
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 8,
                background: g.accent,
                display: 'grid', placeItems: 'center', flexShrink: 0,
                fontSize: 14, color: '#fff', fontWeight: 800,
              }}>
                <img src={`icons/${g.id}.svg`} alt="" width="28" height="28" style={{ objectFit: 'contain' }} />
              </span>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: T.ink }}>{g.name}</div>
                <div style={{
                  fontSize: 11, color: statusColor[row.status], fontWeight: 600,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>
                  {row.emoji}  {row.note}
                </div>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

function CategorySection({ cat, T }) {
  const meta = CATEGORIES[cat];
  const games = GAMES.filter(g => g.cat === cat);
  if (!games.length) return null;
  return (
    <section style={{ marginTop: 34 }}>
      <header style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 12,
        borderBottom: `2px solid ${T.ink}`,
        paddingBottom: 6,
      }}>
        <h2 style={{
          margin: 0,
          fontFamily: 'Fraunces, Georgia, serif',
          fontSize: 24, fontWeight: 700, color: T.ink,
          letterSpacing: -0.6,
        }}>{meta.label}</h2>
        <span style={{ fontSize: 12, color: T.inkSoft, fontStyle: 'italic' }}>
          {meta.hint}
        </span>
      </header>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
        gap: 12,
      }}>
        {games.map(g => <ColumnCard key={g.id} game={g} T={T} />)}
      </div>
    </section>
  );
}

function ColumnCard({ game, T }) {
  const [hover, setHover] = useStateA(false);
  const done = STATE.today.done.includes(game.id);
  const inProg = STATE.today.inProgress.includes(game.id);
  return (
    <a href="#" onClick={e => e.preventDefault()}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        padding: 14, gap: 10,
        background: T.paper,
        border: `1px solid ${T.line}`,
        borderRadius: 12,
        textDecoration: 'none', color: T.ink,
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease',
        boxShadow: hover ? `0 8px 24px -12px ${game.accent}80` : 'none',
        borderColor: hover ? game.accent : T.line,
        position: 'relative',
      }}>
      {done && <StatusBadge kind="done" />}
      {inProg && !done && <StatusBadge kind="progress" />}
      <div style={{
        width: 52, height: 52, borderRadius: 10,
        background: game.accent,
        display: 'grid', placeItems: 'center',
      }}>
        <img src={`icons/${game.id}.svg`} alt="" width="48" height="48" style={{ objectFit: 'contain' }} />
      </div>
      <div>
        <div style={{
          fontFamily: 'Fraunces, Georgia, serif',
          fontSize: 18, fontWeight: 700, color: T.ink,
          letterSpacing: -0.3,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {game.name}
          {game.multiplayer && <MpChip />}
        </div>
        <div style={{
          fontSize: 12, color: T.inkSoft, lineHeight: 1.35, marginTop: 4,
          textWrap: 'pretty',
        }}>{game.desc}</div>
      </div>
      <div style={{
        marginTop: 'auto', paddingTop: 6,
        borderTop: `1px solid ${T.line}`,
        display: 'flex', justifyContent: 'space-between',
        fontSize: 10, color: T.inkSoft, letterSpacing: 0.5,
        textTransform: 'uppercase', fontWeight: 700,
      }}>
        <span>{fmtCount(STATE.playing[game.id] ?? 50)} oynuyor</span>
        <span style={{ color: game.accent }}>Oyna →</span>
      </div>
    </a>
  );
}

function StatusBadge({ kind }) {
  const map = {
    done:     { bg: '#3a9e5c', label: '✓' },
    progress: { bg: '#c79a1b', label: '●' },
  };
  const s = map[kind];
  return (
    <span style={{
      position: 'absolute', top: 10, right: 10,
      width: 22, height: 22, borderRadius: 999,
      background: s.bg, color: '#fff',
      display: 'grid', placeItems: 'center',
      fontSize: 11, fontWeight: 800,
    }}>{s.label}</span>
  );
}

function MpChip() {
  return (
    <span style={{
      fontSize: 9, fontWeight: 800, letterSpacing: 0.5,
      padding: '2px 6px', borderRadius: 4,
      background: '#E85A6D', color: '#fff',
      textTransform: 'uppercase',
    }}>2p</span>
  );
}

window.GazetesiHome = function GazetesiHome({ theme }) {
  const T = THEMES[theme];
  const featured = GAMES.find(g => g.id === STATE.today.featuredId);
  return (
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      padding: '28px 24px 80px',
    }}>
      <GazetesiHero game={featured} T={T} />
      <BriefingStrip T={T} />
      {['wordGuess','gridSearch','transformation','grouping','arrangement','deduction','geography'].map(c =>
        <CategorySection key={c} cat={c} T={T} />)}
    </div>
  );
};