"use client";

import { Fragment } from 'react';
import { Check, Clock, MapPin, Award } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { DiagnosticForm } from '@/components/diagnostic/DiagnosticForm';
import { ClientLogosSlider } from '@/components/diagnostic/ClientLogosSlider';
import { parseAccent } from '@/lib/wp/mappers';
import type { HubspotFormConfig } from '@/lib/hubspot';

export interface DiagnosticReassuranceItem {
  icon: typeof Check;
  label: string;
  hint?: string;
}

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

const defaultReassuranceItems: DiagnosticReassuranceItem[] = [
  { icon: Check, label: 'Devis gratuit' },
  { icon: Clock, label: 'Réponse sous 24h ouvrées' },
  { icon: MapPin, label: 'Intervention partout en France' },
  { icon: Award, label: '15 ans d\'expertise toiture' },
];

/**
 * 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 Diagnostic = ({
  titre,
  intro = 'Un expert Covalba analyse votre bâtiment et vous propose une solution adaptée sous 24h.',
  hubspotForm,
  reassuranceItems = defaultReassuranceItems,
}: DiagnosticProps = {}) => {
  return (
    <>
      <Navbar lightBg />
      <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-10 lg:mb-14 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)
              ) : (
                <>
                  Demandez votre devis
                  <span className="text-foreground/30"> gratuit.</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-8 lg:gap-12 max-w-6xl mx-auto">
            {/* Left : form (8/12) */}
            <div className="lg:w-8/12">
              <DiagnosticForm hubspotForm={hubspotForm} />
            </div>

            {/* Right : reassurance (4/12) */}
            <aside className="lg:w-4/12">
              <div className="lg:sticky lg:top-28 space-y-6">
                <div className="space-y-4">
                  {reassuranceItems.map(({ icon: Icon, label, hint }) => (
                    <div key={label} className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <Icon className="w-5 h-5 text-primary" strokeWidth={2.2} />
                      </div>
                      <div className="pt-1">
                        <p className="text-foreground font-body text-base font-semibold leading-tight">
                          {label}
                        </p>
                        {hint && (
                          <p className="text-foreground/50 text-sm font-body mt-0.5">{hint}</p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-8">
                  <ClientLogosSlider />
                </div>
              </div>
            </aside>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default Diagnostic;