"use client"

import React from "react";
import PageHeader from "@/sections/PageHeader";
import Newsletter from "@/sections/Newsletter/Newsletter";
import Background from "@/components/Utilities/Background";
import Footer from "@/components/Footer";
import Payment from "@/sections/Payment";
import Spacer from "@/components/Utilities/Spacer";
import SolidBackgrondIconFeature from "@/sections/Features/SolidBackgrondIconFeature";

export default function PricingPage() {
  return (
    <main
      id="content"
      role="main"
      className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100"
    >
      <Background>
        <PageHeader
          title="Your Fast Pocket Application"
          subtitle={
            <>
              {" "}
              <h2 className="text-base-content text-2xl font-medium content text-center max-w-4xl mx-auto px-6">
                Apply now to join us as we build apps fast, together! Be among
                the first to start using FastPocket and lock in your lifetime
                discount.
              </h2>
            </>
          }
        />

        <h2 className="text-base-content text-4xl mt-12 font-extrabold content text-center max-w-6xl mx-auto px-6">
          What you will get!
        </h2>

        <SolidBackgrondIconFeature />

        <Payment type="one_time" />
        <Spacer className="mt-auto" />
        <Newsletter />
        <Spacer className="mb-8" />
        <Footer />
      </Background>
    </main>
  );
}