import React, { Suspense, lazy } from 'react';
import { Link } from 'react-router-dom';
import { motion, useReducedMotion } from 'framer-motion';
import { ArrowRight, Star } from 'lucide-react';

// Critical path components loaded immediately (Above-the-fold)
import HeroSection from '@/components/HeroSection';
import AuthoritySection from '@/components/AuthoritySection';
import Footer from '@/components/Footer';
import SEO from '@/components/SEO';
import { Button } from '@/components/ui/button';

// Code-splitting: Lazy load below-the-fold components
const ServicesSection = lazy(() => import('@/components/ServicesSection'));
const GoogleMap = lazy(() => import('@/components/GoogleMap'));
const CoverageAreaSection = lazy(() => import('@/components/CoverageAreaSection'));
const SocialProofSection = lazy(() => import('@/components/SocialProofSection'));
const FAQSection = lazy(() => import('@/components/FAQSection'));

const HomePage = () => {
  const shouldReduceMotion = useReducedMotion();
  const metaDescription = "Thermo MA - Aquecedores a Gás | Assistência Técnica em Osasco e São Paulo. Especialistas em instalação, manutenção e reparo de aquecedores a gás, boilers e placas solares de aquecimento.";

  const schemaData = {
    "@type": "LocalBusiness",
    "name": "Thermo MA - Aquecedores",
    "description": metaDescription,
    "image": "https://horizons-cdn.hostinger.com/765a7a0c-f0b4-40c0-9445-4ce74d65a607/aquecedor-a-gas-manutencao-a-gas-preventiva-aquecedores-a-gas-assistencia-tecnica-4-wa47W.png",
    "telephone": "+55-11-97614-2979",
    "email": "thermom.aaquecedores@gmail.com",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "R. Duke Ellington, 325",
      "addressLocality": "Osasco",
      "addressRegion": "SP",
      "postalCode": "06268-140",
      "addressCountry": "BR"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "-23.5329",
      "longitude": "-46.7915"
    },
    "areaServed": [
      "Osasco",
      "Alphaville",
      "Barueri",
      "São Paulo",
      "Granja Viana"
    ],
    "priceRange": "$$",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        "opens": "08:00",
        "closes": "18:00"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": "Saturday",
        "opens": "08:00",
        "closes": "14:00"
      }
    ],
    "hasOfferCatalog": {
      "@type": "OfferCatalog",
      "name": "Serviços de Aquecimento e Gás",
      "itemListElement": [
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Instalação de Aquecedores a Gás"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Manutenção Preventiva e Corretiva"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Instalação e Recuperação de Boilers"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Manutenção de Placas Solares de Aquecimento"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Teste de Estanqueidade e Revisão Completa"
          }
        }
      ]
    }
  };

  return (
    <div className="bg-white overflow-hidden">
      <SEO 
        title="Assistência Técnica Aquecedor a Gás em Osasco e SP | Thermo MA" 
        description={metaDescription}
        keywords="Aquecedor a gás, Placa Solar, Boiler, Manutenção, Instalação, Osasco, Assistência Técnica, Thermo MA" 
        canonical="/" 
        schema={schemaData}
      />

      {/* Critical path loaded synchronously */}
      <HeroSection />

      {/* Below-the-fold content loaded via Suspense */}
      <Suspense fallback={null}>
        <ServicesSection />
        <GoogleMap />
      </Suspense>

      {/* AuthoritySection kept synchronously above-the-fold context as requested by instructions if considered initial context */}
      <section className="py-12 md:py-24 bg-gradient-to-b from-[#f8fafc] to-white relative overflow-hidden" aria-labelledby="about-preview-heading">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#00BCD4]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3" aria-hidden="true"></div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            
            <motion.div 
              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "50px" }}
              className="relative order-2 lg:order-1"
            >
              <div className="relative rounded-3xl overflow-hidden shadow-2xl border-4 border-white bg-gray-200">
                <img 
                  src="https://horizons-cdn.hostinger.com/765a7a0c-f0b4-40c0-9445-4ce74d65a607/aquecedor-a-gas-manutencao-a-gas-preventiva-aquecedores-a-gas-assistencia-tecnica-kSB7e.png" 
                  alt="Equipe técnica realizando manutenção de aquecedor a gás e instalação de boiler em Osasco" 
                  className="w-full h-auto object-cover aspect-square" 
                  loading="lazy"
                  decoding="async"
                  width="600"
                  height="600"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0052CC]/80 via-transparent to-transparent" aria-hidden="true"></div>
                <div className="absolute bottom-8 left-8 text-white">
                  <p className="text-3xl font-black mb-1">Tradição</p>
                  <p className="text-sm font-medium opacity-90">de Excelência em Aquecimento</p>
                </div>
              </div>
              
              <div className="absolute -bottom-6 -right-6 bg-white p-6 rounded-2xl shadow-xl border border-gray-200 max-w-[200px] hidden md:block" aria-hidden="true">
                <div className="flex gap-1 text-[#E64A19] mb-2">
                  {[1,2,3,4,5].map(i => <Star key={i} className="w-4 h-4 fill-current" />)}
                </div>
                <p className="text-[#0052CC] font-bold text-sm">"Serviço impecável e técnicos muito educados."</p>
              </div>
            </motion.div>

            <div className="order-1 lg:order-2">
              <span className="text-[#00838F] font-bold tracking-widest uppercase text-sm mb-4 block">
                Quem Somos
              </span>
              <h2 id="about-preview-heading" className="text-3xl md:text-5xl font-black text-[#0052CC] mb-6 leading-tight">
                Referência em Segurança e Qualidade Técnica
              </h2>
              
              <p className="text-gray-800 text-lg mb-6 leading-relaxed font-medium">
                A <strong>Thermo MA – Aquecedores a Gás</strong> é especializada em instalação, manutenção e assistência técnica de aquecedores a gás, boilers e sistemas de aquecimento solar em Osasco e região. Atendemos todas as marcas com equipe altamente qualificada, garantindo diagnóstico preciso, segurança e eficiência em cada serviço realizado.
              </p>
              <p className="text-gray-800 text-lg mb-8 leading-relaxed font-medium">
                Oferecemos instalação de aquecedores a gás, limpeza, revisão completa, troca de peças, recuperação de boilers e manutenção de placas solares para aquecimento de água. Nossos técnicos atendem residências e estabelecimentos comerciais com agilidade, transparência e excelência técnica, sempre respeitando os mais altos padrões de segurança.
              </p>
              
              <div className="grid grid-cols-2 gap-6 mb-8">
                <div className="flex flex-col gap-2">
                  <p className="text-2xl font-black text-[#0052CC]">5.000+</p>
                  <p className="text-sm text-gray-700 font-bold">Atendimentos Realizados</p>
                </div>
                <div className="flex flex-col gap-2">
                  <p className="text-2xl font-black text-[#0052CC]">24/7</p>
                  <p className="text-sm text-gray-700 font-bold">Plantão de Emergência</p>
                </div>
              </div>

              <Link to="/sobre" tabIndex="-1">
                <Button className="bg-[#E64A19] hover:bg-[#D84315] text-white font-bold py-6 px-8 rounded-xl text-lg shadow-lg hover:shadow-xl transition-all group focus:ring-4 focus:ring-orange-500/30">
                  Conheça Nossa História
                  <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <AuthoritySection />

      {/* Other below-the-fold components using Suspense */}
      <Suspense fallback={null}>
        <SocialProofSection />
        <CoverageAreaSection />
        <FAQSection />
      </Suspense>

      <Footer />
    </div>
  );
};

export default HomePage;