// sections2.jsx — Map, Operators, Vision, Payments, Stats, FAQ, Contact, CTA, Footer
const { useState: s2UseState, useEffect: s2UseEffect, useRef: s2UseRef } = React;

// ---------- BURKINA MAP ----------
// Approximate city positions on a stylized map
const BF_CITIES = [
  { id: "ouaga",      name: "Ouagadougou",    x: 390, y: 220, major: true },
  { id: "bobo",       name: "Bobo-Dioulasso", x: 250, y: 285, major: true },
  { id: "koudougou",  name: "Koudougou",      x: 340, y: 225, major: false },
  { id: "banfora",    name: "Banfora",        x: 215, y: 320, major: false },
  { id: "ouahigouya", name: "Ouahigouya",     x: 310, y: 145, major: false },
  { id: "fada",       name: "Fada N'Gourma",  x: 470, y: 230, major: false },
  { id: "kaya",       name: "Kaya",           x: 400, y: 175, major: false },
  { id: "tenkodogo",  name: "Tenkodogo",      x: 430, y: 290, major: false },
];
const BF_ROUTES = [
  ["ouaga", "bobo"],
  ["ouaga", "koudougou"],
  ["ouaga", "ouahigouya"],
  ["ouaga", "fada"],
  ["ouaga", "kaya"],
  ["ouaga", "tenkodogo"],
  ["bobo", "banfora"],
  ["bobo", "koudougou"],
];

