"use client";

import { useState } from "react";

import { PricingBillingToggle } from "@/components/sections/PricingBillingToggle";
import { PricingCard } from "@/components/sections/PricingCard";
import { PricingCompareTable } from "@/components/sections/PricingCompareTable";
import { PricingFreeBanner } from "@/components/sections/PricingFreeBanner";
import { PricingSectionShell } from "@/components/sections/PricingBackground";
import { SectionReveal } from "@/components/sections/SectionReveal";
import type { BillingPeriod } from "@/components/sections/pricing-data";
import { PRICING_TIERS } from "@/components/sections/pricing-data";

export interface PricingProps {
  className?: string;
}

export function Pricing({ className }: PricingProps) {
  const [billing, setBilling] = useState<BillingPeriod>("annual");

  return (
    <PricingSectionShell className={className}>
      <SectionReveal className="text-center">
        <h2 className="font-heading text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">
          Choose your FlatRender plan
        </h2>
      </SectionReveal>

      <SectionReveal className="mt-8">
        <PricingFreeBanner />
      </SectionReveal>

      <SectionReveal className="mt-10 flex justify-center">
        <PricingBillingToggle billing={billing} onChange={setBilling} />
      </SectionReveal>

      <SectionReveal className="mt-10 grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-5">
        {PRICING_TIERS.map((tier) => (
          <PricingCard key={tier.id} tier={tier} billing={billing} />
        ))}
      </SectionReveal>

      <SectionReveal className="mt-16">
        <PricingCompareTable billing={billing} onBillingChange={setBilling} />
      </SectionReveal>
    </PricingSectionShell>
  );
}