/* global React, t */

function WebnovelPage({ setPage }) {
  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12 }}>
        <div className="eyebrow">Vorenka companion</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 52px)', marginTop: 6 }}>
          {t('nav.webnovel')}
        </h1>
        <p style={{ color: 'var(--muted)', marginTop: 10, maxWidth: 680 }}>
          A long-form companion story set between the games. Chimera trainers, ancient rivalries, and the people caught in between.
        </p>
      </div>

      <section className="card" style={{ marginTop: 20, padding: 18 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>What it is</div>
        <p style={{ color: 'var(--subtle)', margin: 0, lineHeight: 1.65 }}>
          The webnovel explores the corners of the Vorenka universe that do not fit into a game loop: the politics of Eden, the
          lore behind Chimera Haven species, and the quiet days between adventures. It is free to read, and each story ties back
          to a location you can discover in-game.
        </p>
      </section>

      <section className="card" style={{ marginTop: 14, padding: 18 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Status</div>
        <p style={{ margin: 0 }}>
          <strong>Chapter 1 is being edited.</strong>
        </p>
        <p style={{ color: 'var(--subtle)', marginTop: 8, lineHeight: 1.6 }}>
          New chapters will be posted in this section and announced in the news feed. Patreon supporters can read drafts a week
          before public release.
        </p>
        <div style={{ marginTop: 12, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button type="button" className="btn" onClick={() => setPage('games')}>Explore the Vorenka games</button>
          <button type="button" className="btn btn--ghost" onClick={() => setPage('news')}>Read the news</button>
          <button type="button" className="btn btn--ghost" onClick={() => setPage('support')}>Support on Patreon</button>
        </div>
      </section>

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

Object.assign(window, { WebnovelPage });