// =====================================================
// PAGE — Accueil
// =====================================================

const HomePage = ({ navigate }) => {
  const headlinerEscales = ESCALES.slice(0, 4);
  const [photoError, setPhotoError] = React.useState(false);

  return (
    <main className="app-main">
      {/* ============== HERO ============== */}
      <section className="hero">
        <div className="container container-wide">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow">
                <div className="ribbon-line"></div>
                <span className="h-eyebrow">Catalogue Croisières · Édition 2026</span>
              </div>
              <h1>Madagascar,<br/><em>au large</em> de l'évasion.</h1>
              <div className="hero-sub">Dix escales d'exception sur la route maritime des&nbsp;Îles&nbsp;Vanille.</div>
              <p className="hero-text">
                Madagascar propose une diversité unique d'escales maritimes&nbsp;: ports
                commerciaux, mouillages, escales d'expédition, réserves naturelles, plages,
                patrimoine et biodiversité. Ce catalogue digital accompagne compagnies,
                tour-opérateurs et voyageurs dans la découverte des opportunités croisières
                de la Grande&nbsp;Île.
              </p>
              <div className="hero-paths" aria-label="Choisir votre parcours">
                <button className="hero-path hero-path-pro" onClick={() => navigate("#/operateurs")}>
                  <span className="hp-icon"><Icon name="briefcase" size={18}/></span>
                  <span className="hp-copy">
                    <strong>Je prépare une escale croisière</strong>
                    <small>Données portuaires, contraintes et tableau B2B.</small>
                  </span>
                  <Icon name="arrow-right" size={15}/>
                </button>
                <button className="hero-path" onClick={() => navigate("#/inspirations")}>
                  <span className="hp-icon"><Icon name="compass" size={18}/></span>
                  <span className="hp-copy">
                    <strong>Je découvre les escales</strong>
                    <small>Expériences, paysages et itinéraires inspirants.</small>
                  </span>
                  <Icon name="arrow-right" size={15}/>
                </button>
              </div>
              <div className="hero-actions">
                <button className="btn btn-primary btn-hero" onClick={() => navigate("#/explorer")}>
                  <Icon name="map" size={18}/>Explorer les dix escales
                </button>
                <div className="hero-actions-row">
                  <button className="btn btn-navy" onClick={() => navigate("#/operateurs")}>
                    <Icon name="briefcase" size={15}/>Espace opérateurs
                  </button>
                  <button className="btn btn-link" onClick={() => navigate("#/calendrier")}>
                    <Icon name="calendar" size={14}/>Calendrier<Icon name="arrow-right" size={13}/>
                  </button>
                </div>
              </div>
            </div>

            <div className="hero-visual">
              {photoError
                ? <HeroVisual/>
                : <img
                    src="assets/photo-cruise-sunset.jpg"
                    alt="Paquebot de croisière au large de Madagascar"
                    className="hero-photo"
                    onError={() => setPhotoError(true)}
                  />
              }
              <div className="vis-overlay">
                <div className="vis-card">
                  <div className="vc-label">Croisiéristes 2025</div>
                  <div className="vc-val">40 550</div>
                </div>
                <div className="vis-card">
                  <div className="vc-label">Arrivées touristiques</div>
                  <div className="vc-val">12,2 %</div>
                </div>
                <div className="vis-card" style={{ background: "rgba(232,90,31,.86)" }}>
                  <div className="vc-label" style={{ color: "rgba(255,255,255,.85)" }}>Escales recensées</div>
                  <div className="vc-val">10</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      {/* ============== Pourquoi Madagascar ============== */}
      <section className="section">
        <div className="container container-wide">
          <div className="section-head">
            <span className="h-eyebrow">Une destination émergente</span>
            <h2 className="h-section">Pourquoi <em>Madagascar</em>&nbsp;?</h2>
            <p className="lede">Quatre arguments structurants pour positionner la Grande&nbsp;Île sur la route maritime de l'océan Indien et des Îles&nbsp;Vanille.</p>
          </div>

          <div className="why-grid">
            {[
              { num: "01", icon: "globe",  accent: "var(--c-ocean)",  t: "Une île-continent aux paysages contrastés", p: "De la Montagne d'Ambre aux baobabs de l'Ouest, des récifs coralliens du Sud-Ouest à la forêt primaire de Masoala — un seul pays, dix mondes." },
              { num: "02", icon: "leaf",   accent: "var(--c-green)",  t: "Une biodiversité unique au monde", p: "Lémuriens, tortues radiées, baobabs, parcs nationaux UNESCO, baleines à bosse migratrices : un capital naturel à forte valeur expérientielle." },
              { num: "03", icon: "anchor", accent: "var(--c-navy)",   t: "Des escales complémentaires", p: "Ports en eau profonde, ports commerciaux, mouillages tender et escales d'expédition — une palette opérationnelle complète sur une même côte." },
              { num: "04", icon: "compass",accent: "var(--c-terra)",  t: "Une position stratégique", p: "Au cœur de l'océan Indien et de l'espace des Îles Vanille, en complément naturel des routes Mayotte, Comores, La Réunion et Maurice." }
            ].map(w => (
              <div className="why-cell" key={w.num}>
                <div className="why-icon-wrap">
                  <div className="why-icon" style={{ background: `color-mix(in srgb, ${w.accent} 12%, transparent)`, color: w.accent }}>
                    <Icon name={w.icon} size={24} stroke={1.5}/>
                  </div>
                  <span className="why-num">{w.num}</span>
                </div>
                <h3>{w.t}</h3>
                <p>{w.p}</p>
                <div className="why-rule" style={{ background: w.accent }}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== Escales highlight ============== */}
      <section className="section" style={{ background: "var(--c-bone)" }}>
        <div className="container container-wide">

          {/* En-tête avec compteur de progression */}
          <div className="escales-head">
            <div className="section-head" style={{ marginBottom: 0 }}>
              <span className="h-eyebrow">Aperçu des escales</span>
              <h2 className="h-section">Dix escales,<br/>une <em>île-continent</em>.</h2>
            </div>
            <div className="escales-counter">
              <div className="ec-progress">
                {ESCALES.map((e, i) => (
                  <span key={e.id} className={`ec-pip ${i < 4 ? "on" : ""}`} style={i < 4 ? { background: e.couleur } : {}}/>
                ))}
              </div>
              <div className="ec-fraction">
                <span className="ec-fraction-n">4</span>
                <span className="ec-fraction-sep"> sur </span>
                <span className="ec-fraction-total">10</span>
                <span className="ec-fraction-lbl"> escales affichées</span>
              </div>
              <button className="btn btn-primary btn-hero" onClick={() => navigate("#/escales")}>
                Voir les 10 fiches <Icon name="arrow-right" size={15}/>
              </button>
            </div>
          </div>

          {/* 4 cartes */}
          <div className="grid grid-4" style={{ marginTop: 28 }}>
            {headlinerEscales.map(e => (
              <div className="escale-card" key={e.id} onClick={() => navigate(`#/escale/${e.id}`)}>
                <div className="ec-visual">
                  <EscaleVisual escale={e} placeholderText={null}/>
                  <div className="ec-num">{String(e.num).padStart(2,"0")}</div>
                  <div className="ec-fiab"><FiabilityBadge niveau={e.fiabilite} small/></div>
                </div>
                <div className="ec-body">
                  <div className="ec-title">
                    <h3>{e.nom}</h3>
                    <span className="ec-alt">{e.nomAlt}</span>
                  </div>
                  <div className="ec-tags">
                    <FacadeBadge facade={e.facade}/>
                  </div>
                  <div className="ec-desc">{e.accroche}</div>
                  <div className="ec-foot">
                    <span className="note" style={{ fontSize: 11 }}>{e.typeAccueil.split("·")[0].trim()}</span>
                    <span className="btn btn-link btn-sm" style={{ padding: 0 }}>Découvrir <Icon name="arrow-right" size={12}/></span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Bande "6 autres escales" */}
          <div className="escales-more-strip">
            <span className="ems-label">+ 6 autres escales&nbsp;:</span>
            <div className="ems-pills">
              {ESCALES.slice(4).map(e => (
                <button key={e.id} className="ems-pill" onClick={() => navigate(`#/escale/${e.id}`)}>
                  <span className="ems-dot" style={{ background: e.couleur }}/>
                  {e.nom}
                </button>
              ))}
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate("#/explorer")}>
              Voir toutes les escales <Icon name="arrow-right" size={13}/>
            </button>
          </div>

        </div>
      </section>

      {/* ============== Editorial pull-quote ============== */}
      <section className="section" style={{ background: "var(--c-navy)", color: "#fff" }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
            <div className="h-eyebrow" style={{ color: "var(--c-ocean-soft)", marginBottom: 24 }}>Mot du Ministère</div>
            <blockquote style={{ fontFamily: "var(--f-display)", fontSize: "clamp(28px, 4vw, 44px)", lineHeight: 1.2, fontStyle: "italic", color: "#fff", margin: 0 }}>
              «&nbsp;Au large des routes habituelles, une île-continent attend que ses escales deviennent des destinations.&nbsp;»
            </blockquote>
            <div style={{ marginTop: 24, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--c-ocean-soft)", fontWeight: 600 }}>
              Ministère du Tourisme et de l'Artisanat
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => navigate("#/contact")}>
                <Icon name="mail" size={15}/>Nous contacter
              </button>
              <button className="btn" style={{ background: "rgba(255,255,255,.1)", color: "#fff", borderColor: "rgba(255,255,255,.2)" }} onClick={() => navigate("#/operateurs")}>
                <Icon name="briefcase" size={15}/>Espace opérateurs
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============== Orientation B2B / B2C ============== */}
      <section className="section">
        <div className="container container-wide">
          <div className="section-head">
            <span className="h-eyebrow">Une double lecture</span>
            <h2 className="h-section">Planifier, coordonner,<br/><em>valoriser</em>.</h2>
            <p className="lede">Le catalogue s'adresse à deux publics. Chaque fiche escale combine une lecture inspirante pour les passagers et une lecture opérationnelle pour les décideurs croisière.</p>
          </div>
          <div className="orient-pair">
            <div className="orient-card dark" onClick={() => navigate("#/operateurs")}>
              <div className="o-icon"><Icon name="briefcase" size={22}/></div>
              <h3>Je suis un opérateur croisière</h3>
              <p>Compagnies, armateurs, tour-opérateurs, agences réceptives, agents maritimes, autorités, investisseurs. Accédez aux infrastructures portuaires, contraintes, points à confirmer et au tableau comparatif B2B.</p>
              <div className="o-arrow"><Icon name="arrow-right" size={20}/></div>
            </div>
            <div className="orient-card" onClick={() => navigate("#/inspirations")}>
              <div className="o-icon"><Icon name="compass" size={22}/></div>
              <h3>Je suis un passager / voyageur</h3>
              <p>Explorez les expériences, les sites naturels et culturels, les plages, la biodiversité, le patrimoine, les baleines, les baobabs et la vanille. Une invitation à préparer votre escale à Madagascar.</p>
              <div className="o-arrow"><Icon name="arrow-right" size={20}/></div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

// Hero scenic visual — illustrative coastline
const HeroVisual = () => (
  <svg className="bg" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="hero-sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#0F1A35"/>
        <stop offset="40%" stopColor="#2A3B66"/>
        <stop offset="78%" stopColor="#E85A1F" stopOpacity="0.85"/>
        <stop offset="100%" stopColor="#F7B58A"/>
      </linearGradient>
      <linearGradient id="hero-water" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#1A2A4F" stopOpacity="0.5"/>
        <stop offset="100%" stopColor="#0F1A35"/>
      </linearGradient>
      <pattern id="hero-grain" width="3" height="3" patternUnits="userSpaceOnUse">
        <circle cx="1.5" cy="1.5" r="0.4" fill="#fff" fillOpacity="0.08"/>
      </pattern>
    </defs>

    <rect width="600" height="800" fill="url(#hero-sky)"/>

    {/* Setting sun */}
    <circle cx="430" cy="520" r="70" fill="#FFC68A" opacity="0.85"/>
    <circle cx="430" cy="520" r="100" fill="#FFC68A" opacity="0.3"/>

    {/* Far mountains */}
    <path d="M0,560 L60,520 L130,545 L200,510 L280,540 L360,505 L440,535 L520,510 L600,540 L600,580 L0,580 Z"
          fill="#0F1A35" opacity="0.6"/>

    {/* Coast */}
    <path d="M0,605 Q150,590 300,600 T600,595 L600,640 L0,640 Z" fill="#1A2A4F"/>

    {/* Water */}
    <path d="M0,640 L600,640 L600,800 L0,800 Z" fill="url(#hero-water)"/>

    {/* Sun reflection */}
    <ellipse cx="430" cy="660" rx="55" ry="3" fill="#FFC68A" opacity="0.7"/>
    <ellipse cx="430" cy="680" rx="75" ry="3" fill="#FFC68A" opacity="0.5"/>
    <ellipse cx="430" cy="700" rx="40" ry="2" fill="#FFC68A" opacity="0.35"/>

    {/* Cruise ship silhouette */}
    <g transform="translate(180,605)">
      <rect x="0" y="0" width="170" height="22" fill="#F7F3EC"/>
      <rect x="10" y="-15" width="150" height="17" fill="#F7F3EC"/>
      <rect x="25" y="-25" width="120" height="11" fill="#F7F3EC"/>
      <g fill="#1A2A4F">
        <circle cx="25" cy="11" r="2"/><circle cx="45" cy="11" r="2"/>
        <circle cx="65" cy="11" r="2"/><circle cx="85" cy="11" r="2"/>
        <circle cx="105" cy="11" r="2"/><circle cx="125" cy="11" r="2"/>
        <circle cx="145" cy="11" r="2"/>
      </g>
    </g>

    {/* Baobab silhouettes on coast */}
    <g transform="translate(60,605)" fill="#0F1A35">
      <rect x="-3" y="-32" width="6" height="32"/>
      <ellipse cx="0" cy="-34" rx="12" ry="5"/>
    </g>
    <g transform="translate(95,605)" fill="#0F1A35">
      <rect x="-2" y="-22" width="4" height="22"/>
      <ellipse cx="0" cy="-24" rx="9" ry="4"/>
    </g>
    <g transform="translate(500,605)" fill="#0F1A35">
      <rect x="-3" y="-28" width="6" height="28"/>
      <ellipse cx="0" cy="-30" rx="11" ry="5"/>
    </g>

    {/* Maritime route — dashed compass line */}
    <path d="M50,200 Q200,250 350,180 T580,150" stroke="#E85A1F" strokeWidth="1.5" strokeDasharray="4 6" fill="none" opacity="0.55"/>
    <circle cx="50" cy="200" r="4" fill="#E85A1F"/>
    <circle cx="350" cy="180" r="4" fill="#E85A1F"/>
    <circle cx="580" cy="150" r="4" fill="#E85A1F"/>

    {/* Compass rose top right */}
    <g transform="translate(525,90)" stroke="#fff" strokeOpacity="0.5" fill="none">
      <circle r="32"/>
      <circle r="22"/>
      <path d="M0,-30 L4,0 L0,30 L-4,0 Z" fill="#fff" fillOpacity="0.4" stroke="none"/>
      <path d="M-30,0 L0,4 L30,0 L0,-4 Z" fill="#fff" fillOpacity="0.2" stroke="none"/>
      <text x="0" y="-36" fontSize="9" fill="#fff" fillOpacity="0.7" textAnchor="middle" fontFamily="Manrope">N</text>
    </g>

    <rect width="600" height="800" fill="url(#hero-grain)"/>
  </svg>
);

window.HomePage = HomePage;