export function NovemberBonus() {
  return (
    <section className="bg-amber-50 border-t-4 border-amber-300 py-16 md:py-24">
      <div className="container mx-auto max-w-4xl px-6">
        <div className="text-center mb-12">
          <span className="inline-block bg-amber-500 text-white text-sm font-bold px-4 py-2 rounded-full mb-4">
            November-Only Bonuses (Worth £200+)
          </span>
          <h2 className="text-3xl md:text-4xl font-extrabold text-amber-900 mb-4">Join Before 30th November</h2>
          <p className="text-xl text-amber-800">Unlock these extra benefits when you sign up this month.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Bonus 1 */}
          <div className="bg-white p-8 rounded-lg shadow-lg border border-amber-200">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">Unlimited Website Edits for 30 Days</h3>
            <p className="text-lg font-semibold text-teal-700 mb-3">(Launch Support)</p>
            <p className="text-gray-700">
              During your first month, request as many small updates as you need—changing text, photos, or service
              details—until you're completely happy.
              <br />
              <br />
              <span className="text-sm text-gray-500">(After that, your plan includes 5 edits/month).</span>
            </p>
          </div>

          {/* Bonus 2 */}
          <div className="bg-white p-8 rounded-lg shadow-lg border border-amber-200">
            <h3 className="text-2xl font-bold text-gray-900 mb-3">6-Month Pharmacy Growth Check-In</h3>
            <p className="text-lg font-semibold text-teal-700 mb-3">(£200 Value)</p>
            <p className="text-gray-700">
              In 6 months, you'll get a quick one-to-one call with me to review your website and digital presence.
              <br />
              <br />
              <strong className="text-red-600">I only have 2 call slots available in May,</strong> offered on a
              first-come, first-served basis.
            </p>
          </div>
        </div>

        <div className="mt-12 text-center">
          <a
            href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-3 px-8 py-6 text-lg font-bold text-white rounded-lg shadow-xl transition-all duration-300 hover:shadow-2xl bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700"
          >
            Start My Pharmacy Website — £540/year
          </a>
        </div>
      </div>
    </section>
  )
}
