"use client";

import { ArrowRight, BadgeCheck, BookOpenText, Building2, ShieldCheck, Snowflake, Sparkles, ThermometerSun, type LucideIcon } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { LeadCaptureForm } from '@/components/lead/LeadCaptureForm';
import { submitLivreBlancToHubspot, type HubspotFormConfig } from '@/lib/hubspot';
import { pushFormSubmit } from '@/lib/dataLayer';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import ScrollReveal from '@/components/ScrollReveal';
import { Badge } from '@/components/ui/badge';

export interface GuideBenefit {
  icon: LucideIcon;
  title: string;
  text: string;
}

export interface GuideProofStat {
  value: string;
  label: string;
}

export interface GuideReassurance {
  icon: LucideIcon;
  label: string;
}

export interface GuideCoolRoofProps {
  heroEyebrow?: string;
  heroTitre?: string;
  heroImage?: string;
  heroImageAlt?: string;
  heroLegende?: string;
  formTitre?: string;
  formId?: string;
  hubspotForm?: HubspotFormConfig;
  reassurances?: GuideReassurance[];
  proofStats?: GuideProofStat[];
  benefits?: GuideBenefit[];
  telBadge?: string;
  telTitre?: string;
  telIntro?: string;
  telListe?: string[];
  telImage?: string;
  telImageAlt?: string;
  form2Titre?: string;
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const defaultTelListe = ['Principe du cool roof', 'Confort thermique d’été', 'Économies potentielles', 'Durabilité toiture'];

const defaultBenefits: GuideBenefit[] = [
  {
    icon: ThermometerSun,
    title: 'Avoir moins chaud en été',
    text: 'Comprendre comment un revêtement réflectif limite les apports solaires par la toiture.',
  },
  {
    icon: Snowflake,
    title: 'Réduire les coûts de climatisation',
    text: 'Identifier les bâtiments où la baisse des besoins en froid peut devenir un levier économique.',
  },
  {
    icon: Building2,
    title: 'Prolonger la durée de vie de la toiture',
    text: 'Découvrir pourquoi un toit moins chaud subit moins de contraintes thermiques.',
  },
];

const defaultProofStats: GuideProofStat[] = [
  { value: 'Depuis 2018', label: 'Pionnier français du cool roof' },
  { value: '2 M de m²', label: 'Toitures traitées en France' },
  { value: "Jusqu'à -8 °C", label: 'Température de surface' },
  { value: "Jusqu'à -40 %", label: 'Besoins de climatisation' },
];

const defaultReassurances: GuideReassurance[] = [
  { icon: BadgeCheck, label: 'Gratuit' },
  { icon: Sparkles, label: 'Sans engagement' },
  { icon: ShieldCheck, label: 'Données protégées' },
];

const GuideCoolRoof = ({
  heroEyebrow = 'Livre blanc Covalba',
  heroTitre = 'Le guide de référence du cool roof industriel.',
  heroImage = '/images/guide-cool-roof/ebook-cool-roof.png',
  heroImageAlt = 'Aperçu du guide Covalba sur le cool roof',
  heroLegende = 'Guide PDF — envoyé par email après validation du formulaire.',
  formTitre = 'Recevez le guide gratuitement',
  hubspotForm,
  reassurances = defaultReassurances,
  proofStats = defaultProofStats,
  benefits = defaultBenefits,
  telBadge = 'Téléchargement',
  telTitre = 'Recevez l’e-book cool roof.',
  telIntro = 'Remplissez le formulaire HubSpot pour accéder au guide. Vous y trouverez les bases utiles pour cadrer un projet de toiture réflective.',
  telListe = defaultTelListe,
  telImage = '/images/guide-cool-roof/ebook-cool-roof.png',
  telImageAlt = 'Prévisualisation du guide cool roof Covalba',
  form2Titre = 'Télécharger le livre blanc',
  ctaTitre = 'Besoin d’aller plus loin ?',
  ctaTexte = 'Demandez un devis et identifiez le système adapté à votre bâtiment.',
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
}: GuideCoolRoofProps = {}) => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main>
        <section id="telecharger" className="relative overflow-hidden bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-32">
          <div
            className="pointer-events-none absolute inset-0 bg-[radial-gradient(120%_80%_at_15%_0%,rgba(58,173,173,0.14),transparent_60%)]"
            aria-hidden="true"
          />
          <div className="container relative mx-auto px-4 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
              {/* LEFT — title + ebook mockup (ebook desktop only) */}
              <ScrollReveal>
                <div className="mb-5 lg:mb-7 flex items-center gap-3">
                  <span className="h-px w-12 bg-primary/70" aria-hidden="true" />
                  <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                    {heroEyebrow}
                  </span>
                </div>
                <h1
                  className="max-w-3xl font-satoshi font-black leading-[0.98] tracking-tight"
                  style={{ fontSize: 'clamp(2.25rem, 5vw, 3.75rem)', letterSpacing: '-0.035em' }}
                >
                  {heroTitre}
                </h1>

