"use client";

import { Fragment } from 'react';
import { Check } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { parseAccent } from '@/lib/wp/mappers';
import { LeadCaptureForm } from '@/components/lead/LeadCaptureForm';
import { submitEstimationToHubspot, type HubspotFormConfig } from '@/lib/hubspot';

export interface EstimationProps {
  titre?: string;
  intro?: string;
  hubspotForm?: HubspotFormConfig;
  reassuranceItems?: string[];
}

const defaultReassuranceItems = [
  'Budget travaux indicatif',
  'Calcul des primes CEE si éligible',
  'Sans engagement',
];

/**
 * Reconstruit le markup de titre de l'original depuis la convention `*accent*` :
 * segments accent rendus dans le <span className="text-foreground/30"> exact de
 * l'original, espace précédente absorbée dans le span (comme dans le JSX d'origine).
 */
const renderAccentTitre = (titre: string) => {
  const segments = parseAccent(titre);
  return segments.map((segment, i) => {
    if (segment.accent) {
      const prev = segments[i - 1];
      const lead = prev && !prev.accent && /\s$/.test(prev.text) ? ' ' : '';
      return (
        <span key={i} className="text-foreground/30">
          {lead + segment.text}
        </span>
      );
    }
    const next = segments[i + 1];
    const text = next?.accent ? segment.text.replace(/\s+$/, '') : segment.text;
    return <Fragment key={i}>{text}</Fragment>;
  });
};

const Estimation = ({
  titre,
  intro = "Laissez vos coordonnées : un conseiller Covalba vous transmet un budget indicatif sous 24h, primes CEE incluses si votre bâtiment est éligible.",
  hubspotForm,
  reassuranceItems = defaultReassuranceItems,
}: EstimationProps = {}) => {
  return (
    <>
      <Navbar />
      <div className="min-h-screen bg-[#F6FAFB] pt-24 pb-20">
        <div className="container mx-auto px-4 lg:px-8">
          {/* Header */}
          <div className="text-center mb-12 max-w-2xl mx-auto">
            <h1
              className="font-satoshi text-4xl sm:text-5xl lg:text-[3.5rem] font-black text-foreground !leading-[1.02] mb-4"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre !== undefined ? (
                renderAccentTitre(titre)
              ) : (
                <>
                  Estimez votre budget
                  <span className="text-foreground/30"> en 24h.</span>
                </>
              )}
            </h1>
            <p className="text-foreground/50 text-base lg:text-lg font-body leading-relaxed">
              {intro}
            </p>
          </div>

          {/* Layout */}
          <div className="flex flex-col lg:flex-row gap-10 max-w-5xl mx-auto">
            {/* Left : form (7/12) */}
            <div className="lg:w-7/12">
              <div className="bg-white rounded-2xl shadow-sm p-8">
                <LeadCaptureForm
                  requirePhone
                  submit={(data, captchaToken) => submitEstimationToHubspot(data, hubspotForm, captchaToken)}
                  submitLabel="Recevoir mon budget indicatif"
                  successTitle="Demande envoyée !"
                  successText="Un conseiller Covalba vous contacte sous 24h ouvrées avec un budget indicatif adapté à votre projet."
                />
              </div>
            </div>

            {/* Right : reassurance (5/12) */}
            <div className="lg:w-5/12 flex flex-col justify-center">
              <div className="space-y-5">
                {reassuranceItems.map((item) => (
                  <div key={item} className="flex items-center gap-4">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Check className="w-5 h-5 text-primary" strokeWidth={2.5} />
                    </div>
                    <p className="text-foreground/80 font-body text-base font-medium">{item}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default Estimation;