/* global React, Icons */
const { UI } = window;
const { Reveal, ImgPlaceholder, SectionHead } = UI;

// =============================================================
// PAGE 1 — ACCUEIL
// =============================================================
const HomePage = ({ go, cardStyle }) => {
  return (
    <div className="page-enter" data-screen-label="01 Accueil">
      {/* ---------------- HERO ---------------- */}
      <section className="hero section-dark" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', paddingTop: 120, paddingBottom: 64 }}>
        {/* Hero photo placeholder full-bleed */}
        <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
          <img
            src="assets/hero-atelier.png"
            alt="Atelier Flo'auto"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          {/* dark overlay */}
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(11,31,58,0.18) 0%, rgba(11,31,58,0.45) 55%, rgba(11,31,58,0.85) 100%)'
          }} />
          {/* faint grid */}
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.025,
            backgroundImage: 'linear-gradient(var(--ivoire) 1px, transparent 1px), linear-gradient(90deg, var(--ivoire) 1px, transparent 1px)',
            backgroundSize: '64px 64px'
          }} />
        </div>

        {/* fiche technique top-right */}
        <div style={{ position: 'absolute', top: 100, right: 'var(--pad)', zIndex: 2, textAlign: 'right', display: 'flex', flexDirection: 'column', gap: 4 }} className="mono small hide-mobile">
          <span style={{ color: 'var(--gris-clair)' }}>N° 01 / 05 — ACCUEIL</span>
          <span style={{ color: 'var(--accent)' }}>BUEIL · 27730</span>
        </div>

        <div className="wrap" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
          <Reveal>
            <div className="badge" style={{ color: 'var(--ivoire)', marginBottom: 32 }}>
              <span className="pulse" />
              <span>Uniquement sur RDV</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="h-display" style={{ margin: 0, maxWidth: '13ch' }}>
              Le temps<br />
              <span style={{ color: 'var(--accent)' }}>qu'il faut</span><br />
              pour bien faire.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p className="body-lg" style={{ marginTop: 32, color: 'var(--gris-clair)', maxWidth: 560 }}>
              Garage indépendant à Bueil. Diagnostic honnête, devis transparent, intervention soignée — toutes marques, uniquement sur rendez-vous.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 40 }}>
              <button className="btn btn-primary" onClick={() => go('contact')}>
                Prendre RDV <Icons.ArrowRight className="arrow" />
              </button>
              <button className="btn btn-secondary" onClick={() => go('services')}>
                Voir les services <Icons.ArrowRight className="arrow" />
              </button>
            </div>
          </Reveal>

          {/* Hero footer ticker stats */}
          <Reveal delay={500}>
            <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 28, borderTop: '1px solid var(--gris-bordure)', paddingTop: 28 }}>
              {[
                { k: '10+', l: 'années d\'expérience' },
                { k: '4.9', l: 'note Google · 47 avis' },
                { k: '24h', l: 'réponse garantie' },
                { k: '100%', l: 'devis gratuits' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="h-lg" style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.02em' }}>{s.k}</div>
                  <div className="mono small" style={{ color: 'var(--gris-clair)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 10 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------------- TICKER REASSURANCE ---------------- */}
      <div className="section-light">
        <div className="ticker-wrap">
          <div className="ticker">
            {Array.from({ length: 2 }).flatMap((_, k) => [
              <span key={`a${k}`}>10+ ans d'expérience</span>,
              <span key={`b${k}`}>Devis gratuit</span>,
              <span key={`c${k}`}>Réponse sous 24h</span>,
              <span key={`d${k}`}>Toutes marques</span>,
              <span key={`e${k}`}>Travail certifié</span>,
              <span key={`f${k}`}>Bueil · Normandie</span>,
            ])}
          </div>
        </div>
      </div>

      {/* ---------------- APERÇU SERVICES — 3D CAR ---------------- */}
      <CarShowcase go={go} />

      {/* ---------------- AVIS GOOGLE ---------------- */}
      <section className="section-light section-pad-md">
        <span className="section-num" style={{ color: 'var(--nuit)' }}>§ 03 / SATISFACTION CLIENT</span>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 48, alignItems: 'center' }} className="avis-grid">
            <Reveal>
              <div>
                <span className="eyebrow">Avis Google</span>
                <div style={{ marginTop: 24, display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(80px, 12vw, 140px)', fontWeight: 700, lineHeight: 1, color: 'var(--nuit)' }}>4.9</span>
                  <div>
                    <div className="stars">
                      {[1,2,3,4,5].map(i => <Icons.Star key={i} />)}
                    </div>
                    <div className="mono small" style={{ marginTop: 8, color: 'var(--muted-on-light)' }}>47 AVIS · GOOGLE MAPS</div>
                  </div>
                </div>
                <a className="btn btn-ghost" style={{ marginTop: 32, color: 'var(--nuit)' }} href="#">
                  Voir tous les avis <Icons.ArrowRight className="arrow" style={{ marginLeft: 8 }} />
                </a>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ position: 'relative', padding: '32px 32px 32px 56px', background: 'var(--blanc)', border: '1px solid var(--border-light)' }}>
                <Icons.Quote style={{ position: 'absolute', top: 24, left: 18, width: 28, height: 28, color: 'var(--accent)' }} />
                <div className="stars" style={{ marginBottom: 12 }}>
                  {[1,2,3,4,5].map(i => <Icons.Star key={i} />)}
                </div>
                <p className="body-lg" style={{ fontSize: 18, marginTop: 0, color: 'var(--nuit)', lineHeight: 1.5, marginBottom: 24 }}>
                  « Flo a pris le temps de m'expliquer la panne, le devis était clair, et le travail impeccable. C'est rare de trouver un garage aussi honnête. »
                </p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--nuit)', color: 'var(--ivoire)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>MD</div>
                  <div>
                    <div style={{ fontWeight: 600, color: 'var(--nuit)' }}>Marc D.</div>
                    <div className="mono small" style={{ color: 'var(--muted-on-light)' }}>BUEIL · IL Y A 2 SEMAINES</div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .avis-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* ---------------- MINI CTA ---------------- */}
      <section className="section-dark section-pad-md" style={{ borderTop: '1px solid var(--gris-bordure)' }}>
        <span className="section-num">§ 04 / DIAGNOSTIC</span>
        <div className="wrap">
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 48, alignItems: 'center' }} className="cta-grid">
              <div>
                <span className="eyebrow">Besoin d'un diagnostic ?</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 0 }}>
                  Un bruit suspect ?<br/>
                  Un voyant allumé ?
                </h2>
                <p className="body-lg" style={{ marginTop: 20, color: 'var(--gris-clair)' }}>
                  Décrivez-moi le problème. Je vous rappelle sous 24h avec un premier avis et un créneau si besoin.
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
                <button className="btn btn-primary" onClick={() => go('contact')} style={{ padding: '18px 28px' }}>
                  Prendre RDV <Icons.ArrowRight className="arrow" />
                </button>
                <a href="tel:+33000000000" className="btn btn-secondary" style={{ color: 'var(--ivoire)' }}>
                  <Icons.Phone width="14" height="14" /> 06 12 34 56 78
                </a>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .cta-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
};