                <figure className="group mt-12 hidden max-w-md [perspective:1200px] lg:block">
                  <div className="relative">
                    <div
                      className="pointer-events-none absolute -inset-6 -z-10 rounded-[28px] bg-[radial-gradient(60%_60%_at_30%_25%,rgba(58,173,173,0.4),transparent_70%)] opacity-70 blur-2xl transition-opacity duration-700 group-hover:opacity-100"
                      aria-hidden="true"
                    />
                    <div className="overflow-hidden rounded-xl shadow-[0_45px_90px_-25px_rgba(0,0,0,0.7),0_18px_36px_-16px_rgba(0,0,0,0.5)] ring-1 ring-white/15 transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] [transform:rotateY(-12deg)_rotateX(3deg)] group-hover:[transform:rotateY(0deg)_rotateX(0deg)]">
                      <img
                        src={heroImage}
                        alt={heroImageAlt}
                        className="w-full"
                        loading="eager"
                        decoding="async"
                      />
                    </div>
                  </div>
                  <figcaption className="mt-4 font-body text-xs font-semibold text-white/55">
                    {heroLegende}
                  </figcaption>
                </figure>
              </ScrollReveal>

              {/* RIGHT — form card */}
              <ScrollReveal>
                <div
                  id="telecharger-form"
                  className="scroll-mt-28 rounded-2xl bg-white p-6 text-foreground shadow-[0_24px_60px_-24px_rgba(0,0,0,0.45)] ring-1 ring-white/10 lg:p-8"
                >
                  <div className="mb-6 flex items-start gap-4 border-b border-border pb-5">
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <BookOpenText className="h-5 w-5" />
                    </div>
                    <div>
                      <h2 className="font-satoshi text-2xl font-black tracking-tight text-foreground">
                        {formTitre}
                      </h2>
                      <p className="mt-1 font-body text-sm leading-relaxed text-foreground/60">
                        PDF complet envoyé immédiatement par email.
                      </p>
                    </div>
                  </div>
                  <LeadCaptureForm
                    submit={(data, captchaToken) => submitLivreBlancToHubspot(data, hubspotForm, captchaToken)}
                    submitLabel="Télécharger"
                    successTitle="Merci, c'est bien reçu !"
                    successText="Votre guide cool roof vous est envoyé par e-mail (pensez à vérifier vos indésirables)."
                    onSuccess={() => pushFormSubmit('form_guide_submit', 'guide')}
                  />
                  <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border pt-5">
                    {reassurances.map((item) => {
                      const Icon = item.icon;
                      return (
                        <span key={item.label} className="flex items-center gap-2 font-body text-xs font-semibold text-foreground/65">
                          <Icon className="h-4 w-4 text-primary" />
                          {item.label}
                        </span>
                      );
                    })}
                  </div>
                  <p className="mt-4 text-xs leading-relaxed text-foreground/45">
                    Vos informations sont utilisées par Covalba pour vous transmettre le contenu demandé.
                  </p>
                </div>
              </ScrollReveal>
            </div>

