import { personas, prices } from "@/lib/data";
import { Card } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { ButtonLink } from "@/components/ui/Button";

const features = [
  ["Flex budgeting", "Speedometer-style daily allowance after fixed expenses and goals."],
  ["Credit clarity", "Real FICO 8 factors translated into actions users can actually take."],
  ["Rewards intelligence", "Recommend the best card for each purchase based on live transactions."],
  ["Shared finances", "Partner and roommate views with privacy-aware collaboration."]
];

export function FeatureGrid() {
  return (
    <section id="features" className="mx-auto max-w-7xl px-5 py-24">
      <SectionHeading eyebrow="Product system" title="A PFM that feels active, honest, and useful." body="The MVP and differentiators are designed as reusable product modules, not one-off pages." />
      <div className="mt-12 grid gap-4 md:grid-cols-4">
        {features.map(([title, body]) => (
          <Card key={title}>
            <h3 className="text-lg font-bold text-ink dark:text-paper">{title}</h3>
            <p className="mt-3 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function PersonaGrid() {
  return (
    <section className="bg-paper/70 py-24 dark:bg-white/[0.03]">
      <div className="mx-auto max-w-7xl px-5">
        <SectionHeading eyebrow="Audience" title="Built for the five PRD personas." body="Each persona maps to a feature surface and a distinct product promise." />
        <div className="mt-12 grid gap-4 md:grid-cols-5">
          {personas.map(([name, body], index) => (
            <Card key={name} className="p-4">
              <Chip tone={index % 2 ? "indigo" : "mint"}>{String(index + 1).padStart(2, "0")}</Chip>
              <h3 className="mt-4 font-bold text-ink dark:text-paper">{name}</h3>
              <p className="mt-3 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

export function Pricing() {
  return (
    <section id="pricing" className="mx-auto max-w-7xl px-5 py-24">
      <SectionHeading eyebrow="Pricing" title="Clear subscription tiers. No hidden incentives." body="Pricing follows the PRD and reinforces Aartha&apos;s zero-conflict positioning." />
      <div className="mt-12 grid gap-4 md:grid-cols-4">
        {prices.map(([name, price, body]) => (
          <Card key={name} className={name === "Plus" ? "ring-2 ring-mint" : ""}>
            {name === "Plus" ? <Chip tone="saffron">Most popular</Chip> : null}
            <h3 className="mt-4 text-xl font-bold text-ink dark:text-paper">{name}</h3>
            <p className="mt-2 font-display text-4xl text-forest dark:text-mint">{price}</p>
            <p className="mt-3 min-h-12 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
            <ButtonLink href="/dashboard" variant={name === "Plus" ? "primary" : "secondary"} className="mt-6 w-full">Preview tier</ButtonLink>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function CTA() {
  return (
    <section className="px-5 pb-24">
      <div className="mx-auto max-w-7xl rounded-lg bg-forest p-10 text-paper dark:bg-mint dark:text-ink md:p-14">
        <h2 className="font-display text-5xl">Ready for a component-based handoff.</h2>
        <p className="mt-4 max-w-2xl text-paper/75 dark:text-ink/70">This prototype is structured for product review today and engineering continuation tomorrow.</p>
        <ButtonLink href="/dashboard" variant="secondary" className="mt-8">Explore app prototype</ButtonLink>
      </div>
    </section>
  );
}