// SectionApproche — "Notre approche" — 4 valeurs
function SectionApproche() {
  const isMobile = window.__dch_isMobile;
  const values = [
    {
      icon: 'compass',
      title: 'Exigence de sélection',
      body: "Chaque véhicule proposé est évalué selon des critères stricts : historique d'entretien complet, état mécanique vérifié, cohérence entre le kilométrage et l'état général. Nous ne proposons que ce que nous recommanderions à notre propre famille.",
    },
    {
      icon: 'lens',
      title: 'Transparence totale',
      body: "Rapport d'inspection, carnet d'entretien, relevé kilométrique certifié : vous achetez en connaissant tout. Pas de zone d'ombre, pas de mauvaise surprise après la signature. C'est notre engagement sur chaque véhicule de notre sélection.",
    },
    {
      icon: 'handshake',
      title: 'Service sur mesure',
      body: "Vous n'êtes pas un numéro de dossier. Chaque rendez-vous est un échange entre passionnés — le temps de comprendre votre projet, votre usage et vos attentes — pour vous orienter vers le bon choix, pas vers le véhicule le plus cher du stock.",
    },
    {
      icon: 'hourglass',
      title: 'Valeur préservée',
      body: "Une voiture bien choisie aujourd'hui, c'est une valeur qui se conserve demain. Les grandes marques premium — BMW, Audi, Mercedes, Mini, Alpine et bien d'autres — sont construites pour durer. Notre rôle est de vous aider à investir intelligemment dans un véhicule dont vous serez encore fiers dans dix ans.",
    },
  ];

  return (
    <section id="approche" style={{ ...sec.section, padding: isMobile ? '56px 20px' : '88px 80px' }}>
      <div style={sec.inner}>
        <Reveal>
        <div style={{ ...sec.heading, textAlign: 'center', alignItems: 'center' }}>
          <Eyebrow align="center" dots>CE QUI NOUS DÉFINIT</Eyebrow>
          <h2 style={{ ...sec.h2, fontSize: isMobile ? 36 : 52 }}>
            <span style={{ fontStyle: 'italic', fontWeight: 300 }}>Notre</span> approche
          </h2>
          <p style={{ ...sec.heroLede, fontSize: isMobile ? 15 : 16, maxWidth: 540 }}>
            Quatre principes qui guident chaque échange, chaque dossier et chaque véhicule
            qui passe entre nos mains.
          </p>
        </div>
        </Reveal>

        <div style={{
          ...approche.grid,
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 0 : 0,
          borderTop: '1px solid #1A1A1A',
          borderBottom: '1px solid #1A1A1A',
        }}>
          {values.map((v, i) => (
            <Reveal key={v.title} delay={i * 90}>
              <ApprocheCell
                value={v}
                index={i}
                last={i === values.length - 1}
                isMobile={isMobile}
              />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const approche = {
  grid: { display: 'grid', marginTop: 56 },
  cell: {
    display: 'flex', flexDirection: 'column', gap: 14,
    position: 'relative',
    overflow: 'hidden',
    transition: 'background 360ms ease-out',
  },
  bigNum: {
    position: 'absolute',
    top: -32,
    right: -28,
    fontFamily: "'Cormorant Garamond', serif",
    fontStyle: 'italic',
    fontWeight: 300,
    fontSize: 340,
    lineHeight: 0.85,
    color: '#C4A45A',
    opacity: 0.07,
    pointerEvents: 'none',
    letterSpacing: '-0.04em',
    userSelect: 'none',
    transition: 'opacity 500ms ease-out, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1)',
    zIndex: 0,
  },
  bigNumOutline: {
    /* outlined / stroke effect when hovered for max editorial feel */
    WebkitTextStroke: '1px #C4A45A',
    color: 'transparent',
  },
  cellInner: {
    position: 'relative', zIndex: 1,
    display: 'flex', flexDirection: 'column', gap: 14,
  },
  iconWrap: {
    width: 44, height: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    border: '1px solid #2A2A2A', borderRadius: 0, background: '#0A0A0A',
    transition: 'border-color 320ms ease-out, box-shadow 320ms ease-out, transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1)',
  },
  smallIdx: {
    fontFamily: "'DM Mono', monospace", fontSize: 11, color: '#4A4540',
    letterSpacing: '0.06em',
    transition: 'color 320ms ease-out',
  },
  title: {
    margin: 0, fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
    fontWeight: 400, fontSize: 22, color: '#F5F0E8', letterSpacing: '0.005em',
    marginTop: 4,
    transition: 'color 320ms ease-out',
  },
  body: {
    margin: 0, fontFamily: "'Inter', sans-serif", fontSize: 14.5, lineHeight: 1.7,
    color: '#8A7F6E', letterSpacing: '0.01em',
    transition: 'color 360ms ease-out, transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1)',
  },
  bottomLine: {
    position: 'absolute', left: 0, bottom: 0, height: 1, background: '#C4A45A',
    width: '0%',
    transition: 'width 500ms cubic-bezier(0.22, 0.61, 0.36, 1)',
  },
};

function ApprocheCell({ value, index, last, isMobile }) {
  const [hover, setHover] = React.useState(false);
  const v = value;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...approche.cell,
        padding: isMobile ? '28px 4px' : '44px 28px',
        borderRight: !isMobile && !last ? '1px solid #1A1A1A' : 'none',
        borderBottom: isMobile && !last ? '1px solid #1A1A1A' : 'none',
        background: hover ? 'rgba(196,164,90,0.025)' : 'transparent',
      }}
    >
      {/* Big background number — outlined, positioned to the right of the icon */}
      {!isMobile && (
        <div
          aria-hidden="true"
          style={{
            ...approche.bigNum,
            ...approche.bigNumOutline,
            opacity: hover ? 0.26 : 0.08,
            transform: hover
              ? 'translateX(-6px) scale(1.04)'
              : 'translateX(0) scale(1)',
          }}
        >
          {index + 1}
        </div>
      )}

      <div style={approche.cellInner}>
        <div style={{
          ...approche.iconWrap,
          borderColor: hover ? '#C4A45A' : '#2A2A2A',
          boxShadow: hover ? '0 0 24px rgba(196,164,90,0.25)' : 'none',
          transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        }}>
          <Icon name={v.icon} size={28} color="#C4A45A" strokeWidth={1.3} />
        </div>
        <h3 style={{
          ...approche.title,
          color: hover ? '#FFF8EA' : '#F5F0E8',
        }}>
          {v.title}
        </h3>
        <p style={{
          ...approche.body,
          color: hover ? '#D8CFB8' : '#8A7F6E',
          transform: hover ? 'translateY(0)' : 'translateY(2px)',
        }}>
          {v.body}
        </p>
      </div>

      {/* Bottom gold accent line that draws in on hover */}
      {!isMobile && (
        <span style={{ ...approche.bottomLine, width: hover ? '100%' : '0%' }} aria-hidden="true" />
      )}
    </div>
  );
}

// ----------------------------------------------------------------------------
// SectionServices — "Nos services" — 4 cartes, dépôt-vente en avant
function SectionServices() {
  const isMobile = window.__dch_isMobile;
  const services = [
    {
      key: 'achat',
      title: 'Achat de véhicules',
      body: "Vous vendez votre BMW, Audi, Mercedes, Mini ou tout autre véhicule premium ? Nous proposons un rachat cash au prix juste, avec une estimation sous 24 heures, sans délai artificiel.",
      cta: 'En savoir plus',
      href: '#',
      external: false,
    },
    {
      key: 'depot',
      title: 'Dépôt-vente',
      featured: true,
      body: "Confiez-nous votre véhicule. Nous gérons l'intégralité de la mise en vente — de l'estimation aux photographies, de l'annonce à la signature. Vous touchez votre prix net, sans rien à gérer.",
      cta: 'En savoir plus',
      href: '#',
      external: false,
    },
    {
      key: 'vente',
      title: 'Vente de véhicules',
      body: "Notre sélection de véhicules premium en Essonne est disponible sur LaCentrale. Inspection, historique complet, annonces honnêtes.",
      cta: 'Voir nos annonces',
      href: 'https://pros.lacentrale.fr/C061148',
      external: true,
    },
    {
      key: 'import',
      title: 'Import / Export',
      body: "Un modèle introuvable en France ? Un acheteur à trouver en Europe ? Notre réseau vous ouvre les marchés européens, sans les contraintes administratives.",
      cta: 'En savoir plus',
      href: '#',
      external: false,
    },
  ];

  return (
    <section id="services" style={{ ...sec.section, background: '#101010', padding: isMobile ? '56px 20px' : '88px 80px' }}>
      <div style={sec.inner}>
        <Reveal>
        <div style={{ ...sec.heading, textAlign: 'center', alignItems: 'center' }}>
          <Eyebrow align="center" dots>NOTRE SAVOIR-FAIRE</Eyebrow>
          <h2 style={{ ...sec.h2, fontSize: isMobile ? 36 : 52 }}>
            <span style={{ fontStyle: 'italic', fontWeight: 300 }}>Nos</span> services
          </h2>
          <p style={{ ...sec.heroLede, fontSize: isMobile ? 15 : 16, maxWidth: 580 }}>
            Quatre métiers, une seule philosophie : un accompagnement à taille humaine,
            de la première estimation à la remise des clés.
          </p>
        </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 16 : 24,
          marginTop: 56,
        }}>
          {services.map((s, i) => (
            <Reveal key={s.key} delay={i * 100}>
              <ServiceCard {...s} idx={i + 1} isMobile={isMobile} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ title, body, cta, href, external, featured, idx, isMobile }) {
  const [hover, setHover] = React.useState(false);
  const cardRef = React.useRef(null);
  const ctaRef = React.useRef(null);

  // Magnetic / 3D-tilt effect — desktop fine-pointer only
  const handleMove = (e) => {
    if (isMobile) return;
    const card = cardRef.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    // Normalized offset from center, range -1..1
    const dx = (e.clientX - cx) / (rect.width / 2);
    const dy = (e.clientY - cy) / (rect.height / 2);
    const tx = dx * 8;   // magnetic translate (px)
    const ty = dy * 6;
    const rx = dy * -3;  // tilt deg
    const ry = dx * 4;
    card.style.transform = `perspective(900px) translate3d(${tx}px, ${ty}px, 0) rotateX(${rx}deg) rotateY(${ry}deg)`;
    if (ctaRef.current) {
      ctaRef.current.style.transform = `translate3d(${dx * 6}px, 0, 0)`;
    }
  };
  const handleLeave = () => {
    if (cardRef.current) cardRef.current.style.transform = '';
    if (ctaRef.current) ctaRef.current.style.transform = '';
    setHover(false);
  };

  return (
    <a
      ref={cardRef}
      className="dch-magnet"
      href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={handleLeave}
      onMouseMove={handleMove}
      style={{
        position: 'relative',
        background: featured ? '#171411' : '#0A0A0A',
        border: featured
          ? '1px solid #C4A45A'
          : (hover ? '1px solid #C4A45A' : '1px solid #2A2A2A'),
        padding: isMobile ? '28px 22px' : '40px 36px',
        textDecoration: 'none', color: '#F5F0E8',
        display: 'flex', flexDirection: 'column', gap: 14,
        boxShadow: featured
          ? '0 0 24px rgba(196,164,90,0.08)'
          : (hover ? '0 24px 60px rgba(0,0,0,0.5), 0 0 24px rgba(196,164,90,0.12)' : 'none'),
      }}
    >
      {featured && (
        <div style={{
          position: 'absolute', top: -1, left: -1,
          background: '#C4A45A', color: '#0A0A0A',
          padding: '6px 12px',
          fontFamily: "'Inter', sans-serif", fontSize: 9.5, fontWeight: 600,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          zIndex: 2,
        }}>
          Notre offre phare
        </div>
      )}

      {/* Big background number — outlined, top-right, bleeds off-frame */}
      {!isMobile && (
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0,
        }}>
          <div style={{
            position: 'absolute',
            top: -88,
            right: -22,
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'italic',
            fontWeight: 300,
            fontSize: 360,
            lineHeight: 0.85,
            letterSpacing: '-0.04em',
            WebkitTextStroke: '1px #C4A45A',
            color: 'transparent',
            opacity: hover ? 0.26 : 0.08,
            transform: hover ? 'translateX(-6px) scale(1.04)' : 'translateX(0) scale(1)',
            transition: 'opacity 500ms ease-out, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1)',
            userSelect: 'none',
          }}>
            {idx}
          </div>
        </div>
      )}

      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', gap: 14, height: '100%', marginTop: featured ? 22 : 0 }}>
        <h3 style={{
          margin: 0, fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
          fontWeight: 400, fontSize: isMobile ? 28 : 34, color: '#F5F0E8', letterSpacing: '0.005em',
          lineHeight: 1.1,
        }}>
          {title}
        </h3>
        <p style={{
          margin: 0, fontFamily: "'Inter', sans-serif", fontSize: 15, lineHeight: 1.7,
          color: '#C8BFA8',
        }}>
          {body}
        </p>
        <div style={{ marginTop: 'auto', paddingTop: 22, display: 'flex', alignItems: 'center', gap: 10 }} ref={ctaRef} className="dch-magnet-cta">
          <span style={{
            fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C4A45A',
          }}>
            {cta}
          </span>
          <span style={{
            width: hover ? 32 : 20, height: 1, background: '#C4A45A',
            transition: 'width 250ms ease-out',
          }} />
          {external
            ? <Icon name="externalLink" size={14} color="#C4A45A" />
            : <Icon name="chevronRight" size={14} color="#C4A45A" />}
        </div>
      </div>
    </a>
  );
}

// ----------------------------------------------------------------------------
// SectionPourquoi — "Pourquoi nous" — manifesto vertical layout, big numerals
function SectionPourquoi() {
  const isMobile = window.__dch_isMobile;
  const args = [
    {
      title: 'Sur rendez-vous uniquement',
      body: "Chez Delta Cars Héritage, pas de hall d'exposition où vous êtes livré à vous-même. Chaque rendez-vous est un moment dédié à votre projet : une attention totale, du temps pour les bonnes questions, des réponses sans détour.",
    },
    {
      title: 'Sélection exigeante, pas stock de masse',
      body: "Nous ne cherchons pas à proposer le plus grand nombre de véhicules — nous cherchons les meilleurs. Chaque voiture dans notre catalogue a passé notre grille de contrôle avant d'être proposée.",
    },
    {
      title: 'Acheteur cash, vendeur réactif',
      body: "Estimation sous 24 heures. Paiement rapide. Si votre voiture correspond à nos critères, la transaction se conclut en quelques jours — sans l'attente incertaine d'un acquéreur particulier.",
    },
  ];
  return (
    <section style={{ ...sec.section, padding: isMobile ? '56px 20px 40px' : '88px 80px 56px', background: '#0A0A0A' }}>
      <div style={{ ...sec.inner, maxWidth: 1200 }}>
        <Reveal>
        <div style={{ ...sec.heading, textAlign: 'center', alignItems: 'center' }}>
          <Eyebrow align="center" dots>POURQUOI NOUS</Eyebrow>
          <h2 style={{ ...sec.h2, fontSize: isMobile ? 36 : 52 }}>
            <span style={{ fontStyle: 'italic', fontWeight: 300 }}>Pourquoi</span> Delta Cars Héritage
          </h2>
        </div>
        </Reveal>

        <div style={{
          marginTop: isMobile ? 56 : 96,
          display: 'flex',
          flexDirection: 'column',
        }}>
          {args.map((a, i) => (
            <PourquoiRow key={a.title} item={a} index={i} isMobile={isMobile} last={i === args.length - 1} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PourquoiRow({ item, index, isMobile, last }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={index * 120}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'minmax(200px, 280px) 1fr',
          gap: isMobile ? 16 : 60,
          alignItems: 'center',
          padding: isMobile ? '36px 0' : '56px 8px',
          borderTop: '1px solid #1A1A1A',
          borderBottom: last ? '1px solid #1A1A1A' : 'none',
          transition: 'background 360ms ease-out',
          background: hover ? 'rgba(196,164,90,0.018)' : 'transparent',
        }}
      >
        {/* Huge numeral — outlined italic Cormorant */}
        <div style={{
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          justifyContent: isMobile ? 'flex-start' : 'center',
          lineHeight: 1,
        }}>
          <span aria-hidden="true" style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'italic',
            fontWeight: 300,
            fontSize: isMobile ? 140 : 280,
            lineHeight: 0.85,
            letterSpacing: '-0.04em',
            WebkitTextStroke: '1px #C4A45A',
            color: hover ? 'rgba(196,164,90,0.18)' : 'transparent',
            transform: hover ? 'translateX(-4px)' : 'translateX(0)',
            transition: 'color 500ms ease-out, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1)',
            userSelect: 'none',
          }}>
            {index + 1}
          </span>
        </div>

        {/* Content — title + body */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 14 : 20, maxWidth: 720 }}>
          <h3 style={{
            margin: 0,
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 400,
            fontStyle: 'italic',
            fontSize: isMobile ? 28 : 42,
            color: hover ? '#FFF8EA' : '#F5F0E8',
            letterSpacing: '-0.005em',
            lineHeight: 1.15,
            transition: 'color 360ms ease-out',
            textWrap: 'balance',
          }}>
            {item.title}
          </h3>
          <p style={{
            margin: 0,
            fontFamily: "'Inter', sans-serif",
            fontSize: isMobile ? 15 : 17,
            lineHeight: 1.75,
            color: hover ? '#D8CFB8' : '#9A8F7E',
            letterSpacing: '0.005em',
            transition: 'color 360ms ease-out',
            maxWidth: 640,
          }}>
            {item.body}
          </p>
        </div>
      </div>
    </Reveal>
  );
}

