/* ============================================================
   PETRI GAMES — About + Contact pages
   ============================================================ */

function AboutPage({ t, lang, setRoute }) {
  const go = (id) => { setRoute(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const ap = t.aboutPage;
  return (
    <div className="page">
      {/* intro */}
      <section className="section" style={{ paddingBottom: 30 }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'clamp(30px,5vw,64px)', alignItems: 'center' }} className="about-intro">
            <Reveal>
              <span className="kicker">{ap.kicker}</span>
              <h2 style={{ fontSize: 'clamp(34px,5.5vw,64px)', margin: '14px 0 20px' }}>{ap.title}</h2>
              <p style={{ color: 'var(--ink-soft)', fontSize: 19, lineHeight: 1.6, maxWidth: 560 }}>{ap.lede}</p>
            </Reveal>
            <Reveal delay={120} style={{ maxWidth: 380, margin: '0 auto', width: '100%' }}>
              <PetriDish seed={59} accentCell="var(--accent)" count={16} big />
            </Reveal>
          </div>
        </div>
      </section>

      {/* audience */}
      <section className="section">
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{ap.audienceKicker}</span>
            <h2>{ap.audienceTitle}</h2>
          </Reveal>
          <div className="aud-grid">
            {t.audience.map((a, i) => (
              <Reveal key={i} delay={i * 90} className="aud-card">
                <span className="aud-en">{String(i + 1).padStart(2, '0')} · {a.en}</span>
                <h4>{a.title[lang]}</h4>
                <div className="aud-field">
                  <span className="k">{lang === 'ru' ? 'Кто' : 'Who'}</span>
                  <span className="v">{a.who[lang]}</span>
                </div>
                <div className="aud-field">
                  <span className="k">{lang === 'ru' ? 'Потребность' : 'Need'}</span>
                  <span className="v">{a.need[lang]}</span>
                </div>
                <div className="aud-field" style={{ marginBottom: 0 }}>
                  <span className="k" style={{ color: 'var(--accent-line)' }}>{lang === 'ru' ? 'Что даём' : 'What we give'}</span>
                  <span className="v">{a.give[lang]}</span>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <p style={{ marginTop: 34, color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.6, maxWidth: 760, borderLeft: '2px solid var(--accent)', paddingLeft: 20 }}>
              {ap.audienceFoot}
            </p>
          </Reveal>
        </div>
      </section>

      {/* voice */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{ap.voiceKicker}</span>
            <h2>{ap.voiceTitle}</h2>
          </Reveal>
          <div className="voice-grid">
            {t.voice.map((v, i) => (
              <Reveal key={i} delay={i * 80} className="voice">
                <h5>{v.h}</h5>
                <p>{v.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* values */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{ap.valuesKicker}</span>
            <h2>{ap.valuesTitle}</h2>
          </Reveal>
          <div>
            {t.values.map((v, i) => (
              <Reveal key={i} delay={i * 50} className="value-row" as="div">
                <span className="value-num">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h4>{v.h}</h4>
                  <p>{v.p}</p>
                </div>
              </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>
            <div style={{ marginTop: 30 }}>
              <Button variant="primary" arrow onClick={() => go('contact')}>
                {lang === 'ru' ? 'Работать с нами' : 'Work with us'}
              </Button>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

// ============================================================
//  CONTACT PAGE
// ============================================================
function ContactPage({ t, lang }) {
  const cp = t.contactPage;
  const [form, setForm] = React.useState({ name: '', email: '', role: cp.roles[0], message: '' });
  const [state, setState] = React.useState('idle'); // idle | sending | sent
  const [err, setErr] = React.useState({});

  // keep role label in sync with language
  React.useEffect(() => { setForm((f) => ({ ...f, role: cp.roles[0] })); }, [lang]);

  const upd = (k) => (e) => { setForm({ ...form, [k]: e.target.value }); setErr({ ...err, [k]: false }); };

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = true;
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) next.email = true;
    if (!form.message.trim()) next.message = true;
    setErr(next);
    if (Object.keys(next).length) return;
    setState('sending');

    // Open the visitor's mail client with a pre-filled message to hello@petrigames.com
    const subject = (lang === 'ru' ? 'Сообщение с сайта Petri Games' : 'Message from the Petri Games site');
    const bodyLines = [
      (lang === 'ru' ? 'Имя: ' : 'Name: ') + form.name,
      'Email: ' + form.email,
      (lang === 'ru' ? 'Роль: ' : 'Role: ') + form.role,
      '',
      form.message,
    ];
    const mailto = 'mailto:hello@petrigames.com'
      + '?subject=' + encodeURIComponent(subject)
      + '&body=' + encodeURIComponent(bodyLines.join('\n'));
    window.location.href = mailto;

    setTimeout(() => setState('sent'), 1100);
  };

  return (
    <div className="page">
      <section className="section">
        <div className="shell">
          <Reveal className="section-head">
            <span className="kicker">{cp.kicker}</span>
            <h2>{cp.title}</h2>
            <p>{cp.lede}</p>
          </Reveal>

          <div className="contact-grid">
            {/* direct links */}
            <Reveal delay={120}>
              <span className="eyebrow">{cp.directKicker}</span>
              <div className="contact-links" style={{ marginTop: 14 }}>
                {cp.links.map((l, i) => (
                  <a key={i} className="clink" href={l.href} target="_blank" rel="noreferrer">
                    <div>
                      <span className="ck">{l.k}</span>
                      <div className="cv">{l.v}</div>
                    </div>
                    <span className="arr"><Arrow d="diag" /></span>
                  </a>
                ))}
              </div>
              <p style={{ marginTop: 26, color: 'var(--ink-faint)', fontSize: 14, lineHeight: 1.6 }}>
                {cp.socialNote}
              </p>
              <div style={{ marginTop: 30, maxWidth: 280 }}>
                <PetriDish seed={88} accentCell="var(--accent)" count={12} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, ContactPage });