import { HeroSection } from "@/components/landing/HeroSection";
import { HowItWorks } from "@/components/landing/HowItWorks";
import { FinalCTA } from "@/components/landing/FinalCTA";
import { FaqSection } from "@/components/faq/FaqSection";
import { fetchTemplates } from "@/vendor/carrier/client";
import { PlanCard } from "@/components/landing/PlanCard";

export default async function HomePage() {
  const plans = await fetchTemplates();
  const featured = plans.slice(0, 3);

  return (
    <>
      <HeroSection />

      <section className="px-4 py-20">
        <div className="mx-auto max-w-6xl">
          <p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-sand-500">
            Plans
          </p>
          <h2 className="mt-2 text-center text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
            Popular plans
          </h2>
          <p className="mx-auto mt-3 max-w-lg text-center text-sand-600 dark:text-sand-400">
            Instant activation. No contracts. Price next to the limit.
          </p>
          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
            {featured.map((plan, i) => (
              <PlanCard key={plan.id} plan={plan} featured={i === 1} href={`/checkout/${plan.id}`} />
            ))}
          </div>
        </div>
      </section>

      <HowItWorks />
      <FaqSection />
      <FinalCTA />
    </>
  );
}