// Direction 1 — "Sable & Soleil"
// Palette terre cuite / ocre / sable. Hero éditorial, typo Fraunces.
// Ton chaleureux, esprit carnet de voyage haut de gamme.

const D1 = {
  bg: '#f3ecdf', bgWarm: '#ebe1cc', ink: '#2a1f15', inkSoft: '#5a4332',
  ocre: '#b86b3a', gold: '#a98142', papyrus: '#e8dcc2',
  display: "'Fraunces', 'Cormorant Garamond', serif",
  body: "'Inter Tight', system-ui, sans-serif",
  mono: "'DM Mono', ui-monospace, monospace",
};

function D1Home() {
  const car = useCarousel(3, 6000);
  const slides = [
    { label: 'Pyramide rouge — Dahchour', region: 'Le Caire', src: PHOTOS.dahchour, tint: 'rgba(184,107,58,0.20)', tintLabel: '#3a2415' },
    { label: 'Allée des sphinx — Louxor', region: 'Louxor', src: PHOTOS.alleeSphinx, tint: 'rgba(169,129,66,0.22)', tintLabel: '#2a1f15' },
    { label: 'Coucher de soleil sur le Nil', region: 'Louxor', src: PHOTOS.nilSunset, tint: 'rgba(60,40,20,0.18)', tintLabel: '#fbf3df' },
  ];
  return (
    <div className="d1-home" style={{ width: 1280, background: D1.bg, color: D1.ink, fontFamily: D1.body, position: 'relative', overflow: 'hidden' }}>
      <header style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '28px 56px', color: '#f7ecd6' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontFamily: D1.display, fontSize: 26, fontWeight: 500, letterSpacing: '-0.01em' }}>Ali</span>
          <span style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85 }}>Égyptologue</span>
        </div>
        <nav style={{ display: 'flex', gap: 34, fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          {[
            { label: 'Accueil',   id: null },
            { label: 'À propos',  id: 'a-propos' },
            { label: 'Thèmes',    id: 'themes' },
            { label: 'Avis',      id: 'avis' },
            { label: 'Contact',   id: 'contact' },
          ].map(({ label, id }) => (
            <a key={label} onClick={() => id ? document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }) : window.scrollTo({ top: 0, behavior: 'smooth' })}
              style={{ color: 'inherit', textDecoration: 'none', opacity: 0.75, cursor: 'pointer' }}>
              {label}
            </a>
          ))}
        </nav>
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.85 }}>FR · EN · AR</div>
      </header>

      {/* HERO */}
      <section className="d1-hero" style={{ position: 'relative', height: 760 }}>
        <ImgPH src={slides[car.i].src} label={slides[car.i].label} tint={slides[car.i].tint} labelColor={slides[car.i].tintLabel} labelBg="rgba(243,236,223,0.6)" style={{ position: 'absolute', inset: 0, height: '100%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,31,21,0.55) 0%, rgba(42,31,21,0.15) 35%, rgba(42,31,21,0.0) 60%, rgba(42,31,21,0.6) 100%)' }} />
        <div className="d1-hero-eyebrow" style={{ position: 'absolute', top: 130, left: 56, color: '#f7ecd6', fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          <span style={{ display: 'inline-block', width: 28, height: 1, background: '#f7ecd6', verticalAlign: 'middle', marginRight: 14 }} />
          27 ans à raconter l'Égypte en français
        </div>

        <h1 className="d1-hero-title" style={{ position: 'absolute', left: 56, right: 56, bottom: 240, margin: 0, color: '#fbf3df', fontFamily: D1.display, fontWeight: 400, fontSize: 132, lineHeight: 0.94, letterSpacing: '-0.025em', textWrap: 'balance' }}>
          L'Égypte,<br />
          <span style={{ fontStyle: 'italic', fontWeight: 300 }}>racontée</span> à voix basse.
        </h1>

        <div className="d1-hero-bottom" style={{ position: 'absolute', left: 56, right: 56, bottom: 90, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40 }}>
          <p style={{ margin: 0, color: '#f3e7cc', maxWidth: 520, fontSize: 17, lineHeight: 1.5, opacity: 0.92 }}>
            Égyptologue de formation — archéologie, hiéroglyphes, étymologie, théologie. Ali guide
            voyageurs francophones, couples et petits groupes privés du Caire à Louxor depuis bientôt
            trois décennies.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => document.getElementById('destinations')?.scrollIntoView({ behavior: 'smooth' })} style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '16px 28px', border: 'none', cursor: 'pointer', background: D1.ocre, color: '#fbf3df' }}>Préparer mon voyage →</button>
            <button onClick={() => document.getElementById('a-propos')?.scrollIntoView({ behavior: 'smooth' })} style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '16px 28px', cursor: 'pointer', background: 'transparent', color: '#fbf3df', border: '1px solid rgba(251,243,223,0.5)' }}>WhatsApp ↗</button>
          </div>
        </div>

        <div className="d1-hero-controls" style={{ position: 'absolute', bottom: 28, left: 56, right: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: '#f7ecd6', fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.16em' }}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <span style={{ opacity: 0.7 }}>{String(car.i + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}</span>
            <span style={{ textTransform: 'uppercase' }}>{slides[car.i].region}</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {slides.map((_, idx) => (
              <button key={idx} onClick={() => car.go(idx)} style={{ width: 28, height: 2, padding: 0, border: 'none', cursor: 'pointer', background: idx === car.i ? '#fbf3df' : 'rgba(251,243,223,0.35)' }} />
            ))}
            <button onClick={car.prev} style={{ marginLeft: 10, background: 'transparent', border: '1px solid rgba(251,243,223,0.5)', color: '#fbf3df', width: 32, height: 24, cursor: 'pointer' }}>‹</button>
            <button onClick={car.next} style={{ background: 'transparent', border: '1px solid rgba(251,243,223,0.5)', color: '#fbf3df', width: 32, height: 24, cursor: 'pointer' }}>›</button>
          </div>
        </div>
      </section>

      {/* STATS strip */}
      <section className="d1-stats" style={{ padding: '54px 56px', borderBottom: `1px solid ${D1.ocre}33`, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
        {[
          { k: '27', s: 'années', d: "d'expérience sur le terrain" },
          { k: '5,0', s: '/ 5', d: <span>sur 40 avis <a href="https://www.tripadvisor.fr/Attraction_Review-g294201-d32825334-Reviews-Egyptian_Tourist_Guide-Cairo_Cairo_Governorate.html" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: D1.ocre }}>TripAdvisor</a></span> },
          { k: '4', s: 'diplômes', d: 'archéo · hiéroglyphes · étymo · théo' },
          { k: '3', s: 'langues', d: 'français · anglais · arabe' },
        ].map((s, i) => (
          <div key={i}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontFamily: D1.display, fontSize: 56, fontWeight: 500, color: D1.ocre, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.k}</span>
              <span style={{ fontFamily: D1.display, fontSize: 18, color: D1.inkSoft, fontStyle: 'italic' }}>{s.s}</span>
            </div>
            <div style={{ marginTop: 8, fontSize: 13, color: D1.inkSoft }}>{s.d}</div>
          </div>
        ))}
      </section>

      {/* QUOTE / INTRO */}
      <section className="d1-quote" style={{ padding: '70px 56px 60px' }}>
        <div className="d1-quote-grid" style={{ display: 'grid', gridTemplateColumns: '180px 1fr 320px', gap: 56, alignItems: 'start' }}>
          <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.inkSoft, paddingTop: 16 }}>❦ Le mot d'Ali</div>
          <p style={{ margin: 0, fontFamily: D1.display, fontSize: 38, lineHeight: 1.18, fontWeight: 300, letterSpacing: '-0.015em', color: D1.ink, textWrap: 'pretty' }}>
            « Je ne fais pas visiter l'Égypte. Je vous présente un pays —
            <em style={{ color: D1.ocre }}> le mien</em> — pierre par pierre,
            mot par mot, et toujours autour d'un thé. »
          </p>
          <div style={{ paddingTop: 16, fontSize: 14, lineHeight: 1.6, color: D1.inkSoft }}>
            Voyage classique ou non classique, en privé, de A à Z. Ali a un doctorat en étymologie
            et 27 ans de terrain — et un sourire permanent, disent les voyageurs.
          </div>
        </div>
      </section>

      {/* THEMES — les 6 angles signature */}
      <section id="themes" className="d1-themes" style={{ padding: '20px 56px 60px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32 }}>
          <h2 style={{ margin: 0, fontFamily: D1.display, fontSize: 48, fontWeight: 400, letterSpacing: '-0.02em', color: D1.ink }}>
            Six <em style={{ color: D1.ocre }}>angles</em> pour entrer dans le pays.
          </h2>
          <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: D1.inkSoft }}>02 — Thèmes</div>
        </div>
        <div className="d1-themes-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${D1.ocre}33`, borderLeft: `1px solid ${D1.ocre}33` }}>
          {THEMES.map((t) => (
            <div key={t.k} style={{ padding: '26px 28px', borderRight: `1px solid ${D1.ocre}33`, borderBottom: `1px solid ${D1.ocre}33` }}>
              <div style={{ fontFamily: D1.mono, fontSize: 11, color: D1.ocre, letterSpacing: '0.14em' }}>N°{t.k}</div>
              <h3 style={{ margin: '8px 0 6px', fontFamily: D1.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.015em' }}>{t.t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: D1.inkSoft }}>{t.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* DESTINATIONS — version éditoriale développée */}
      <section id="destinations" className="d1-destinations" style={{ padding: '60px 56px 30px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 40, marginBottom: 14 }}>
          <div>
            <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 18 }}>❦ Destinations · 03</div>
            <h2 style={{ margin: 0, fontFamily: D1.display, fontSize: 88, fontWeight: 400, letterSpacing: '-0.025em', color: D1.ink, lineHeight: 0.96, textWrap: 'balance' }}>
              Trois <em style={{ color: D1.ocre, fontWeight: 300 }}>territoires</em>,<br />
              une seule histoire.
            </h2>
          </div>
          <p style={{ margin: 0, fontFamily: D1.display, fontSize: 17, lineHeight: 1.55, color: D1.inkSoft, fontStyle: 'italic', maxWidth: 320, paddingBottom: 12 }}>
            D'un désert royal à une vallée d'eau et de pierre, jusqu'à la mer. Trois géographies,
            un même fil — la longue mémoire du Nil.
          </p>
        </div>
        <div style={{ height: 1, background: D1.ocre, opacity: 0.4, marginBottom: 44 }} />

        <div className="d1-dest-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
          {TERRITOIRES.map((t, idx) => (
            <article key={t.id} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative' }}>
                <ImgPH src={t.photo} label={t.imgLabel} ratio="4 / 5" tint={t.tint} labelColor={D1.ink} labelBg="rgba(243,236,223,0.85)" />
                <div style={{ position: 'absolute', top: 16, left: 16, padding: '8px 12px', background: D1.bg, fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre }}>
                  N°{String(idx + 1).padStart(2, '0')} — {t.region}
                </div>
              </div>

              <div style={{ paddingTop: 22 }}>
                <h3 style={{ margin: 0, fontFamily: D1.display, fontSize: 38, fontWeight: 400, letterSpacing: '-0.02em', color: D1.ink, lineHeight: 1 }}>
                  {t.label}
                </h3>
                <div style={{ marginTop: 6, fontFamily: D1.display, fontStyle: 'italic', fontSize: 18, color: D1.ocre }}>
                  {t.tagline}
                </div>
                <p style={{ margin: '16px 0 0', fontSize: 14.5, lineHeight: 1.6, color: D1.inkSoft }}>
                  {t.intro}
                </p>

                <ul style={{ margin: '20px 0 0', padding: 0, listStyle: 'none' }}>
                  {t.highlights.map((h, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderTop: `1px solid ${D1.ocre}26`, fontSize: 13.5, lineHeight: 1.45 }}>
                      <span style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.14em', color: D1.ocre, paddingTop: 3, minWidth: 22 }}>{String(i + 1).padStart(2, '0')}</span>
                      <span style={{ color: D1.ink }}>
                        <strong style={{ fontWeight: 500 }}>{h.t}</strong>
                        {' — '}
                        <span style={{ color: D1.inkSoft }}>{h.d}</span>
                      </span>
                    </li>
                  ))}
                </ul>

                <div style={{ marginTop: 22, padding: '14px 18px', background: D1.bgWarm, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14 }}>
                  <div>
                    <div style={{ fontFamily: D1.mono, fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: D1.inkSoft }}>Format conseillé</div>
                    <div style={{ marginTop: 2, fontFamily: D1.display, fontSize: 16, fontWeight: 500, color: D1.ink }}>{t.duration}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: D1.mono, fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: D1.inkSoft }}>Saison idéale</div>
                    <div style={{ marginTop: 2, fontFamily: D1.display, fontSize: 16, fontWeight: 500, color: D1.ink }}>{t.season}</div>
                  </div>
                </div>

                <a style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.ocre, textDecoration: 'none', borderBottom: `1px solid ${D1.ocre}`, alignSelf: 'flex-start', paddingBottom: 3 }}>
                  Voir le carnet de {t.label.replace('Le ', '').replace('La ', '')} →
                </a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* TRANSITION HOME → ABOUT — citation + ornement */}
      <section className="d1-transition" style={{ padding: '90px 56px 100px', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 0, left: '50%', width: 1, height: 60, background: D1.ocre, opacity: 0.5 }} />
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 28 }}>
            ❦ &nbsp;&nbsp; Continuer &nbsp;&nbsp; ❦
          </div>
          <p style={{ margin: 0, fontFamily: D1.display, fontSize: 30, lineHeight: 1.35, fontWeight: 300, fontStyle: 'italic', color: D1.ink, textWrap: 'balance' }}>
            « Trois lieux, c'est déjà beaucoup. Mais ce qui compte, ce n'est pas le nombre de
            pierres visitées — c'est le temps qu'on prend devant chacune. »
          </p>
          <div style={{ marginTop: 22, fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.inkSoft }}>
            Ali — Le Caire
          </div>
        </div>
      </section>
    </div>
  );
}

