import React from 'react';
import { motion } from 'motion/react';
import { ShieldCheck, MapPin, Tag, ThumbsUp } from 'lucide-react';

export const PricingSection: React.FC = () => {
  return (
    <section id="pricing" className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-[#efe9dc]/60">
      <div className="max-w-4xl mx-auto">
        {/* Section Header */}
        <div className="text-center max-w-xl mx-auto mb-10 sm:mb-12">
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-montserrat font-black text-[#56a0ab] uppercase tracking-wide mb-3">
            💷 Simple & Honest Pricing
          </h2>
          <p className="font-inter font-light text-stone-600 text-sm sm:text-base">
            No complicated rate cards or hidden fees. Just straightforward, fair tech support.
          </p>
        </div>

        {/* Pricing Card */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="bg-white rounded-2xl p-6 sm:p-10 border border-stone-200/80 shadow-lg"
        >
          {/* Main Price Highlight */}
          <div className="flex flex-col md:flex-row items-center gap-6 p-6 sm:p-8 rounded-xl bg-[#56a0ab]/10 border border-[#56a0ab]/30 mb-8">
            <div className="p-4 bg-[#56a0ab] text-white rounded-2xl shrink-0 shadow-sm">
              <Tag className="w-10 h-10" />
            </div>
            <div className="text-center md:text-left">
              <div className="inline-block px-3 py-1 bg-[#56a0ab] text-white font-montserrat font-bold text-xs uppercase tracking-wider rounded-full mb-2">
                Standard Visit Rate
              </div>
              <p className="font-montserrat font-extrabold text-xl sm:text-2xl text-[#2a4a52] leading-snug">
                "Usually £15 per visit covers the bill but if it's anything bigger I'll let you know when I'm there and we can discuss it"
              </p>
            </div>
          </div>

          {/* Details & Guarantees */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Travel Note */}
            <div className="p-5 rounded-xl bg-[#f4eee1] border border-stone-200/80 flex items-start gap-4">
              <div className="p-2.5 bg-[#8b5e3c]/15 text-[#8b5e3c] rounded-lg shrink-0 mt-0.5">
                <MapPin className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-montserrat font-bold text-sm text-[#8b5e3c] uppercase tracking-wide mb-1">
                  Travel Coverage
                </h3>
                <p className="font-inter text-sm text-stone-700 leading-relaxed">
                  If it's more than 20 miles away from Helston, I might also have to add in another £10 for travel costs.
                </p>
              </div>
            </div>

            {/* No Fix No Fee Guarantee */}
            <div className="p-5 rounded-xl bg-emerald-50 border border-emerald-200/80 flex items-start gap-4">
              <div className="p-2.5 bg-emerald-600 text-white rounded-lg shrink-0 mt-0.5 shadow-sm">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-montserrat font-bold text-sm text-emerald-800 uppercase tracking-wide mb-1">
                  No Fix, No Fee Promise
                </h3>
                <p className="font-inter font-bold text-sm text-emerald-900 leading-relaxed">
                  Don't forget if I can't sort it, you don't pay!
                </p>
              </div>
            </div>
          </div>

          {/* Bottom Friendly Note */}
          <div className="mt-8 pt-6 border-t border-stone-100 flex items-center justify-center gap-2 text-stone-600 font-inter text-xs sm:text-sm text-center">
            <ThumbsUp className="w-4 h-4 text-[#56a0ab] shrink-0" />
            <span>Friendly, honest, local Cornwall tech assistance right at your doorstep.</span>
          </div>
        </motion.div>
      </div>
    </section>
  );
};