export function PackageDetails() {
  return (
    <section id="features" className="bg-white py-16 md:py-24">
      <div className="container mx-auto max-w-6xl px-6">
        <div className="text-center max-w-3xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">
            Your All-In-One Pharmacy Website Package
          </h2>
          <p className="text-xl text-gray-600 mb-12">
            Here's everything included to get you online, get found, and get more patients—all without you lifting a
            finger.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Feature 1 */}
          <div className="bg-blue-50 p-8 rounded-lg shadow-sm border border-blue-100">
            <h3 className="text-xl font-bold text-gray-900 mb-3">1. Your "Done-For-You" Pharmacy Website</h3>
            <span className="inline-block bg-blue-200 text-blue-800 text-sm font-bold px-3 py-1 rounded-full mb-4">
              £700 value
            </span>
            <p className="text-gray-700">
              A professional website built to bring in more calls and walk-ins without adding to your admin.
            </p>
          </div>

          {/* Feature 2 */}
          <div className="bg-blue-50 p-8 rounded-lg shadow-sm border border-blue-100">
            <h3 className="text-xl font-bold text-gray-900 mb-3">2. Hosting & Domain Management</h3>
            <span className="inline-block bg-blue-200 text-blue-800 text-sm font-bold px-3 py-1 rounded-full mb-4">
              £100 value
            </span>
            <p className="text-gray-700">
              We handle everything behind the scenes—from your website address to renewals—so your site stays live and
              secure.
            </p>
          </div>

          {/* Feature 3 */}
          <div className="bg-blue-50 p-8 rounded-lg shadow-sm border border-blue-100">
            <h3 className="text-xl font-bold text-gray-900 mb-3">3. Get Found & Chosen Online</h3>
            <span className="inline-block bg-blue-200 text-blue-800 text-sm font-bold px-3 py-1 rounded-full mb-4">
              £250 value
            </span>
            <p className="text-gray-700">
              Built so local patients can find you on Google. Each service has its own page to encourage bookings,
              calls, and visits.
            </p>
          </div>

          {/* Feature 4 */}
          <div className="bg-blue-50 p-8 rounded-lg shadow-sm border border-blue-100">
            <h3 className="text-xl font-bold text-gray-900 mb-3">4. Mobile-First, Secure & Fully Managed</h3>
            <span className="inline-block bg-blue-200 text-blue-800 text-sm font-bold px-3 py-1 rounded-full mb-4">
              £250 value
            </span>
            <p className="text-gray-700">
              Your site looks perfect on phones, stays secure, backed up, and monitored 24/7. No tech skills needed.
            </p>
          </div>

          {/* Feature 5 */}
          <div className="bg-blue-50 p-8 rounded-lg shadow-sm border border-blue-100">
            <h3 className="text-xl font-bold text-gray-900 mb-3">5. Website Edits Included</h3>
            <span className="inline-block bg-blue-200 text-blue-800 text-sm font-bold px-3 py-1 rounded-full mb-4">
              £100 value
            </span>
            <p className="text-gray-700">
              Need to update your hours or add a service? Request up to 5 changes every month. We handle it for you.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
