import React from "react";

export default function WebServicesPricing() {
  return (
    <div className="bg-white text-gray-800">
      {/* === Hosting Plans === */}
      <section className="py-16 px-4 sm:px-8 max-w-7xl mx-auto">
        <h2 className="text-3xl font-bold mb-10 text-center">Web Hosting Plans</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {/* Starter Plan */}
          <div className="border rounded-xl p-6 shadow-sm">
            <h3 className="text-xl font-semibold mb-4">Starter</h3>
            <p className="text-4xl font-bold mb-2">$4.99<span className="text-base font-medium">/month</span></p>
            <p className="text-sm mb-6 text-gray-600">Perfect for personal sites or portfolios.</p>
            <ul className="text-sm mb-6 space-y-2">
              <li>✔ 1 Website</li>
              <li>✔ 5 GB SSD Storage</li>
              <li>✔ Free SSL</li>
              <li>✔ cPanel Control Panel</li>
            </ul>
            <a
              href="https://billing.ibrandbiz.com/index.php?rp=/store/web-hosting/starter-pro-or-business"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-center bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium"
            >
              Get Started
            </a>
          </div>

          {/* Pro Plan */}
          <div className="border rounded-xl p-6 shadow-sm">
            <h3 className="text-xl font-semibold mb-4">Pro</h3>
            <p className="text-4xl font-bold mb-2">$9.99<span className="text-base font-medium">/month</span></p>
            <p className="text-sm mb-6 text-gray-600">Ideal for growing blogs or business sites.</p>
            <ul className="text-sm mb-6 space-y-2">
              <li>✔ 5 Websites</li>
              <li>✔ 25 GB SSD Storage</li>
              <li>✔ Free SSL & Backups</li>
              <li>✔ Priority Support</li>
            </ul>
            <a
              href="https://billing.ibrandbiz.com/index.php?rp=/store/web-hosting/pro-plan"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-center bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium"
            >
              Choose Pro
            </a>
          </div>

          {/* Business Plan */}
          <div className="border rounded-xl p-6 shadow-sm">
            <h3 className="text-xl font-semibold mb-4">Business</h3>
            <p className="text-4xl font-bold mb-2">$19.99<span className="text-base font-medium">/month</span></p>
            <p className="text-sm mb-6 text-gray-600">Built for e-commerce and high-traffic websites.</p>
            <ul className="text-sm mb-6 space-y-2">
              <li>✔ Unlimited Websites</li>
              <li>✔ 100 GB SSD Storage</li>
              <li>✔ Daily Backups + Email</li>
              <li>✔ Premium Add-Ons</li>
            </ul>
            <a
              href="https://billing.ibrandbiz.com/index.php?rp=/store/web-hosting/business-plan"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-center bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium"
            >
              Launch Your Business
            </a>
          </div>
        </div>
      </section>

      {/* === Add-Ons Teaser === */}
      <section className="py-12 px-4 sm:px-8 max-w-5xl mx-auto bg-gray-50 rounded-lg mb-10">
        <h2 className="text-2xl font-bold mb-4 text-center">Enhance Your Hosting</h2>
        <p className="text-center text-gray-600 mb-6">
          From daily backups to premium SSL and business email, add what you need — when you need it.
        </p>
        <div className="flex flex-wrap justify-center gap-4">
          <span className="inline-block bg-green-100 text-green-700 px-4 py-2 rounded-full text-sm">SSL Certificates</span>
          <span className="inline-block bg-blue-100 text-blue-700 px-4 py-2 rounded-full text-sm">Spam Protection</span>
          <span className="inline-block bg-purple-100 text-purple-700 px-4 py-2 rounded-full text-sm">Email Hosting</span>
          <span className="inline-block bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm">Website Builder</span>
        </div>
        <div className="text-center mt-6">
          <a
            href="/addons"
            className="inline-block bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg font-medium"
          >
            View All Add-Ons
          </a>
        </div>
      </section>

      {/* === Domain Services === */}
      <section className="py-12 px-4 sm:px-8 max-w-5xl mx-auto">
        <h2 className="text-3xl font-bold mb-10 text-center">Domain Services</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {/* Registration */}
          <div className="border rounded-xl p-6 shadow-sm">
            <h3 className="text-xl font-semibold mb-2">Domain Registration</h3>
            <p className="text-sm text-gray-600 mb-4">
              Secure your perfect domain name with competitive pricing
            </p>
            <div className="grid grid-cols-2 gap-4 text-center text-green-600 font-bold mb-4">
              <div>.com<br /><span className="text-black">$12.99/year</span></div>
              <div>.net<br /><span className="text-black">$14.99/year</span></div>
              <div>.org<br /><span className="text-black">$13.99/year</span></div>
              <div>.io<br /><span className="text-black">$49.99/year</span></div>
            </div>
            <a
              href="/domains"
              className="block text-center bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg font-medium"
            >
              Search Domains
            </a>
          </div>

          {/* Management */}
          <div className="border rounded-xl p-6 shadow-sm">
            <h3 className="text-xl font-semibold mb-2">Domain Management</h3>
            <p className="text-sm text-gray-600 mb-4">
              Professional domain management and DNS services
            </p>
            <ul className="text-sm mb-6 space-y-2">
              <li>✔ DNS management</li>
              <li>✔ Email forwarding</li>
              <li>✔ Domain forwarding</li>
              <li>✔ Privacy protection</li>
              <li>✔ Auto-renewal</li>
            </ul>
            <a
              href="/domain-management"
              className="block text-center bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg font-medium"
            >
              Learn More
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}
