"use client";

import {
  ArrowRight,
  CheckCircle2,
  Clock,
  ExternalLink,
  Globe2,
  Linkedin,
  Mail,
  MapPin,
  Navigation,
  Phone,
  Share2,
  Youtube,
  type LucideIcon,
} from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ScrollReveal from '@/components/ScrollReveal';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import { Badge } from '@/components/ui/badge';
import { ContactForm } from '@/components/contact/ContactForm';
import type { HubspotFormConfig } from '@/lib/hubspot';

const PHONE_DISPLAY = '+33 2 38 77 57 08';
const PHONE_HREF = 'tel:+33238775708';
const EMAIL = 'contact@covalba.fr';
const MAP_URL =
  'https://maps.google.com/maps?width=900&height=520&hl=fr&q=+(covalba%20orl%C3%A9ans)&t=&z=6&ie=UTF8&iwloc=B&output=embed';

export interface ContactTrustLogo {
  name: string;
  src: string;
}

export interface ContactMethod {
  icon: LucideIcon;
  label: string;
  value: string;
  href: string;
}

export interface ContactPresenceZone {
  area: string;
  detail: string;
  places: string;
}

export interface ContactSocialLink {
  name: string;
  href: string;
  icon: LucideIcon;
}

export interface ContactProps {
  badge?: string;
  titre?: string;
  intro?: string;
  formulaireTitre?: string;
  hubspotFormId?: string;
  hubspotForm?: HubspotFormConfig;
  contactMethods?: ContactMethod[];
  quickTitle?: string;
  quickText?: string;
  logosLabel?: string;
  logosTitre?: string;
  trustLogos?: ContactTrustLogo[];
  coordBadge?: string;
  coordTitre?: string;
  coordIntro?: string;
  presenceZones?: ContactPresenceZone[];
  carteTitre?: string;
  sociauxBadge?: string;
  sociauxTitre?: string;
  sociauxIntro?: string;
  socialLinks?: ContactSocialLink[];
}

const defaultTrustLogos: ContactTrustLogo[] = [
  { name: 'E.Leclerc', src: '/logos/logo-leclerc.svg' },
  { name: "McDonald's", src: '/logos/logo-mcdonalds.svg' },
  { name: 'Super U', src: '/logos/logo-super-u.svg' },
  { name: 'SNCF', src: '/logos/logo-sncf.svg' },
  { name: 'Thales', src: '/logos/logo-thales.svg' },
  { name: 'Carrefour Market', src: '/logos/logo-carrefour-market.svg' },
];

const defaultContactMethods: ContactMethod[] = [
  {
    icon: Phone,
    label: 'Téléphone',
    value: PHONE_DISPLAY,
    href: PHONE_HREF,
  },
  {
    icon: Mail,
    label: 'E-mail',
    value: EMAIL,
    href: `mailto:${EMAIL}`,
  },
  {
    icon: MapPin,
    label: 'Siège social',
    value: '23 rue Antigna, 45000 Orléans',
    href: 'https://www.google.com/maps/search/?api=1&query=Covalba+23+rue+Antigna+45000+Orleans',
  },
];

const defaultPresenceZones: ContactPresenceZone[] = [
  {
    area: 'France',
    detail: '40 applicateurs agréés',
    places: 'France métropolitaine, hors Corse',
  },
  {
    area: "France d'outre-mer",
    detail: 'Applicateurs agréés',
    places: 'Guyane, Guadeloupe',
  },
  {
    area: 'Europe',
    detail: 'Applicateurs agréés',
    places: 'Belgique, Espagne, Suisse',
  },
  {
    area: 'Afrique',
    detail: 'Applicateurs agréés',
    places: "Bénin, Burkina Faso, Cameroun, Côte d'Ivoire, Djibouti, Gabon, Ghana, Maroc, Nigeria, Sénégal, Togo, RDC",
  },
];

const defaultSocialLinks: ContactSocialLink[] = [
  {
    name: 'LinkedIn',
    href: 'https://www.linkedin.com/company/covalba',
    icon: Linkedin,
  },
  {
    name: 'YouTube',
    href: 'https://www.youtube.com/channel/UCg_Vri5gC5ORFhhs_-GGAXQ/featured',
    icon: Youtube,
  },
  {
    name: 'Facebook',
    href: 'https://www.facebook.com/covalba',
    icon: Share2,
  },
];