            {/* Proof bar */}
            <ScrollReveal>
              <div className="mt-12 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] lg:mt-16 lg:grid-cols-4">
                {proofStats.map((stat) => (
                  <div key={stat.label} className="px-5 py-6 lg:px-7 lg:py-7">
                    <p className="font-display text-2xl font-bold leading-none text-white lg:text-3xl">{stat.value}</p>
                    <p className="mt-2 font-body text-xs leading-snug text-white/60 lg:text-sm">{stat.label}</p>
                  </div>
                ))}
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section className="bg-offwhite py-14 lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-5 md:grid-cols-3">
              {benefits.map((benefit) => {
                const Icon = benefit.icon;
                return (
                  <div key={benefit.title} className="rounded-lg border border-border bg-card p-6 shadow-sm">
                    <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <Icon className="h-5 w-5" />
                    </div>
                    <h2 className="font-satoshi text-xl font-black tracking-tight text-foreground">{benefit.title}</h2>
                    <p className="mt-3 font-body text-sm leading-relaxed text-foreground/62">{benefit.text}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <section id="telecharger-details" className="bg-background py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-[0.8fr_1fr] lg:items-start">
              <div className="lg:sticky lg:top-28">
                <Badge className="mb-4 bg-teal-light text-primary">{telBadge}</Badge>
                <h2 className="font-satoshi text-4xl font-black tracking-tight text-foreground">
                  {telTitre}
                </h2>
                <p className="mt-5 font-body text-lg leading-relaxed text-foreground/65">
                  {telIntro}
                </p>
                <div className="mt-8 grid gap-3">
                  {telListe.map((item) => (
                    <div key={item} className="flex items-center gap-3 font-body text-sm font-semibold text-foreground/68">
                      <span className="h-2 w-2 rounded-full bg-primary" />
                      {item}
                    </div>
                  ))}
                </div>
                <figure className="mt-8 overflow-hidden rounded-lg border border-border bg-offwhite p-3 shadow-sm">
                  <img
                    src={telImage}
                    alt={telImageAlt}
                    className="w-full rounded-md"
                    loading="lazy"
                    decoding="async"
                  />
                </figure>
              </div>
              <div className="rounded-lg border border-border bg-card p-5 shadow-sm lg:p-8">
                <div className="mb-6 flex items-center justify-between border-b border-border pb-5">
                  <div>
                    <p className="font-body text-xs font-bold uppercase tracking-[0.18em] text-primary/70">Formulaire</p>
                    <h3 className="mt-1 font-satoshi text-2xl font-black tracking-tight text-foreground">{form2Titre}</h3>
                  </div>
                  <BookOpenText className="h-5 w-5 text-primary" />
                </div>
                <LeadCaptureForm
                  submit={(data, captchaToken) => submitLivreBlancToHubspot(data, hubspotForm, captchaToken)}
                  submitLabel="Télécharger"
                  successTitle="Merci, c'est bien reçu !"
                  successText="Votre guide cool roof vous est envoyé par e-mail (pensez à vérifier vos indésirables)."
                  onSuccess={() => pushFormSubmit('form_guide_submit', 'guide')}
                />
                <p className="mt-4 text-xs leading-relaxed text-foreground/45">
                  Vos informations sont utilisées par Covalba pour vous transmettre le contenu demandé.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-navy py-16 text-white">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <Badge className="mb-4 border-white/12 bg-white/10 text-white">Projet toiture</Badge>
                <h2 className="font-satoshi text-3xl font-black tracking-tight lg:text-5xl">{ctaTitre}</h2>
                <p className="mt-4 max-w-2xl font-body text-lg leading-relaxed text-white/62">
                  {ctaTexte}
                </p>
              </div>
              <a href={ctaHref} className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
                <span className="text-sm">{ctaLabel}</span>
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform group-hover:translate-x-0.5">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Télécharger" href="#telecharger" phoneHref="tel:+33238775708" />
    </div>
  );
};

export default GuideCoolRoof;