import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { useSite } from '../../contexts/SiteContext.jsx'

export default function About() {
  const { contactEmail, siteShortName } = useSite()
  return (
    <PublicLayout section="website">
      <div className="shell-narrow page-body">
        <PageHeader eyebrow="About" title={`About ${siteShortName}`} />
        <div className="prose">
          <p>
            {siteShortName} is an independent, privately-run game server built by a small group of long-time
            players. It is not affiliated with or endorsed by the owners of the game it runs — it is a labor of
            love for the old worlds and the friendships made in them.
          </p>
          <p>
            Our aim is a calm, hand-tended world: somewhere worth exploring, somewhere worth living in, and
            systems that reward curiosity over grind. We are building slowly and in the open, sharing news,
            screenshots, and guides as the world comes online.
          </p>
          <h2>What to expect</h2>
          <ul>
            <li>A world that is hand-tended rather than left to run itself.</li>
            <li>Custom content, and changes explained before they land.</li>
            <li>A small, friendly population and an active wiki.</li>
          </ul>
        </div>
        <section className="note" style={{ marginTop: 30 }}>
          <h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.15rem', color: 'var(--head)' }}>
            Get in touch
          </h3>
          <p style={{ margin: 0, color: 'var(--muted)' }}>
            Questions, ideas, or want to help build? Reach us at{' '}
            <a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
              {contactEmail}
            </a>
            .
          </p>
        </section>
      </div>
    </PublicLayout>
  )
}