import Layout from "@/components/layout/Layout";
import { Check, Star, Zap, Crown } from "lucide-react";
import Image from "next/image";

export default function PricingPage() {
  return (
    <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
      <div className="row justify-content-center mt-5">
        <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
          <span className="sub-title">
            PLANS <span className="title-color"> AND PRICING</span>
          </span>
          <h2 className="title tg-element-title">Full-service web management built to outrun the competition.</h2>
        </div>
      </div>
      <div className="container mx-auto px-4 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
          {/* Essential Plan */}
          <div className="relative bg-white border border-gray-200 rounded-lg shadow-sm">
            <div className="text-center p-6 pb-4">
              <h3 className="text-2xl font-bold mb-2">Starter Care</h3>
              <div className="flex justify-center mb-4">
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank-gradient.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank-gradient.webp"
                  width={60}
                  height={60}
                />
              </div>
              <p className="text-sm text-gray-600 mb-4">
                Great for getting started or low-maintenance needs.
              </p>
              <div className="mb-4">
                <div className="text-4xl font-bold">$175</div>
                <div className="text-sm text-gray-600">USD /mo</div>
              </div>
              <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
                Buy Now
              </button>
            </div>
            <div className="p-6 pt-0 space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Custom onboarding</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Business grade website hosting
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">24/7 website protection</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Code & speed optimization</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Google product integrations</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">On-Demand monthly revisions</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Free SSL certificate</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">50GB of storage</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Weekly Backups</span>
                </div>
              </div>
            </div>
          </div>

          {/* Core Plan */}
          <div className="relative bg-white border-2 border-blue-200 rounded-lg shadow-sm">
            <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
              Best Value
            </div>
            <div className="text-center p-6 pb-4">
              <h3 className="text-2xl font-bold mb-2">Steady Support</h3>
              <div className="flex justify-center mb-4">
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank-gradient.webp"
                  width={60}
                  height={60}
                />
              </div>
              <p className="text-sm text-gray-600 mb-4">
                Ideal for businesses needing regular updates.
              </p>
              <div className="mb-4">
                <div className="text-4xl font-bold">$250</div>
                <div className="text-sm text-gray-600">USD /mo</div>
              </div>
              <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
                Get In Touch
              </button>
            </div>
            <div className="p-6 pt-0 space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Custom onboarding</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Business grade website hosting
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">24/7 website protection</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Code & speed optimization</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Google product integrations</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">On-Demand bi-weekly revisions</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Free SSL certificate</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">100GB of additional storage</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Daily Backups</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Site performance investigations
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Form submission monitoring</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Proprietary CMS Integration</span>
                </div>
              </div>

              <div className="pt-2">
                <div className="font-bold text-sm mb-2">Advisory Services</div>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-sm">
                      Prioritized senior technical support
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-sm">
                      Increased Scope for On-Demand revisions
                    </span>
                  </div>
                </div>
              </div>

              <div className="pt-2">
                <div className="font-bold text-sm mb-2">
                  Performance & Insights
                </div>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-sm">Monthly Site Health Reports</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-sm">99.99% uptime SLA</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Enterprise Plan */}
          <div className="relative bg-white border border-gray-200 rounded-lg shadow-sm">
            <div className="text-center p-6 pb-4">
              <h3 className="text-2xl font-bold mb-2">Total Coverage</h3>
              <div className="flex justify-center mb-4">
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
                <Image
                  src="/assets/img/icon/icon-rank.webp"
                  width={60}
                  height={60}
                />
              </div>
              <p className="text-sm text-gray-600 mb-4">
                Perfect for hands-off clients who want it all handled.
              </p>
              <div className="mb-4">
                <div className="text-4xl font-bold">$400</div>
                <div className="text-sm text-gray-600">USD /mo</div>
              </div>
              <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
                Get In Touch
              </button>
            </div>
            <div className="p-6 pt-0 space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Custom onboarding</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Business grade website hosting
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">24/7 website protection</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Code & speed optimization</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Google product integrations</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Unlimited revisions</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Automated backup protection</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Free SSL certificate</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">100GB of additional storage</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Daily Backups + Off-site Backups
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Site performance investigations
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Form submission monitoring</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Proprietary CMS Integration</span>
                </div>
                <div className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">
                    Dedicated senior account manager
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}
