// =====================================================
// Icons + Escale visual placeholders
// All inline SVG. Visuals encode each escale's "DNA"
// via brand palette, layered patterns — no fake photos.
// =====================================================

const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch(name) {
    case "anchor":
      return <svg {...props}><circle cx="12" cy="5" r="2"/><path d="M12 7v15"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><path d="M8 12h8"/></svg>;
    case "compass":
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M16.24 7.76l-2.83 7.07-7.07 2.83 2.83-7.07 7.07-2.83z"/></svg>;
    case "wave":
      return <svg {...props}><path d="M2 12c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2"/><path d="M2 17c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2"/></svg>;
    case "ship":
      return <svg {...props}><path d="M3 16l2 5h14l2-5"/><path d="M5 16V8h14v8"/><path d="M9 8V4h6v4"/><path d="M12 12v4"/></svg>;
    case "map":
      return <svg {...props}><path d="M9 3l-6 3v15l6-3 6 3 6-3V3l-6 3z"/><path d="M9 3v15"/><path d="M15 6v15"/></svg>;
    case "calendar":
      return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v4"/><path d="M16 3v4"/></svg>;
    case "lightbulb":
      return <svg {...props}><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 1 5 11.9c-.7.7-1.2 1.5-1.4 2.4l-.2 1.7H8.6l-.2-1.7c-.2-.9-.7-1.7-1.4-2.4A7 7 0 0 1 12 2z"/></svg>;
    case "briefcase":
      return <svg {...props}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M2 13h20"/></svg>;
    case "mail":
      return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "phone":
      return <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case "pin":
      return <svg {...props}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "arrow-right":
      return <svg {...props}><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>;
    case "arrow-left":
      return <svg {...props}><path d="M19 12H5"/><path d="M11 5l-7 7 7 7"/></svg>;
    case "chevron-right":
      return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case "x":
      return <svg {...props}><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>;
    case "check":
      return <svg {...props}><path d="M5 13l4 4 10-12"/></svg>;
    case "alert":
      return <svg {...props}><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M3 19l9-15 9 15H3z"/></svg>;
    case "info":
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>;
    case "download":
      return <svg {...props}><path d="M12 3v12"/><path d="M7 11l5 5 5-5"/><path d="M5 21h14"/></svg>;
    case "file":
      return <svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>;
    case "filter":
      return <svg {...props}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg>;
    case "search":
      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg>;
    case "plane":
      return <svg {...props}><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21 4 19.5 2.5S16 2 14.5 3.5L11 7 2.8 5.2C2.3 5 2 5.4 2 5.9v.4c0 .3.2.6.4.7L8 10 6 12 4 11.5c-.4-.1-.7 0-.9.3l-.4.4c-.3.3-.2.7.1.9L8 16l3.5 4c.2.3.6.4.9.1l.4-.4c.3-.2.4-.5.3-.9L12.5 17 14 15l3 5.5c.1.2.4.4.7.4h.4c.5 0 .9-.3.7-.7z"/></svg>;
    case "leaf":
      return <svg {...props}><path d="M11 20A7 7 0 0 1 4 13c0-5 4-8 11-9 1 8-2 16-9 16z"/><path d="M2 22c5-5 8-9 9-15"/></svg>;
    case "whale":
      return <svg {...props}><path d="M3 14c0-3 2-5 6-5h8c2 0 4 2 4 4v2c0 2-2 4-4 4H9"/><path d="M3 14c0 3 3 5 6 5"/><circle cx="18" cy="11" r="1" fill="currentColor"/><path d="M22 6c-2 1-3 3-3 4"/></svg>;
    case "tree":
      return <svg {...props}><path d="M12 2c-3 3-5 6-5 9 0 2 1 3 2 3v8h6v-8c1 0 2-1 2-3 0-3-2-6-5-9z"/></svg>;
    case "flower":
      return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M12 2v6"/><path d="M12 16v6"/><path d="M2 12h6"/><path d="M16 12h6"/></svg>;
    case "shell":
      return <svg {...props}><path d="M3 12a9 9 0 1 1 18 0c0 5-3 9-9 9-3 0-5-1-6-2"/><path d="M12 21V12"/><path d="M8 12c0-4 2-7 4-9"/><path d="M16 12c0-4-2-7-4-9"/></svg>;
    case "rocks":
      return <svg {...props}><path d="M2 20l5-10 4 6 4-12 7 16"/></svg>;
    case "globe":
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/></svg>;
    case "user-group":
      return <svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case "shield":
      return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case "menu":
      return <svg {...props}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>;
    default:
      return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

// =====================================================
// EscaleVisual — photos officielles + fallback illustratif
// Si une entrée existe dans window.PHOTOS pour l'escale,
// on affiche la photo réelle ; sinon, on retombe sur le
// placeholder SVG thématisé.
// =====================================================
const EscaleVisual = ({ escale, label = true, placeholderText = "Visuel à intégrer prochainement", showLabel = true, photoIndex = null, ratio = null }) => {
  const photos = window.PHOTOS && window.PHOTOS[escale.id];
  let photoUrl = null;
  let credit = null;
  if (photos) {
    if (photoIndex === null) {
      photoUrl = photos.cover;
      credit = photos.credits && photos.credits[0];
    } else {
      photoUrl = photos.gallery[photoIndex] || photos.cover;
      credit = photos.credits && (photos.credits[photoIndex + 1] || photos.credits[0]);
    }
  }

  if (photoUrl) {
    return (
      <div className="escale-visual" style={ratio ? { aspectRatio: ratio } : null}>
        <img src={photoUrl} alt={`${escale.nom} — ${escale.nomAlt}`} loading="lazy"
             style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
        <div className="ev-shade"></div>
        {showLabel && label && (
          <div className="ev-label">
            <Icon name="anchor" size={11} stroke={2}/>
            <span style={{ marginLeft: 6 }}>{escale.nom}</span>
          </div>
        )}
      </div>
    );
  }

  // Fallback — SVG thématisé (placeholder original)
  return <EscaleVisualSVG escale={escale} label={label} placeholderText={placeholderText} showLabel={showLabel} ratio={ratio}/>;
};

const EscaleVisualSVG = ({ escale, label, placeholderText, showLabel, ratio }) => {
  const id = escale.id;
  // palette index per escale (variety)
  const themes = {
    "nosy-be":      { sky: ["#274C72","#5BB4D4","#FFC68A"], water: ["#1A2A4F","#2C7CA0"], accent: "#E85A1F" },
    "antsiranana":  { sky: ["#1A2A4F","#3A6FA0","#A8D5E7"], water: ["#0F1A35","#2C7CA0"], accent: "#5BB4D4" },
    "toamasina":    { sky: ["#0F1A35","#2A3B66","#5BB4D4"], water: ["#0F1A35","#1A2A4F"], accent: "#E85A1F" },
    "fort-dauphin": { sky: ["#1A2A4F","#5BB4D4","#F7F3EC"], water: ["#0F1A35","#2C7CA0"], accent: "#E85A1F" },
    "mahajanga":    { sky: ["#E85A1F","#F7B58A","#FFE2C2"], water: ["#7C2C12","#E85A1F"], accent: "#1A2A4F" },
    "morondava":    { sky: ["#E85A1F","#F7B58A","#FFE2C2"], water: ["#7C2C12","#A8412B"], accent: "#1A2A4F" },
    "sainte-marie": { sky: ["#1A2A4F","#5BB4D4","#A8D5E7"], water: ["#0F1A35","#2C7CA0"], accent: "#7FB539" },
    "toliara":      { sky: ["#274C72","#5BB4D4","#FCD9A7"], water: ["#1A2A4F","#2C7CA0"], accent: "#7FB539" },
    "maroantsetra": { sky: ["#0F1A35","#2A3B66","#7FB539"], water: ["#0F1A35","#1A2A4F"], accent: "#7FB539" },
    "antalaha":     { sky: ["#1A2A4F","#5BB4D4","#D6E9B8"], water: ["#0F1A35","#2C7CA0"], accent: "#7FB539" }
  };
  const t = themes[id] || themes["nosy-be"];

  return (
    <div className="escale-visual" style={ratio ? { aspectRatio: ratio } : null}>
      <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id={`sky-${id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={t.sky[0]}/>
            <stop offset="55%" stopColor={t.sky[1]}/>
            <stop offset="100%" stopColor={t.sky[2]}/>
          </linearGradient>
          <linearGradient id={`water-${id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={t.water[0]} stopOpacity="0.4"/>
            <stop offset="100%" stopColor={t.water[1]}/>
          </linearGradient>
          <pattern id={`grain-${id}`} width="3" height="3" patternUnits="userSpaceOnUse">
            <circle cx="1.5" cy="1.5" r="0.4" fill="#fff" fillOpacity="0.06"/>
          </pattern>
        </defs>

        {/* Sky */}
        <rect width="400" height="250" fill={`url(#sky-${id})`}/>

        {/* Sun / Moon disc */}
        <circle cx="320" cy="80" r="28" fill="#fff" fillOpacity="0.18"/>
        <circle cx="320" cy="80" r="18" fill="#fff" fillOpacity="0.32"/>

        {/* Scene per escale id */}
        {id === "nosy-be" && (
          <g>
            <path d="M0,155 Q120,135 200,150 T400,140 L400,180 L0,180 Z" fill="#1A2A4F" opacity="0.55"/>
            <path d="M0,175 Q140,165 220,172 T400,168 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* islet */}
            <ellipse cx="120" cy="155" rx="60" ry="14" fill="#0F1A35"/>
            <path d="M70,155 Q90,128 110,138 Q120,118 130,140 Q150,128 170,155 Z" fill="#0F1A35"/>
            {/* palms hint */}
            <path d="M105,138 q-8,-14 -2,-22 M105,138 q8,-12 14,-20 M105,138 q-12,-8 -20,-12" stroke="#7FB539" strokeWidth="2" fill="none" opacity="0.65"/>
            {/* boat */}
            <path d="M250,170 L290,170 L295,177 L245,177 Z" fill="#fff" opacity="0.95"/>
            <path d="M268,170 L268,153 L284,167 L268,167" fill="#E85A1F"/>
          </g>
        )}
        {id === "antsiranana" && (
          <g>
            {/* Pain de Sucre */}
            <path d="M0,170 L60,170 L80,160 Q100,165 130,150 Q160,170 200,140 Q230,170 260,135 Q290,175 320,150 Q360,170 400,160 L400,180 L0,180 Z" fill="#1A2A4F"/>
            <circle cx="200" cy="138" r="22" fill="#0F1A35" opacity="0.8"/>
            <path d="M178,160 Q200,108 222,160 Z" fill="#0F1A35"/>
            <path d="M0,178 Q200,170 400,178 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* ship */}
            <rect x="240" y="184" width="60" height="10" fill="#fff"/>
            <rect x="250" y="172" width="40" height="14" fill="#F7F3EC"/>
            <rect x="280" y="166" width="6" height="6" fill={t.accent}/>
          </g>
        )}
        {id === "toamasina" && (
          <g>
            {/* commercial port */}
            <rect x="0" y="160" width="400" height="20" fill="#0F1A35"/>
            <path d="M0,180 Q200,176 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* cranes */}
            <g stroke="#E85A1F" strokeWidth="2" fill="none">
              <path d="M60,160 L60,90 L100,90 M60,90 L100,140"/>
              <path d="M150,160 L150,75 L200,75 M150,75 L200,130"/>
              <path d="M250,160 L250,90 L290,90 M250,90 L290,140"/>
            </g>
            {/* cruise ship */}
            <rect x="260" y="158" width="100" height="22" fill="#fff"/>
            <rect x="265" y="146" width="85" height="14" fill="#F7F3EC"/>
            <rect x="275" y="140" width="60" height="8" fill="#F7F3EC"/>
            <circle cx="285" cy="167" r="2" fill="#1A2A4F"/>
            <circle cx="305" cy="167" r="2" fill="#1A2A4F"/>
            <circle cx="325" cy="167" r="2" fill="#1A2A4F"/>
          </g>
        )}
        {id === "fort-dauphin" && (
          <g>
            {/* deep water port quay */}
            <path d="M0,165 L400,150 L400,180 L0,180 Z" fill="#1A2A4F"/>
            <path d="M0,180 Q200,176 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* mountains far */}
            <path d="M0,158 Q60,135 110,148 Q150,128 200,150 Q260,130 320,152 Q360,138 400,150 L400,165 L0,170 Z" fill="#0F1A35" opacity="0.8"/>
            {/* big ship at quay */}
            <rect x="50" y="158" width="200" height="18" fill="#fff"/>
            <rect x="60" y="143" width="180" height="16" fill="#F7F3EC"/>
            <rect x="80" y="133" width="140" height="11" fill="#F7F3EC"/>
            <g fill="#1A2A4F">
              <circle cx="80" cy="167" r="2"/><circle cx="100" cy="167" r="2"/><circle cx="120" cy="167" r="2"/>
              <circle cx="140" cy="167" r="2"/><circle cx="160" cy="167" r="2"/><circle cx="180" cy="167" r="2"/>
              <circle cx="200" cy="167" r="2"/><circle cx="220" cy="167" r="2"/>
            </g>
            {/* ISPS flag */}
            <path d="M295,143 L295,160" stroke="#fff" strokeWidth="1"/>
            <path d="M295,143 L312,148 L295,153 Z" fill="#E85A1F"/>
          </g>
        )}
        {id === "mahajanga" && (
          <g>
            {/* Cirque rouge: red cliffs */}
            <path d="M0,140 L60,120 L100,130 L150,110 L220,135 L280,115 L340,135 L400,120 L400,180 L0,180 Z" fill="#A8412B"/>
            <path d="M0,160 L60,150 L130,155 L200,148 L300,158 L400,150 L400,180 L0,180 Z" fill="#7C2C12"/>
            <path d="M0,180 Q200,176 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* boab */}
            <g transform="translate(290,135)">
              <rect x="-3" y="0" width="6" height="22" fill="#1A2A4F"/>
              <ellipse cx="0" cy="-3" rx="18" ry="6" fill="#1A2A4F"/>
            </g>
          </g>
        )}
        {id === "morondava" && (
          <g>
            {/* baobab alley */}
            <path d="M0,165 L400,158 L400,180 L0,180 Z" fill="#7C2C12"/>
            <path d="M0,180 Q200,178 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {[60, 120, 180, 240, 300, 360].map((x,i) => (
              <g key={i} transform={`translate(${x},${168 - (i%2)*4})`}>
                <rect x="-4" y="-46" width="8" height="46" fill="#1A2A4F"/>
                <ellipse cx="0" cy="-50" rx="14" ry="6" fill="#1A2A4F"/>
              </g>
            ))}
            <circle cx="320" cy="80" r="30" fill="#FFC68A" opacity="0.6"/>
          </g>
        )}
        {id === "sainte-marie" && (
          <g>
            {/* whale tail */}
            <path d="M0,170 Q200,160 400,170 L400,180 L0,180 Z" fill="#1A2A4F"/>
            <path d="M0,180 Q200,175 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            <g transform="translate(200,140)" fill="#0F1A35">
              <path d="M-12,0 Q-30,-35 -20,-50 Q-10,-30 -5,-10 Q0,-30 10,-50 Q30,-35 14,0 Z"/>
            </g>
            {/* splash */}
            <path d="M170,170 q5,-8 12,-6" stroke="#fff" strokeWidth="1.5" fill="none" opacity="0.6"/>
            <path d="M218,170 q5,-6 14,-4" stroke="#fff" strokeWidth="1.5" fill="none" opacity="0.6"/>
            {/* island */}
            <path d="M260,170 Q300,158 340,170 Z" fill="#0F1A35"/>
            <path d="M295,168 q-2,-6 0,-12" stroke="#7FB539" strokeWidth="2" fill="none"/>
          </g>
        )}
        {id === "toliara" && (
          <g>
            {/* lagoon + coral */}
            <path d="M0,165 Q200,160 400,165 L400,180 L0,180 Z" fill="#7FB539" opacity="0.5"/>
            <path d="M0,180 Q200,177 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* baobabs Reniala */}
            {[80, 140, 200].map((x,i) => (
              <g key={i} transform={`translate(${x},${168})`}>
                <rect x="-3" y="-30" width="6" height="30" fill="#1A2A4F"/>
                <ellipse cx="0" cy="-32" rx="11" ry="5" fill="#1A2A4F"/>
              </g>
            ))}
            {/* turtle */}
            <g transform="translate(300,168)" fill="#7FB539">
              <ellipse cx="0" cy="0" rx="16" ry="9"/>
              <circle cx="18" cy="-2" r="3"/>
              <path d="M-15,4 L-18,8 M14,5 L18,8 M-13,-4 L-16,-7"/>
            </g>
          </g>
        )}
        {id === "maroantsetra" && (
          <g>
            {/* primary rainforest */}
            <path d="M0,170 L400,160 L400,180 L0,180 Z" fill="#0F1A35"/>
            <path d="M0,180 Q200,176 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* forest */}
            <path d="M0,162 Q40,140 80,160 Q120,135 160,158 Q200,138 240,160 Q280,140 320,158 Q360,138 400,158 L400,170 L0,170 Z" fill="#7FB539" opacity="0.65"/>
            <path d="M0,168 Q40,150 80,166 Q120,150 160,166 Q200,148 240,166 Q280,150 320,166 Q360,150 400,166 L400,172 L0,172 Z" fill="#7FB539" opacity="0.45"/>
            {/* yacht */}
            <path d="M240,172 L300,172 L304,180 L236,180 Z" fill="#fff"/>
            <path d="M260,172 L260,150" stroke="#1A2A4F" strokeWidth="1.5"/>
            <path d="M260,150 L290,170 L260,170 Z" fill="#fff"/>
          </g>
        )}
        {id === "antalaha" && (
          <g>
            {/* vanilla pods + ocean */}
            <path d="M0,170 L400,165 L400,180 L0,180 Z" fill="#0F1A35"/>
            <path d="M0,180 Q200,177 400,180 L400,250 L0,250 Z" fill={`url(#water-${id})`}/>
            {/* vanilla vines */}
            <g stroke="#7FB539" strokeWidth="3" fill="none" opacity="0.8">
              <path d="M40,170 q10,-30 -5,-50"/>
              <path d="M100,170 q-8,-28 6,-46"/>
              <path d="M160,170 q10,-32 -6,-52"/>
            </g>
            {/* pods */}
            <g fill="#92590C">
              <rect x="38" y="120" width="2" height="14" rx="1"/>
              <rect x="106" y="124" width="2" height="14" rx="1"/>
              <rect x="153" y="118" width="2" height="14" rx="1"/>
            </g>
            {/* small exploratory boat */}
            <path d="M250,170 L290,170 L294,178 L246,178 Z" fill="#F7F3EC"/>
            <path d="M270,170 L270,155 L283,168 L270,168" fill={t.accent}/>
          </g>
        )}

        {/* texture overlay */}
        <rect width="400" height="250" fill={`url(#grain-${id})`}/>
        {/* horizon glow */}
        <rect x="0" y="172" width="400" height="6" fill="#fff" opacity="0.06"/>
      </svg>

      {showLabel && label && (
        <div className="ev-label">
          <Icon name="anchor" size={11} stroke={2}/>
          <span style={{ marginLeft: 6 }}>{escale.nom}</span>
        </div>
      )}
      {placeholderText && (
        <div className="ev-placeholder">{placeholderText}</div>
      )}
    </div>
  );
};

window.Icon = Icon;
window.EscaleVisual = EscaleVisual;