export function GuaranteeFAQ() {
  return (
    <section className="bg-blue-50 py-16 md:py-24">
      <div className="container mx-auto max-w-6xl px-6 grid md:grid-cols-5 gap-12">
        <div className="md:col-span-2">
          <div className="bg-white p-8 rounded-lg shadow-2xl border-2 border-blue-600 sticky top-10">
            <svg
              className="w-16 h-16 text-blue-600 mb-4 mx-auto"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="1.5"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.745 3.745 0 01-3.296-1.043 3.746 3.746 0 01-1.043-3.296A3.746 3.746 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
              />
            </svg>
            <h3 className="text-3xl font-extrabold text-gray-900 text-center mb-4">30-Day Happiness Guarantee</h3>
            <p className="text-center mb-6 text-gray-700">
              If, within the first 30 days, you're not happy with how your site looks or performs, we'll fix it fast—or
              give you a full refund (minus domain and hosting costs).
            </p>
            <div className="flex justify-center">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Visa-MasterCard-RX80MRSwga1CwkXDv3nXzoFmrPYhX0.jpg"
                alt="Visa and Mastercard accepted"
                className="h-12 w-auto"
              />
            </div>
          </div>
        </div>

        <div className="md:col-span-3">
          <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-10">Common Questions</h2>
          <div className="space-y-8">
            <div className="border-b border-gray-300 pb-6">
              <h4 className="text-xl font-semibold text-gray-900 mb-2">Can I update things later?</h4>
              <p className="text-gray-700">
                <strong>Yes.</strong> 5 changes a month are included (and you get unlimited edits in your first month).
                This is perfect for updating hours, adding/removing services, or changing prices.
              </p>
            </div>
            <div className="border-b border-gray-300 pb-6">
              <h4 className="text-xl font-semibold text-gray-900 mb-2">Do I need any technical knowledge?</h4>
              <p className="text-gray-700">
                <strong>None at all.</strong> We handle 100% of the tech. If you can use WhatsApp or send an email, you
                have all the skills you need. You tell us what to change, and we do it.
              </p>
            </div>
            <div className="border-b border-gray-300 pb-6">
              <h4 className="text-xl font-semibold text-gray-900 mb-2">Who owns the website and domain?</h4>
              <p className="text-gray-700">
                <strong>You do.</strong> The domain is registered in your pharmacy's name, and we simply manage it for
                your convenience. If you ever decide to leave, you can take your domain with you anytime. You're never
                locked in.
              </p>
              <p className="text-sm text-gray-500 mt-2">
                (There's just a small £20 admin fee to cover the official transfer process.)
              </p>
            </div>
            <div className="border-b border-gray-300 pb-6">
              <h4 className="text-xl font-semibold text-gray-900 mb-2">Still unsure? You're covered.</h4>
              <p className="text-gray-700">
                Every website includes our 30-Day Happiness Guarantee — if you're not happy, we'll fix it or refund you
                (minus domain & hosting).
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