function BurkinaMap({ t }) {
  const [hovered, setHovered] = s2UseState(null);
  const byId = Object.fromEntries(BF_CITIES.map(c => [c.id, c]));
  // Real Burkina Faso outline path (simplified from actual borders)
  const bfOutline = "M 155 152 L 170 140 L 183 132 L 195 118 L 205 105 L 220 95 L 240 88 L 265 82 L 290 78 L 310 80 L 325 90 L 340 95 L 355 92 L 370 96 L 388 95 L 405 88 L 425 82 L 445 80 L 460 85 L 475 92 L 490 95 L 508 92 L 525 100 L 540 115 L 548 135 L 555 155 L 560 180 L 568 200 L 578 215 L 588 235 L 595 255 L 598 275 L 596 295 L 590 315 L 578 330 L 560 340 L 540 348 L 520 355 L 498 360 L 475 362 L 450 358 L 425 350 L 400 348 L 380 355 L 360 360 L 340 358 L 320 355 L 298 352 L 278 350 L 258 345 L 240 338 L 220 325 L 205 310 L 190 292 L 175 275 L 165 255 L 155 230 L 148 205 L 148 180 L 150 165 Z";

  return (
    <div className="bf-3d-wrap">
      <div className="bf-3d-stage">
        <svg viewBox="100 60 520 320" className="bf-3d-map">
          <defs>
            {/* Country surface with terrain gradient — Sahel/savane */}
            <linearGradient id="bf-terrain" x1="0" y1="0" x2="0.6" y2="1">
              <stop offset="0" stopColor="#c89968"/>
              <stop offset=".3" stopColor="#a0784a"/>
              <stop offset=".6" stopColor="#7d5a32"/>
              <stop offset="1" stopColor="#4a3520"/>
            </linearGradient>
            <linearGradient id="bf-terrain-top" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#e8c893"/>
              <stop offset=".4" stopColor="#c89968"/>
              <stop offset="1" stopColor="#8a6234"/>
            </linearGradient>
            <radialGradient id="bf-glow" cx=".5" cy=".4">
              <stop offset="0" stopColor="#fbbf24" stopOpacity=".35"/>
              <stop offset="1" stopColor="#fbbf24" stopOpacity="0"/>
            </radialGradient>
            <filter id="bf-shadow" x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="8"/>
            </filter>
            <filter id="city-glow">
              <feGaussianBlur stdDeviation="2.5"/>
            </filter>
            {/* Noise for terrain texture */}
            <filter id="terrain-texture" x="0" y="0" width="100%" height="100%">
              <feTurbulence type="fractalNoise" baseFrequency=".04" numOctaves="3" seed="3"/>
              <feColorMatrix values="0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .35 0"/>
              <feComposite in2="SourceGraphic" operator="in"/>
            </filter>
          </defs>

          {/* Halo */}
          <ellipse cx="360" cy="230" rx="250" ry="150" fill="url(#bf-glow)"/>

          {/* Drop shadow cast under country */}
          <path d={bfOutline} fill="#000" opacity=".55" filter="url(#bf-shadow)" transform="translate(10 22)"/>

          {/* Extruded side (3D edge) — back layers simulating thickness */}
          {Array.from({ length: 14 }).map((_, i) => (
            <path key={i} d={bfOutline}
              fill="#2a1f16"
              transform={`translate(${(14-i)*0.8} ${(14-i)*1.1})`}
              opacity={0.35 + i*0.04}/>
          ))}

          {/* Top surface */}
          <path d={bfOutline} fill="url(#bf-terrain-top)"
                stroke="#2a1f16" strokeWidth="1.2"/>

          {/* Texture overlay */}
          <path d={bfOutline} fill="url(#bf-terrain)" opacity=".35"/>

          {/* Rivers (Mouhoun/Volta Noire hint) */}
          <path d="M200 180 Q215 200 210 225 Q205 260 215 285 Q225 310 215 335"
                stroke="#4a90d9" strokeWidth="1.5" fill="none" opacity=".5"
                strokeDasharray="2 2"/>
          <path d="M340 170 Q350 200 345 230 Q340 265 355 295"
                stroke="#4a90d9" strokeWidth="1" fill="none" opacity=".4"
                strokeDasharray="2 2"/>

          {/* Relief spots — small elevated dots for hills/mountains */}
          {[
            { x: 220, y: 180, r: 6 }, { x: 180, y: 220, r: 5 },
            { x: 290, y: 140, r: 5 }, { x: 400, y: 170, r: 7 },
            { x: 480, y: 210, r: 6 }, { x: 520, y: 280, r: 5 },
            { x: 260, y: 300, r: 5 }, { x: 340, y: 330, r: 6 },
          ].map((h, i) => (
            <g key={i} transform={`translate(${h.x} ${h.y})`}>
              <ellipse cx="0" cy="2" rx={h.r} ry={h.r*.4} fill="#2a1f16" opacity=".5"/>
              <ellipse cx="0" cy="0" rx={h.r} ry={h.r*.5} fill="#d9a866"/>
              <ellipse cx="-1" cy="-1" rx={h.r*.7} ry={h.r*.25} fill="#f4d9a8" opacity=".7"/>
            </g>
          ))}

          {/* Routes with glow */}
          {BF_ROUTES.map(([a, b], i) => {
            const A = byId[a], B = byId[b];
            const isActive = hovered && (hovered === a || hovered === b);
            return (
              <g key={i}>
                <line x1={A.x} y1={A.y} x2={B.x} y2={B.y}
                      stroke="#fbbf24" strokeWidth={isActive ? 2.5 : 1.4}
                      opacity={isActive ? .95 : .6}
                      strokeDasharray="5 4"
                      filter={isActive ? "url(#city-glow)" : undefined}>
                  <animate attributeName="stroke-dashoffset" from="0" to="-18" dur={`${2 + (i % 3)}s`} repeatCount="indefinite"/>
                </line>
              </g>
            );
          })}

          {/* Cities with 3D pin effect */}
          {BF_CITIES.map(c => {
            const active = hovered === c.id;
            const color = c.major ? "#dc2626" : "#fbbf24";
            return (
              <g key={c.id} onMouseEnter={() => setHovered(c.id)} onMouseLeave={() => setHovered(null)}
                 style={{ cursor: "pointer" }} className={`bf-city ${active ? "active" : ""}`}>
                {/* Glow halo */}
                <circle cx={c.x} cy={c.y} r={c.major ? 20 : 14}
                        fill={color} opacity={active ? .35 : .15}
                        filter="url(#city-glow)">
                  <animate attributeName="r" values={`${c.major ? 14 : 10};${c.major ? 22 : 16};${c.major ? 14 : 10}`}
                           dur="2.5s" repeatCount="indefinite"/>
                </circle>
                {/* Shadow */}
                <ellipse cx={c.x+1} cy={c.y + (c.major ? 10 : 7)}
                         rx={c.major ? 6 : 4} ry={c.major ? 1.5 : 1}
                         fill="#000" opacity=".5"/>
                {/* Pin stem */}
                <path d={`M ${c.x-3} ${c.y} L ${c.x} ${c.y + (c.major ? 10 : 7)} L ${c.x+3} ${c.y} Z`}
                      fill={color}/>
                {/* Pin head */}
                <circle cx={c.x} cy={c.y - (c.major ? 2 : 1)}
                        r={c.major ? 6 : 4}
                        fill={color}
                        stroke="#0b0a08" strokeWidth="1.2"/>
                <circle cx={c.x - 1.5} cy={c.y - (c.major ? 3.5 : 2.5)}
                        r={c.major ? 2 : 1.3}
                        fill="#fff" opacity=".85"/>
                {/* Label */}
                <g transform={`translate(${c.x} ${c.y - (c.major ? 20 : 15)})`}>
                  {active && (
                    <rect x={-c.name.length*3.5 - 6} y="-11" width={c.name.length*7 + 12} height="16" rx="3"
                          fill="#0b0a08" opacity=".85"/>
                  )}
                  <text textAnchor="middle" y="0"
                        fill={active ? "#fbbf24" : "#f4ece0"}
                        fontSize={c.major ? 13 : 10}
                        fontWeight={c.major ? 700 : 500}
                        fontFamily="var(--font-sans)"
                        style={{ paintOrder: "stroke", stroke: "#0b0a08", strokeWidth: 2, strokeLinejoin: "round" }}>
                    {c.name}
                  </text>
                </g>
              </g>
            );
          })}

          {/* Compass */}
          <g transform="translate(575 100)">
            <circle r="18" fill="rgba(11,10,8,.7)" stroke="rgba(244,236,224,.25)" strokeWidth="1"/>
            <path d="M 0 -12 L 3 0 L 0 12 L -3 0 Z" fill="#dc2626"/>
            <path d="M 0 -12 L 3 0 L 0 0 Z" fill="#f4ece0"/>
            <text y="-22" textAnchor="middle" fill="#c9bfae" fontSize="9" fontFamily="var(--font-mono)" letterSpacing="1">N</text>
          </g>

          {/* Scale */}
          <g transform="translate(140 350)">
            <line x1="0" y1="0" x2="60" y2="0" stroke="#f4ece0" strokeWidth="1"/>
            <line x1="0" y1="-3" x2="0" y2="3" stroke="#f4ece0" strokeWidth="1"/>
            <line x1="60" y1="-3" x2="60" y2="3" stroke="#f4ece0" strokeWidth="1"/>
            <text y="14" fill="#c9bfae" fontSize="9" fontFamily="var(--font-mono)">100 km</text>
          </g>
        </svg>
        {/* Legend */}
        <div className="bf-legend">
          <div><span className="dot" style={{ background: "#dc2626" }}/> Grandes villes</div>
          <div><span className="dot" style={{ background: "#fbbf24" }}/> Villes régionales</div>
          <div><span className="dash"/> Routes desservies</div>
        </div>
      </div>
    </div>
  );
}