function D1About() {
  return (
    <div id="a-propos" className="d1-about" style={{ width: 1280, background: D1.bg, color: D1.ink, fontFamily: D1.body, position: 'relative' }}>
      {/* Transition entrée — bandeau narratif */}
      <div className="d1-chapter-header" style={{ padding: '70px 80px 30px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 40 }}>
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: D1.ocre }}>
          Chapitre 02
        </div>
        <div style={{ height: 1, background: D1.ocre, opacity: 0.35 }} />
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.inkSoft }}>
          Le guide
        </div>
      </div>

      <div className="d1-about-body" style={{ padding: '20px 80px 90px' }}>
      <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 26 }}>❦ À propos</div>
      <div className="d1-about-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80 }}>
        <div>
          <h1 style={{ margin: 0, fontFamily: D1.display, fontSize: 92, lineHeight: 0.98, fontWeight: 400, letterSpacing: '-0.025em', textWrap: 'balance' }}>
            Égyptologue, <br /><em style={{ color: D1.ocre }}>francophone</em>, <br />depuis 27 ans.
          </h1>
          <p style={{ marginTop: 32, fontFamily: D1.display, fontSize: 22, lineHeight: 1.45, fontWeight: 400, color: D1.inkSoft, maxWidth: 540 }}>
            Études supérieures en archéologie, hiéroglyphes, étymologie et théologie. Doctorat en
            étymologie. Ali accompagne voyageurs francophones — en groupe ou en privé, de A à Z —
            sur des voyages classiques comme sur des thématiques plus rares : archéologie,
            spiritualité, vie quotidienne.
          </p>

          <div style={{ marginTop: 40, padding: '22px 26px', background: D1.papyrus, borderLeft: `3px solid ${D1.ocre}` }}>
            <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: D1.ocre }}>Contact direct</div>
            <div style={{ marginTop: 6, fontFamily: D1.display, fontSize: 26, fontWeight: 500 }}>WhatsApp · {ALI.whatsapp}</div>
            <div style={{ marginTop: 4, fontSize: 13, color: D1.inkSoft }}>Le moyen le plus rapide d'organiser votre voyage. Réponse personnelle.</div>
          </div>

          <div style={{ marginTop: 40 }}>
            <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.inkSoft, marginBottom: 16 }}>Formation</div>
            {ALI.credentials.map((c, i) => (
              <div key={i} style={{ padding: '14px 0', borderTop: `1px solid ${D1.ocre}26`, display: 'flex', alignItems: 'center', gap: 16, fontSize: 16, color: D1.ink }}>
                <span style={{ fontFamily: D1.display, color: D1.ocre, fontSize: 22, fontStyle: 'italic' }}>{String(i + 1).padStart(2, '0')}</span>
                {c}
              </div>
            ))}
          </div>
        </div>

        <div>
          <ImgPH src={PHOTOS.ali} label="Ali — lecture d'un relief, mastaba de Saqqara" ratio="3 / 4" tint="rgba(169,129,66,0.10)" labelColor={D1.ink} labelBg="rgba(243,236,223,0.7)" />
          <div style={{ marginTop: 26, padding: '22px 26px', background: D1.bgWarm }}>
            <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: D1.ocre }}>Service signature</div>
            <h4 style={{ margin: '8px 0 6px', fontFamily: D1.display, fontSize: 22, fontWeight: 500 }}>{ALI.signature}</h4>
            <p style={{ margin: '6px 0 14px', fontSize: 13, lineHeight: 1.55, color: D1.inkSoft }}>
              Privé, en français, durée modulable. Annulation gratuite jusqu'à 24h avant.
            </p>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: D1.display, fontSize: 36, color: D1.ocre, fontWeight: 500 }}>à partir de {ALI.signaturePrice}</span>
              <span style={{ fontSize: 12, color: D1.inkSoft }}>/ adulte</span>
            </div>
          </div>
        </div>
      </div>
      </div>

      {/* Transition sortie vers Avis — bande dégradée bg → papyrus */}
      <div style={{ height: 90, background: `linear-gradient(180deg, ${D1.bg} 0%, ${D1.papyrus} 100%)`, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 30, left: 80, right: 80, display: 'flex', alignItems: 'center', gap: 20 }}>
          <div style={{ flex: 1, height: 1, background: D1.ocre, opacity: 0.35 }} />
          <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: D1.ocre }}>
            ❦ &nbsp; Ce qu'en disent les voyageurs &nbsp; ❦
          </div>
          <div style={{ flex: 1, height: 1, background: D1.ocre, opacity: 0.35 }} />
        </div>
      </div>
    </div>
  );
}

