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";
import { StoryOnboarding } from "./StoryOnboarding";

export function MobileScreens() {
  return (
    <div className="grid gap-8 lg:grid-cols-3">
      <PhoneFrame title="Onboarding — rotating goal story">
        <StoryOnboarding />
      </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>
  );
}