import { GaugeChart } from "@/components/charts/GaugeChart";
import { Card } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";
import { ProgressBar } from "@/components/ui/ProgressBar";
import { PhoneFrame } from "./PhoneFrame";

export function MobileScreens() {
  return (
    <div className="grid gap-8 lg:grid-cols-3">
      <PhoneFrame title="Onboarding">
        <div className="flex h-full flex-col justify-between">
          <div>
            <Chip>Zero conflict finance</Chip>
            <h2 className="mt-8 font-display text-5xl leading-none text-ink dark:text-paper">Meet your money clearly.</h2>
            <p className="mt-4 text-sm leading-6 text-ink/65 dark:text-paper/65">Connect accounts, choose goals, and let Aartha build your first flex plan.</p>
          </div>
          <button className="mb-10 rounded-lg bg-forest py-3 font-bold text-white dark:bg-mint dark:text-ink">Get started</button>
        </div>
      </PhoneFrame>
      <PhoneFrame title="Dashboard">
        <div>
          <p className="text-sm text-ink/50 dark:text-paper/50">Good morning</p>
          <h2 className="font-display text-4xl text-forest dark:text-mint">$93</h2>
          <p className="text-sm font-semibold text-ink/60 dark:text-paper/60">safe to spend today</p>
          <Card className="mt-5 p-4"><GaugeChart value={72} label="Flex pace" /></Card>
          <div className="mt-4 space-y-3">
            <ProgressBar label="Groceries" value={84} />
            <ProgressBar label="Dining" value={109} />
          </div>
        </div>
      </PhoneFrame>
      <PhoneFrame title="Credit & AI">
        <div>
          <Chip tone="indigo">FICO 8</Chip>
          <h2 className="mt-4 font-display text-6xl text-forest dark:text-mint">742</h2>
          <p className="text-sm text-ink/60 dark:text-paper/60">+21 since April</p>
          <Card className="mt-6 p-4">
            <h3 className="font-bold text-ink dark:text-paper">Ask Aartha</h3>
            <p className="mt-3 text-sm leading-6 text-ink/65 dark:text-paper/65">Utilization improved. Keep cards below 30% before statement close to protect the gain.</p>
          </Card>
        </div>
      </PhoneFrame>
    </div>
  );
}