function ReviewCard({ r }) {
  return (
    <article style={{ background: D1.bg, padding: '24px 26px', borderTop: `2px solid ${D1.ocre}` }}>
      <div style={{ color: D1.ocre, fontSize: 13, letterSpacing: '0.08em', marginBottom: 10 }}>★★★★★</div>
      <h4 style={{ margin: 0, fontFamily: D1.display, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>« {r.title} »</h4>
      <p style={{ margin: '12px 0 16px', fontSize: 13.5, lineHeight: 1.6, color: D1.inkSoft }}>{r.body}</p>
      <div style={{ borderTop: `1px solid ${D1.ocre}26`, paddingTop: 12, fontSize: 12, fontFamily: D1.mono, letterSpacing: '0.05em' }}>
        <div style={{ fontWeight: 600, color: D1.ink }}>{r.author}</div>
        <div style={{ color: D1.inkSoft, marginTop: 2 }}>{r.context}</div>
      </div>
    </article>
  );
}

// — TESTIMONIALS ————————————————————————————————————
function D1Reviews() {
  const car = useCarousel(REVIEWS.length);
  const btnStyle = { background: 'transparent', border: `1px solid ${D1.ocre}`, color: D1.ocre, width: 36, height: 36, cursor: 'pointer', fontFamily: D1.mono, fontSize: 16, flexShrink: 0 };
  return (
    <div id="avis" className="d1-reviews" style={{ width: 1280, background: D1.papyrus, color: D1.ink, fontFamily: D1.body, padding: '40px 80px 70px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36 }}>
        <div>
          <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 14 }}>❦ Avis voyageurs · 04</div>
          <h2 style={{ margin: 0, fontFamily: D1.display, fontSize: 72, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 0.98 }}>
            <em style={{ color: D1.ocre }}>5,0</em> sur 5 — <br />
            sur 40 avis.
          </h2>
        </div>
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.inkSoft }}>
          Source : <a href="https://www.tripadvisor.fr/Attraction_Review-g294201-d32825334-Reviews-Egyptian_Tourist_Guide-Cairo_Cairo_Governorate.html" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: D1.ocre }}>TripAdvisor</a>
        </div>
      </div>

      {/* Carousel — toutes tailles */}
      <div className="d1-reviews-carousel">
        <div style={{ display: 'flex', alignItems: 'stretch', gap: 12 }}>
          <button onClick={car.prev} style={{ ...btnStyle, alignSelf: 'center' }}>‹</button>
          <div style={{ display: 'flex', gap: 22, flex: 1 }}>
            <div style={{ flex: 1 }}><ReviewCard r={REVIEWS[car.i]} /></div>
            <div className="d1-review-extra" style={{ flex: 1 }}><ReviewCard r={REVIEWS[(car.i + 1) % REVIEWS.length]} /></div>
            <div className="d1-review-extra" style={{ flex: 1 }}><ReviewCard r={REVIEWS[(car.i + 2) % REVIEWS.length]} /></div>
          </div>
          <button onClick={car.next} style={{ ...btnStyle, alignSelf: 'center' }}>›</button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 16 }}>
          {REVIEWS.slice(0, 6).map((_, idx) => (
            <button key={idx} onClick={() => car.go(idx)} style={{ width: 24, height: 2, padding: 0, border: 'none', cursor: 'pointer', background: idx === car.i ? D1.ocre : `${D1.ocre}40` }} />
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 10, fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.14em', color: D1.inkSoft }}>
          {String(car.i + 1).padStart(2,'0')} / {String(REVIEWS.length).padStart(2,'0')}
        </div>
      </div>

      {/* Bandeau passage Avis → Carte */}
      <div style={{ marginTop: 80, paddingTop: 36, borderTop: `1px solid ${D1.ocre}33`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40 }}>
        <p style={{ margin: 0, fontFamily: D1.display, fontSize: 22, lineHeight: 1.45, fontWeight: 400, fontStyle: 'italic', color: D1.inkSoft, maxWidth: 720 }}>
          Et après — passons aux choses concrètes. Choisissez la région qui vous appelle, ou
          dites-le-moi en quelques mots et je vous bâtis l'itinéraire.
        </p>
        <a style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, textDecoration: 'none', borderBottom: `1px solid ${D1.ocre}`, paddingBottom: 3, whiteSpace: 'nowrap' }}>
          Préparer le voyage ↓
        </a>
      </div>
    </div>
  );
}

