import Image from "next/image";
import Link from "next/link";
import dynamic from "next/dynamic";
import type { Metadata } from "next";
import Button from "@/components/Button";
import LazyVideo from "@/components/LazyVideo";
import {
  SITE_URL,
  COMPANY_NAME,
  WHATSAPP_URL,
  getServicePillars,
} from "@/data/services";

const ValuesSection = dynamic(() => import("@/components/ValuesSection"));

export const metadata: Metadata = {
  title: `${COMPANY_NAME} - Soluções Elétricas, Hidráulicas e Contra Incêndio em São Paulo`,
  description:
    "Kontec Engenharia oferece soluções elétricas, hidráulicas e contra incêndio há mais de 20 anos em São Paulo. Projetos, instalações, SPDA, AVCB, sprinklers e mais.",
  alternates: { canonical: "/" },
};

const servicePillars = getServicePillars();

export default function HomePage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    name: COMPANY_NAME,
    description:
      "Soluções elétricas, hidráulicas e contra incêndio em São Paulo. Mais de 20 anos de experiência.",
    url: SITE_URL,
    telephone: "+55-11-94727-1201",
    address: {
      "@type": "PostalAddress",
      streetAddress: "R. Peropava, 216",
      addressLocality: "São Paulo",
      addressRegion: "SP",
      postalCode: "04289-000",
      addressCountry: "BR",
    },
    areaServed: {
      "@type": "GeoCircle",
      geoMidpoint: {
        "@type": "GeoCoordinates",
        latitude: -23.5505,
        longitude: -46.6333,
      },
      geoRadius: "200000",
    },
    priceRange: "$$",
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      {/* Hero */}
      <section
        className="relative bg-primary text-white overflow-hidden -mt-24 md:-mt-32"
        aria-label="Banner principal">
        <div className="absolute inset-0 z-10" />
        {/* Poster shown immediately, video loads lazily after page idle */}
        <Image
          src="/images/poster.webp"
          alt=""
          fill
          priority
          sizes="100vw"
          className="object-cover"
          aria-hidden="true"
        />
        <LazyVideo />
        <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-48 md:pt-56 pb-24 md:pb-36">
          <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight !text-white">
            Engenharia Elétrica, SPDA, AVCB
            <br className="hidden md:block" /> e Hidráulica em São Paulo
          </h1>
          <p className="text-lg md:text-xl text-gray-200 mb-8 max-w-2xl">
            Mais de 20 anos de experiência oferecendo qualidade técnica e
            soluções inovadoras para projetos residenciais, comerciais,
            industriais e rurais.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <Button href={WHATSAPP_URL} variant="primary" showArrow external>
              Solicitar orçamento
            </Button>
            <Button href={WHATSAPP_URL} variant="outline" external>
              Falar no WhatsApp
            </Button>
          </div>
        </div>
      </section>

      {/* About section */}
      <section
        className="py-16 px-4 bg-white border-b border-gray-200"
        aria-label="Sobre a empresa">
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-primary mb-6">
              Kontec Engenharia
            </h2>
            <p className="text-text leading-relaxed mb-4">
              Nós somos um grupo comprometido de especialistas com vasta
              experiência em apresentar soluções elétricas criativas e eficazes
              para satisfazer as demandas particulares dos nossos clientes
              corporativos. Seja para um empreendimento residencial, comercial,
              industrial ou rural, nosso compromisso é com a qualidade em todos
              os aspectos.
            </p>
            <p className="text-text leading-relaxed">
              Estamos sediados na metrópole de São Paulo, onde operamos em todas
              as áreas do território nacional.
            </p>
          </div>
          <div className="relative aspect-[4/3] rounded-xl overflow-hidden shadow-xl">
            <Image
              src="/images/about.png"
              alt="Equipe Kontec Engenharia"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <ValuesSection />

      {/* Service pillars */}
      <section
        className="py-16 px-4 bg-primary border-y border-gray-200"
        aria-label="Páginas pilar">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold !text-white mb-4 text-center">
            Nossos 3 Pilares de Serviço
          </h2>
          <p className="text-white text-center max-w-3xl mx-auto mb-10">
            Acesse diretamente os principais temas comerciais da Kontec
            Engenharia para encontrar a solução ideal para seu projeto.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {servicePillars.map((pillar) => (
              <Link
                key={pillar.slug}
                href={`/servicos/${pillar.slug}`}
                className="bg-white rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                <h3 className="text-base font-bold text-primary mb-2">
                  {pillar.title}
                </h3>
                <p className="text-sm text-text line-clamp-3">
                  {pillar.description}
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Como funciona */}
      <section
        className="py-16 px-4 bg-white border-b border-gray-200"
        aria-label="Como funciona">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-primary mb-12 text-center">
            Como Funciona
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                step: "1",
                title: "Vistoria",
                desc: "Realizamos uma vistoria técnica no local para entender suas necessidades.",
              },
              {
                step: "2",
                title: "Proposta",
                desc: "Elaboramos uma proposta detalhada com escopo, prazo e investimento.",
              },
              {
                step: "3",
                title: "Execução",
                desc: "Nossa equipe executa o projeto com qualidade e dentro do cronograma.",
              },
              {
                step: "4",
                title: "Laudo / ART",
                desc: "Entregamos laudos técnicos e ART para total conformidade e segurança.",
              },
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="w-14 h-14 rounded-full bg-secondary text-white font-bold text-xl flex items-center justify-center mx-auto mb-4">
                  {item.step}
                </div>
                <h3 className="text-lg font-bold text-primary mb-2">
                  {item.title}
                </h3>
                <p className="text-text leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Projects */}
      <section
        className="relative overflow-hidden py-16 px-4 bg-gray-light"
        aria-label="Projetos">
        <div className="relative z-10 max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-primary mb-10 text-center">
            Confira nossos projetos
          </h2>

          {/* Projects cards - responsive mobile first */}
          <div className="flex flex-col md:flex-row justify-center items-center md:items-end gap-8 md:px-0 mb-2 flex-wrap">
            {(
              [
                {
                  slug: "construtora",
                  title: "Construtora",
                  img: "/images/projetos/construtora.webp",
                },
                {
                  slug: "execucao",
                  title: "Execução",
                  img: "/images/projetos/execucao.webp",
                },
                {
                  slug: "instalacoes-eletricas",
                  title: "Instalações Elétricas",
                  img: "/images/projetos/instalacoes-eletricas.webp",
                },
              ] as const
            ).map((p, i) => (
              <Link
                key={p.slug}
                href={`/projetos/${p.slug}`}
                className="relative overflow-hidden group rounded-lg flex-shrink-0 w-full h-44 max-w-sm md:w-80 md:h-64">
                <Image
                  src={p.img}
                  alt={p.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 280px"
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
                <span className="absolute bottom-4 md:bottom-5 inset-x-0 text-center text-white font-bold text-sm px-3">
                  {p.title}
                </span>
              </Link>
            ))}
          </div>

          <div className="text-center mt-8">
            <Button href="/projetos" variant="secondary" showArrow>
              Ver todos os projetos
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}