// Shared primitives across the three directions.

// Striped image placeholder — the design-canvas style guide says use these
// instead of hand-drawn SVGs for photography that hasn't been shot yet.
function ImgPH({ label, ratio, height, tint, labelColor, labelBg, style, src, objectPosition, showLabel, children }) {
  const s = {
    width: '100%',
    aspectRatio: ratio,
    height,
    '--ph-tint': tint,
    '--ph-label': labelColor,
    '--ph-label-bg': labelBg,
    ...style,
  };
  const showLbl = showLabel ?? !src;
  return (
    <div className="img-ph" style={s}>
      {src ? (
        <img
          src={src}
          alt={label || ''}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: objectPosition || 'center' }}
        />
      ) : null}
      {children}
      {label && showLbl ? <span className="ph-label">{label}</span> : null}
    </div>
  );
}

// Photo registry — pre-curated mapping of photos for each context.
// USER PHOTOS (from Ali's actual trips) take priority where they fit.
const PHOTOS = {
  // === USER PHOTOS — the real thing ===
  dahchour: 'photos/dahchour-couple.jpg',     // couple walking toward Red Pyramid — hero gold
  aliMastaba: 'photos/ali-mastaba.jpg',       // Ali with flashlight on a relief — signature
  toutankhamon: 'photos/toutankhamon.jpg',    // Tut mask, gold/lapis on black
  nilSunset: 'photos/nil-coucher-soleil.jpg', // boat silhouette at sunset on the Nile
  pharaonGranit: 'photos/pharaon-granit.jpg', // granite pharaoh head, dark backdrop
  alleeSphinx: 'photos/allee-sphinx-louxor.jpg', // avenue of sphinxes + Coptic church

  // === Mapped slots (used across the three directions) ===
  // Hero — wide cinematic. Now uses user photos.
  cairo: 'photos/dahchour-couple.jpg',        // couple at Dahchour — humans + monument
  luxorTemples: 'photos/allee-sphinx-louxor.jpg', // avenue of sphinxes
  luxorNight: 'photos/pharaon-granit.jpg',    // dramatic dark portrait
  nile: 'photos/nil-coucher-soleil.jpg',      // sunset boat on Nile
  desert: 'photos/p12.jpg',                   // dunes & reflections
  // Detail / atmosphere
  hieroglyphs: 'photos/ali-mastaba.jpg',      // Ali at work — best detail shot
  stainedGlass: 'photos/allee-sphinx-louxor.jpg',
  copticChurch: 'photos/allee-sphinx-louxor.jpg',
  mashrabiya: 'photos/ali-mastaba.jpg',
  ramesseum: 'photos/pharaon-granit.jpg',     // moody granite head
  museum: 'photos/toutankhamon.jpg',          // Tut mask
  // People
  ali: 'photos/ali-mastaba.jpg',              // Ali in the field, lighting a relief
  aliWithTraveler: 'photos/ali-mastaba.jpg',
  group: 'photos/dahchour-couple.jpg',
  family: 'photos/dahchour-couple.jpg',       // couple at pyramid
  // Extras
  philaeBoat: 'photos/nil-coucher-soleil.jpg',
  templeWall: 'photos/ali-mastaba.jpg',
  reliefWide: 'photos/ali-mastaba.jpg',
  duneDetail: 'photos/p13.jpg',
  felucca: 'photos/nil-coucher-soleil.jpg',
};

