/* global React, t */

function AboutPage({ setPage }) {
  const pillars = [
    {
      title: 'No ads, ever.',
      body: "No pop-ups and no manipulative dark patterns. A clean place to read and play.",
    },
    {
      title: 'Paying is optional.',
      body: 'Support speeds up your progression, but perks are reachable through play, referrals, and ShasteCoins.',
    },
    {
      title: 'One account, seven games.',
      body: 'Progress, coins, levels, and unlocks stay with you across the full hub.',
    },
    {
      title: 'Built in the open.',
      body: 'Roadmaps, release notes, and community voting make upcoming work visible to everyone.',
    },
  ];

  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12 }}>
        <div className="eyebrow">About ShasteGames</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 52px)', marginTop: 6 }}>
          A safe home for adult games
        </h1>
        <p style={{ color: 'var(--muted)', marginTop: 10, maxWidth: 760 }}>
          Curated, in-browser, and free. Two universes, seven games, one account.
        </p>
      </div>

      <section className="card" style={{ marginTop: 20, padding: 18 }}>
        <h3>The two universes</h3>
        <p style={{ color: 'var(--subtle)', marginTop: 8, lineHeight: 1.65 }}>
          <strong>Vorenka</strong> is our fantasy side: monster-taming, exploration RPGs, and branching tales set in shared lore.
          <strong> Velvet City</strong> is the grounded side: modern dating sims and story-driven adult simulations with realistic art.
        </p>
      </section>

      <section className="card" style={{ marginTop: 14, padding: 18 }}>
        <h3>Our promise</h3>
        <div style={{ marginTop: 12, display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
          {pillars.map((pillar) => (
            <article key={pillar.title} className="card card--quiet" style={{ padding: 14 }}>
              <strong>{pillar.title}</strong>
              <p style={{ color: 'var(--subtle)', marginTop: 8, marginBottom: 0 }}>{pillar.body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="card" style={{ marginTop: 14, padding: 18 }}>
        <h3>Who makes this</h3>
        <p style={{ color: 'var(--subtle)', marginTop: 8, marginBottom: 0, lineHeight: 1.65 }}>
          ShasteGames is a small independent studio. We build the games, ship the updates, and answer support ourselves.
        </p>
      </section>

      <div style={{ marginTop: 18, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <button type="button" className="btn" onClick={() => setPage('games')}>Browse the 7 games</button>
        <button type="button" className="btn btn--ghost" onClick={() => setPage('roadmap')}>See the roadmap</button>
        <button type="button" className="btn btn--ghost" onClick={() => setPage('support')}>Support the project</button>
      </div>

      <button onClick={() => setPage('home')} className="btn btn--ghost" style={{ marginTop: 22 }}>
        {t('action.back_to_hub')}
      </button>
    </div>
  );
}

Object.assign(window, { AboutPage });