"use client";

import { ArrowRight, BarChart3, Calculator, Euro, FileSpreadsheet, Snowflake, type LucideIcon } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import HubSpotForm from '@/components/HubSpotForm';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import { Badge } from '@/components/ui/badge';
import type { HubspotFormConfig } from '@/lib/hubspot';

const FORM_ID = 'ef0da7e3-fa63-41b3-a656-1e0da2529617';

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

export interface SimulateurEconomieEnergieProps {
  heroBadge?: string;
  heroTitre?: string;
  heroIntro?: string;
  heroCtaLabel?: string;
  heroCtaHref?: string;
  heroSecondaireLabel?: string;
  heroSecondaireHref?: string;
  heroImage?: string;
  heroImageAlt?: string;
  formTitre?: string;
  formId?: string;
  hubspotForm?: HubspotFormConfig;
  outilBadge?: string;
  outilTitre?: string;
  outilIntro?: string;
  outilCards?: SimulateurOutilCard[];
  detailsBadge?: string;
  detailsTitre?: string;
  detailsIntro?: string;
  inputsLabel?: string;
  inputs?: string[];
  detailsImage?: string;
  detailsImageAlt?: string;
  detailsFormTitre?: string;
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const defaultInputs = [
  'Surface de toiture à traiter',
  'Coût de climatisation ou de production de froid',
  'Consigne de température intérieure',
  'Hypothèses de chantier et de retour sur investissement',
];

const defaultOutilCards: SimulateurOutilCard[] = [
  { icon: Snowflake, title: 'Économies en climatisation', text: 'Évaluer l’impact d’une toiture plus fraîche sur les besoins de froid.' },
  { icon: Euro, title: 'Coûts d’exploitation', text: 'Comparer le coût du chantier aux économies potentielles.' },
  { icon: BarChart3, title: 'Retour sur investissement', text: 'Obtenir une base de discussion pour arbitrer un projet.' },
];

const SimulateurEconomieEnergie = ({
  heroBadge = 'Simulateur ROI',
  heroTitre = 'Préparez votre simulation cool roof en ligne.',
  heroIntro = 'Le simulateur web Covalba est en préparation. Laissez vos informations pour cadrer votre surface, vos coûts de froid et recevoir une première lecture du potentiel de retour sur investissement.',
  heroCtaLabel = 'Préparer ma simulation',
  heroCtaHref = '#telecharger',
  heroSecondaireLabel = 'Demander un devis',
  heroSecondaireHref = '/diagnostic',
  heroImage = '/images/simulateur-roi/simulateur-roi-cool-roof.png',
  heroImageAlt = "Aperçu du simulateur d'économies d'énergie Covalba",
  formTitre = 'Préparer ma simulation',
  formId = FORM_ID,
  hubspotForm,
  outilBadge = 'Simulateur en ligne',
  outilTitre = 'Un outil pour objectiver le projet.',
  outilIntro = 'Les formules seront intégrées à partir d’un modèle de calcul validé, pour éviter les promesses trop génériques.',
  outilCards = defaultOutilCards,
  detailsBadge = 'Calculateur web',
  detailsTitre = 'Recevez une première lecture de votre projet.',
  detailsIntro = 'En attendant la mise en ligne du calculateur complet, Covalba peut cadrer les hypothèses clés de votre bâtiment et préparer une estimation argumentée.',
  inputsLabel = 'Données utiles',
  inputs = defaultInputs,
  detailsImage = '/images/simulateur-roi/simulateur-roi-cool-roof.png',
  detailsImageAlt = 'Prévisualisation du simulateur ROI cool roof',
  detailsFormTitre = 'Préparer ma simulation',
  ctaTitre = 'Passez à l’étude terrain.',
  ctaTexte = 'La simulation donnera un premier ordre de grandeur. L’étude terrain vérifie ensuite le support, la surface, le système et les aides mobilisables.',
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
}: SimulateurEconomieEnergieProps = {}) => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main>
        <section id="telecharger" className="bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-32">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-[1fr_0.8fr] lg:items-center">
              <div>
                <Badge className="mb-5 border-white/12 bg-white/10 text-white">{heroBadge}</Badge>
                <h1 className="max-w-4xl font-satoshi text-4xl font-black leading-tight tracking-tight md:text-6xl">
                  {heroTitre}
                </h1>
                <p className="mt-6 max-w-2xl font-body text-lg leading-relaxed text-white/68">
                  {heroIntro}
                </p>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href={heroCtaHref} 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">{heroCtaLabel}</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">
                      <Calculator className="h-4 w-4" />
                    </span>
                  </a>
                  <a href={heroSecondaireHref} className="inline-flex items-center justify-center rounded-full border border-white/15 px-5 py-3 font-body text-sm font-bold text-white/78 hover:bg-white/10">
                    {heroSecondaireLabel}
                  </a>
                </div>
                <figure className="mt-10 max-w-md overflow-hidden rounded-lg border border-white/10 bg-white/[0.06] p-4 shadow-[0_22px_80px_rgba(0,0,0,0.18)]">
                  <img
                    src={heroImage}
                    alt={heroImageAlt}
                    className="w-full rounded-md object-cover"
                    loading="eager"
                    decoding="async"
                  />
                </figure>
              </div>
              <div className="rounded-lg border border-white/10 bg-white p-5 text-foreground shadow-[0_24px_90px_rgba(0,0,0,0.24)] lg:p-7">
                <div className="mb-5 flex items-center justify-between border-b border-border pb-4">
                  <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">
                      {formTitre}
                    </h2>
                  </div>
                  <Calculator className="h-5 w-5 text-primary" />
                </div>
                <HubSpotForm targetId="hubspot-simulateur-roi-form-hero" formId={formId} config={hubspotForm} />
                <p className="mt-4 text-xs leading-relaxed text-foreground/45">
                  Vos informations sont utilisées par Covalba pour préparer l’estimation demandée.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-offwhite py-14 lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mb-8 max-w-3xl">
              <Badge className="mb-4 bg-teal-light text-primary">{outilBadge}</Badge>
              <h2 className="font-satoshi text-3xl font-black tracking-tight text-foreground lg:text-5xl">
                {outilTitre}
              </h2>
              <p className="mt-4 font-body text-lg leading-relaxed text-foreground/62">
                {outilIntro}
              </p>
            </div>
            <div className="grid gap-5 md:grid-cols-3">
              {outilCards.map((item) => {
                const Icon = item.icon;
                return (
                  <div key={item.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>
                    <h3 className="font-satoshi text-xl font-black tracking-tight text-foreground">{item.title}</h3>
                    <p className="mt-3 font-body text-sm leading-relaxed text-foreground/62">{item.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">{detailsBadge}</Badge>
                <h2 className="font-satoshi text-4xl font-black tracking-tight text-foreground">
                  {detailsTitre}
                </h2>
                <p className="mt-5 font-body text-lg leading-relaxed text-foreground/65">
                  {detailsIntro}
                </p>
                <div className="mt-8 rounded-lg border border-border bg-offwhite p-5">
                  <p className="mb-4 flex items-center gap-2 font-body text-xs font-bold uppercase tracking-[0.18em] text-primary/70">
                    <FileSpreadsheet className="h-4 w-4" />
                    {inputsLabel}
                  </p>
                  <div className="grid gap-3">
                    {inputs.map((item) => (
                      <div key={item} className="flex gap-3 font-body text-sm leading-relaxed text-foreground/68">
                        <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
                        {item}
                      </div>
                    ))}
                  </div>
                </div>
                <figure className="mt-8 overflow-hidden rounded-lg border border-border bg-offwhite p-3 shadow-sm">
                  <img
                    src={detailsImage}
                    alt={detailsImageAlt}
                    className="w-full rounded-md object-cover"
                    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">{detailsFormTitre}</h3>
                  </div>
                  <Calculator className="h-5 w-5 text-primary" />
                </div>
                <HubSpotForm targetId="hubspot-simulateur-roi-form" formId={formId} config={hubspotForm} />
                <p className="mt-4 text-xs leading-relaxed text-foreground/45">
                  Vos informations sont utilisées par Covalba pour préparer l’estimation demandée.
                </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">Après simulation</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="Simulateur" href="#telecharger" phoneHref="tel:+33238775708" />
    </div>
  );
};

export default SimulateurEconomieEnergie;