import React from "react";
import { CheckCircle } from "lucide-react";
import { Link } from "react-router-dom";

export default function WebAddOns() {
  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-2">
          Website Add-On Services
        </h1>
        <p className="text-center text-gray-600 mb-10">
          Enhance your hosting experience with these optional services
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Add-On: SSL Certificate */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              SSL Certificate
            </h3>
            <p className="text-gray-600 mb-4">
              Secure your website and boost SEO rankings with industry-standard
              SSL encryption.
            </p>
            <ul className="text-sm text-gray-700 space-y-1 mb-4">
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                HTTPS Security
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Trust padlock icon
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Ideal for ecommerce
              </li>
            </ul>
            <button className="bg-[#00CB51] hover:bg-[#00b449] text-white font-medium px-4 py-2 rounded-md w-full">
              Add SSL ($15/year)
            </button>
          </div>

          {/* Add-On: SiteLock Security */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              SiteLock Website Security
            </h3>
            <p className="text-gray-600 mb-4">
              Detect & remove malware automatically. Keep your site protected 24/7.
            </p>
            <ul className="text-sm text-gray-700 space-y-1 mb-4">
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Daily malware scans
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Blacklist monitoring
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Auto removal tools
              </li>
            </ul>
            <button className="bg-[#00CB51] hover:bg-[#00b449] text-white font-medium px-4 py-2 rounded-md w-full">
              Add SiteLock ($24.99/year)
            </button>
          </div>

          {/* Add-On: Email Essentials */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              Branded Email Essentials
            </h3>
            <p className="text-gray-600 mb-4">
              Create up to 5 branded emails (e.g., info@yourdomain.com) and forward to your inbox.
            </p>
            <ul className="text-sm text-gray-700 space-y-1 mb-4">
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                5 custom email addresses
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Simple forwarding setup
              </li>
              <li className="flex items-center">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                Domain branding boost
              </li>
            </ul>
            <button className="bg-[#00CB51] hover:bg-[#00b449] text-white font-medium px-4 py-2 rounded-md w-full">
              Add Email ($9.99/year)
            </button>
          </div>
        </div>

        <div className="mt-12 text-center">
          <Link
            to="/web-services-pricing"
            className="inline-block bg-[#FF8B00] hover:bg-[#e57a00] text-white font-semibold px-6 py-3 rounded-md"
          >
            ← Back to Hosting Plans
          </Link>
        </div>
      </div>
    </div>
  );
}