// ---------- Service preview card (variants) ----------
const ServicePreviewCard = ({ service, cardStyle, go }) => {
  const Icon = service.icon;
  const click = () => go('services');
  if (cardStyle === 'photo') {
    return (
      <div className="svc-card photo" onClick={click} style={{ cursor: 'pointer' }}>
        <div className="svc-photo">
          <ImgPlaceholder icon={Icon} label={service.name} style={{ height: '100%', borderRight: '1px solid var(--gris-bordure)' }} />
          <span className="svc-num" style={{ color: 'var(--accent)', top: 12, left: 16 }}>{service.n}</span>
        </div>
        <div className="svc-body">
          <h3 className="svc-name">{service.name}</h3>
          <p className="svc-desc">{service.desc}</p>
          <span className="svc-cta">Demander un devis</span>
        </div>
      </div>
    );
  }
  return (
    <div className={`svc-card ${cardStyle === 'filled' ? 'filled' : ''}`} onClick={click} style={{ cursor: 'pointer', borderRight: '1px solid var(--gris-bordure)' }}>
      <span className="svc-num">{service.n}</span>
      <Icon className="svc-icon" />
      <h3 className="svc-name">{service.name}</h3>
      <p className="svc-desc">{service.desc}</p>
      <span className="svc-cta">Demander un devis</span>
    </div>
  );
};