function D1Map() {
  const [active, setActive] = React.useState('cairo');
  const dest = DESTINATIONS.find((d) => d.id === active);
  return (
    <div id="contact" className="d1-map" style={{ width: 1280, background: D1.papyrus, color: D1.ink, fontFamily: D1.body, padding: '40px 80px 90px', position: 'relative' }}>
      {/* Chapitre */}
      <div className="d1-map-chapter" style={{ padding: '0 0 50px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 40 }}>
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: D1.ocre }}>
          Chapitre 05
        </div>
        <div style={{ height: 1, background: D1.ocre, opacity: 0.35 }} />
        <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.inkSoft }}>
          Itinéraires & contact
        </div>
      </div>

      <div className="d1-map-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, minHeight: 980 }}>
        <div className="d1-map-left" style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 18 }}>❦ Itinéraires</div>
          <h2 style={{ margin: 0, fontFamily: D1.display, fontSize: 64, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.0 }}>
            Choisissez <br /><em style={{ color: D1.ocre }}>votre Égypte</em>.
          </h2>
          <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: D1.inkSoft, opacity: 0.7, marginTop: 16 }}>Carte schématique. Cliquez sur un point.</div>
          <div className="d1-map-svg-wrap" style={{ flex: 1, marginTop: 0, fontFamily: D1.display }}>
            <EgyptOutline color={D1.ink} accent={D1.ocre} dots={DESTINATIONS} activeId={active} onDot={setActive} />
          </div>
        </div>

        <div className="d1-map-right" style={{ display: 'flex', flexDirection: 'column' }}>
          <div className="d1-dest-panel" style={{ background: D1.bgWarm, padding: '32px 40px', position: 'relative', borderLeft: `3px solid ${D1.ocre}` }}>
            <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: D1.ocre }}>Destination</div>
            <h3 style={{ margin: '8px 0 4px', fontFamily: D1.display, fontSize: 40, fontWeight: 500, letterSpacing: '-0.02em' }}>{dest.label}</h3>
            <div style={{ fontFamily: D1.display, fontStyle: 'italic', fontSize: 17, color: D1.inkSoft }}>{dest.tagline}</div>
            <p style={{ marginTop: 14, fontSize: 14, lineHeight: 1.6, color: D1.inkSoft, maxWidth: 460 }}>{dest.blurb}</p>
          </div>

          <div className="d1-contact-panel" style={{ marginTop: 28, padding: '40px', background: '#fbf3df', borderLeft: `3px solid ${D1.ocre}` }}>
            <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: D1.ocre, marginBottom: 18 }}>❦ Contact direct</div>
            <h3 style={{ margin: '0 0 6px', fontFamily: D1.display, fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em' }}>Contacter Ali</h3>
            <div style={{ fontFamily: D1.display, fontStyle: 'italic', fontSize: 17, color: D1.inkSoft, marginBottom: 28 }}>{ALI.city}</div>

            <div className="d1-contact-row" style={{ padding: '20px 24px', background: D1.bgWarm, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, marginBottom: 20 }}>
              <div>
                <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.inkSoft, marginBottom: 6 }}>WhatsApp</div>
                <div style={{ fontFamily: D1.display, fontSize: 26, fontWeight: 500, color: D1.ink }}>{ALI.whatsapp}</div>
              </div>
              <a href={`https://wa.me/${ALI.whatsappRaw}`} target="_blank" rel="noopener noreferrer"
                style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 24px', background: D1.ocre, color: '#fbf3df', textDecoration: 'none', whiteSpace: 'nowrap' }}>
                Écrire ↗
              </a>
            </div>

            <div className="d1-contact-row" style={{ padding: '20px 24px', background: D1.bgWarm, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, marginBottom: 20 }}>
              <div>
                <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: D1.inkSoft, marginBottom: 6 }}>Email</div>
                <div style={{ fontFamily: D1.display, fontSize: 20, fontWeight: 500, color: D1.ink }}>aligadallah736@gmail.com</div>
              </div>
              <a href="mailto:aligadallah736@gmail.com"
                style={{ fontFamily: D1.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '14px 24px', background: 'transparent', color: D1.ocre, border: `1px solid ${D1.ocre}`, textDecoration: 'none', whiteSpace: 'nowrap' }}>
                Écrire ↗
              </a>
            </div>

            <div style={{ fontFamily: D1.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: D1.inkSoft, opacity: 0.8 }}>
              Réponse personnelle sous 24h · {ALI.langs}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ d, label, placeholder, full }) {
  return (
    <label style={{ gridColumn: full ? '1 / -1' : 'auto', display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: d.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: d.inkSoft }}>{label}</span>
      <input placeholder={placeholder} style={{ background: 'transparent', border: 'none', borderBottom: `1px solid ${d.ink}40`, padding: '8px 0', fontFamily: d.body, fontSize: 15, color: d.ink, outline: 'none' }} />
    </label>
  );
}
function FieldArea({ d, label, placeholder }) {
  return (
    <label style={{ gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: d.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: d.inkSoft }}>{label}</span>
      <textarea rows={3} placeholder={placeholder} style={{ background: 'transparent', border: 'none', borderBottom: `1px solid ${d.ink}40`, padding: '8px 0', fontFamily: d.body, fontSize: 15, color: d.ink, outline: 'none', resize: 'none' }} />
    </label>
  );
}

Object.assign(window, { D1Home, D1About, D1Map, D1Reviews });