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, Wind, ShieldCheck, Zap, Droplets, ArrowLeft, ChevronLeft, ChevronRight, MapPin } from 'lucide-react';
import { LazyImage } from './LazyImage';
import { AeoSummary } from './AeoSummary';
import { ExpertEeatPanel } from './ExpertEeatPanel';

export const NormalServicingPage = () => {
  const [pricingType, setPricingType] = useState<'residential' | 'commercial'>('residential');
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    "/SB Technician Cleaning Aircon.png",
    "/aircon servicing cassette.png",
    "/Checking CU.png"
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 4000);
    return () => clearInterval(timer);
  }, [slides.length]);

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

  return (
    <div className="animate-in fade-in duration-700 bg-white">
      <Helmet>
        <title>Aircon Servicing Singapore | #1 Normal AC Servicing & Cleaning</title>
        <meta name="description" content="Book affordable & reliable aircon servicing in Singapore. Prevent breakdowns, improve cooling, and reduce electricity bills with our BCA-certified technicians." />
        <meta name="keywords" content="aircon servicing singapore, regular aircon maintenance, normal aircon servicing, ac cleaning singapore, aircon servicing promotion" />
        <link rel="canonical" href="https://skyblueaircon.com/general-8" />
        
        {/* OpenGraph/Facebook metadata */}
        <meta property="og:title" content="Aircon Servicing Singapore | #1 Normal AC Servicing & Cleaning" />
        <meta property="og:description" content="Book affordable & reliable aircon servicing in Singapore. Prevent breakdowns, improve cooling, and reduce electricity bills with our BCA-certified technicians." />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://skyblueaircon.com/PureLogo.png" />
        <meta property="og:url" content="https://skyblueaircon.com/general-8" />
        <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 Singapore | #1 Normal AC Servicing & Cleaning" />
        <meta name="twitter:description" content="Book affordable & reliable aircon servicing in Singapore. Prevent breakdowns, improve cooling, and reduce electricity bills with our BCA-certified technicians." />
        <meta name="twitter:image" content="https://skyblueaircon.com/PureLogo.png" />

        <script type="application/ld+json">
          {`
            [
              {
                "@context": "https://schema.org",
                "@type": "LocalBusiness",
                "@id": "https://skyblueaircon.com/#localbusiness",
                "name": "Sky Blue Aircon Engineering Pte. Ltd.",
                "image": "https://skyblueaircon.com/Servicing1.png",
                "telephones": ["+65 6556 4042", "+65 9248 7291"],
                "telephone": "+65 6556 4042",
                "url": "https://skyblueaircon.com",
                "logo": "https://skyblueaircon.com/favicon.png",
                "priceRange": "$$",
                "address": {
                  "@type": "PostalAddress",
                  "streetAddress": "31 Woodlands Close, Woodlands Horizon",
                  "addressLocality": "Singapore",
                  "postalCode": "737854",
                  "addressCountry": "SG"
                },
                "geo": {
                  "@type": "GeoCoordinates",
                  "latitude": 1.439818,
                  "longitude": 103.801643
                },
                "openingHoursSpecification": {
                  "@type": "OpeningHoursSpecification",
                  "dayOfWeek": [
                    "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
                  ],
                  "opens": "08:00",
                  "closes": "22:00"
                },
                "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "4.5",
                  "reviewCount": "103",
                  "bestRating": "5",
                  "worstRating": "1"
                }
              },
              {
                "@context": "https://schema.org",
                "@type": "Service",
                "name": "Normal Aircon Servicing & Proactive Maintenance",
                "serviceType": ["Aircon Servicing", "AC Filter Cleaning", "HVAC Maintenance", "Fancoil Wash"],
                "provider": {
                  "@type": "LocalBusiness",
                  "@id": "https://skyblueaircon.com/#localbusiness"
                },
                "category": "Air Conditioning Sales & Service, HVAC Maintenance, Home Services",
                "brand": {
                  "@type": "Brand",
                  "name": "Sky Blue Aircon",
                  "logo": "https://skyblueaircon.com/PureLogo.png",
                  "slogan": "Singapore's Trusted HVAC Experts"
                },
                "areaServed": [
                  {
                    "@type": "AdministrativeArea",
                    "name": "Singapore"
                  },
                  {
                    "@type": "AdministrativeArea",
                    "name": "Central Region, Singapore"
                  },
                  {
                    "@type": "AdministrativeArea",
                    "name": "East Region, Singapore"
                  },
                  {
                    "@type": "AdministrativeArea",
                    "name": "North Region, Singapore"
                  },
                  {
                    "@type": "AdministrativeArea",
                    "name": "North-East Region, Singapore"
                  },
                  {
                    "@type": "AdministrativeArea",
                    "name": "West Region, Singapore"
                  }
                ],
                "description": "Professional, mess-free normal aircon servicing, filter cleaning, and coil inspection by BCA-certified hvac technicians in Singapore.",
                "availableChannel": {
                  "@type": "ServiceChannel",
                  "serviceChannelType": "InPerson",
                  "name": "On-site HVAC Servicing",
                  "servicePhone": {
                    "@type": "ContactPoint",
                    "telephone": "+6565564042",
                    "contactType": "customer support"
                  }
                },
                "hasOfferCatalog": {
                  "@type": "OfferCatalog",
                  "name": "Normal Aircon Servicing Capabilities",
                  "itemListElement": [
                    {
                      "@type": "Offer",
                      "itemOffered": {
                        "@type": "Service",
                        "name": "Residential Aircon Servicing",
                        "description": "Premium fancoil cleaning and diagnostics for HDBs, condos, and landed properties in Singapore."
                      }
                    },
                    {
                      "@type": "Offer",
                      "itemOffered": {
                        "@type": "Service",
                        "name": "Commercial Aircon Servicing",
                        "description": "Professional VRV/VRF servicing, maintenance contracts, and office aircon cleaning."
                      }
                    },
                    {
                      "@type": "Offer",
                      "itemOffered": {
                        "@type": "Service",
                        "name": "Fancoil Cover Wash & Front Filter Vacuuming",
                        "description": "Thorough removal of accumulated dust, dirt, and mold spores from intake filters."
                      }
                    },
                    {
                      "@type": "Offer",
                      "itemOffered": {
                        "@type": "Service",
                        "name": "Condensate Drain Tube Clearing",
                        "description": "Clearing the drainage pipe with high-pressure treatment to prevent leaks."
                      }
                    }
                  ]
                }
              },
              {
                "@context": "https://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [
                  {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Home",
                    "item": "https://skyblueaircon.com/"
                  },
                  {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "Normal Servicing",
                    "item": "https://skyblueaircon.com/general-8"
                  }
                ]
              }
            ]
          `}
        </script>
      </Helmet>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-slate-50">
        <div className="absolute inset-0 bg-sky-900/5 z-0" />
        <div className="max-w-7xl mx-auto px-6 sm:px-8 relative z-10 grid md:grid-cols-2 gap-12 sm:gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            className="space-y-6 sm:space-y-8"
          >
            <Link to="/#services" className="inline-flex items-center gap-2 text-sky-600 font-bold text-xs uppercase tracking-widest hover:gap-3 transition-all mb-4">
              <ArrowLeft size={16} /> Back to Services
            </Link>
            
            <div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-tight tracking-tight">
                Normal Aircon <span className="text-sky-600">Servicing</span>
              </h1>
              <p className="text-base sm:text-lg text-slate-500 mt-6 leading-relaxed font-medium">
                Keep your aircon running efficiently with mess-free maintenance that improves cooling and airflow. Ideal for regular upkeep to maintain performance and reduce energy consumption in Singapore's climate.
              </p>
            </div>
            
            <div className="flex flex-col sm:flex-row flex-wrap gap-4 pt-4">
              <a href="https://api.whatsapp.com/send?phone=6592487291" target="_blank" rel="noopener noreferrer" className="px-8 py-4 bg-slate-900 hover:bg-sky-600 text-white rounded-xl font-bold transition-colors shadow-lg flex items-center justify-center gap-2 group text-center">
                Book a Technician <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
              </a>
              <a href="tel:65564042" className="px-8 py-4 bg-white border-2 border-slate-200 hover:border-slate-300 text-slate-700 rounded-xl font-bold transition-all flex items-center justify-center text-center">
                Call 6556 4042
              </a>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            <div className="relative z-10 rounded-[32px] overflow-hidden shadow-2xl border-4 border-white aspect-[4/3]">
              <LazyImage 
                src="/TechCleaning.png" 
                alt="Sky Blue Aircon Technician Cleaning" 
                className="w-full h-full object-cover"
              />
              <div className="absolute top-4 right-4 sm:top-6 sm:right-6 bg-slate-900/85 backdrop-blur-[2px] text-white px-3.5 py-1.5 rounded-full font-bold text-[10px] sm:text-xs tracking-widest uppercase shadow-md border border-white/15 z-20">
                BCA Certified Professionals
              </div>
            </div>
            
            {/* Decoration */}
            <div className="absolute -bottom-8 -left-8 bg-white p-6 rounded-3xl shadow-xl border border-slate-100 flex items-center gap-4 z-20">
              <div className="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-500">
                <CheckCircle2 size={24} />
              </div>
              <div>
                <p className="text-sm font-bold text-slate-900">100% Mess-Free</p>
                <p className="text-[10px] text-slate-400 font-extrabold uppercase tracking-widest">Guaranteed Clean</p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      <ExpertEeatPanel topicName="Routine Aircon Servicing & Proactive Maintenance" />

      {/* Benefits Section */}
      <section className="py-24 bg-white border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-6 sm:px-8">
          <div className="text-center mb-16 max-w-2xl mx-auto">
            <span className="text-sky-600 font-bold uppercase tracking-widest text-[10px] px-3 py-1 bg-sky-50 rounded-md border border-sky-100">Why Regular Servicing?</span>
            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mt-6 tracking-tight">The Benefits of Routine Care.</h2>
          </div>

          {/* AI-Optimized Entity Summary for ChatGPT, Claude, and Gemini */}
          <AeoSummary
            entityName="Normal Aircon Servicing"
            entityType="Routine Preventative AC Maintenance"
            summaryText="Normal aircon servicing is a mess-free preventative maintenance procedure utilizing professional hydro-cleaning of dust filters and fancoils. Designed for regular upkeep, this service maintains steady air velocity, stops drainage clogging leaks, and reduces compressor electrical strain."
            bulletPoints={[
              "Clearing front filters and evaporator coils with localized high-efficiency vacuums.",
              "Flushing condensation drain conduits under high pressure to clear accumulated jelly.",
              "Comprehensive standard check scan to record chemical gas pressure and electric integrity.",
              "Formulated to reduce overall electricity overhead bills by up to 30% in Singapore homes."
            ]}
          />

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { title: "Colder, Faster Air", desc: "Dirty filters block cold air and reduce fan strength. Servicing restores that fresh, icy breeze instantly.", icon: <Wind size={24} />, bg: "bg-blue-50", color: "text-blue-600" },
              { title: "Lower Utility Bills", desc: "A clean system uses up to 30% less electricity to cool the room, keeping your monthly bills down.", icon: <Zap size={24} />, bg: "bg-amber-50", color: "text-amber-500" },
              { title: "Stop Water Leaks", desc: <span className="inline">Regular clearing of the drainage pipe prevents blockages, stopping the dreaded indoor water leak. Learn why <Link to="/blog/aircon-drain-pipe-clogged" className="text-sky-600 hover:underline">drain clogs</Link> happen.</span>, icon: <Droplets size={24} />, bg: "bg-sky-50", color: "text-sky-500" }
            ].map((benefit, i) => (
              <div key={i} className="p-8 rounded-3xl bg-slate-50 hover:bg-white border border-transparent hover:border-slate-100 hover:shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all">
                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-sm ${benefit.bg} ${benefit.color}`}>
                  {benefit.icon}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3 tracking-tight">{benefit.title}</h3>
                <p className="text-slate-500 text-sm leading-relaxed font-medium">{benefit.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Scope of Work */}
      <section className="py-24 bg-slate-50">
        <div className="max-w-5xl mx-auto px-6 sm:px-8">
          <div className="text-center mb-16 max-w-2xl mx-auto">
            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">What's Included in Normal Servicing?</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
            <div className="space-y-4">
              {[
                "Cleaning of indoor fan coil cooling fins & filters",
                "Clearing of drainage pipe & water tray",
                "Checking of thermostat & indoor operating conditions",
                "Testing of aircon switch & remote control function",
                "Checking of compressor suction & discharge pressure",
                "Basic odor elimination & wipe down"
              ].map((item, index) => (
                <div key={index} className="flex items-start gap-4 p-5 bg-white rounded-2xl shadow-[0_2px_12px_rgb(0,0,0,0.02)] border border-slate-100">
                  <div className="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center text-sky-600 shrink-0 mt-0.5">
                    <CheckCircle2 size={14} />
                  </div>
                  <p className="text-slate-700 font-medium">{item}</p>
                </div>
              ))}
            </div>
            
            <div className="flex flex-col justify-center">
              <div className="relative rounded-[32px] overflow-hidden shadow-xl mb-8 aspect-[4/3] group">
                {slides.map((slide, idx) => (
                  <motion.div
                    key={idx}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: currentSlide === idx ? 1 : 0 }}
                    transition={{ duration: 0.5 }}
                    className="absolute inset-0"
                  >
                    <LazyImage src={slide} className="w-full h-full object-cover" alt={`Servicing Gallery ${idx + 1}`} />
                  </motion.div>
                ))}
                
                {/* Navigation Arrows */}
                <button 
                  onClick={() => setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1))}
                  className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-slate-800 shadow-md opacity-0 group-hover:opacity-100 transition-all z-10"
                >
                  <ChevronLeft size={20} />
                </button>
                <button 
                  onClick={() => setCurrentSlide((prev) => (prev + 1) % slides.length)}
                  className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/80 hover:bg-white flex items-center justify-center text-slate-800 shadow-md opacity-0 group-hover:opacity-100 transition-all z-10"
                >
                  <ChevronRight size={20} />
                </button>

                {/* Bullets */}
                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
                  {slides.map((_, idx) => (
                    <button
                      key={idx}
                      onClick={() => setCurrentSlide(idx)}
                      className={`w-2.5 h-2.5 rounded-full transition-all ${currentSlide === idx ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/80'}`}
                    />
                  ))}
                </div>
              </div>
              <div className="p-6 bg-white border border-slate-100 rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] flex gap-4 items-center">
                 <ShieldCheck size={40} className="text-sky-500 shrink-0" />
                 <div>
                   <h4 className="font-bold text-slate-900 text-lg">30-Day Workmanship Warranty</h4>
                   <p className="text-sm text-slate-500 font-medium mt-1">If an issue arises regarding the servicing, we revisit at no extra charge.</p>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-24 bg-white border-b border-slate-100">
        <div className="max-w-4xl mx-auto px-6 sm:px-8">
          <div className="text-center mb-12">
            <span className="text-sky-600 font-bold uppercase tracking-widest text-[10px] px-3 py-1 bg-sky-50 rounded-md border border-sky-100">Transparent Rates</span>
            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mt-6 tracking-tight">Normal Servicing Pricing</h2>
            <p className="text-slate-500 font-medium mt-4">Honest, reliable pricing based on the number of fan coil units you need serviced.</p>
          </div>

          <div className="flex justify-center mb-8">
            <div className="inline-flex bg-slate-100 p-1.5 rounded-xl">
              <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-sm">
            <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">{row.adhoc}</td>
                      <td className="py-5 px-6">{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="mt-12 text-center">
             <a href="https://api.whatsapp.com/send?phone=6592487291" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-8 py-4 bg-slate-900 hover:bg-sky-600 text-white rounded-xl font-bold transition-all hover:-translate-y-1 shadow-lg group">
               Book Appointment <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
             </a>
          </div>
        </div>
      </section>
    </div>
  );
};