// ----------------------------------------------------------------------------
// SectionClosing — Citation + closing CTA
function SectionClosing() {
  const isMobile = window.__dch_isMobile;
  return (
    <section id="contact" style={{ ...sec.section, padding: isMobile ? '40px 20px 72px' : '64px 80px 104px', background: '#0A0A0A' }}>
      <Reveal style={{ ...sec.inner, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32, textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
        <Eyebrow align="center">UN MOT POUR FINIR</Eyebrow>
        <h2 style={{
          margin: 0, fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
          fontWeight: 300, fontSize: isMobile ? 32 : 56, color: '#F5F0E8',
          letterSpacing: '-0.005em', lineHeight: 1.15, maxWidth: 820,
        }}>
          Le négoce automobile tel qu'il devrait toujours être.
        </h2>
        <p style={{
          margin: 0, fontFamily: "'Inter', sans-serif", fontSize: isMobile ? 16 : 18,
          lineHeight: 1.8, color: '#C8BFA8', maxWidth: 720, letterSpacing: '0.01em',
        }}>
          Chez Delta Cars Héritage, nous ne vendons pas des voitures. Nous accompagnons des projets
          automobiles. Qu'il s'agisse de vous séparer d'un véhicule auquel vous tenez, de trouver la
          berline qui traversera dix ans de votre vie, ou de confier votre voiture à des professionnels
          qui en prendront soin — chaque échange compte. C'est ce que nous appelons l'héritage :
          un soin qui ne se délègue pas.
        </p>
        <a href="contact.html" style={{
          marginTop: 14,
          fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          background: 'transparent', color: '#C4A45A',
          border: '1px solid #C4A45A', padding: '16px 28px', borderRadius: 2,
          textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          <span>Prendre rendez-vous</span>
          <Icon name="arrowRight" size={14} color="#C4A45A" />
        </a>
      </Reveal>
    </section>
  );
}

// Shared section styles
const sec = {
  section: { position: 'relative' },
  inner: { maxWidth: 1440, margin: '0 auto' },
  heading: { display: 'flex', flexDirection: 'column', gap: 18 },
  h2: {
    margin: 0, fontFamily: "'Cormorant Garamond', serif",
    fontWeight: 400, color: '#F5F0E8', letterSpacing: '-0.01em', lineHeight: 1,
  },
  heroLede: {
    margin: 0, fontFamily: "'Inter', sans-serif", color: '#C8BFA8',
    lineHeight: 1.7, letterSpacing: '0.01em', marginTop: 4,
  },
};

window.SectionApproche = SectionApproche;
window.SectionServices = SectionServices;
window.SectionPourquoi = SectionPourquoi;
window.SectionClosing = SectionClosing;