function Destinations({ t }) {
  return (
    <section id="destinations" className="section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.destinations.eyebrow}</span></div>
        </Reveal>
        <div className="grid-2" style={{ alignItems: "center", gap: 60 }}>
          <div>
            <Reveal delay={100} variant="blur">
              <h2 className="h2" style={{ marginBottom: 20, maxWidth: "16ch" }}>{t.destinations.title}</h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="lead" style={{ marginBottom: 40 }}>{t.destinations.sub}</p>
            </Reveal>
            <RevealStagger baseDelay={300} stagger={60} variant="up" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {t.destinations.cities.map((c, i) => (
                <div key={i} className="destination-card" style={{ padding: "14px 16px", borderRadius: 14, border: "1px solid var(--line)", background: "rgba(244,236,224,.03)" }} data-hover>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>{c.n}</div>
                  <div style={{ fontSize: 11, color: "var(--cream-dim)", display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                    <span>{c.pop}</span>
                    <span className="font-mono" style={{ color: "var(--gold)", fontSize: 10, letterSpacing: "0.08em" }}>{c.role}</span>
                  </div>
                </div>
              ))}
            </RevealStagger>
          </div>
          <Reveal delay={200}>
            <BurkinaMap t={t}/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- STATS BANDEAU ----------
function StatsStrip({ t }) {
  return (
    <section className="section" style={{ padding: "60px 48px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="grid-4">
          {t.stats.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ textAlign: "center", padding: "10px 0" }}>
                <div className="stat-num grad-flag"><Counter to={s.n} suffix={s.suf}/></div>
                <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--cream-dim)", marginTop: 10 }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- OPERATORS ----------
function Operators({ t, onNotify, onPartner }) {
  return (
    <section id="operators" className="section snap" style={{
      background: "linear-gradient(180deg, rgba(22,163,74,0.04), transparent 40%), var(--bg-2)"
    }}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.operators.eyebrow}</span></div>
        </Reveal>
        <div className="grid-2" style={{ alignItems: "start", gap: 60 }}>
          <div>
            <Reveal delay={100}>
              <h2 className="h2" style={{ marginBottom: 24 }}>{t.operators.title}</h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="lead" style={{ marginBottom: 32 }}>{t.operators.lead}</p>
            </Reveal>
            <Reveal delay={300}>
              <MagneticButton strength={0.3} radius={110}>
                <button type="button" className="btn btn-primary" onClick={onPartner || onNotify} data-hover>
                  {t.operators.cta}
                  <svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 8 L14 8 M9 3 L14 8 L9 13" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
                </button>
              </MagneticButton>
            </Reveal>

            {/* Dashboard mockup */}
            <Reveal delay={400}>
              <div style={{ marginTop: 48, padding: 20, borderRadius: 18, border: "1px solid var(--line-2)", background: "linear-gradient(180deg, rgba(11,10,8,.6), rgba(11,10,8,.3))" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                  <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--cream-dim)" }}>TABLEAU DE BORD · STAF</div>
                  <div style={{ display: "flex", gap: 4 }}>
                    <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--green-glow)" }}/>
                    <span style={{ fontSize: 10, color: "var(--green-glow)" }}>Live</span>
                  </div>
                </div>
                {/* Mini chart */}
                <svg viewBox="0 0 400 100" style={{ width: "100%", height: 100 }}>
                  <defs>
                    <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="#f59e0b" stopOpacity="0.4"/>
                      <stop offset="1" stopColor="#f59e0b" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <path d="M0 70 Q40 60 60 55 T120 45 T180 40 T240 30 T300 25 T400 15 L400 100 L0 100 Z" fill="url(#chart-grad)"/>
                  <path d="M0 70 Q40 60 60 55 T120 45 T180 40 T240 30 T300 25 T400 15" stroke="#f59e0b" strokeWidth="1.5" fill="none"/>
                </svg>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 12 }}>
                  <div><div style={{ color: "var(--cream-dim)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>Revenus</div><div style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>1.2M F</div></div>
                  <div><div style={{ color: "var(--cream-dim)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>Remplissage</div><div style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--green-glow)" }}>87%</div></div>
                  <div><div style={{ color: "var(--cream-dim)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>Trajets</div><div style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>42</div></div>
                </div>
              </div>
            </Reveal>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {t.operators.benefits.map((b, i) => (
              <Reveal key={i} delay={i * 120 + 200}>
                <div className="card" style={{ padding: 26 }} data-hover>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
                    <div style={{
                      width: 44, height: 44, flexShrink: 0, borderRadius: 12,
                      background: `linear-gradient(135deg, ${["#dc2626","#f59e0b","#16a34a","#b45309"][i]}, rgba(244,236,224,.1))`,
                      display: "grid", placeItems: "center",
                      fontFamily: "var(--font-serif)", fontSize: 20, color: "#fff"
                    }}>{i+1}</div>
                    <div>
                      <h3 className="h3" style={{ marginBottom: 6 }}>{b.t}</h3>
                      <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.55 }}>{b.d}</p>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* Partenaires transporteurs */}
        <Reveal delay={200}>
          <div style={{ marginTop: 80, paddingTop: 40, borderTop: "1px solid var(--line)" }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 28 }}>
              <h3 className="h3" style={{ fontFamily: "var(--font-serif)", fontSize: 28, fontStyle: "italic" }}>{t.operators.partnersLabel}</h3>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--cream-dim)" }}>{t.operators.partnersNote}</div>
            </div>
            <div className="partners-grid">
              {t.operators.partnersList.map((p, i) => (
                <div key={i} className="partner-card" data-hover>
                  <div className="partner-mark" style={{
                    background: `linear-gradient(135deg, ${p.color}, ${p.color}55)`,
                    boxShadow: `0 8px 22px -10px ${p.color}`
                  }}>
                    {p.n.slice(0, 3).toUpperCase()}
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{p.n}</div>
                    <div style={{ fontSize: 11, color: "var(--cream-dim)", marginTop: 2, lineHeight: 1.4 }}>{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- VISION ----------
function Vision({ t }) {
  return (
    <section id="vision" className="section snap" style={{
      background: "radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.08), transparent 60%)"
    }}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.vision.eyebrow}</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h2" style={{ marginBottom: 24, maxWidth: "18ch" }}>{t.vision.title}</h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="lead" style={{ marginBottom: 60, maxWidth: "65ch" }}>{t.vision.lead}</p>
        </Reveal>

        {/* Phases */}
        <div style={{ position: "relative" }}>
          {/* Timeline line */}
          <div style={{
            position: "absolute", left: "50%", top: 0, bottom: 0, width: 1,
            background: "linear-gradient(180deg, var(--red), var(--gold), var(--green), rgba(244,236,224,.2))",
            transform: "translateX(-50%)"
          }}/>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {t.vision.phases.map((p, i) => {
              const isLeft = i % 2 === 0;
              const color = ["#dc2626", "#f59e0b", "#16a34a", "#fbbf24"][i];
              return (
                <Reveal key={i} delay={i * 120}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 32px 1fr", alignItems: "start", gap: 20 }} className="phase-row">
                    <div style={{ gridColumn: isLeft ? 1 : 3 }} className="phase-side">
                      <div className="phase-card">
                        <div className="phase-num">0{i+1}</div>
                        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color, marginBottom: 12 }}>
                          <span style={{ width: 6, height: 6, borderRadius: "50%", background: color }}/>
                          Phase {i+1} · {p.tag}
                        </div>
                        <h3 className="h3" style={{ marginBottom: 10 }}>{p.t}</h3>
                        <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.55 }}>{p.d}</p>
                      </div>
                    </div>
                    <div style={{ gridColumn: 2, display: "flex", justifyContent: "center", alignItems: "center", position: "relative", minHeight: 40 }} className="phase-dot">
                      <div style={{
                        width: 18, height: 18, borderRadius: "50%",
                        background: color,
                        boxShadow: `0 0 20px ${color}, 0 0 0 4px var(--bg)`,
                      }}/>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>

        {/* Founder */}
        <Reveal delay={300}>
          <div style={{
            marginTop: 80,
            padding: "50px 48px",
            borderRadius: 24,
            background: "linear-gradient(135deg, rgba(220,38,38,.06), rgba(245,158,11,.06), rgba(22,163,74,.06))",
            border: "1px solid var(--line-2)",
            textAlign: "center"
          }}>
            <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold)", marginBottom: 20 }}>{t.vision.founderIntro}</div>
            <p className="font-serif" style={{ fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.3, maxWidth: "22ch", margin: "0 auto 24px", fontStyle: "italic" }}>
              « Nous ne vendons pas des billets. Nous rendons l'Afrique plus proche. »
            </p>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 14, marginTop: 10 }}>
              <div style={{
                width: 44, height: 44, borderRadius: "50%",
                background: "linear-gradient(135deg, #dc2626, #f59e0b, #16a34a)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-serif)", fontSize: 18, color: "#fff"
              }}>NY</div>
              <div style={{ textAlign: "left" }}>
                <div style={{ fontWeight: 500 }}>{t.vision.founder}</div>
                <div style={{ fontSize: 12, color: "var(--cream-dim)" }}>{t.vision.founderRole}</div>
              </div>
            </div>
          </div>
        </Reveal>

        <style>{`
          @media (max-width: 800px) {
            .phase-row { grid-template-columns: 32px 1fr !important; }
            .phase-side { grid-column: 2 !important; }
            .phase-dot { grid-column: 1 !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ---------- PAYMENTS ----------
function Payments({ t }) {
  const icons = [
    { name: "Orange Money", color: "#ff6600", text: "OM" },
    { name: "Moov Money", color: "#0066cc", text: "MM" },
    { name: "Wave", color: "#1dc8f5", text: "W" },
    { name: "Visa", color: "#1a1f71", text: "VISA" },
    { name: "Mastercard", color: "#eb001b", text: "MC" },
  ];
  return (
    <section id="payments" className="section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.payments.eyebrow}</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h2" style={{ marginBottom: 48 }}>{t.payments.title}</h2>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center" }}>
            {icons.map((m, i) => (
              <div key={i} style={{
                minWidth: 180,
                padding: "22px 28px",
                borderRadius: 16,
                border: "1px solid var(--line-2)",
                background: "rgba(244,236,224,.03)",
                display: "flex", alignItems: "center", gap: 14
              }} data-hover>
                <div style={{
                  width: 48, height: 48, borderRadius: 10,
                  background: `linear-gradient(135deg, ${m.color}, ${m.color}cc)`,
                  display: "grid", placeItems: "center",
                  color: "#fff", fontWeight: 700, fontSize: 13, letterSpacing: "0.05em"
                }}>{m.text}</div>
                <div>
                  <div style={{ fontWeight: 500 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: "var(--cream-dim)" }}>Instantané</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ({ t }) {
  const [open, setOpen] = s2UseState(null);
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 860 }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.faq.eyebrow}</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h2" style={{ marginBottom: 48 }}>{t.faq.title}</h2>
        </Reveal>
        <div>
          {t.faq.items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? null : i)} data-hover>
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="chev" style={{ fontFamily: "var(--font-serif)", fontSize: 26, lineHeight: 1 }}>+</span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CTA + Contact ----------
function FinalCTA({ t, onNotify, lang }) {
  const waLink = `https://wa.me/${(t.contact.phone || "+22600000000").replace(/[^\d]/g, "")}`;
  return (
    <section id="contact" className="section snap" style={{
      background: "radial-gradient(ellipse at 50% 100%, rgba(245,158,11,.1), transparent 70%)"
    }}>
      <div className="container" style={{ textAlign: "center", maxWidth: 880 }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center" }}><FlagDot size={8}/><span>{t.contact.eyebrow}</span></div>
        </Reveal>
        <ScrollTitle className="h2" style={{ marginBottom: 24, transformOrigin: "center center" }}>{t.cta.final}</ScrollTitle>
        <Reveal delay={200} variant="mask">
          <p className="lead" style={{ margin: "0 auto 40px" }}>{t.cta.finalSub}</p>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap", marginBottom: 48 }}>
            <div style={{ position: "relative", display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
              <button type="button" disabled style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 28px", fontSize: 15, background: "var(--gold)", color: "#000", border: "none", borderRadius: 8, fontWeight: 600, opacity: 0.55, cursor: "not-allowed" }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
                App Store
              </button>
              <span style={{ fontSize: 11, color: "var(--muted)", fontStyle: "italic" }}>
                {lang === "fr" ? "Bientôt disponible" : "Coming soon"}
              </span>
            </div>
            <div style={{ position: "relative", display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
              <button type="button" disabled style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 28px", fontSize: 15, background: "var(--gold)", color: "#000", border: "none", borderRadius: 8, fontWeight: 600, opacity: 0.55, cursor: "not-allowed" }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3.61 1.81L13.42 12 3.61 22.19c-.36-.36-.61-.9-.61-1.48V3.29c0-.58.25-1.12.61-1.48zM14.8 13.38l2.92 1.7-2.07 2.07-2.73-2.73 1.88-1.04zM14.8 10.62l-1.88-1.04 2.73-2.73 2.07 2.07-2.92 1.7zM21.4 11.1l-2.61-1.52-2.38 2.38 2.38 2.38 2.61-1.52c.5-.29.5-1.01 0-1.72z"/></svg>
                Google Play
              </button>
              <span style={{ fontSize: 11, color: "var(--muted)", fontStyle: "italic" }}>
                {lang === "fr" ? "Bientôt disponible" : "Coming soon"}
              </span>
            </div>
          </div>
        </Reveal>
        <Reveal delay={400}>
          <div className="ft-contact-row">
            <a href={waLink} target="_blank" rel="noopener noreferrer" className="ft-contact-card" data-hover>
              <span className="ft-contact-label">WhatsApp</span>
              <span className="ft-contact-value">{t.contact.phone}</span>
            </a>
            <div className="ft-contact-card">
              <span className="ft-contact-label">{lang === "fr" ? "Bureau" : "Office"}</span>
              <span className="ft-contact-value">{t.contact.city}</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer({ t }) {
  return (
    <footer style={{ borderTop: "1px solid var(--line)", padding: "60px 48px 40px", position: "relative", zIndex: 2 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 40, alignItems: "start" }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <img src="assets/logo.png" alt="" style={{ width: 40, height: 40, objectFit: "contain" }}/>
              <div>
                <div style={{ fontWeight: 500, fontSize: 16 }}>FasoTravel</div>
                <div style={{ fontSize: 11, color: "var(--cream-dim)", fontStyle: "italic" }}>{t.footer.tagline}</div>
              </div>
            </div>
            <div className="flag-strip" style={{ marginTop: 20, width: 160 }}/>
            <div style={{ marginTop: 28, fontSize: 11, color: "var(--muted)" }} className="font-mono">{t.footer.legal}</div>
          </div>
          <div>
            <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--cream-dim)", marginBottom: 16 }}>Explorer</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {t.footer.links.map((l, i) => (
                <a key={i} href={l.href} style={{ color: "var(--cream)", textDecoration: "none", fontSize: 14 }} data-hover>{l.t}</a>
              ))}
            </div>
          </div>
          <div>
            <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--cream-dim)", marginBottom: 16 }}>Contact</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <a href={`mailto:${t.contact.email}`} style={{ color: "var(--cream)", textDecoration: "none" }} data-hover>{t.contact.email}</a>
              <span style={{ color: "var(--cream-dim)" }}>{t.contact.phone}</span>
              <span style={{ color: "var(--cream-dim)" }}>{t.contact.city}</span>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 800px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

// ---------- Agent WhatsApp (réservation par chat) ----------
// Numéro WhatsApp Business officiel de FasoTravel, format international SANS « + ».
// WA-AGENT (déploiement — 2026-06-18) : numéro officiel posé. NB : le webhook de
// l'agent IA n'est réellement actif qu'en Phase 3 (WABA prod — RCCM/IFU).
const WA_AGENT_NUMBER = "22651591414";

function WhatsAppAgent({ t, lang, onNotify }) {
  const a = (t && t.agent) || {};
  const waUrl =
    `https://wa.me/${WA_AGENT_NUMBER.replace(/[^\d]/g, "")}` +
    `?text=${encodeURIComponent(a.prefill || "Bonjour FasoTravel")}`;
  const points = a.points || [];
  const thread = a.thread || [];
  const WaGlyph = ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.004c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.02zM12.04 20.15h-.003a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/>
    </svg>
  );

  return (
    <section id="agent" className="section wa-sec">
      <div className="container">
        <div className="wa-grid">
          {/* Colonne texte + CTA */}
          <div className="wa-copy">
            <Reveal>
              <span className="wa-badge"><span className="dot" aria-hidden/>{a.badge}</span>
            </Reveal>
            <Reveal delay={80}>
              <div className="eyebrow" style={{ marginBottom: 16 }}><FlagDot size={8}/><span>{a.eyebrow}</span></div>
            </Reveal>
            <Reveal delay={140}>
              <h2 className="h2" style={{ marginBottom: 18 }}>{a.title}</h2>
            </Reveal>
            <Reveal delay={200} variant="mask">
              <p className="lead" style={{ marginBottom: 0 }}>{a.lead}</p>
            </Reveal>
            <div className="wa-points">
              {points.map((p, i) => (
                <Reveal key={i} delay={i * 70}>
                  <div className="wa-point">
                    <span className="wa-point-ic" aria-hidden>{p.icon}</span>
                    <div>
                      <div className="wa-point-t">{p.t}</div>
                      <div className="wa-point-d">{p.d}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
            <Reveal delay={200}>
              <div className="wa-cta-row">
                <MagneticButton>
                  <a href={waUrl} target="_blank" rel="noopener noreferrer" className="btn-whatsapp" data-hover aria-label={a.cta}>
                    <WaGlyph/><span>{a.cta}</span>
                  </a>
                </MagneticButton>
                <button type="button" className="btn-app-ghost" onClick={onNotify} data-hover>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
                  <span>{a.ctaApp}</span>
                </button>
                <span className="wa-note">{a.note}</span>
              </div>
            </Reveal>
          </div>

          {/* Colonne aperçu conversation (mockup WhatsApp) */}
          <Reveal delay={120} variant="scale" className="wa-stage">
            <div className="wa-phone">
              <div className="wa-screen">
                <div className="wa-head">
                  <span className="wa-ava"><img src="assets/logo.png" alt="FasoTravel"/></span>
                  <div>
                    <div className="wa-head-name">{a.chatName || "FasoTravel"}</div>
                    <div className="wa-head-status">{a.chatStatus}</div>
                  </div>
                  <span className="wa-head-icons" aria-hidden>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z"/></svg>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z"/></svg>
                  </span>
                </div>
                <div className="wa-thread">
                  {thread.map((m, i) => {
                    if (m.kind === "chips") {
                      return (
                        <div key={i} className="wa-chips">
                          {(m.items || []).map((c, j) => <span key={j} className="wa-chip">{c}</span>)}
                        </div>
                      );
                    }
                    if (m.kind === "ticket") {
                      return (
                        <div key={i} className="wa-bubble wa-in wa-ticket">
                          <span style={{ fontSize: 18 }}>🎟️</span><span>{m.text}</span>
                        </div>
                      );
                    }
                    const out = m.from === "user";
                    return (
                      <div key={i} className={`wa-bubble ${out ? "wa-out" : "wa-in"}`}>
                        {m.text}{out && <span className="wa-tick">✓✓</span>}
                      </div>
                    );
                  })}
                </div>
                <div className="wa-inputbar">
                  <span className="wa-input">{a.inputPlaceholder}</span>
                  <span className="wa-send" aria-hidden>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
                  </span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .wa-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
        .wa-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.4); color: #3ddc84; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
        .wa-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #25D366; display: inline-block; animation: waPulse 2.2s infinite; }
        @keyframes waPulse {
          0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
          70% { box-shadow: 0 0 0 8px rgba(37,211,102,0); }
          100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
        }
        .wa-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 32px; }
        .wa-point { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(244,236,224,.03); transition: border-color .2s ease, transform .2s ease; }
        .wa-point:hover { border-color: rgba(37,211,102,.4); transform: translateY(-2px); }
        .wa-point-ic { font-size: 21px; line-height: 1.15; flex: 0 0 auto; }
        .wa-point-t { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
        .wa-point-d { font-size: 12.5px; color: var(--cream-dim); line-height: 1.5; }
        .wa-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
        .btn-whatsapp {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 15px 26px; border-radius: 999px;
          background: #25D366; color: #06231a; font-weight: 700; font-size: 15px;
          text-decoration: none; box-shadow: 0 12px 32px -10px rgba(37,211,102,.6);
          transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .btn-whatsapp:hover { background: #22c35e; box-shadow: 0 16px 40px -10px rgba(37,211,102,.75); }
        .btn-app-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
        .btn-app-ghost:hover { border-color: var(--gold); color: var(--gold); }
        .wa-note { flex-basis: 100%; font-size: 12px; color: var(--cream-dim); margin-top: 2px; }
        .wa-stage { position: relative; display: flex; justify-content: center; }
        .wa-stage::before { content: ""; position: absolute; inset: -8% 0; background: radial-gradient(circle at 55% 42%, rgba(37,211,102,.22), transparent 62%); filter: blur(18px); z-index: 0; pointer-events: none; }
        .wa-phone { position: relative; z-index: 1; width: 332px; max-width: 88vw; border-radius: 36px; padding: 10px; background: linear-gradient(160deg, #2a2a2e, #0b0b0d); box-shadow: 0 44px 96px -38px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); }
        .wa-screen { border-radius: 27px; overflow: hidden; background: #0b141a; }
        .wa-head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #1f2c33; }
        .wa-ava { width: 40px; height: 40px; border-radius: 50%; background: #f4ece0; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
        .wa-ava img { width: 80%; height: 80%; object-fit: contain; }
        .wa-head-name { font-weight: 600; font-size: 14px; color: #e9edef; line-height: 1.2; }
        .wa-head-status { font-size: 11px; color: #8fb3a6; }
        .wa-head-icons { margin-left: auto; display: flex; gap: 15px; color: #aebac1; }
        .wa-thread {
          padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 332px;
          background-color: #0b141a;
          background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 0);
          background-size: 18px 18px;
        }
        .wa-bubble { max-width: 84%; padding: 8px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.46; box-shadow: 0 1px 1px rgba(0,0,0,.22); }
        .wa-out { align-self: flex-end; background: #005c4b; color: #e9edef; border-bottom-right-radius: 3px; }
        .wa-in { align-self: flex-start; background: #1f2c33; color: #e9edef; border-bottom-left-radius: 3px; }
        .wa-tick { color: #53bdeb; font-size: 10px; margin-left: 6px; vertical-align: -1px; }
        .wa-chips { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; max-width: 84%; }
        .wa-chip { background: #0e1c24; border: 1px solid rgba(37,211,102,.32); color: #d7efdf; border-radius: 9px; padding: 8px 11px; font-size: 12px; font-weight: 600; cursor: default; }
        .wa-ticket { display: flex; align-items: center; gap: 9px; background: #10371f; border: 1px solid rgba(37,211,102,.42); color: #e3fbe9; font-weight: 600; }
        .wa-inputbar { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: #1f2c33; }
        .wa-input { flex: 1; background: #2a3942; color: #8aa1ad; border-radius: 999px; padding: 9px 14px; font-size: 12.5px; }
        .wa-send { width: 34px; height: 34px; border-radius: 50%; background: #25D366; color: #06231a; display: grid; place-items: center; flex: 0 0 auto; }
        @media (max-width: 880px) {
          .wa-grid { grid-template-columns: 1fr; gap: 36px; }
          .wa-copy { order: 1; }          /* le texte d'abord… */
          .wa-stage { order: 2; }         /* …puis le mockup de conversation */
          .wa-points { margin: 26px 0 28px; }
        }
        @media (max-width: 620px) { .wa-points { grid-template-columns: 1fr; gap: 12px; } }
        @media (max-width: 560px) {
          .wa-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
          .wa-cta-row .magnetic { width: 100%; }
          .btn-whatsapp, .btn-app-ghost { width: 100%; justify-content: center; }
          .wa-note { margin-top: 6px; text-align: center; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { BurkinaMap, Destinations, StatsStrip, Operators, Vision, Payments, FAQ, FinalCTA, Footer, WhatsAppAgent });
