import React from "react"

function RightAlignedBorderBottomFAQ() {
  return (
    <>
      {/* FAQ */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* Grid */}
        <div className="grid md:grid-cols-5 gap-10">
          <div className="md:col-span-2">
            <div className="max-w-xs">
              <h2 className="text-2xl font-bold md:text-4xl md:leading-tight text-base-content">
                Frequently
                <br />
                asked questions
              </h2>
              <p className="mt-1 hidden md:block text-base-content/80 ">
                Answers to the most frequently asked questions.
              </p>
            </div>
          </div>
          {/* End Col */}
          {/* Accordion */}
          <div className="md:col-span-3 space-y-6">
            {/* My tech stack is different can I still use it? */}
            <div className="collapse collapse-plus bg-base-300">
              <input
                type="radio"
                id="my-tech-stack-is"
                name="my-accordion-3"
                className="w-auto h-auto"
                defaultChecked
              />
              <label
                htmlFor="my-tech-stack-is"
                className="collapse-title text-xl font-medium"
              >
                My tech stack is different can I still use it?
              </label>
              <div className="collapse-content">
                <p>
                  Yes, as long as you&apos;re comfortable with React & NextJS.
                  Libraries are independent. You can use SendGrid instead of
                  Mailer, LemonSqueezy instead of Stripe, or Supabase instead of
                  Pocketbase, for instance.
                </p>
              </div>
            </div>
            {/* What do I get exactly? */}
            <div className="collapse collapse-plus bg-base-300">
              <input
                type="radio"
                id="what-do-i-get"
                name="my-accordion-3"
                className="w-auto h-auto"
              />
              <label
                htmlFor="what-do-i-get"
                className="collapse-title text-xl font-medium"
              >
                What do I get exactly?
              </label>
              <div className="collapse-content">
                <p>
                  1.The NextJS starter with all the boilerplate code you need to
                  run an online business: a payment system, a database, login, a
                  blog, UI components, and much more.
                </p>
                <p>
                  2. Documentation that helps you set up your app from scratch
                </p>
                <p>
                  3. Access to deployment templates to self host your app for
                  free
                </p>
              </div>
            </div>
            {/* Is it a website template? */}
            <div className="collapse collapse-plus bg-base-300">
              <input
                type="radio"
                id="is-it-a-website"
                name="my-accordion-3"
                className="w-auto h-auto"
              />
              <label
                htmlFor="is-it-a-website"
                className="collapse-title text-xl font-medium"
              >
                Is it a website template?
              </label>
              <div className="collapse-content">
                <p>
                  It&apos;s more than just a template. You can copy/paste
                  sections to build your site quickly, like a pricing section,
                  an FAQ, and even an entire blog. You also get a bunch of UI
                  components like buttons, modals, popovers, etc. The NextJS
                  starter also comes with handy tools you need to run an online
                  business—payment processing, emails, SEO, etc.
                </p>
              </div>
            </div>
            {/* How is FastPocket different from other boilerplates */}
            <div className="collapse collapse-plus bg-base-300">
              <input
                type="radio"
                id="are-there-any-other"
                name="my-accordion-3"
                className="w-auto h-auto"
              />
              <label
                htmlFor="are-there-any-other"
                className="collapse-title text-xl font-medium"
              >
                Are there any other costs associated
              </label>
              <div className="collapse-content">
                <p>
                  Many hosting platforms, like Vercel, let you host a project
                  for free (front-end + back-end) and we give you Pocketbase
                  templates to host your backend for free on Fly.io or
                  PocketHost — so you can launch for first app for $0/month.
                </p>
              </div>
            </div>
            {/* How is FastPocket different from other boilerplates */}
            <div className="collapse collapse-plus bg-base-300">
              <input
                type="radio"
                id="how-is-fastpocket-different"
                name="my-accordion-3"
                className="w-auto h-auto"
              />
              <label
                htmlFor="how-is-fastpocket-different"
                className="collapse-title text-xl font-medium"
              >
                How is FastPocket different from other boilerplates
              </label>
              <div className="collapse-content">
                <p>
                  FastPocket is all about giving you control over how you host
                  your app. You won&apos;t be locked into vendors when you scale
                  and you get to choose how much or how little you spend. We
                  give you deployment templates and hosting options (that you
                  can migrate from when you grow)
                </p>
              </div>
            </div>
          </div>
          {/* End Accordion */}
          {/* End Col */}
        </div>
        {/* End Grid */}
      </div>
      \{/* End FAQ */}
    </>
  )
}

export default RightAlignedBorderBottomFAQ