import "./style.css";

export const metadata = { title: "Coming soon | Magent — Grizzlyflix" };

export default function ComingSoonPage() {
  return (
    <main className="launch-cover">
      <div className="launch-brand">GRIZZLYFLIX</div>
      <span className="launch-badge">COMING SOON</span>
      <h1>
        Your next watch.
        <br />
        <em>Made simpler.</em>
      </h1>
      <p className="launch-intro">
        The new Magent is on its way. Easier requests, clearer updates and a simpler way to get things fixed.
      </p>
      <ol className="launch-path" aria-label="Request journey">
        {["Request", "Track", "Watch"].map((label, index) => (
          <li key={label}>
            <span>0{index + 1}</span>
            <strong>{label}</strong>
          </li>
        ))}
      </ol>
      <p className="launch-note">We’re getting everything ready. Check back soon.</p>
      <footer>
        <strong>Magent</strong>
        <span>Grizzlyflix member portal</span>
        <a href="/login">Admin sign in</a>
      </footer>
    </main>
  );
}