window.HomePage = HomePage;
window.ServicePreviewCard = ServicePreviewCard;

// ============== 3D CAR SHOWCASE ==============
const CarShowcase = ({ go }) => {
  const [active, setActive] = React.useState(0);
  const hotspots = [
    // x/y in SVG coords (viewBox 1000 x 460) — anchored to real part location on a right-facing side view
    { n: '01', name: 'Vidange & Révision',     zone: 'Carter d\u2019huile',   desc: 'Vidange moteur, filtres, contrôle multi-points selon préconisations constructeur.', x: 175, y: 298 },
    { n: '02', name: 'Filtres',                zone: 'Compartiment moteur', desc: 'Filtre à huile, à air, habitacle, carburant — remplacement aux échéances.',          x: 200, y: 232 },
    { n: '03', name: 'Batterie',               zone: 'Bloc moteur',           desc: 'Test, charge, remplacement — choix adapté à votre véhicule et usage.',               x: 290, y: 220 },
    { n: '04', name: 'Diagnostic moteur',      zone: 'OBD · sous volant',     desc: 'Lecture défauts OBD, recherche de panne, devis honnête avant toute intervention.',  x: 416, y: 230 },
    { n: '05', name: 'Climatisation',          zone: 'Condenseur',            desc: 'Recharge, contrôle d\u2019étanchéité, désinfection circuit, remplacement compresseur.',  x: 115, y: 252 },
    { n: '06', name: 'Électrique',             zone: 'Tableau de bord',       desc: 'Faisceaux, démarreur, alternateur, éclairage — pannes électriques diagnostiquées.', x: 475, y: 215 },
    { n: '07', name: 'Direction / Suspension', zone: 'Train avant',           desc: 'Amortisseurs, rotules, biellettes, silentblocs — tenue de route et confort.',       x: 232, y: 292 },
    { n: '08', name: 'Freins',                 zone: 'Étrier roue AV',        desc: 'Plaquettes, disques, étriers, purge — diagnostic complet du système de freinage.',  x: 248, y: 348 },
    { n: '09', name: 'Pneus',                  zone: 'Gomme roue AR',         desc: 'Montage, équilibrage, valves — toutes marques, toutes dimensions.',                  x: 718, y: 376 },
    { n: '10', name: 'Alignement',             zone: 'Géométrie 4 roues',     desc: 'Parallélisme et géométrie 4 roues — usure homogène, direction parfaite.',           x: 490, y: 388 },
    { n: '11', name: 'Transmission',           zone: 'Tunnel central',        desc: 'Embrayage, boîte, cardans — réparation et remplacement.',                            x: 380, y: 305 },
    { n: '12', name: 'Dépannage',              zone: 'Carrosserie',           desc: 'Remorquage léger, démarrage, dépannage sur zone — intervention rapide.',             x: 540, y: 110 },
  ];
  const cur = hotspots[active];
  return (
    <section className="section-dark-2 section-pad-lg" style={{ overflow: 'hidden' }}>
      <span className="section-num">§ 02 / SERVICES — APERÇU</span>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <Reveal><span className="eyebrow">Prestations phares</span></Reveal>
            <Reveal delay={80}><h2 className="h-xl" style={{ marginTop: 16, marginBottom: 0 }}>Ce que je fais<br/>de mes deux mains.</h2></Reveal>
          </div>
          <Reveal delay={160}>
            <button className="btn btn-secondary" onClick={() => go('services')} style={{ color: 'var(--ivoire)' }}>
              Toutes les prestations <Icons.ArrowRight className="arrow" />
            </button>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)', gap: 48, alignItems: 'stretch' }} className="car-grid">
            {/* CAR STAGE */}
            <div className="car-stage" style={{ position: 'relative', minHeight: 480, border: '1px solid var(--gris-bordure)', background: 'radial-gradient(ellipse at center, #18386a 0%, #0B1F3A 70%)', overflow: 'hidden' }}>
              <div className="mono small" style={{ position: 'absolute', top: 16, left: 16, color: 'var(--gris-clair)', letterSpacing: '0.16em', textTransform: 'uppercase', fontSize: 10, zIndex: 4 }}>MODÈLE / 3D · INTERACTIF</div>
              <div className="mono small" style={{ position: 'absolute', top: 16, right: 16, color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', fontSize: 10, zIndex: 4 }}>{cur.zone.toUpperCase()} · {String(active+1).padStart(2,'0')}/12</div>

              {/* Grid floor */}
              <div style={{ position: 'absolute', inset: 0, opacity: 0.18, backgroundImage: 'linear-gradient(var(--gris-bordure) 1px, transparent 1px), linear-gradient(90deg, var(--gris-bordure) 1px, transparent 1px)', backgroundSize: '48px 48px', maskImage: 'radial-gradient(ellipse at center, black 35%, transparent 75%)' }} />

              {/* REALISTIC SIDE-VIEW CAR — viewBox 1000x460 */}
              <svg viewBox="0 0 1000 460" style={{ width: '100%', height: '100%', display: 'block', position: 'relative', zIndex: 2 }} className="car-svg" preserveAspectRatio="xMidYMid meet">
                <defs>
                  <linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#2B7DE8"/>
                    <stop offset="55%" stopColor="#1E6FD9"/>
                    <stop offset="100%" stopColor="#0E3F8A"/>
                  </linearGradient>
                  <linearGradient id="sillGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#10367a"/>
                    <stop offset="100%" stopColor="#0B1F3A"/>
                  </linearGradient>
                  <linearGradient id="glassGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#1a3a6b"/>
                    <stop offset="100%" stopColor="#06122a"/>
                  </linearGradient>
                  <radialGradient id="hubGrad" cx="0.4" cy="0.4" r="0.7">
                    <stop offset="0%" stopColor="#F4F1EC"/>
                    <stop offset="100%" stopColor="#7d8a9b"/>
                  </radialGradient>
                  <radialGradient id="discGrad" cx="0.5" cy="0.5" r="0.5">
                    <stop offset="0%" stopColor="#5a6b85"/>
                    <stop offset="100%" stopColor="#2a3650"/>
                  </radialGradient>
                </defs>

                {/* GROUND SHADOW */}
                <ellipse cx="490" cy="408" rx="410" ry="14" fill="#000" opacity="0.55"/>
                <ellipse cx="490" cy="408" rx="410" ry="7" fill="#000" opacity="0.4"/>

                {/* CUTAWAY HINTS — visible faintly to anchor under-car hotspots */}
                <g opacity="0.28" stroke="#A8B4C4" strokeDasharray="3 4" fill="none">
                  <rect x="148" y="288" width="72" height="12" rx="2"/>
                  <path d="M 220 296 L 745 296"/>
                  <ellipse cx="940" cy="296" rx="10" ry="5" fill="#0B1F3A" stroke="#A8B4C4"/>
                  <rect x="345" y="290" width="85" height="14" rx="2"/>
                </g>

                {/* SILL / LOWER ROCKER */}
                <path d="M 78 308 L 100 286 L 920 286 L 938 308 Z" fill="url(#sillGrad)" stroke="#0B1F3A" strokeWidth="1.2"/>

                {/* MAIN BODY SILHOUETTE */}
                <path d="
                  M 60 285
                  C 55 260 65 232 96 218
                  L 132 206
                  L 348 188
                  L 432 108
                  Q 438 102 446 102
                  L 590 102
                  Q 598 102 604 108
                  L 702 188
                  L 882 188
                  Q 912 188 924 204
                  C 942 222 944 254 940 285
                  L 60 285 Z
                " fill="url(#bodyGrad)" stroke="#0B1F3A" strokeWidth="2"/>

                {/* GLASSHOUSE */}
                <path d="M 360 188 L 432 116 Q 438 110 446 110 L 590 110 Q 598 110 604 116 L 696 188 Z" fill="url(#glassGrad)"/>
                {/* B-pillar */}
                <rect x="516" y="112" width="5" height="76" fill="#0B1F3A"/>
                {/* window reflections */}
                <path d="M 372 184 L 436 122 L 512 122 L 512 184 Z" fill="#A8B4C4" opacity="0.10"/>
                <path d="M 524 122 L 588 122 L 686 184 L 524 184 Z" fill="#A8B4C4" opacity="0.16"/>
                <path d="M 446 116 L 530 116" stroke="#F4F1EC" strokeWidth="0.8" opacity="0.5"/>

                {/* BODY HIGHLIGHT — top edge gloss */}
                <path d="M 100 210 Q 220 198 348 192 L 432 116 L 446 110 L 590 110 L 604 116 L 696 192 Q 800 192 904 196" fill="none" stroke="#A8B4C4" strokeWidth="0.6" opacity="0.45"/>

                {/* CHARACTER LINE / body crease */}
                <path d="M 110 250 L 900 250" stroke="#0B1F3A" strokeWidth="1" opacity="0.4"/>
                <path d="M 110 253 L 900 253" stroke="#F4F1EC" strokeWidth="0.5" opacity="0.18"/>

                {/* DOOR CUT LINES */}
                <path d="M 348 192 L 348 286" stroke="#0B1F3A" strokeWidth="1" opacity="0.55"/>
                <path d="M 518 192 L 518 286" stroke="#0B1F3A" strokeWidth="1" opacity="0.55"/>
                <path d="M 702 192 L 702 286" stroke="#0B1F3A" strokeWidth="1" opacity="0.45"/>

                {/* DOOR HANDLES */}
                <rect x="402" y="226" width="42" height="6" rx="1.5" fill="#0B1F3A"/>
                <rect x="402" y="226" width="42" height="2" rx="1" fill="#A8B4C4" opacity="0.6"/>
                <rect x="608" y="226" width="42" height="6" rx="1.5" fill="#0B1F3A"/>
                <rect x="608" y="226" width="42" height="2" rx="1" fill="#A8B4C4" opacity="0.6"/>

                {/* SIDE MIRROR */}
                <path d="M 358 190 q -10 -4 -22 3 q -2 6 8 6 Z" fill="#1E6FD9" stroke="#0B1F3A" strokeWidth="1"/>

                {/* FRONT HEADLIGHT */}
                <path d="M 62 218 L 130 214 L 130 246 L 70 246 Z" fill="#F4F1EC" stroke="#0B1F3A" strokeWidth="0.5"/>
                <path d="M 70 222 L 124 218 L 124 238 L 76 238 Z" fill="#fff" opacity="0.85"/>
                <line x1="70" y1="248" x2="128" y2="248" stroke="#1E6FD9" strokeWidth="2"/>

                {/* GRILLE */}
                <rect x="56" y="254" width="72" height="24" rx="3" fill="#0B1F3A" stroke="#1E3554" strokeWidth="0.6"/>
                <g stroke="#3a4b66" strokeWidth="0.8">
                  <line x1="58" y1="260" x2="126" y2="260"/>
                  <line x1="58" y1="265" x2="126" y2="265"/>
                  <line x1="58" y1="270" x2="126" y2="270"/>
                  <line x1="58" y1="275" x2="126" y2="275"/>
                </g>
                {/* brand badge dot */}
                <circle cx="92" cy="267" r="4" fill="#A8B4C4" opacity="0.6"/>

                {/* TAIL LIGHT */}
                <path d="M 904 214 L 938 218 L 938 242 L 890 242 Z" fill="#ef4444" opacity="0.9"/>
                <rect x="898" y="246" width="38" height="3" fill="#F4F1EC" opacity="0.6"/>

                {/* EXHAUST TIP */}
                <ellipse cx="944" cy="296" rx="9" ry="5" fill="#1a2638" stroke="#A8B4C4" strokeWidth="0.8"/>

                {/* WHEEL ARCHES — darker shadow under arches */}
                <circle cx="232" cy="346" r="60" fill="#06122a"/>
                <circle cx="760" cy="346" r="60" fill="#06122a"/>

                {/* === FRONT WHEEL === */}
                <g>
                  {/* tire */}
                  <circle cx="232" cy="346" r="54" fill="#0B1F3A" stroke="#1E3554" strokeWidth="1.5"/>
                  <circle cx="232" cy="346" r="54" fill="none" stroke="#1E3554" strokeWidth="0.8" strokeDasharray="3 4" opacity="0.6"/>
                  {/* sidewall lettering hint */}
                  <text x="232" y="402" textAnchor="middle" fontSize="6" fill="#A8B4C4" opacity="0.5" fontFamily="JetBrains Mono, monospace" letterSpacing="0.8">205/55 R17</text>
                  {/* brake disc behind rim */}
                  <circle cx="232" cy="346" r="30" fill="url(#discGrad)"/>
                  <circle cx="232" cy="346" r="30" fill="none" stroke="#A8B4C4" strokeWidth="0.4" opacity="0.5"/>
                  {/* brake caliper — visible red bracket */}
                  <path d="M 256 328 a 22 22 0 0 1 0 36" stroke="#ef4444" strokeWidth="6" fill="none" strokeLinecap="round"/>
                  <text x="262" y="349" fontSize="4.5" fill="#fff" opacity="0.7" fontFamily="JetBrains Mono, monospace">FA</text>
                  {/* alloy rim — multi-spoke */}
                  <g stroke="#F4F1EC" strokeWidth="3" strokeLinecap="round">
                    <line x1="232" y1="316" x2="232" y2="376"/>
                    <line x1="205" y1="333" x2="259" y2="359"/>
                    <line x1="259" y1="333" x2="205" y2="359"/>
                    <line x1="202" y1="346" x2="262" y2="346"/>
                    <line x1="217" y1="320" x2="247" y2="372"/>
                    <line x1="247" y1="320" x2="217" y2="372"/>
                  </g>
                  {/* hub center cap */}
                  <circle cx="232" cy="346" r="8" fill="url(#hubGrad)"/>
                  <circle cx="232" cy="346" r="3" fill="#0B1F3A"/>
                  {/* lug nuts */}
                  <g fill="#0B1F3A">
                    <circle cx="232" cy="332" r="1.6"/>
                    <circle cx="246" cy="354" r="1.6"/>
                    <circle cx="218" cy="354" r="1.6"/>
                    <circle cx="244" cy="338" r="1.6"/>
                    <circle cx="220" cy="338" r="1.6"/>
                  </g>
                </g>

                {/* === REAR WHEEL === */}
                <g>
                  <circle cx="760" cy="346" r="54" fill="#0B1F3A" stroke="#1E3554" strokeWidth="1.5"/>
                  <circle cx="760" cy="346" r="54" fill="none" stroke="#1E3554" strokeWidth="0.8" strokeDasharray="3 4" opacity="0.6"/>
                  <text x="760" y="402" textAnchor="middle" fontSize="6" fill="#A8B4C4" opacity="0.5" fontFamily="JetBrains Mono, monospace" letterSpacing="0.8">205/55 R17</text>
                  <circle cx="760" cy="346" r="30" fill="url(#discGrad)"/>
                  <circle cx="760" cy="346" r="30" fill="none" stroke="#A8B4C4" strokeWidth="0.4" opacity="0.5"/>
                  <g stroke="#F4F1EC" strokeWidth="3" strokeLinecap="round">
                    <line x1="760" y1="316" x2="760" y2="376"/>
                    <line x1="733" y1="333" x2="787" y2="359"/>
                    <line x1="787" y1="333" x2="733" y2="359"/>
                    <line x1="730" y1="346" x2="790" y2="346"/>
                    <line x1="745" y1="320" x2="775" y2="372"/>
                    <line x1="775" y1="320" x2="745" y2="372"/>
                  </g>
                  <circle cx="760" cy="346" r="8" fill="url(#hubGrad)"/>
                  <circle cx="760" cy="346" r="3" fill="#0B1F3A"/>
                  <g fill="#0B1F3A">
                    <circle cx="760" cy="332" r="1.6"/>
                    <circle cx="774" cy="354" r="1.6"/>
                    <circle cx="746" cy="354" r="1.6"/>
                    <circle cx="772" cy="338" r="1.6"/>
                    <circle cx="748" cy="338" r="1.6"/>
                  </g>
                </g>

                {/* PART HIGHLIGHT — pulses around the active hotspot's anchor part */}
                <circle cx={cur.x} cy={cur.y} r="36" fill="none" stroke="#1E6FD9" strokeWidth="1.5" opacity="0.6" className="part-ring"/>

                {/* === HOTSPOTS (inside SVG, scale with car) === */}
                {hotspots.map((h, i) => (
                  <g key={h.n}
                     onClick={() => setActive(i)}
                     onMouseEnter={() => setActive(i)}
                     className={`svg-hs ${active === i ? 'on' : ''}`}
                     style={{ cursor: 'pointer' }}>
                    {/* connector line from hotspot to label */}
                    <line x1={h.x} y1={h.y} x2={h.x} y2={h.y - 22} stroke="#1E6FD9" strokeWidth="0.8" opacity="0.6" className="hs-line"/>
                    {/* large invisible hit target */}
                    <circle cx={h.x} cy={h.y} r="18" fill="transparent"/>
                    {/* pulse */}
                    <circle cx={h.x} cy={h.y} r="10" fill="none" stroke="#1E6FD9" strokeWidth="1.2" className="hs-pulse-svg"/>
                    {/* outer halo */}
                    <circle cx={h.x} cy={h.y} r="9" fill="#0B1F3A" stroke="#1E6FD9" strokeWidth="1.5" className="hs-ring"/>
                    {/* dot */}
                    <circle cx={h.x} cy={h.y} r="4" fill="#1E6FD9" className="hs-dot-svg"/>
                    {/* number tag above */}
                    <g transform={`translate(${h.x}, ${h.y - 22})`} className="hs-tag-svg">
                      <rect x="-10" y="-9" width="20" height="12" fill="#0B1F3A" stroke="#1E6FD9" strokeWidth="0.6"/>
                      <text x="0" y="0" textAnchor="middle" fontSize="7" fill="#1E6FD9" fontFamily="JetBrains Mono, monospace" letterSpacing="0.8">{h.n}</text>
                    </g>
                  </g>
                ))}
              </svg>
            </div>

            {/* INFO PANEL */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--gris-bordure)', maxHeight: 560, overflowY: 'auto' }}>
              {/* active detail card on top */}
              <div style={{ padding: '22px 22px 24px', background: 'var(--bleu-moyen)', borderBottom: '1px solid var(--gris-bordure)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.14em' }}>N° {cur.n} / 12</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--gris-clair)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>· {cur.zone}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontStretch: '85%', fontSize: 28, textTransform: 'uppercase', letterSpacing: '-0.01em', margin: '6px 0 12px' }}>{cur.name}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--gris-clair)' }}>{cur.desc}</p>
                <button onClick={() => go('contact')} className="mono" style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', background: 'transparent', border: 0, padding: 0, cursor: 'pointer' }}>
                  Demander un devis →
                </button>
              </div>
              {/* compact list */}
              <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
                {hotspots.map((h, i) => (
                  <li key={h.n}>
                    <button
                      onClick={() => setActive(i)}
                      onMouseEnter={() => setActive(i)}
                      className={`car-row ${active === i ? 'on' : ''}`}
                    >
                      <span className="mono" style={{ fontSize: 10, color: active === i ? 'var(--accent)' : 'var(--gris-clair)', letterSpacing: '0.14em', width: 22 }}>{h.n}</span>
                      <span style={{ flex: 1, fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em' }}>{h.name}</span>
                      <span className="mono" style={{ fontSize: 9, color: 'var(--gris-clair)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{h.zone}</span>
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .car-grid { grid-template-columns: 1fr !important; }
          .car-stage { min-height: 320px !important; }
        }
        .car-svg { animation: carfloat 7s ease-in-out infinite; }
        @keyframes carfloat {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }
        /* SVG hotspot states */
        .svg-hs .hs-dot-svg { transition: r 0.25s; }
        .svg-hs .hs-ring { transition: r 0.25s, stroke-width 0.25s; }
        .svg-hs:hover .hs-dot-svg, .svg-hs.on .hs-dot-svg { r: 5; }
        .svg-hs:hover .hs-ring, .svg-hs.on .hs-ring { r: 11; stroke-width: 2; }
        .svg-hs .hs-pulse-svg { opacity: 0; transform-origin: center; transform-box: fill-box; }
        .svg-hs.on .hs-pulse-svg { opacity: 1; animation: svghspulse 1.6s ease-out infinite; }
        @keyframes svghspulse {
          0% { r: 9; opacity: 0.9; }
          100% { r: 26; opacity: 0; }
        }
        .svg-hs .hs-tag-svg, .svg-hs .hs-line { opacity: 0; transition: opacity 0.2s; }
        .svg-hs:hover .hs-tag-svg, .svg-hs.on .hs-tag-svg,
        .svg-hs:hover .hs-line, .svg-hs.on .hs-line { opacity: 1; }
        .part-ring { transition: cx 0.4s cubic-bezier(.22,.61,.36,1), cy 0.4s cubic-bezier(.22,.61,.36,1); animation: partpulse 2.2s ease-in-out infinite; }
        @keyframes partpulse { 0%,100% { opacity: 0.35; r: 32; } 50% { opacity: 0.7; r: 42; } }
        /* legacy hidden */
        .hotspot { display: none; }
        @keyframes hspulse {
          0% { transform: scale(0.6); opacity: 1; }
          100% { transform: scale(2); opacity: 0; }
        }
        .hs-tag {
          position: absolute;
          top: -20px; left: 50%;
          transform: translateX(-50%);
          font-size: 9px; letter-spacing: 0.14em;
          color: var(--accent);
          background: var(--nuit);
          padding: 1px 5px;
          border: 1px solid var(--gris-bordure);
          white-space: nowrap;
          opacity: 0;
          transition: opacity 0.2s;
        }
        .hotspot:hover .hs-tag,
        .hotspot.on .hs-tag { opacity: 1; }
        .car-row {
          width: 100%;
          display: flex; align-items: center; gap: 12px;
          text-align: left;
          background: transparent;
          border: 0;
          border-bottom: 1px solid var(--gris-bordure);
          padding: 12px 18px;
          color: var(--ivoire);
          cursor: pointer;
          transition: all 0.18s;
          font-family: inherit;
        }
        .car-row:last-child { border-bottom: 0; }
        .car-row:hover { background: rgba(30,111,217,0.08); }
        .car-row.on { background: rgba(30,111,217,0.14); }
        .car-row.on::before {
          content: ''; position: absolute; left: 0; width: 3px; height: 24px;
          background: var(--accent); margin-top: 8px;
        }
      `}</style>
    </section>
  );
};
window.CarShowcase = CarShowcase;