import { MobileScreens } from "@/components/mobile/MobileScreens";
import { ButtonLink } from "@/components/ui/Button";
import { Logo } from "@/components/ui/Logo";

export default function MobilePage() {
  return (
    <main className="min-h-screen bg-cream px-5 py-8 dark:bg-[#08130f]">
      <div className="mx-auto max-w-7xl">
        <div className="flex items-center justify-between">
          <Logo />
          <ButtonLink href="/" variant="secondary">Back home</ButtonLink>
        </div>
        <div className="mt-12">
          <h1 className="font-display text-5xl text-ink dark:text-paper">Mobile product screens</h1>
          <p className="mt-3 max-w-2xl text-ink/65 dark:text-paper/65">Reusable phone frames showing onboarding, flex dashboard, and credit coaching surfaces.</p>
        </div>
        <div className="mt-10">
          <MobileScreens />
        </div>
      </div>
    </main>
  );
}