import { ArrowRight, ShieldCheck, Sparkles } from "lucide-react";
import { AreaChart } from "@/components/charts/AreaChart";
import { ButtonLink } from "@/components/ui/Button";
import { Card, StatCard } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";

export function Hero() {
  return (
    <section className="grain">
      <div className="mx-auto grid min-h-[calc(100vh-73px)] max-w-7xl items-center gap-10 px-5 py-14 lg:grid-cols-[1fr_.9fr]">
        <div>
          <Chip>Subscription-only · zero ads · zero referral bias</Chip>
          <h1 className="mt-6 max-w-3xl font-display text-6xl leading-[0.95] text-ink dark:text-paper md:text-7xl">
            Your money app should help you move, not just watch.
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-8 text-ink/68 dark:text-paper/68">
            Aartha unifies budgets, cash flow, credit, rewards, goals, and AI coaching into one calm finance cockpit built around the user&apos;s wellbeing.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <ButtonLink href="/dashboard">View dashboard <ArrowRight size={17} /></ButtonLink>
            <ButtonLink href="/mobile" variant="secondary">Mobile screens</ButtonLink>
          </div>
          <div className="mt-8 flex flex-wrap gap-5 text-sm font-semibold text-ink/60 dark:text-paper/60">
            <span className="inline-flex items-center gap-2"><ShieldCheck size={16} /> Bank-grade posture</span>
            <span className="inline-flex items-center gap-2"><Sparkles size={16} /> Ask Aartha AI coach</span>
          </div>
        </div>
        <Card className="p-5">
          <div className="grid gap-4 sm:grid-cols-3">
            <StatCard label="Net worth" value="$184k" detail="+8.2% YTD" />
            <StatCard label="Flex left" value="$93" detail="Safe to spend today" tone="saffron" />
            <StatCard label="FICO 8" value="742" detail="+21 since April" tone="indigo" />
          </div>
          <div className="mt-5 rounded-lg bg-white/70 p-5 dark:bg-white/[0.05]">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-bold uppercase tracking-wide text-ink/45 dark:text-paper/45">Cash-flow forecast</p>
                <p className="font-display text-4xl text-forest dark:text-mint">$7,420</p>
              </div>
              <Chip tone="saffron">Next 30 days</Chip>
            </div>
            <AreaChart values={[8, 12, 11, 19, 18, 24, 31, 28, 36]} />
          </div>
        </Card>
      </div>
    </section>
  );
}