import { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { motion } from 'motion/react';
import { Link } from 'react-router-dom';
import { ArrowRight, CheckCircle2, ShieldCheck, ArrowLeft, MapPin } from 'lucide-react';

export const PricingPage = () => {
  const [pricingType, setPricingType] = useState<'residential' | 'commercial'>('residential');

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div className="animate-in fade-in duration-700 bg-white">
      <Helmet>
        <title>Aircon Servicing Price Singapore | Cheap & Transparent AC Rates</title>
        <meta name="description" content="View honest and cheap aircon servicing price estimates in Singapore. We offer transparent rates for general aircon servicing, chemical wash, gas top-up, and contract maintenance." />
        <meta name="keywords" content="aircon servicing price singapore, cheap aircon servicing singapore, aircon maintenance cost, aircon gas top up price, aircon chemical wash price" />
        <link rel="canonical" href="https://skyblueaircon.com/pricing" />
        
        {/* OpenGraph/Facebook metadata */}
        <meta property="og:title" content="Aircon Servicing Price Singapore | Cheap & Transparent AC Rates" />
        <meta property="og:description" content="Get transparent and low-cost Singapore aircon servicing rates. Browse pricing for general cleaning, chemical overhaul, and gas top-up packages with zero hidden fees." />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://skyblueaircon.com/PureLogo.png" />
        <meta property="og:url" content="https://skyblueaircon.com/pricing" />
        <meta property="og:site_name" content="Sky Blue Aircon Engineering" />
        <meta property="og:locale" content="en_SG" />
        
        {/* Twitter Card metadata */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Aircon Servicing Price Singapore | Cheap & Transparent AC Rates" />
        <meta name="twitter:description" content="Get transparent and low-cost Singapore aircon servicing rates. Browse pricing for general cleaning, chemical overhaul, and gas top-up packages with zero hidden fees." />
        <meta name="twitter:image" content="https://skyblueaircon.com/PureLogo.png" />

        <script type="application/ld+json">
          {`
            [
              {
                "@context": "https://schema.org",
                "@type": "WebPage",
                "@id": "https://skyblueaircon.com/pricing/#webpage",
                "url": "https://skyblueaircon.com/pricing",
                "name": "Standard Aircon Servicing Pricing Guides",
                "description": "Transparent flat-rate pricing guides for general aircon servicing, deep chemical cleaning, Freon gas top-ups, and troubleshooting islandwide in Singapore."
              },
              {
                "@context": "https://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [
                  {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Home",
                    "item": "https://skyblueaircon.com/"
                  },
                  {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "Pricing",
                    "item": "https://skyblueaircon.com/pricing"
                  }
                ]
              }
            ]
          `}
        </script>
      </Helmet>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-40 lg:pb-28 overflow-hidden bg-slate-50">
        <div className="absolute inset-0 bg-sky-900/5 z-0" />
        <div className="max-w-4xl mx-auto px-6 sm:px-8 relative z-10 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <Link to="/" className="inline-flex items-center gap-2 text-sky-600 font-bold text-xs uppercase tracking-widest hover:gap-3 transition-all mb-8">
              <ArrowLeft size={16} /> Back Home
            </Link>
            
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-tight tracking-tight">
              Honest & Transparent <span className="text-sky-600">Pricing</span>
            </h1>
            <p className="text-base sm:text-lg text-slate-500 mt-6 leading-relaxed font-medium max-w-2xl mx-auto">
              Choose the right plan for your needs. We offer clear, upfront pricing with no hidden fees for both residential and commercial aircon units.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6 sm:px-8">
          <div className="flex flex-col sm:flex-row justify-between items-center mb-12 gap-6">
            <div>
              <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Normal Servicing Rates</h2>
              <p className="text-slate-500 font-medium mt-2 text-sm sm:text-base">Comprehensive cleaning with our 30-day workmanship warranty.</p>
            </div>

            <div className="inline-flex bg-slate-100 p-1.5 rounded-xl shrink-0">
              <button
                onClick={() => setPricingType('residential')}
                className={`px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${pricingType === 'residential' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Residential
              </button>
              <button
                onClick={() => setPricingType('commercial')}
                className={`px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${pricingType === 'commercial' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Commercial
              </button>
            </div>
          </div>

          <div className="overflow-hidden bg-white border border-slate-200 rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] mb-12">
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse min-w-[500px]">
                <thead>
                  <tr>
                    <th className="bg-sky-600 text-white font-bold py-5 px-6 text-center border-r border-sky-500 w-1/3">Nos Units FCU</th>
                    <th className="bg-sky-600 text-white font-bold py-5 px-6 text-center border-r border-sky-500 w-1/3">AD HOC (1 Time)</th>
                    <th className="bg-sky-600 text-white font-bold py-5 px-6 text-center w-1/3">4 X Yearly Quarterly</th>
                  </tr>
                </thead>
                <tbody className="text-slate-700 font-medium text-center">
                  {(pricingType === 'residential' ? [
                    { units: "1", adhoc: "$41.00", yearly: "-" },
                    { units: "2", adhoc: "$56.10", yearly: "$203.80" },
                    { units: "3", adhoc: "$71.40", yearly: "$256.80" },
                    { units: "4", adhoc: "$86.60", yearly: "$326.00" },
                    { units: "5", adhoc: "$101.90", yearly: "$407.50" },
                    { units: "6", adhoc: "$117.20", yearly: "$468.60" }
                  ] : [
                    { units: "1", adhoc: "$65.40", yearly: "-" },
                    { units: "2", adhoc: "$98.10", yearly: "$348.80" },
                    { units: "3", adhoc: "$130.80", yearly: "$479.60" },
                    { units: "4", adhoc: "$163.50", yearly: "$610.40" },
                    { units: "5", adhoc: "$196.20", yearly: "$741.20" },
                    { units: "6", adhoc: "$228.90", yearly: "$872.00" }
                  ]).map((row, i) => (
                    <tr key={i} className={`border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors`}>
                      <td className="py-5 px-6 border-r border-slate-100">{row.units}</td>
                      <td className="py-5 px-6 border-r border-slate-100 font-bold text-slate-900">{row.adhoc}</td>
                      <td className="py-5 px-6 font-bold text-sky-600">{row.yearly}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            
            <div className="bg-slate-50 border-t border-slate-100 px-6 py-4 flex flex-col sm:flex-row items-center justify-center gap-3 text-center sm:text-left text-xs text-slate-600 font-medium leading-relaxed">
              <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-800 font-bold rounded-lg text-[10px] uppercase border border-amber-200/50 tracking-wider shrink-0 shadow-sm">
                <MapPin size={12} className="text-amber-600" /> CBD Area
              </span>
              <p className="max-w-2xl text-[11px] sm:text-xs">
                A flat transport &amp; traveling surcharge of <strong className="text-slate-900">$20 (before GST)</strong> applies per trip for jobs located within Singapore's Central Business District (CBD).
              </p>
            </div>

            <div className="bg-slate-50 border-t border-slate-100 px-8 py-4 text-xs text-slate-500 font-semibold space-y-1.5 border-t border-slate-100">
              <p className="flex items-start gap-2 justify-center sm:justify-start">
                <span className="text-amber-500 select-none shrink-0">**</span>
                <span>Prices above is based on a height up to 12 feet only</span>
              </p>
              <p className="flex items-start gap-2 justify-center sm:justify-start">
                <span className="text-amber-500 select-none shrink-0">**</span>
                <span>For 7 nos. of fan coil units &amp; above, a separate quotation shall issue upon request.</span>
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8 mb-16">
            <div className="p-8 bg-sky-50 rounded-3xl border border-sky-100">
              <h3 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-3">
                <CheckCircle2 size={24} className="text-sky-600" />
                Why Yearly Maintenance?
              </h3>
              <p className="text-slate-600 leading-relaxed font-medium text-sm mb-6">
                Our 4x yearly quarterly plan offers the best value, keeping your units in top condition year-round and preventing costly breakdowns.
              </p>
              <ul className="space-y-3">
                 <li className="flex gap-3 text-sm text-slate-700 font-medium">
                   <CheckCircle2 size={18} className="text-sky-500 shrink-0" /> Priority booking during peak periods
                 </li>
                 <li className="flex gap-3 text-sm text-slate-700 font-medium">
                   <CheckCircle2 size={18} className="text-sky-500 shrink-0" /> Proactive diagnosis of component wear
                 </li>
                 <li className="flex gap-3 text-sm text-slate-700 font-medium">
                   <CheckCircle2 size={18} className="text-sky-500 shrink-0" /> Consistent energy efficiency savings
                 </li>
              </ul>
            </div>

            <div className="p-8 bg-slate-50 rounded-3xl border border-slate-200">
               <h3 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-3">
                 <ShieldCheck size={24} className="text-slate-700" />
                 Our Guarantee
               </h3>
               <p className="text-slate-600 leading-relaxed font-medium text-sm">
                 All standard servicing includes our comprehensive 30-day workmanship warranty. If you experience any issues related to our servicing within 30 days, we'll return to fix it at absolutely no additional cost to you.
               </p>
               <div className="mt-8">
                 <a href="https://api.whatsapp.com/send?phone=6592487291" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-6 py-3.5 bg-slate-900 hover:bg-sky-600 text-white rounded-xl font-bold transition-all w-full justify-center group shadow-md hover:shadow-xl">
                   Talk to an Expert <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
                 </a>
               </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};