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';
import { useSchemaRating } from '../hooks/useSchemaRating';

export const PricingPage = () => {
  const { rating, count } = useSchemaRating();
  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"
                  }
                ]
              },
              {
                "@context": "https://schema.org",
                "@type": "Product",
                "name": "Sky Blue Aircon Service Packages",
                "image": "https://skyblueaircon.com/PureLogo.png",
                "description": "Comprehensive range of air conditioning maintenance and repair services in Singapore. BCA-certified technicians for professional general servicing, chemical wash, gas top-up, and installations with transparent flat rates.",
                "brand": {
                  "@type": "Brand",
                  "name": "Sky Blue Aircon"
                },
                "offers": {
                  "@type": "AggregateOffer",
                  "priceCurrency": "SGD",
                  "lowPrice": "41.00",
                  "highPrice": "872.00",
                  "offerCount": "12"
                },
                "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "${rating}",
                  "reviewCount": "${count}",
                  "bestRating": "5",
                  "worstRating": "1"
                },
                "review": [
                  {
                    "@type": "Review",
                    "author": {
                      "@type": "Person",
                      "name": "Daryl Lim"
                    },
                    "datePublished": "2026-06-17",
                    "reviewBody": "Booked their Normal Servicing for 3 units. The technicians were very professional and efficient. They took the time to vacuum the drain pipes and wipe down everything carefully. Excellent service with transparent pricing, highly recommended!",
                    "reviewRating": {
                      "@type": "Rating",
                      "bestRating": "5",
                      "ratingValue": "5",
                      "worstRating": "1"
                    }
                  },
                  {
                    "@type": "Review",
                    "author": {
                      "@type": "Person",
                      "name": "Siti Nurhaliza"
                    },
                    "datePublished": "2026-06-16",
                    "reviewBody": "Highly recommend Sky Blue Aircon! Did a chemical overhaul on my master bedroom AC because it was leaking water. They handled everything very carefully, protected my bed and floor with large plastic sheets, and cleaned up complete tidy. Now the AC is ice cold!",
                    "reviewRating": {
                      "@type": "Rating",
                      "bestRating": "5",
                      "ratingValue": "5",
                      "worstRating": "1"
                    }
                  },
                  {
                    "@type": "Review",
                    "author": {
                      "@type": "Person",
                      "name": "Michael Seow"
                    },
                    "datePublished": "2026-06-15",
                    "reviewBody": "Fantastic troubleshooting skills. Another company came yesterday and straight away told me I needed to replace the entire outdoor compressor. Sky Blue technicians checked and found it was just a faulty capacitor. Saved me hundreds of dollars! Transparent, honest, and highly recommended brand.",
                    "reviewRating": {
                      "@type": "Rating",
                      "bestRating": "5",
                      "ratingValue": "5",
                      "worstRating": "1"
                    }
                  }
                ]
              }
            ]
          `}
        </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>
  );
};