const ContactFormCard = ({
  titre = 'Décrivez votre demande',
  hubspotForm,
}: {
  titre?: string;
  hubspotForm?: HubspotFormConfig;
} = {}) => {
  return (
    <div className="rounded-lg border border-border bg-card p-5 shadow-sm lg:p-8">
      <div className="mb-6 flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <p className="font-body text-xs font-bold uppercase tracking-[0.18em] text-primary/70">Formulaire</p>
          <h2 className="mt-1 font-satoshi text-2xl font-black tracking-tight text-foreground">
            {titre}
          </h2>
        </div>
        <span className="inline-flex w-fit items-center gap-2 rounded-full bg-teal-vivid/10 px-3 py-1.5 font-body text-xs font-semibold text-primary">
          <Clock className="h-3.5 w-3.5" />
          Réponse sous 24h
        </span>
      </div>

      <ContactForm hubspotForm={hubspotForm} />
      <p className="mt-4 text-xs leading-relaxed text-foreground/45">
        Vos informations sont utilisées par Covalba pour traiter votre demande de contact.
      </p>
    </div>
  );
};

const Contact = ({
  badge = 'Contact',
  titre = 'Contactez Covalba.',
  intro = "Décrivez votre projet, votre bâtiment ou votre question produit. L'équipe Covalba vous répond avec les prochaines étapes adaptées.",
  formulaireTitre,
  hubspotForm,
  contactMethods = defaultContactMethods,
  quickTitle = 'Pour aller plus vite',
  quickText = "Indiquez la ville du bâtiment, la surface approximative de toiture, le type de support et l'objectif principal : confort, économies d'énergie, étanchéité ou prime CEE.",
  logosLabel = 'Ils nous font confiance',
  logosTitre = 'Des clients grands comptes, partout en France.',
  trustLogos = defaultTrustLogos,
  coordBadge = 'Coordonnées',
  coordTitre = 'Siège social à Orléans, présence terrain élargie.',
  coordIntro = 'Covalba France est basée à Orléans et s’appuie sur un réseau d’applicateurs agréés pour accompagner les projets cool roof au plus près des bâtiments.',
  presenceZones = defaultPresenceZones,
  carteTitre = 'Covalba France',
  sociauxBadge = 'Réseaux sociaux',
  sociauxTitre = 'Suivez l’actualité du cool roof et de Covalba.',
  sociauxIntro = 'Retrouvez nos chantiers, retours terrain, nouveautés produit et prises de parole sur les réseaux.',
  socialLinks = defaultSocialLinks,
}: ContactProps = {}) => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <main>
        <section id="formulaire-contact" className="bg-background pb-16 pt-24 lg:pb-24 lg:pt-28">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal className="mb-8 max-w-3xl">
              <Badge className="mb-5 bg-teal-light text-primary">{badge}</Badge>
              <h1 className="font-satoshi text-4xl font-black leading-tight tracking-tight text-foreground md:text-5xl lg:text-6xl">
                {titre}
              </h1>
              <p className="mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/66 lg:text-lg">
                {intro}
              </p>
            </ScrollReveal>

            <div className="grid gap-8 lg:grid-cols-[1fr_0.45fr] lg:items-start">
              <ScrollReveal>
                <ContactFormCard titre={formulaireTitre} hubspotForm={hubspotForm} />
              </ScrollReveal>

              <ScrollReveal className="lg:sticky lg:top-24">
                <div className="space-y-4">
                  {contactMethods.map((method) => {
                    const Icon = method.icon;
                    return (
                      <a
                        key={method.label}
                        href={method.href}
                        target={method.href.startsWith('http') ? '_blank' : undefined}
                        rel={method.href.startsWith('http') ? 'noreferrer' : undefined}
                        className="group block rounded-lg border border-border bg-card p-5 shadow-sm transition-colors hover:border-primary/25 hover:bg-primary/5"
                      >
                        <div className="flex items-start gap-4">
                          <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                            <Icon className="h-5 w-5" />
                          </span>
                          <div className="min-w-0">
                            <p className="font-body text-xs font-bold uppercase tracking-[0.16em] text-foreground/35">
                              {method.label}
                            </p>
                            <p className="mt-1 font-satoshi text-lg font-bold text-foreground">{method.value}</p>
                          </div>
                          <ArrowRight className="ml-auto mt-1 h-4 w-4 text-primary opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" />
                        </div>
                      </a>
                    );
                  })}

                  <div className="rounded-lg border border-primary/15 bg-primary/5 p-5">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                      <div>
                        <h3 className="font-satoshi text-lg font-bold text-foreground">{quickTitle}</h3>
                        <p className="mt-2 font-body text-sm leading-relaxed text-foreground/60">
                          {quickText}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="border-b border-border bg-card py-8">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <p className="font-body text-xs font-bold uppercase tracking-[0.18em] text-foreground/35">
                  {logosLabel}
                </p>
                <p className="mt-1 font-satoshi text-2xl font-black tracking-tight text-foreground">
                  {logosTitre}
                </p>
              </div>
              <div className="grid grid-cols-3 items-center gap-3 sm:grid-cols-6 lg:w-[58%]">
                {trustLogos.map((logo) => (
                  <div
                    key={logo.name}
                    className="flex h-16 items-center justify-center rounded-lg border border-border bg-background px-4"
                  >
                    <img src={logo.src} alt={logo.name} className="max-h-8 max-w-full object-contain opacity-75" />
                  </div>
                ))}
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section className="bg-secondary py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
              <ScrollReveal>
                <Badge className="mb-4 bg-white text-primary">{coordBadge}</Badge>
                <h2 className="font-satoshi text-4xl font-black tracking-tight text-foreground lg:text-5xl">
                  {coordTitre}
                </h2>
                <p className="mt-5 font-body text-lg leading-relaxed text-foreground/62">
                  {coordIntro}
                </p>

                <div className="mt-8 grid gap-3 sm:grid-cols-2">
                  {presenceZones.map((zone) => (
                    <div key={zone.area} className="rounded-lg border border-border bg-card p-4">
                      <div className="mb-3 flex items-center gap-2">
                        <Globe2 className="h-4 w-4 text-primary" />
                        <h3 className="font-satoshi text-base font-bold text-foreground">{zone.area}</h3>
                      </div>
                      <p className="font-body text-sm font-semibold text-primary">{zone.detail}</p>
                      <p className="mt-1 font-body text-sm leading-relaxed text-foreground/56">{zone.places}</p>
                    </div>
                  ))}
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
                  <div className="flex items-center justify-between border-b border-border px-5 py-4">
                    <div className="flex items-center gap-3">
                      <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                        <Navigation className="h-4.5 w-4.5" />
                      </span>
                      <div>
                        <p className="font-body text-xs font-bold uppercase tracking-[0.16em] text-foreground/35">
                          Localisation
                        </p>
                        <p className="font-satoshi text-lg font-bold text-foreground">{carteTitre}</p>
                      </div>
                    </div>
                    <a
                      href="https://www.google.com/maps/search/?api=1&query=Covalba+23+rue+Antigna+45000+Orleans"
                      target="_blank"
                      rel="noreferrer"
                      className="hidden items-center gap-1 rounded-full border border-primary/20 px-3 py-1.5 font-body text-xs font-semibold text-primary transition-colors hover:bg-primary/5 sm:inline-flex"
                    >
                      Ouvrir
                      <ExternalLink className="h-3.5 w-3.5" />
                    </a>
                  </div>
                  <div className="aspect-[4/3] bg-muted md:aspect-[16/9]">
                    <iframe
                      title="Carte Covalba Orléans"
                      src={MAP_URL}
                      className="h-full w-full"
                      loading="lazy"
                      referrerPolicy="no-referrer-when-downgrade"
                    />
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="bg-navy py-16 text-white lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal className="grid gap-8 lg:grid-cols-[1fr_0.82fr] lg:items-center">
              <div>
                <Badge className="mb-4 border-white/12 bg-white/10 text-white">{sociauxBadge}</Badge>
                <h2 className="font-satoshi text-4xl font-black tracking-tight lg:text-5xl">
                  {sociauxTitre}
                </h2>
                <p className="mt-5 max-w-2xl font-body text-lg leading-relaxed text-white/62">
                  {sociauxIntro}
                </p>
              </div>
              <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
                {socialLinks.map((link) => {
                  const Icon = link.icon;
                  return (
                    <a
                      key={link.name}
                      href={link.href}
                      target="_blank"
                      rel="noreferrer"
                      className="group flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.06] p-4 transition-colors hover:bg-white/[0.1]"
                    >
                      <span className="flex items-center gap-3">
                        <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/10 text-teal-vivid">
                          <Icon className="h-4.5 w-4.5" />
                        </span>
                        <span className="font-satoshi text-lg font-bold text-white">{link.name}</span>
                      </span>
                      <ArrowRight className="h-4 w-4 text-teal-vivid transition-transform group-hover:translate-x-0.5" />
                    </a>
                  );
                })}
              </div>
            </ScrollReveal>
          </div>
        </section>
      </main>

      <Footer />
      <StickyMobileCTA label="Nous contacter" href="#formulaire-contact" phoneHref={PHONE_HREF} />
    </div>
  );
};

export default Contact;