// Footer — 4 cols (Brand / Nav / Coordonnées / Carte) + legal + oversized signature wordmark
function Footer() {
  const isMobile = window.__dch_isMobile;
  return (
    <footer style={{ ...ft.footer, padding: isMobile ? '48px 20px 0' : '72px 80px 0' }}>
      <div style={ft.container}>
        <div style={{
          ...ft.cols,
          gridTemplateColumns: isMobile ? '1fr' : '1.2fr 0.9fr 1fr 1.1fr',
          gap: isMobile ? 48 : 56,
        }}>
          {/* Column 1 — Brand */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <a href="index.html" style={ft.brand}>
              <img src="assets/logo-gold.png" alt="" style={{ width: 52, height: 'auto' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={ft.brandName}>Delta Cars</span>
                <span style={ft.brandLine2}>Héritage</span>
              </div>
            </a>
            <p style={ft.tagline}>L'héritage automobile, réinventé.</p>
            <a href="https://instagram.com/deltacarsheritage" target="_blank" rel="noopener noreferrer" style={ft.igRow}>
              <Icon name="instagram" size={16} color="#C4A45A" />
              <span>@deltacarsheritage</span>
            </a>
          </div>

          {/* Column 2 — Navigation (Mentions légales retirées — déplacées dans la bande légale) */}
          <div>
            <div style={ft.colTitle}>Navigation</div>
            <ul style={ft.linkList}>
              <li><a href="index.html" style={ft.link}>Accueil</a></li>
              <li><a href="nos-services.html" style={ft.link}>Nos services</a></li>
              <li><a href="a-propos.html" style={ft.link}>À propos</a></li>
              <li><a href="contact.html" style={ft.link}>Contact</a></li>
            </ul>
          </div>

          {/* Column 3 — Contact */}
          <div>
            <div style={ft.colTitle}>Coordonnées</div>
            <ul style={ft.linkList}>
              <li>
                <a href="tel:+33679982608" style={{ ...ft.link, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="phone" size={14} color="#C4A45A" />
                  06 79 98 26 08
                </a>
              </li>
              <li>
                <a href="mailto:contact@delta-cars-heritage.com" style={{ ...ft.link, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="mail" size={14} color="#C4A45A" />
                  contact@delta-cars-heritage.com
                </a>
              </li>
              <li>
                <a href="https://delta-cars-heritage.com" style={{ ...ft.link, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="externalLink" size={14} color="#C4A45A" />
                  delta-cars-heritage.com
                </a>
              </li>
            </ul>
          </div>

          {/* Column 4 — Carte stylisée */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={ft.colTitle}>Atelier</div>
            <FooterMap />
            <div style={ft.mapAddress}>
              <Icon name="pin" size={14} color="#C4A45A" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={ft.addrLine1}>63 Rue Pasteur</span>
                <span style={ft.addrLine2}>91280 Saint-Pierre-du-Perray</span>
              </div>
            </div>
          </div>
        </div>

        {/* Legal band */}
        <div style={{ ...ft.legalBand, marginTop: isMobile ? 56 : 88, paddingTop: isMobile ? 28 : 32 }}>
          <div style={{
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            justifyContent: 'space-between',
            alignItems: isMobile ? 'flex-start' : 'center',
            gap: isMobile ? 16 : 24,
            flexWrap: 'wrap',
          }}>
            <p style={{ ...ft.legalText, fontSize: isMobile ? 10.5 : 11, margin: 0 }}>
              © 2026 Delta Cars Héritage — SAS au capital de 3 000 € · RCS Évry 102 178 464
            </p>
            <ul style={ft.legalLinks}>
              <li><a href="#" style={ft.legalLink}>Mentions légales</a></li>
              <li aria-hidden="true" style={ft.legalSep}>·</li>
              <li><a href="#" style={ft.legalLink}>Politique de confidentialité</a></li>
              <li aria-hidden="true" style={ft.legalSep}>·</li>
              <li><a href="#" style={ft.legalLink}>CGV</a></li>
              <li aria-hidden="true" style={ft.legalSep}>·</li>
              <li><a href="#" style={ft.legalLink}>Gestion des cookies</a></li>
            </ul>
          </div>
          <p style={{ ...ft.legalText, fontSize: isMobile ? 10 : 10.5, margin: '12px 0 0', color: '#6E6557' }}>
            SIRET 102 178 464 00016 · N° TVA FR78 102 178 464 · 63 Rue Pasteur, 91280 Saint-Pierre-du-Perray
          </p>
        </div>
      </div>

    </footer>
  );
}

// ---------------------------------------------------------------------------
// FooterMap — abstract stylized street grid w/ gold pin marker.
// Not a real map — geometric reference to the address.
function FooterMap() {
  return (
    <div style={ft.mapFrame} aria-hidden="true">
      {/* Corner brackets */}
      <span style={{ ...ft.corner, top: 0, left: 0, borderTop: '1px solid #C4A45A', borderLeft: '1px solid #C4A45A' }} />
      <span style={{ ...ft.corner, top: 0, right: 0, borderTop: '1px solid #C4A45A', borderRight: '1px solid #C4A45A' }} />
      <span style={{ ...ft.corner, bottom: 0, left: 0, borderBottom: '1px solid #C4A45A', borderLeft: '1px solid #C4A45A' }} />
      <span style={{ ...ft.corner, bottom: 0, right: 0, borderBottom: '1px solid #C4A45A', borderRight: '1px solid #C4A45A' }} />

      <svg viewBox="0 0 280 160" width="100%" height="100%" preserveAspectRatio="none" style={{ display: 'block' }}>
        <defs>
          <radialGradient id="dch-map-vignette" cx="50%" cy="50%" r="70%">
              <stop offset="0%" stopColor="#0E0E0E" />
              <stop offset="100%" stopColor="#080808" />
          </radialGradient>
          <radialGradient id="dch-pin-pulse" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#C4A45A" stopOpacity="0.35" />
              <stop offset="60%" stopColor="#C4A45A" stopOpacity="0.08" />
              <stop offset="100%" stopColor="#C4A45A" stopOpacity="0" />
          </radialGradient>
        </defs>

        {/* Bg */}
        <rect width="280" height="160" fill="url(#dch-map-vignette)" />

        {/* Street grid — warm muted lines */}
        <g stroke="#2A2317" strokeWidth="1">
          {/* Horizontals */}
          <line x1="0" y1="32"  x2="280" y2="32" />
          <line x1="0" y1="64"  x2="280" y2="64" />
          <line x1="0" y1="96"  x2="280" y2="96" />
          <line x1="0" y1="128" x2="280" y2="128" />
          {/* Verticals */}
          <line x1="40"  y1="0" x2="40"  y2="160" />
          <line x1="96"  y1="0" x2="96"  y2="160" />
          <line x1="184" y1="0" x2="184" y2="160" />
          <line x1="240" y1="0" x2="240" y2="160" />
        </g>

        {/* Diagonal main road — slightly brighter */}
        <line x1="-10" y1="148" x2="290" y2="18" stroke="#3A2F1E" strokeWidth="1.5" />
        <line x1="-10" y1="152" x2="290" y2="22" stroke="#1A1610" strokeWidth="0.5" />

        {/* A few block fills for variation */}
        <rect x="40"  y="32"  width="56" height="32" fill="#100D08" />
        <rect x="184" y="96"  width="56" height="32" fill="#100D08" />
        <rect x="96"  y="64"  width="88" height="32" fill="#0C0A06" />

        {/* Pin location — center */}
        <circle cx="140" cy="80" r="28" fill="url(#dch-pin-pulse)" />
        <circle cx="140" cy="80" r="14" fill="none" stroke="#C4A45A" strokeOpacity="0.5" strokeWidth="0.75" />
        <circle cx="140" cy="80" r="4"  fill="#C4A45A" />

        {/* Tiny scale tick — bottom right */}
        <g transform="translate(232,140)">
          <line x1="0" y1="0" x2="32" y2="0" stroke="#5A4F3A" strokeWidth="0.75" />
          <line x1="0" y1="-3" x2="0" y2="3" stroke="#5A4F3A" strokeWidth="0.75" />
          <line x1="32" y1="-3" x2="32" y2="3" stroke="#5A4F3A" strokeWidth="0.75" />
        </g>
      </svg>
    </div>
  );
}

// ---------------------------------------------------------------------------
// SignatureWordmark — massive italic Cormorant signature, edge-to-edge.
function SignatureWordmark({ isMobile }) {
  return (
    <div style={{
      marginTop: isMobile ? 48 : 72,
      padding: isMobile ? '24px 12px 20px' : '40px 40px 24px',
      borderTop: '1px solid #1A1A1A',
      overflow: 'hidden',
      lineHeight: 0.88,
      textAlign: 'center',
    }}>
      <div aria-hidden="true" style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic',
        fontWeight: 300,
        fontSize: isMobile ? 'clamp(56px, 18vw, 96px)' : 'clamp(120px, 16.5vw, 280px)',
        letterSpacing: '-0.035em',
        background: 'linear-gradient(180deg, #1A1610 0%, #0C0A06 100%)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        WebkitTextStroke: '1px #1F1A12',
        color: 'transparent',
        userSelect: 'none',
        whiteSpace: 'nowrap',
        textOverflow: 'clip',
      }}>
        Delta Cars Héritage
      </div>
    </div>
  );
}

const ft = {
  footer: { background: '#0A0A0A', borderTop: '1px solid #1A1A1A', position: 'relative' },
  container: { maxWidth: 1440, margin: '0 auto' },
  cols: { display: 'grid', alignItems: 'start' },
  brand: { display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' },
  brandName: {
    fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontWeight: 400,
    fontSize: 22, color: '#F5F0E8', letterSpacing: '0.005em', lineHeight: 1,
  },
  brandLine2: {
    fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 500,
    letterSpacing: '0.24em', textTransform: 'uppercase', color: '#C4A45A',
  },
  tagline: {
    margin: 0, fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
    fontSize: 18, color: '#C8BFA8', lineHeight: 1.4, maxWidth: 320,
  },
  igRow: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: "'Inter', sans-serif", fontSize: 13, color: '#C8BFA8',
    textDecoration: 'none', marginTop: 4,
  },
  colTitle: {
    fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 600,
    letterSpacing: '0.22em', textTransform: 'uppercase', color: '#C4A45A',
    marginBottom: 18,
  },
  linkList: {
    listStyle: 'none', padding: 0, margin: 0,
    display: 'flex', flexDirection: 'column', gap: 12,
  },
  link: {
    fontFamily: "'Inter', sans-serif", fontSize: 14, color: '#C8BFA8',
    textDecoration: 'none', letterSpacing: '0.01em',
    transition: 'color 200ms ease-out',
  },

  // Map
  mapFrame: {
    position: 'relative',
    width: '100%',
    aspectRatio: '280 / 160',
    background: '#0E0E0E',
    border: '1px solid #1A1A1A',
  },
  corner: {
    position: 'absolute', width: 10, height: 10, pointerEvents: 'none',
  },
  mapAddress: {
    display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 4,
  },
  addrLine1: {
    fontFamily: "'Inter', sans-serif", fontSize: 13, color: '#C8BFA8',
    letterSpacing: '0.01em', lineHeight: 1.3,
  },
  addrLine2: {
    fontFamily: "'Inter', sans-serif", fontSize: 12, color: '#8A7F6E',
    letterSpacing: '0.02em', lineHeight: 1.3,
  },

  // Legal
  legalBand: {
    borderTop: '1px solid #1A1A1A',
  },
  legalText: {
    fontFamily: "'Inter', sans-serif", color: '#8A7F6E',
    letterSpacing: '0.04em', lineHeight: 1.7,
  },
  legalLinks: {
    listStyle: 'none', padding: 0, margin: 0,
    display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
  },
  legalLink: {
    fontFamily: "'Inter', sans-serif", fontSize: 11, color: '#C8BFA8',
    textDecoration: 'none', letterSpacing: '0.06em',
    textTransform: 'uppercase', fontWeight: 500,
    transition: 'color 200ms ease-out',
  },
  legalSep: {
    color: '#3A332A', fontSize: 11, userSelect: 'none',
  },
};

window.Footer = Footer;