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

export default function About() {
  const { contactEmail } = useSite()
  return (
    <PublicLayout section="website">
      <div className="shell-narrow page-body">
        <PageHeader eyebrow="About" title="About Mysticmoon" />
        <div className="prose">
          <p>
            Mysticmoon is an independent, privately-run Ultima Online shard built by a small group of long-time players.
            It is not affiliated with or endorsed by the owners of Ultima Online — 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: a contested wilderness worth exploring, safe towns 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 hybrid ruleset — safe towns, a dangerous wild.</li>
            <li>Custom crafting, housing, and exploration content.</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>
  )
}