/* ============================================================
   PETRI GAMES — Home + Projects pages
   ============================================================ */

function HeroVisual({ variant }) {
  return (
    <div className="hero-visual">
      <PetriDish seed={3} accentCell="var(--accent)" count={variant === 'centered' ? 18 : 15} big />
      <img className="hero-logo" src={(window.__resources && window.__resources.logoMark) || 'petri-games-mark.svg'} alt="Petri Games" />
    </div>
  );
}

function HomePage({ t, lang, heroVariant, setRoute, projects }) {
  const go = (id) => { setRoute(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const h = t.hero;
  const vClass = { split: 'v-split', centered: 'v-centered', stack: 'v-stack' }[heroVariant] || 'v-split';

  return (
    <div className="page">
      {/* ---------------- HERO ---------------- */}
      <section className={`hero ${vClass}`}>
        <div className="shell hero-inner">
          <div className="hero-copy">
            <h1>
              {h.l1}<br />{h.l2} <span className="accent">{h.l3}</span>
            </h1>
            <p className="hero-lede">{h.lede}</p>
            <div className="hero-cta">
              <Button variant="primary" arrow onClick={() => go('projects')}>{h.cta1}</Button>
              <Button variant="ghost" onClick={() => go('contact')}>{h.cta2}</Button>
            </div>
            {heroVariant === 'stack' && (
              <div className="hero-stack-foot stat-strip">
                {h.stats.map((s, i) => (
                  <div className="stat" key={i}><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
                ))}
              </div>
            )}
          </div>
          {heroVariant === 'split' && <HeroVisual variant={heroVariant} />}
        </div>
      </section>

      {/* ---------------- APPROACH ---------------- */}
      <section className="section">
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{t.homeApproach.kicker}</span>
            <h2>{t.homeApproach.title}</h2>
            <p>{t.homeApproach.lede}</p>
          </Reveal>
          <div className="feat-grid">
            {t.homeApproach.items.map((it, i) => (
              <Reveal key={i} delay={i * 70} className="feat">
                <span className="idx">{it.i}</span>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- PROJECTS PREVIEW ---------------- */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: '100%', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 600 }}>
              <span className="kicker">{t.homeProjects.kicker}</span>
              <h2>{t.homeProjects.title}</h2>
            </div>
          </Reveal>
          <div className="proj-grid">
            {projects.map((p, i) => (
              <Reveal key={p.id} delay={i * 80}>
                <ProjectCard p={p} t={t} lang={lang} onClick={() => go('projects')} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- MISSION BAND ---------------- */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="band">
            <span className="kicker">{t.mission.kicker}</span>
            <p className="q" style={{ marginTop: 18 }}>
              {t.mission.q1}<span className="accent">{t.mission.qaccent}</span>{t.mission.q2}
            </p>
            <p className="mono" style={{ marginTop: 26, color: 'var(--ink-faint)', letterSpacing: '0.04em' }}>
              "Small team. Big experiments."
            </p>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

// ---- Project card (shared by home + projects) ----
function ProjectCard({ p, t, lang, onClick, expanded = false }) {
  const c = p[lang];
  const seedMap = { mortarot: 11, deathdeck: 67, exp1: 23, exp2: 41 };
  const [modalOpen, setModalOpen] = React.useState(false);
  const hasModal = !!c.modal;
  const handleClick = () => { if (p.empty) return; if (hasModal) setModalOpen(true); else if (onClick) onClick(); };
  if (p.empty) {
    const ph = p.placeholder ? (p.placeholder[lang] || p.placeholder.en) : '';
    return (
      <div className="card proj-card is-empty">
        <div className="proj-dish-wrap">
          <PetriDish seed={seedMap[p.id] || 5} accentCell={p.accentCell} count={4} big />
        </div>
        <div className="proj-meta">
          <StatusBadge status={p.status} label={c.statusLabel} />
          <span className="proj-tag">{p.build}</span>
        </div>
        <h3>{p.name}</h3>
        <p className="proj-empty-note">{ph}</p>
      </div>
    );
  }
  return (
    <React.Fragment>
    <div className="card proj-card" onClick={handleClick}>
      {p.image ? (
        <div className="proj-img-wrap">
          <img src={p.image} alt={p.name} loading="lazy" />
        </div>
      ) : (
        <div className="proj-dish-wrap">
          <PetriDish seed={seedMap[p.id] || 5} accentCell={p.accentCell}
                     count={p.status === 'started' ? 6 : p.status === 'prototype' ? 9 : 14} big />
        </div>
      )}
      <div className="proj-meta">
        <StatusBadge status={p.status} label={c.statusLabel} />
        <span className="proj-tag">{t.projectsPage.buildLabel} · {p.build}</span>
      </div>
      <h3>{p.name}</h3>
      <p style={{ color: 'var(--accent-line)', fontWeight: 600, marginBottom: 8 }}>{c.tagline}</p>
      <p>{c.desc}</p>
      <div className="proj-foot">
        <span className="mono" style={{ fontSize: 12, color: 'var(--accent-line)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          {c.cta}<Arrow d="right" />
        </span>
      </div>
    </div>
    {hasModal && modalOpen && (
      <GameModal p={p} c={c} onClose={() => setModalOpen(false)} />
    )}
    </React.Fragment>
  );
}

// ---- Game detail modal ----
function GameModal({ p, c, onClose }) {
  const m = c.modal;
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, []);
  const tree = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={m.title}>
        <button className="modal-close" onClick={onClose} aria-label="Закрыть">×</button>
        {p.modalHero ? (
          <div className="modal-hero">
            <img src={p.modalHero} alt={m.title} />
          </div>
        ) : (
          <div className="modal-hero is-dish">
            <PetriDish seed={(p.id || 'x').length * 13 + 7} accentCell={p.accentCell} count={16} big />
          </div>
        )}
        <div className="modal-body">
          <StatusBadge status={p.status} label={m.badge} />
          <h3>{m.title}</h3>
          {m.subtitle && <p className="modal-subtitle">{m.subtitle}</p>}
          <p className="modal-slogan">{m.slogan}</p>
          <p className="modal-desc">{m.desc}</p>

          {m.quote && (
            <blockquote className="modal-quote">{m.quote}</blockquote>
          )}

          {m.stats && (
            <div className="modal-stats">
              {m.stats.map((s, i) => (
                <div key={i} className="modal-stat"><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
              ))}
            </div>
          )}

          {m.deck && (
            <React.Fragment>
              {m.deckLabel && <p className="modal-lbl">{m.deckLabel}</p>}
              <div className="modal-deck">
                {m.deck.map((d, i) => (
                  <div key={i} className={`deck-chip${d.danger ? ' danger' : ''}`}>
                    <p className="deck-chip-name">{d.name}</p>
                    <p className="deck-chip-desc">{d.desc}</p>
                  </div>
                ))}
              </div>
            </React.Fragment>
          )}

          {m.medallions && (
            <React.Fragment>
              {m.medallionsLabel && <p className="modal-lbl">{m.medallionsLabel}</p>}
              <p className="modal-desc" style={{ marginBottom: 26 }}>{m.medallions}</p>
            </React.Fragment>
          )}

          {m.mechanics && (
            <div className="modal-mechs">
              {m.mechanics.map((x, i) => (
                <div key={i} className="modal-mech">
                  <div className="ic">{x.icon}</div>
                  <div><h5>{x.h}</h5><p>{x.p}</p></div>
                </div>
              ))}
            </div>
          )}

          {m.meta && <p className="modal-meta">{m.meta}</p>}

          {p.shots && (
            <div className={`modal-shots${p.wideShots ? ' modal-shots--wide' : ''}`}>
              {p.shots.map((s, i) => (
                <img key={i} src={s} alt={`${p.name} — ${i + 1}`} loading="lazy" />
              ))}
            </div>
          )}

          {m.links ? (
            <div className="modal-links">
              {m.links.map((l, i) => (
                l.url
                  ? <a key={i} className={`modal-link${l.primary ? ' is-primary' : ''}`} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>
                  : <span key={i} className={`modal-link is-soon${l.primary ? ' is-primary' : ''}`}>{l.label}</span>
              ))}
            </div>
          ) : p.playUrl && m.cta ? (
            <a className="modal-cta" href={p.playUrl} target="_blank" rel="noreferrer">▶ {m.cta}</a>
          ) : m.note ? (
            <div className="modal-note"><span className="dot" />{m.note}</div>
          ) : null}
          {m.credit && <p className="modal-credit">{m.credit}</p>}
        </div>
      </div>
    </div>
  );
  // Portal to body so position:fixed escapes the card's transformed ancestor.
  return ReactDOM.createPortal(tree, document.body);
}

// ============================================================
//  PROJECTS PAGE
// ============================================================
function ProjectsPage({ t, lang, setRoute, projects }) {
  const go = (id) => { setRoute(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const pp = t.projectsPage;
  return (
    <div className="page">
      <section className="section" style={{ paddingBottom: 40 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{pp.kicker}</span>
            <h2>{pp.title}</h2>
            <p>{pp.lede}</p>
          </Reveal>

          <div className="proj-grid">
            {projects.map((p, i) => (
              <Reveal key={p.id} delay={i * 80}>
                <ProjectCard p={p} t={t} lang={lang} onClick={() => go('contact')} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="band" style={{ textAlign: 'center' }}>
            <p className="q accent" style={{ margin: '0 auto', fontSize: 'clamp(24px,3.6vw,42px)' }}>
              {lang === 'ru' ? 'Твой фидбек решает, что мы сделаем дальше' : 'Your feedback decides what we build next'}
            </p>
            <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="primary" arrow onClick={() => go('contact')}>
                {lang === 'ru' ? 'Оставить фидбек' : 'Leave feedback'}
              </Button>
              <a className="btn btn-ghost" href="https://petrigames.itch.io" target="_blank" rel="noreferrer">
                itch.io <Arrow d="diag" />
              </a>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ProjectsPage, ProjectCard, GameModal, HeroVisual });