// Minimal egypt outline (very stylized — just the Nile + a few destination
// dots). Kept simple and abstract; not a literal map.
function EgyptOutline({ color = '#000', accent = '#c96442', dots = [], onDot, activeId }) {
  // Coordinate system 100x140. Dots use the same coords.
  return (
    <svg viewBox="0 0 100 140" style={{ width: '100%', height: '100%', overflow: 'visible' }}>
      {/* Country silhouette — abstracted */}
      <path
        d="M8 8 L92 8 L92 70 L78 78 L78 92 L88 100 L88 132 L62 132 L58 122 L48 118 L40 122 L34 132 L12 132 L12 96 L18 80 L14 60 L8 40 Z"
        fill="none" stroke={color} strokeWidth="0.6" strokeLinejoin="round" opacity="0.35"
      />
      {/* Nile — a flowing line from south to north */}
      <path
        d="M62 132 Q56 110 58 92 Q60 74 50 60 Q42 48 44 32 Q46 18 40 8"
        fill="none" stroke={accent} strokeWidth="0.8" strokeLinecap="round"
        strokeDasharray="0.6 1.2" opacity="0.55"
      />
      {/* Red Sea hint */}
      <path d="M88 36 Q86 60 80 80" fill="none" stroke={accent} strokeWidth="0.5" strokeDasharray="0.4 1" opacity="0.4" />
      {dots.map((d) => {
        const active = d.id === activeId;
        return (
          <g key={d.id} onClick={() => onDot && onDot(d.id)} style={{ cursor: 'pointer' }}>
            {active && (
              <circle cx={d.x} cy={d.y} r="3.6" fill={accent} opacity="0.18">
                <animate attributeName="r" values="3.6;6;3.6" dur="2.4s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.25;0;0.25" dur="2.4s" repeatCount="indefinite" />
              </circle>
            )}
            <circle cx={d.x} cy={d.y} r={active ? 1.6 : 1.1} fill={accent} />
            <text
              x={d.labelAnchor === 'left' ? d.x - 2.5 : d.x + 2.5}
              y={d.y + 0.6}
              textAnchor={d.labelAnchor === 'left' ? 'end' : 'start'}
              fontSize="2.6"
              fontFamily="inherit"
              fill={color}
              opacity={active ? 1 : 0.7}
              style={{ fontWeight: active ? 600 : 400 }}
            >
              {d.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// Common destinations data — each direction can tweak labels/tagline.
const DESTINATIONS = [
  { id: 'cairo',  label: 'Le Caire',   x: 52, y: 22, labelAnchor: 'right',
    tagline: 'Pyramides, Sphinx, Khan el-Khalili',
    blurb: 'Gizeh au lever du soleil, le Grand Musée Égyptien sans la foule, Saqqara, le vieux Caire copte et un thé à Khan el-Khalili.' },
  { id: 'luxor',  label: 'Louxor',     x: 56, y: 70, labelAnchor: 'right',
    tagline: 'Karnak & Vallée des Rois',
    blurb: 'L\'essentiel en une journée — ou trois. Karnak, Vallée des Rois, temples de Louxor, rive ouest, et la possibilité d\'une montgolfière à l\'aube.' },
  { id: 'redsea', label: 'Mer Rouge',  x: 84, y: 56, labelAnchor: 'left',
    tagline: 'Hurghada · Marsa Alam',
    blurb: 'Pause balnéaire en fin de circuit : récifs coralliens, snorkeling, désert oriental — pour souffler après les sites.' },
];

// Real testimonials sourced from TripAdvisor (5 sur 5 — 40 avis)
const REVIEWS = [
  { author: 'Jonathan L', context: 'Famille · novembre 2025', rating: 5,
    title: 'Le meilleur guide pour découvrir Louxor en 1 jour',
    body: "Une journée incroyable à Louxor grâce à Ali. En une seule journée, il a réussi à nous faire découvrir l'essentiel tout en prenant le temps d'expliquer chaque endroit. Aucun stress, aucune attente — un guide passionné, patient et attentionné." },
  { author: 'Françoise S.', context: 'Couple · croisière sur le Nil', rating: 5,
    title: 'Inoubliable croisière sur le Nil',
    body: "Merveilleuse croisière sur le Nil avec Ali. Il nous a fait partager sa passion pour l'égyptologie et découvrir la culture de son pays avec simplicité, gentillesse et une constante disponibilité doublée d'un sourire permanent." },
  { author: 'Shirine T.', context: 'Groupe · 7 adultes & 6 enfants', rating: 5,
    title: 'Une très belle rencontre',
    body: "Ali a tout organisé depuis l'atterrissage au Caire jusqu'au départ — visites de musées, réservations, minibus. Un très bon niveau de français, une vraie connaissance de l'Égypte, et la capacité de s'adapter à toutes nos demandes." },
  { author: 'Remacle L.', context: 'Famille · 6 personnes, vallée du Nil', rating: 5,
    title: 'Visites parfaitement adaptées aux enfants',
    body: "5 jours sur la vallée du Nil avec deux ados. Les visites étaient parfaitement adaptées à leurs besoins. Ali est un excellent égyptologue qui nous fait aimer son pays et son histoire. Tout était parfaitement organisé." },
  { author: 'Anastasie N.', context: 'Solo · Gizeh', rating: 5,
    title: 'Journée à Gizeh exceptionnelle',
    body: "Ali est un égyptologue passionné aux connaissances incroyables. Il m'a captivée toute la journée. J'ai tellement appris à ses côtés — je sais que je reviendrai." },
  { author: 'NorthStar', context: 'Couple · 3 jours', rating: 5,
    title: 'Guide exceptionnel',
    body: "Sa grande culture nous a impressionnés, ainsi que sa parfaite connaissance du français et de l'étymologie. 3 jours à découvrir les trésors égyptiens dans une franche gaieté." },
];

// Signature thematic experiences — what Ali offers as advertised
const THEMES = [
  { k: '01', t: 'Archéologie',  d: 'Sites royaux, fouilles récentes, lecture de stratigraphies sur le terrain.' },
  { k: '02', t: 'Hiéroglyphes', d: 'Décryptage in situ — cartouches, formules, noms royaux, mythologies gravées.' },
  { k: '03', t: 'Étymologie',   d: 'Doctorat à l\'appui : la racine des mots, des dieux, des lieux.' },
  { k: '04', t: 'Théologie',    d: 'Cosmogonies égyptiennes, panthéon, rites — du temple au tombeau.' },
  { k: '05', t: 'Spiritualité', d: 'Voyage initiatique pour qui cherche autre chose qu\'une visite.' },
  { k: '06', t: 'Vie quotidienne', d: 'Le Caire des Cairotes : marchés, ruelles, cafés, familles.' },
];

// Real public booking signature
const ALI = {
  name: 'Ali',
  title: 'Guide égyptologue francophone',
  whatsapp: '+20 11 22 58 00 58',
  whatsappRaw: '00201122580058',
  city: 'Le Caire, Égypte',
  rating: '5,0',
  reviewCount: '40',
  experience: '27',
  signaturePrice: '40€',
  signature: 'Visite privée — Pyramides & Grand Sphinx',
  langs: 'Français · Anglais · Arabe',
  credentials: [
    'Études supérieures en archéologie',
    'Hiéroglyphes & étymologie',
    'Théologie égyptienne',
    'Doctorat en étymologie',
  ],
};

// Tiny helpers
const cls = (...xs) => xs.filter(Boolean).join(' ');

// Territoires développés — données enrichies pour la section magazine.
const TERRITOIRES = [
  {
    id: 'cairo',
    label: 'Le Caire',
    region: 'Basse-Égypte',
    tagline: 'Pyramides, Sphinx & vieux Caire',
    photo: 'photos/dahchour-couple.jpg',
    imgLabel: 'Pyramide rouge — Dahchour',
    tint: 'rgba(184,107,58,0.10)',
    intro: "La capitale et son désert royal — Gizeh, Saqqara, Dahchour — puis le Caire copte, le Caire fatimide, et Khan el-Khalili pour le thé.",
    highlights: [
      { t: 'Gizeh à l\'aube', d: 'Pyramides et Grand Sphinx avant les bus.' },
      { t: 'Saqqara & Dahchour', d: 'Pyramide à degrés, pyramide rouge, mastabas.' },
      { t: 'Grand Musée Égyptien', d: 'La salle Toutankhamon, sans la foule.' },
      { t: 'Vieux Caire copte', d: 'Églises suspendues, ruelles, synagogue.' },
    ],
    duration: '3 à 5 jours',
    season: 'Octobre → avril',
  },
  {
    id: 'luxor',
    label: 'Louxor',
    region: 'Haute-Égypte',
    tagline: 'Karnak, Vallée des Rois & le Nil',
    photo: 'photos/allee-sphinx-louxor.jpg',
    imgLabel: 'Allée des sphinx — Louxor',
    tint: 'rgba(169,129,66,0.12)',
    intro: "Thèbes l'antique, des deux côtés du Nil. Temples sur la rive est, tombes royales sur la rive ouest, et la possibilité d'une montgolfière à l'aube.",
    highlights: [
      { t: 'Karnak', d: 'Salle hypostyle, lecture de cartouches in situ.' },
      { t: 'Vallée des Rois', d: 'Tombes ouvertes choisies selon vos envies.' },
      { t: 'Rive ouest', d: 'Hatchepsout, Ramesseum, Memnon.' },
      { t: 'Felouque au coucher', d: 'Le Nil, calme, à voile latine.' },
    ],
    duration: '2 à 4 jours',
    season: 'Novembre → mars',
  },
  {
    id: 'nile',
    label: 'Le Nil & au-delà',
    region: 'Croisière · Mer Rouge',
    tagline: 'Edfou, Kom Ombo, Assouan, mer Rouge',
    photo: 'photos/nil-coucher-soleil.jpg',
    imgLabel: 'Coucher de soleil sur le Nil',
    tint: 'rgba(60,40,20,0.18)',
    intro: "La descente du Nil entre Louxor et Assouan, temple par temple — puis la pause balnéaire en mer Rouge si l'envie est là.",
    highlights: [
      { t: 'Edfou & Kom Ombo', d: 'Horus, Sobek — temples ptolémaïques.' },
      { t: 'Philae & Assouan', d: 'Temple d\'Isis, marché nubien, dîner local.' },
      { t: 'Abou Simbel', d: 'Lever de soleil sur la façade colossale.' },
      { t: 'Mer Rouge', d: 'Hurghada ou Marsa Alam pour souffler.' },
    ],
    duration: '4 à 7 jours',
    season: 'Octobre → mai',
  },
];
function useCarousel(length, autoMs) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (!autoMs) return;
    const t = setInterval(() => setI((v) => (v + 1) % length), autoMs);
    return () => clearInterval(t);
  }, [length, autoMs]);
  return {
    i,
    next: () => setI((v) => (v + 1) % length),
    prev: () => setI((v) => (v - 1 + length) % length),
    go: setI,
  };
}

Object.assign(window, { ImgPH, EgyptOutline, DESTINATIONS, REVIEWS, THEMES, ALI, PHOTOS, cls, useCarousel, TERRITOIRES });