// Hero — full viewport, ESSONNE label, big H1, body, CTA + scroll indicator
function Hero({ palette }) {
  const isMobile = window.__dch_isMobile;
  return (
    <section style={{ ...hero.section, minHeight: isMobile ? 'auto' : 'auto' }}>
      {/* Ambient backdrop — hero photo with cinematic overlays */}
      <div style={hero.bg} aria-hidden="true">
        <div style={hero.photoLayer} className="dch-hero-photo" />
        <div style={hero.photoTint} />
        <div style={hero.photoLeftFade} />
        <div style={hero.photoBottomFade} />
        <div style={hero.photoVignette} />
      </div>

      <div style={{ ...hero.content, padding: isMobile ? '48px 20px 40px' : '56px 80px 56px' }}>
        <div style={{ ...hero.eyebrowRow, '--dch-delay': '0ms' }} className="dch-hero-fade">
          <span style={hero.eyebrowRule} />
          <span style={hero.eyebrow}>Saint Pierre du Perray — 91</span>
        </div>

        <h1 style={{ ...hero.title, fontSize: isMobile ? 44 : 84 }}>
          <span className="dch-hero-line"><span className="dch-hero-line-inner" style={{ animationDelay: '0.25s' }}>
            <span style={hero.titleItalic}>L'héritage</span> <span style={hero.titleAccent}>automobile,</span>
          </span></span>
          <br />
          <span className="dch-hero-line"><span className="dch-hero-line-inner" style={{ animationDelay: '0.45s' }}>
            <span style={hero.titleRegular}>réinventé.</span>
          </span></span>
        </h1>

        <div style={{ ...hero.subRow, flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 20 : 32 }}>
          <div style={hero.subLeft}>
            <h2 style={{ ...hero.h2, fontSize: isMobile ? 18 : 20, '--dch-delay': '700ms' }} className="dch-hero-fade">
              Spécialiste voiture premium occasion en Essonne
            </h2>
            <p style={{ ...hero.body, fontSize: isMobile ? 16 : 17, '--dch-delay': '850ms' }} className="dch-hero-fade">
              Delta Cars Héritage sélectionne et négocie des véhicules premium d'exception dans l'Essonne — BMW,
              Audi, Mercedes, Mini et autres marques soigneusement choisies. Achat direct, vente et dépôt-vente —
              avec l'exigence que votre voiture mérite et l'attention que vous attendez. Nous ne recevons que sur
              rendez-vous, parce qu'un beau projet automobile se construit dans un échange de qualité.
            </p>
            <div style={{ ...hero.ctaRow, flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center', '--dch-delay': '1000ms' }} className="dch-hero-fade">
              <a href="https://pros.lacentrale.fr/C061148" target="_blank" rel="noopener noreferrer" style={{
                ...hero.primary, textAlign: isMobile ? 'center' : 'left', justifyContent: 'center',
              }}>
                <span>Découvrir nos véhicules</span>
                <Icon name="externalLink" size={14} color="#0A0A0A" />
              </a>
              <a href="#approche" style={{ ...hero.secondary, textAlign: isMobile ? 'center' : 'left', justifyContent: 'center' }}>
                <span>Notre approche</span>
                <Icon name="arrowRight" size={14} color="#C4A45A" />
              </a>
            </div>
          </div>

          {!isMobile && (
            <div style={hero.monogram} aria-hidden="true">
              <div style={hero.monoLineWrap}>
                <span style={{ ...hero.monoLine, ...hero.monoDelta }} className="dch-mono dch-mono-1">
                  {'DELTA'.split('').map((c, i) => (
                    <span key={i} className="dch-mono-ch" style={{ animationDelay: `${0.05 * i + 1.3}s` }}>{c}</span>
                  ))}
                </span>
              </div>
              <div style={hero.monoLineWrap}>
                <span style={{ ...hero.monoLine, ...hero.monoCars }} className="dch-mono dch-mono-2">
                  {'CARS'.split('').map((c, i) => (
                    <span key={i} className="dch-mono-ch" style={{ animationDelay: `${0.05 * i + 1.65}s` }}>{c}</span>
                  ))}
                </span>
              </div>
              <div style={hero.monoLineWrap}>
                <span style={{ ...hero.monoLine, ...hero.monoHeritage }} className="dch-mono dch-mono-3">
                  {'HERITAGE'.split('').map((c, i) => (
                    <span key={i} className="dch-mono-ch" style={{ animationDelay: `${0.05 * i + 1.95}s` }}>{c}</span>
                  ))}
                </span>
                <span style={hero.monoUnderline} className="dch-mono-underline" />
              </div>
            </div>
          )}
        </div>
      </div>

    </section>
  );
}

const hero = {
  section: { position: 'relative', overflow: 'hidden', background: '#0A0A0A' },
  bg: { position: 'absolute', inset: 0, opacity: 1, pointerEvents: 'none' },
  photoLayer: {
    position: 'absolute', inset: 0,
    backgroundImage: "url('assets/hero-exhaust.jpg')",
    backgroundSize: 'cover',
    backgroundPosition: 'right center',
    backgroundRepeat: 'no-repeat',
    /* Tame the red toward burgundy + drop saturation a hair */
    filter: 'saturate(0.78) hue-rotate(-6deg) brightness(0.85) contrast(1.05)',
  },
  photoTint: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.0) 30%, rgba(10,10,10,0.0) 70%, rgba(10,10,10,0.6) 100%)',
  },
  photoLeftFade: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(90deg, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.92) 25%, rgba(10,10,10,0.7) 45%, rgba(10,10,10,0.25) 70%, rgba(10,10,10,0.0) 100%)',
  },
  photoBottomFade: {
    position: 'absolute', left: 0, right: 0, bottom: 0, height: 220,
    background: 'linear-gradient(180deg, rgba(10,10,10,0) 0%, #0A0A0A 100%)',
  },
  photoVignette: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 70% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%)',
  },
  content: { position: 'relative', zIndex: 2, maxWidth: 1440, margin: '0 auto' },
  eyebrowRow: { display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24, flexWrap: 'nowrap' },
  eyebrowRule: { width: 40, height: 1, background: '#C4A45A', flexShrink: 0 },
  eyebrow: {
    fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.32em',
    textTransform: 'uppercase', color: '#C4A45A', whiteSpace: 'nowrap',
  },
  title: {
    margin: 0, fontFamily: "'Cormorant Garamond', serif",
    fontWeight: 400, lineHeight: 0.98, color: '#F5F0E8', letterSpacing: '-0.015em',
    marginBottom: 36,
  },
  titleItalic: { fontStyle: 'italic', fontWeight: 300, color: '#F5F0E8' },
  titleAccent: { fontStyle: 'normal', fontWeight: 300, color: '#F5F0E8' },
  titleRegular: { fontStyle: 'italic', fontWeight: 400, color: '#C4A45A' },
  subRow: { display: 'flex', gap: 56, alignItems: 'flex-start' },
  subLeft: { flex: 1, maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 18 },
  h2: {
    fontFamily: "'Inter', sans-serif", fontWeight: 400, color: '#D4B870',
    letterSpacing: '0.01em', lineHeight: 1.35,
  },
  body: { margin: 0, fontFamily: "'Inter', sans-serif", color: '#C8BFA8', lineHeight: 1.7, maxWidth: 580 },
  ctaRow: { display: 'flex', gap: 14, marginTop: 14 },
  primary: {
    fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
    background: '#C4A45A', color: '#0A0A0A', padding: '16px 24px', borderRadius: 2, textDecoration: 'none',
    display: 'inline-flex', alignItems: 'center', gap: 10,
    transition: 'background 200ms ease-out, box-shadow 200ms ease-out',
  },
  secondary: {
    fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
    background: 'transparent', color: '#C4A45A', padding: '15px 23px', borderRadius: 2, textDecoration: 'none',
    border: '1px solid #C4A45A',
    display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  monogram: {
    flex: '0 0 420px', minWidth: 360, marginTop: 8,
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    gap: 4, padding: '24px 8px',
  },
  monoLineWrap: {
    position: 'relative', display: 'flex', justifyContent: 'center', width: '100%',
  },
  monoLine: {
    fontFamily: "'Cormorant Garamond', serif",
    fontWeight: 300, lineHeight: 1.0, letterSpacing: '0.16em',
    textAlign: 'center', whiteSpace: 'nowrap',
    display: 'inline-block',
  },
  monoDelta: { fontSize: 76, color: '#F5F0E8', fontStyle: 'normal' },
  monoCars: { fontSize: 76, color: '#F5F0E8', fontStyle: 'italic', fontWeight: 300, letterSpacing: '0.14em' },
  monoHeritage: { fontSize: 56, color: '#C4A45A', fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.18em' },
  monoUnderline: {
    position: 'absolute', left: '50%', bottom: -10, height: 1,
    background: '#C4A45A', transform: 'translateX(-50%)',
  },
  sideCard: {
    flex: '0 0 320px', minWidth: 280, marginTop: 8,
    background: 'rgba(17,17,17,0.6)', border: '1px solid #2A2A2A', borderRadius: 0,
    padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 18,
  },
  sideCardTop: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, paddingBottom: 4 },
  sideMonoLabel: {
    fontFamily: "'Inter', sans-serif", fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: '#C8BFA8', textAlign: 'center',
  },
  sideCardMiddle: { display: 'flex', flexDirection: 'column', gap: 10 },
  sideRow: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12,
    padding: '6px 0', borderBottom: '1px dotted #2A2A2A',
  },
  sideKey: {
    fontFamily: "'Inter', sans-serif", fontSize: 10, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: '#8A7F6E',
  },
  sideVal: {
    fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 14, color: '#F5F0E8',
    textAlign: 'right',
  },
  sideCardFoot: {
    display: 'flex', justifyContent: 'space-between', borderTop: '1px solid #2A2A2A', paddingTop: 14, marginTop: 4,
  },
  sideMonoTag: {
    fontFamily: "'DM Mono', monospace", fontSize: 10, color: '#C4A45A', letterSpacing: '0.06em',
  },
  scrollInd: {
    position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 3,
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
    textDecoration: 'none',
  },
  scrollLine: { width: 1, height: 36, background: '#C4A45A', opacity: 0.7 },
};

window.Hero = Hero;