// sections.jsx — Mission, Features, Journey, Destinations, Operators, Vision
const { useState: sUseState, useEffect: sUseEffect, useRef: sUseRef } = React;

// ---------- PHONE MOCKUP ----------
function PhoneMockup({ children, style = {}, rotate = 0 }) {
  return (
    <div className="phone-frame" style={{ transform: `rotate(${rotate}deg)`, ...style }}>
      <div className="phone-notch" />
      <div className="phone-screen">{children}</div>
    </div>
  );
}

function PhoneSearchScreen() {
  const stories = [
    { label: "Réduction", grad: "linear-gradient(135deg, #fca5a5, #dc2626)", icon: "🎁" },
    { label: "Nouveautés", grad: "linear-gradient(135deg, #fcd34d, #f59e0b)", icon: "✨" },
    { label: "Destinations", grad: "linear-gradient(135deg, #93c5fd, #2563eb)", icon: "🌍" },
    { label: "Annonces", grad: "linear-gradient(135deg, #fda4af, #e11d48)", icon: "📣" },
  ];
  return (
    <div style={{ width: "100%", height: "100%", background: "#fafafa", color: "#0b0a08", padding: "38px 12px 64px", fontSize: 10, display: "flex", flexDirection: "column", overflow: "hidden", position: "relative" }}>
      {/* Status bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8, padding: "0 4px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "#0b0a08", fontWeight: 600 }}>09:41</div>
        <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
          <svg width="11" height="7" viewBox="0 0 18 12" fill="#0b0a08"><rect x="0" y="6" width="3" height="6"/><rect x="4" y="4" width="3" height="8"/><rect x="8" y="2" width="3" height="10"/><rect x="12" y="0" width="3" height="12"/></svg>
          <svg width="16" height="8" viewBox="0 0 22 12" fill="none" stroke="#0b0a08" strokeWidth="1.2"><rect x="1" y="1" width="18" height="10" rx="2"/><rect x="3" y="3" width="14" height="6" fill="#0b0a08"/></svg>
        </div>
      </div>

      {/* Top bar: search + icons */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10, padding: "0 2px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 3 }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, display: "grid", placeItems: "center", background: "#fff", border: "1px solid #fee2e2" }}>
            <div style={{ width: 14, height: 14, borderRadius: "50%", border: "1.5px solid #16a34a", position: "relative" }}>
              <div style={{ position: "absolute", width: 4, height: 4, background: "#dc2626", borderRadius: "50%", top: 2, left: 2 }}/>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 5 }}>
          <div style={{ width: 22, height: 22, borderRadius: "50%", background: "#fef2f2", display: "grid", placeItems: "center", border: "1px solid #fecaca" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#dc2626" strokeWidth="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="9" y1="22" x2="9" y2="18"/><line x1="15" y1="22" x2="15" y2="18"/></svg>
          </div>
          <div style={{ width: 22, height: 22, borderRadius: "50%", background: "#fef3c7", display: "grid", placeItems: "center", position: "relative", border: "1px solid #fde68a" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span style={{ position: "absolute", top: -2, right: -2, minWidth: 10, height: 10, borderRadius: "50%", background: "#dc2626", color: "#fff", fontSize: 6, display: "grid", placeItems: "center", fontWeight: 700, padding: "0 2px" }}>5</span>
          </div>
        </div>
      </div>

      {/* Stories */}
      <div style={{ display: "flex", justifyContent: "space-around", marginBottom: 10 }}>
        {stories.map((s, i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
            <div style={{ width: 40, height: 40, borderRadius: "50%", background: s.grad, display: "grid", placeItems: "center", padding: 2, boxShadow: "0 2px 6px rgba(0,0,0,.1)" }}>
              <div style={{ width: "100%", height: "100%", borderRadius: "50%", background: "#fff", display: "grid", placeItems: "center", fontSize: 16 }}>{s.icon}</div>
            </div>
            <div style={{ fontSize: 7, color: "#374151", maxWidth: 44, textAlign: "center", lineHeight: 1.1, fontWeight: 500 }}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* Greeting */}
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3, padding: "0 2px" }}>
        <div style={{ width: 20, height: 20, borderRadius: "50%", background: "linear-gradient(135deg, #f97316, #dc2626)", display: "grid", placeItems: "center", color: "#fff", fontSize: 9, fontWeight: 700 }}>N</div>
        <div style={{ fontSize: 8, color: "#374151" }}>Bonjour NAPON YAHASINE 👋</div>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: "#111827", marginBottom: 8, letterSpacing: "-0.01em", padding: "0 2px" }}>Réservez votre prochain voyage</div>

      {/* Search card */}
      <div style={{ background: "#fff", borderRadius: 14, padding: "11px 10px", border: "1px solid #f3f4f6", boxShadow: "0 6px 16px rgba(0,0,0,.06)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "#111827" }}>Recherche rapide</div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 3, fontSize: 8, color: "#dc2626", fontWeight: 600 }}>
            <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#dc2626" strokeWidth="2"><rect x="4" y="2" width="16" height="20" rx="2"/></svg>
            Compagnies
          </div>
        </div>
        {/* Tabs */}
        <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
          <div style={{ flex: 1, padding: "6px", borderRadius: 8, background: "linear-gradient(90deg, #dc2626, #ef4444)", color: "#fff", fontSize: 8, fontWeight: 600, textAlign: "center" }}>Aller simple</div>
          <div style={{ flex: 1, padding: "6px", borderRadius: 8, background: "#f9fafb", border: "1px solid #e5e7eb", color: "#6b7280", fontSize: 8, textAlign: "center" }}>Aller-retour</div>
        </div>
        {/* Fields */}
        {[
          { label: "D'où partez-vous ?", value: "Choisir la ville de départ", c: "#f59e0b", muted: true },
          { label: "Où allez-vous ?", value: "Choisir la ville d'arrivée", c: "#16a34a", muted: true },
        ].map((r, i) => (
          <div key={i} style={{ marginBottom: 6 }}>
            <div style={{ fontSize: 7, color: "#4b5563", marginBottom: 2 }}>{r.label}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 5, padding: "6px 7px", borderRadius: 8, border: "1px solid #e5e7eb", background: "#fff" }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill={r.c} stroke="none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/></svg>
              <div style={{ fontSize: 8, color: r.muted ? "#9ca3af" : "#111827", flex: 1 }}>{r.value}</div>
              <span style={{ fontSize: 7, color: "#9ca3af" }}>▾</span>
            </div>
          </div>
        ))}
        <div style={{ marginBottom: 6 }}>
          <div style={{ fontSize: 7, color: "#4b5563", marginBottom: 2 }}>Quand partez-vous ?</div>
          <div style={{ display: "flex", alignItems: "center", gap: 5, padding: "6px 7px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 8, color: "#9ca3af", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#dc2626" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>
              jj/mm/aaaa
            </div>
            <span style={{ fontSize: 9 }}>📅</span>
          </div>
        </div>
        <div style={{ marginBottom: 8 }}>
          <div style={{ fontSize: 7, color: "#4b5563", marginBottom: 2 }}>Combien de passagers ?</div>
          <div style={{ display: "flex", alignItems: "center", gap: 5, padding: "6px 7px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 8, color: "#111827", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
              1 passager
            </div>
            <span style={{ fontSize: 7, color: "#9ca3af" }}>▾</span>
          </div>
        </div>
        <div style={{
          padding: "9px", borderRadius: 999,
          background: "linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%)",
          color: "#fff", fontSize: 10, fontWeight: 600, textAlign: "center",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
          boxShadow: "0 6px 14px -4px rgba(245,158,11,.5)"
        }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          Rechercher des trajets
        </div>
        <div style={{ marginTop: 8, padding: "6px 10px", borderRadius: 999, background: "#dcfce7", color: "#15803d", fontSize: 7, textAlign: "center", fontWeight: 500 }}>
          ⓘ Besoin d'aide pour réserver ?
        </div>
      </div>

      {/* Bottom nav */}
      <PhoneBottomNav active="home"/>
    </div>
  );
}

function PhoneBottomNav({ active = "home" }) {
  const items = [
    { id: "home", label: "Accueil", icon: (c) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 0-4 0v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg> },
    { id: "gps", label: "GPS", icon: (c) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg> },
    { id: "fab" },
    { id: "support", label: "Support", icon: (c) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-6h3zM3 19a2 2 0 0 0 2 2h1v-6H3z"/></svg> },
    { id: "profile", label: "Profil", icon: (c) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> },
  ];
  return (
    <div style={{
      position: "absolute", left: 10, right: 10, bottom: 10,
      background: "#fff", borderRadius: 18, padding: "7px 8px",
      display: "flex", justifyContent: "space-around", alignItems: "flex-end",
      boxShadow: "0 6px 18px rgba(0,0,0,.08)", border: "1px solid #f3f4f6"
    }}>
      {items.map((it, i) => {
        if (it.id === "fab") {
          return (
            <div key={i} style={{
              width: 34, height: 34, borderRadius: "50%",
              background: "linear-gradient(135deg, #f97316, #dc2626)",
              display: "grid", placeItems: "center",
              boxShadow: "0 6px 14px -2px rgba(220,38,38,.5)",
              marginBottom: 8
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2">
                <path d="M15 5v2M15 11v2M15 17v2"/><path d="M4 4h16v6a2 2 0 0 0 0 4v6H4v-6a2 2 0 0 0 0-4z"/>
              </svg>
            </div>
          );
        }
        const color = active === it.id ? "#dc2626" : "#9ca3af";
        return (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, minWidth: 34 }}>
            {it.icon(color)}
            <span style={{ fontSize: 7, color, fontWeight: active === it.id ? 600 : 400 }}>{it.label}</span>
          </div>
        );
      })}
    </div>
  );
}

function PhoneSeatScreen() {
  // Grid: columns A B | aisle | C D, rows 1..11
  const cols = ["A", "B", "C", "D"];
  const rows = 11;
  const unavailable = new Set(["B2", "C1", "D3", "A7", "D6"]);
  const selected = new Set(["B5"]);
  const reserving = new Set(["C7"]);
  return (
    <div style={{ width: "100%", height: "100%", background: "#f7f7f7", color: "#0b0a08", padding: "38px 0 64px", fontSize: 10, position: "relative", overflow: "hidden" }}>
      {/* Status bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5, padding: "0 14px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "#0b0a08", fontWeight: 600 }}>09:41</div>
        <div style={{ display: "flex", gap: 3 }}>
          <span style={{ width: 10, height: 6, background: "#0b0a08", borderRadius: 1 }} />
          <span style={{ width: 14, height: 6, border: "1px solid #0b0a08", borderRadius: 1 }} />
        </div>
      </div>
      {/* Progress header: Étape 2 sur 4 */}
      <div style={{ padding: "0 14px", display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5, fontSize: 8 }}>
        <span style={{ color: "#374151" }}>Étape 2 sur 4</span>
        <span style={{ color: "#f59e0b", fontWeight: 600 }}>Choisir la place</span>
      </div>
      {/* Tricolor progress */}
      <div style={{ height: 4, background: "#f3f4f6", margin: "0 14px 0", borderRadius: 999, overflow: "hidden" }}>
        <div style={{ height: "100%", width: "50%", background: "linear-gradient(90deg, #dc2626, #f59e0b, #16a34a)", borderRadius: 999 }}/>
      </div>

      {/* Tricolor banner */}
      <div style={{
        margin: "10px 0 10px",
        padding: "10px 14px",
        background: "linear-gradient(90deg, #dc2626 0%, #ea580c 30%, #f59e0b 55%, #65a30d 78%, #16a34a 100%)",
        color: "#fff"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 7, opacity: .9 }}>
          <span style={{ fontSize: 8 }}>←</span> Retour aux trajets
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4, letterSpacing: "-0.01em" }}>Choisissez votre place</div>
        <div style={{ fontSize: 8, opacity: .95, marginTop: 1 }}>Ouagadougou → Bobo-Dioulasso</div>
      </div>

      {/* Seat grid card */}
      <div style={{ margin: "0 12px", background: "#fff", borderRadius: 12, padding: "10px 8px", border: "1px solid #f3f4f6", boxShadow: "0 4px 12px rgba(0,0,0,.04)" }}>
        {/* Column labels with aisle */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 14px 1fr 1fr", gap: 3, marginBottom: 4, padding: "0 4px", fontSize: 6, color: "#9ca3af", textAlign: "center" }}>
          {cols.slice(0,2).map(c => <div key={c}>{c}</div>)}
          <div/>
          {cols.slice(2).map(c => <div key={c}>{c}</div>)}
        </div>

        {Array.from({ length: rows }).map((_, rIdx) => {
          const r = rIdx + 1;
          return (
            <div key={r} style={{ display: "grid", gridTemplateColumns: "1fr 1fr 14px 1fr 1fr", gap: 3, marginBottom: 3 }}>
              {[0,1,-1,2,3].map((colIdx, i) => {
                if (colIdx === -1) return <div key={i}/>;
                const seat = `${cols[colIdx]}${r}`;
                const isUnavail = unavailable.has(seat);
                const isSel = selected.has(seat);
                const isRes = reserving.has(seat);
                let bg = "#fff", color = "#374151", border = "1px solid #d1d5db";
                if (isUnavail) { bg = "#f3f4f6"; color = "#d1d5db"; border = "1px solid #e5e7eb"; }
                if (isSel) { bg = "#16a34a"; color = "#fff"; border = "1px solid #16a34a"; }
                if (isRes) { bg = "#fef3c7"; color = "#d97706"; border = "1px solid #fde68a"; }
                return (
                  <div key={i} style={{
                    aspectRatio: "1", maxHeight: 20,
                    borderRadius: 5, background: bg, color, border,
                    display: "grid", placeItems: "center", fontSize: 6, fontWeight: 600
                  }}>{seat}</div>
                );
              })}
            </div>
          );
        })}
      </div>

      {/* Legend */}
      <div style={{ padding: "8px 14px 0", fontSize: 7, color: "#4b5563" }}>
        <div style={{ marginBottom: 3, fontWeight: 500 }}>Légende :</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 9, height: 9, background: "#fff", border: "1px solid #d1d5db", borderRadius: 2 }}/> Disponible
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 9, height: 9, background: "#16a34a", borderRadius: 2 }}/> Sélectionné
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 9, height: 9, background: "#f3f4f6", borderRadius: 2 }}/> Occupé
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 9, height: 9, background: "#fef3c7", border: "1px solid #fde68a", borderRadius: 2 }}/> En réservation
          </div>
        </div>
      </div>

      {/* Continuer CTA fixed above bottom nav */}
      <div style={{ position: "absolute", left: 12, right: 12, bottom: 72 }}>
        <div style={{
          padding: "9px", borderRadius: 999,
          background: "linear-gradient(90deg, #dc2626, #f59e0b, #16a34a)",
          color: "#fff", fontSize: 10, fontWeight: 600, textAlign: "center",
          boxShadow: "0 6px 14px -4px rgba(245,158,11,.5)"
        }}>Continuer vers le paiement</div>
      </div>
      <PhoneBottomNav active="home"/>
    </div>
  );
}

function PhoneTicketScreen() {
  return (
    <div style={{ width: "100%", height: "100%", background: "linear-gradient(180deg, #1a1612, #0b0a08)", color: "#f4ece0", padding: "46px 16px 16px", fontSize: 11 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "#c9bfae", textAlign: "center", marginBottom: 10 }}>VOTRE BILLET</div>

      <div style={{ background: "#f4ece0", color: "#0b0a08", borderRadius: 14, overflow: "hidden", position: "relative" }}>
        <div style={{ padding: "14px 14px 10px", borderBottom: "1px dashed #c9bfae" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 8, color: "#7a715f", letterSpacing: "0.1em", textTransform: "uppercase" }}>De</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1 }}>Ouaga</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", color: "#dc2626" }}>
              <svg width="40" height="16" viewBox="0 0 40 16"><path d="M0 8 L34 8 M28 3 L34 8 L28 13" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 8, color: "#7a715f", letterSpacing: "0.1em", textTransform: "uppercase" }}>À</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1 }}>Bobo</div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9 }}>
            <div><div style={{ color: "#7a715f" }}>Date</div><div style={{ fontWeight: 600 }}>26 avril</div></div>
            <div><div style={{ color: "#7a715f" }}>Départ</div><div style={{ fontWeight: 600 }}>14:30</div></div>
            <div><div style={{ color: "#7a715f" }}>Siège</div><div style={{ fontWeight: 600 }}>5, 8</div></div>
          </div>
        </div>
        <div className="ticket-perf" style={{ height: 14 }}/>
        <div style={{ padding: 14, display: "flex", gap: 10 }}>
          {/* Fake QR */}
          <div style={{ width: 64, height: 64, background: "#0b0a08", borderRadius: 6, position: "relative" }}>
            <svg width="64" height="64" viewBox="0 0 8 8">
              {Array.from({ length: 64 }).map((_, i) => {
                const x = i % 8, y = Math.floor(i / 8);
                const filled = (i * 37 + 13) % 3 !== 0 || (x === 0 && y === 0) || (x === 7 && y === 0) || (x === 0 && y === 7);
                return filled ? <rect key={i} x={x} y={y} width="1" height="1" fill="#f4ece0"/> : null;
              })}
              <rect x="0" y="0" width="3" height="3" fill="none" stroke="#f4ece0" strokeWidth="0.3"/>
              <rect x="5" y="0" width="3" height="3" fill="none" stroke="#f4ece0" strokeWidth="0.3"/>
              <rect x="0" y="5" width="3" height="3" fill="none" stroke="#f4ece0" strokeWidth="0.3"/>
            </svg>
          </div>
          <div style={{ fontSize: 9, color: "#3d362b", flex: 1 }}>
            <div style={{ fontWeight: 600, marginBottom: 3 }}>Aïcha Sawadogo</div>
            <div style={{ fontFamily: "var(--font-mono)" }}>FT-2604-A8B9C2</div>
            <div style={{ marginTop: 6, color: "#16a34a", fontWeight: 600 }}>✓ Confirmé</div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 14, textAlign: "center", fontSize: 9, color: "#7a715f" }}>Disponible hors-ligne · PDF · SMS</div>
    </div>
  );
}

// ---------- My Tickets list screen ----------
function PhoneTicketsListScreen() {
  const tickets = [
    { co: "STAF", code: "ST7H851940", from: "Ouagadougou", to: "Bobo-Dioulasso", dep: "07:05", arr: "13:05", date: "05/12/2025", seat: "A12", status: "Actif" },
    { co: "Rakiéta", code: "RK9K1234AB", from: "Ouagadougou", to: "Bobo-Dioulasso", dep: "09:05", arr: "14:55", date: "02/12/2025", seat: "B05", status: "Embarqué" },
    { co: "TSR Voyages", code: "TS5M5432EF", from: "Ouagadougou", to: "Koudougou", dep: "15:30", arr: "17:10", date: "15/11/2025", seat: "D10", status: "Actif" },
  ];
  const statusColor = (s) => s === "Actif" ? { bg: "#dcfce7", fg: "#15803d" } : s === "Embarqué" ? { bg: "#dbeafe", fg: "#1d4ed8" } : { bg: "#f3f4f6", fg: "#6b7280" };
  return (
    <div style={{ width: "100%", height: "100%", background: "#f7f7f7", color: "#0b0a08", padding: "38px 0 64px", fontSize: 10, position: "relative", overflow: "hidden" }}>
      {/* Status bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6, padding: "0 14px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "#0b0a08", fontWeight: 600 }}>09:41</div>
        <div style={{ display: "flex", gap: 3 }}>
          <svg width="11" height="7" viewBox="0 0 18 12" fill="#0b0a08"><rect x="0" y="6" width="3" height="6"/><rect x="4" y="4" width="3" height="8"/><rect x="8" y="2" width="3" height="10"/><rect x="12" y="0" width="3" height="12"/></svg>
        </div>
      </div>
      {/* Header tricolor banner */}
      <div style={{
        margin: "4px 0 10px",
        padding: "14px 14px 16px",
        background: "linear-gradient(90deg, #dc2626 0%, #ea580c 28%, #f59e0b 55%, #65a30d 78%, #16a34a 100%)",
        color: "#fff"
      }}>
        <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: "-0.02em" }}>Mes billets</div>
      </div>

      {/* Search */}
      <div style={{ margin: "0 12px 8px", padding: "7px 10px", background: "#fff", borderRadius: 999, border: "1px solid #f3f4f6", display: "flex", alignItems: "center", gap: 6 }}>
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <span style={{ fontSize: 8, color: "#9ca3af" }}>Rechercher par compagnie...</span>
      </div>
      {/* Data sync card */}
      <div style={{ margin: "0 12px 8px", padding: "8px 10px", background: "#fff", borderRadius: 10, border: "1px solid #f3f4f6", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 8, fontWeight: 600 }}>Données</div>
          <div style={{ fontSize: 7, color: "#6b7280" }}>Source : en ligne</div>
          <div style={{ fontSize: 6, color: "#9ca3af" }}>Dernière sync : 23/04/2026 23:17</div>
        </div>
        <div style={{ padding: "4px 9px", border: "1px solid #e5e7eb", borderRadius: 999, fontSize: 7, color: "#374151", fontWeight: 500 }}>Synchroniser</div>
      </div>

      {/* Tabs */}
      <div style={{ margin: "0 12px 6px", display: "flex", gap: 4, fontSize: 7, fontWeight: 500 }}>
        {[
          { l: "Actifs (2)", active: true },
          { l: "Embarqués (1)" },
          { l: "Annulés (1)" },
          { l: "Expirés (10)" },
        ].map((t, i) => (
          <div key={i} style={{
            padding: "5px 8px", borderRadius: 999,
            background: t.active ? "#fff" : "transparent",
            border: t.active ? "1px solid #f59e0b" : "1px solid #e5e7eb",
            color: t.active ? "#d97706" : "#6b7280",
          }}>{t.l}</div>
        ))}
      </div>

      {/* Tickets list */}
      <div style={{ margin: "6px 12px", display: "flex", flexDirection: "column", gap: 6, maxHeight: 178, overflow: "hidden" }}>
        {tickets.map((tk, i) => {
          const sc = statusColor(tk.status);
          return (
            <div key={i} style={{ padding: "9px 10px", background: "#fff", borderRadius: 12, border: "1px solid #f3f4f6" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
                  <div style={{ width: 16, height: 16, borderRadius: 4, background: "#fef3c7", display: "grid", placeItems: "center", fontSize: 9 }}>🚌</div>
                  <div>
                    <div style={{ fontSize: 8, fontWeight: 700 }}>{tk.co}</div>
                    <div style={{ fontSize: 6, color: "#9ca3af", fontFamily: "var(--font-mono)" }}>{tk.code}</div>
                  </div>
                </div>
                <div style={{ padding: "2px 6px", background: sc.bg, color: sc.fg, fontSize: 6, borderRadius: 999, fontWeight: 600 }}>{tk.status}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 3 }}>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, color: "#111827" }}>{tk.dep}</div>
                  <div style={{ fontSize: 7, color: "#6b7280" }}>{tk.from}</div>
                </div>
                <div style={{ flex: 1, margin: "0 8px", display: "flex", alignItems: "center", gap: 2 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#16a34a" }}/>
                  <div style={{ flex: 1, height: 1, background: "#e5e7eb", backgroundImage: "repeating-linear-gradient(90deg, #d1d5db 0 3px, transparent 3px 6px)" }}/>
                  <svg width="7" height="7" viewBox="0 0 24 24" fill="#dc2626"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/></svg>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: "#111827" }}>{tk.arr}</div>
                  <div style={{ fontSize: 7, color: "#6b7280" }}>{tk.to}</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 10, fontSize: 7, color: "#6b7280" }}>
                <span>🗓 {tk.date}</span>
                <span>Siège {tk.seat}</span>
              </div>
            </div>
          );
        })}
      </div>

      <PhoneBottomNav active="profile"/>
    </div>
  );
}

Object.assign(window, { PhoneTicketsListScreen });

// ---------- DIORAMA 3D — scène de voyage immersive ----------
function Diorama3D() {
  const y = sUseState ? 0 : 0;
  const scrollY = useScrollY();
  // Parallax per layer
  return (
    <div className="diorama" aria-hidden>
      {/* Sky gradient with late-afternoon atmosphere */}
      <div className="dio-sky"/>
      {/* Sun disk */}
      <div className="dio-sun"/>
      {/* Heat shimmer horizon */}
      <div className="dio-horizon"/>
      {/* Distant mountains (far plane) */}
      <svg className="dio-mountains-far" viewBox="0 0 1600 200" preserveAspectRatio="none">
        <path d="M0 170 L100 120 L180 140 L260 90 L360 130 L480 80 L580 120 L680 100 L800 140 L920 90 L1040 130 L1160 80 L1280 120 L1400 100 L1520 130 L1600 120 L1600 200 L0 200 Z"
              fill="url(#dio-far)"/>
        <defs>
          <linearGradient id="dio-far" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#6b4f3a" stopOpacity=".35"/>
            <stop offset="1" stopColor="#2a1f16" stopOpacity=".85"/>
          </linearGradient>
        </defs>
      </svg>

      {/* Mid hills */}
      <svg className="dio-hills-mid" viewBox="0 0 1600 200" preserveAspectRatio="none">
        <path d="M0 160 Q200 110 400 130 T800 120 T1200 135 T1600 125 L1600 200 L0 200 Z" fill="#1c140d"/>
      </svg>

      {/* Baobabs mid-ground */}
      <div className="dio-baobabs">
        {[
          { left: "8%",  scale: .6, z: -1 },
          { left: "18%", scale: .4, z: -1.5 },
          { left: "78%", scale: .55, z: -1 },
          { left: "88%", scale: .45, z: -1.3 },
        ].map((b, i) => (
          <svg key={i} className="dio-baobab" style={{
            left: b.left, transform: `translateZ(${b.z * 40}px) scale(${b.scale})`,
          }} viewBox="0 0 120 160" width="120" height="160">
            <defs>
              <radialGradient id={`baobab-${i}`} cx="0.35" cy="0.3">
                <stop offset="0" stopColor="#1a1310"/>
                <stop offset="1" stopColor="#050403"/>
              </radialGradient>
            </defs>
            <ellipse cx="60" cy="155" rx="40" ry="4" fill="rgba(0,0,0,.5)"/>
            <rect x="50" y="60" width="20" height="90" rx="4" fill={`url(#baobab-${i})`}/>
            <path d="M60 70 Q20 55 8 30 Q28 22 48 42 Q55 22 60 10 Q72 30 80 22 Q108 25 112 48 Q108 62 84 68 Q75 75 60 70Z"
                  fill={`url(#baobab-${i})`}/>
            <path d="M30 35 Q22 20 18 10" stroke="#1a1310" strokeWidth="1.5" fill="none" opacity=".6"/>
            <path d="M95 38 Q100 22 105 14" stroke="#1a1310" strokeWidth="1.5" fill="none" opacity=".6"/>
          </svg>
        ))}
      </div>

      {/* Road stretching to vanishing point */}
      <div className="dio-road">
        <div className="dio-road-surface"/>
        <div className="dio-road-line"/>
        <div className="dio-road-edges"/>
      </div>

      {/* Aerial route line (replaces bus) — premium, sobre */}
      <svg className="dio-route-svg" viewBox="0 0 1600 600" preserveAspectRatio="none" aria-hidden>
        <defs>
          <linearGradient id="route-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#dc2626" stopOpacity="0"/>
            <stop offset="0.15" stopColor="#dc2626" stopOpacity="0.9"/>
            <stop offset="0.5" stopColor="#f59e0b" stopOpacity="1"/>
            <stop offset="0.85" stopColor="#16a34a" stopOpacity="0.9"/>
            <stop offset="1" stopColor="#16a34a" stopOpacity="0"/>
          </linearGradient>
          <filter id="route-glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="6"/>
          </filter>
        </defs>
        {/* Glow underneath */}
        <path d="M 60 420 Q 400 360 800 380 T 1540 360"
              stroke="url(#route-grad)" strokeWidth="14" fill="none" filter="url(#route-glow)" opacity="0.5"/>
        {/* Crisp route line */}
        <path d="M 60 420 Q 400 360 800 380 T 1540 360"
              stroke="url(#route-grad)" strokeWidth="2.5" fill="none" strokeDasharray="6 8"
              className="dio-route-dash"/>
        {/* Origin & destination pins */}
        <g transform="translate(60 420)">
          <circle r="14" fill="#dc2626" opacity="0.25" className="dio-pin-pulse"/>
          <circle r="6" fill="#dc2626"/>
          <circle r="2.5" fill="#fff"/>
        </g>
        <g transform="translate(1540 360)">
          <circle r="14" fill="#16a34a" opacity="0.25" className="dio-pin-pulse"/>
          <circle r="6" fill="#16a34a"/>
          <circle r="2.5" fill="#fff"/>
        </g>
        {/* Travelling light bead */}
        <circle r="5" fill="#fbbf24" className="dio-route-bead">
          <animate attributeName="r" values="5;7;5" dur="1.6s" repeatCount="indefinite"/>
        </circle>
      </svg>

      {/* Route tag overlays */}
      <div className="dio-tag dio-tag-a">
        <span className="tag-dot" style={{ background: "#dc2626" }}/>
        <span className="font-mono">OUAGADOUGOU · 14:30</span>
      </div>
      <div className="dio-tag dio-tag-b">
        <span className="tag-dot" style={{ background: "#16a34a" }}/>
        <span className="font-mono">BOBO-DIOULASSO · 19:45</span>
      </div>
      <div className="dio-tag dio-tag-c">
        <span className="font-mono">365 KM · CLIMATISÉ · WIFI · PREMIUM</span>
      </div>

      {/* Subtle grain */}
      <div className="dio-grain"/>
    </div>
  );
}

// ---------- MISSION ----------
function Mission({ t }) {
  return (
    <section id="mission" className="section snap">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <FlagDot size={8}/>
            <span>{t.mission.eyebrow}</span>
          </div>
        </Reveal>
        <div className="grid-2" style={{ gap: 60, alignItems: "start" }}>
          <div>
            <Reveal delay={100}>
              <h2 className="h2" style={{ marginBottom: 24 }}>{t.mission.title}</h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="lead">{t.mission.problem}</p>
            </Reveal>
          </div>
          <div>
            <Reveal delay={300}>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold)", marginBottom: 16 }}>→ {t.mission.solution}</div>
            </Reveal>
            <Reveal delay={400}>
              <p className="lead" style={{ color: "var(--cream)" }}>{t.mission.solutionText}</p>
            </Reveal>
            <Reveal delay={500}>
              <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 10 }}>
                {t.mission.badges.map((b, i) => (
                  <span key={i} style={{ padding: "8px 14px", borderRadius: 999, border: "1px solid var(--line-2)", fontSize: 12, color: "var(--cream-dim)", background: "rgba(244,236,224,.03)" }}>{b}</span>
                ))}
              </div>
            </Reveal>
          </div>
        </div>

        {/* Photo réelle d'un intérieur de car premium — incarne directement
            l'expérience de voyage. Plus parlante qu'un diorama illustratif. */}
        <Reveal delay={500}>
          <figure className="ouaga-aerial-frame">
            <img src="assets/ouaga-aerial.jpg?v=2" alt="Intérieur d'un car premium FasoTravel" loading="lazy"/>
            <figcaption>
              <span className="ouaga-aerial-label">Le confort à bord</span>
              <span className="ouaga-aerial-sub">Sièges premium · Climatisation · WiFi · Espace</span>
            </figcaption>
          </figure>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- FEATURES ----------
// La section porte la démo interactive principale : la vraie app FasoTravel
// embarquée dans un cadre téléphone, entourée de cartes "features" qui
// expliquent ce que l'utilisateur peut faire dans l'app.
// Plus de PhoneMockup illustratif (cyclage faux écrans SVG) — remplacé par
// MobileDemoFrame (iframe vers mobile-demo/?demo=1).
function Features({ t, onNotify }) {
  const lang = (window.FT_T === window.FT_I18N?.fr) ? "fr" : "en";

  return (
    <section id="features" className="section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.features.eyebrow}</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h2" style={{ marginBottom: 24, maxWidth: "14ch" }}>{t.features.title}</h2>
        </Reveal>
        <Reveal delay={150}>
          <p className="lead" style={{ marginBottom: 56, maxWidth: "62ch" }}>
            {lang === "fr"
              ? "Cliquez à l'intérieur du téléphone — c'est l'application réelle, en mode démo. Vous pouvez réellement réserver un billet."
              : "Tap inside the phone — it's the actual app in demo mode. You can really book a ticket."}
          </p>
        </Reveal>

        <div className="features-grid features-grid-demo">
          {/* Left features (3 premières) */}
          <div className="features-col">
            {t.features.list.slice(0, 3).map((f, i) => (
              <Reveal key={i} delay={i * 100}>
                <div className="card" data-hover>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                    <span className="font-mono" style={{ fontSize: 10, color: "var(--gold)", letterSpacing: "0.14em" }}>0{i+1}</span>
                    <h3 className="h3">{f.t}</h3>
                  </div>
                  <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.55 }}>{f.d}</p>
                </div>
              </Reveal>
            ))}
          </div>

          {/* Démo iframe au centre — la vraie app Mobile */}
          <Reveal delay={200}>
            <div className="features-demo-stage">
              <div className="features-demo-glow"/>
              <MobileDemoFrame size="md" lang={lang}/>
            </div>
          </Reveal>

          {/* Right features (3 suivantes) */}
          <div className="features-col">
            {t.features.list.slice(3).map((f, i) => (
              <Reveal key={i} delay={i * 100 + 200}>
                <div className="card" data-hover>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                    <span className="font-mono" style={{ fontSize: 10, color: "var(--gold)", letterSpacing: "0.14em" }}>0{i+4}</span>
                    <h3 className="h3">{f.t}</h3>
                  </div>
                  <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.55 }}>{f.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 1100px) {
            .features-grid { grid-template-columns: 1fr !important; }
            .features-grid > div:nth-child(2) { order: -1; margin-bottom: 40px; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ---------- JOURNEY ----------
function Journey({ t }) {
  return (
    <section id="journey" className="section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}><FlagDot size={8}/><span>{t.journey.eyebrow}</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h2" style={{ marginBottom: 60 }}>{t.journey.title}</h2>
        </Reveal>

        <div className="grid-4" style={{ gap: 16 }}>
          {t.journey.steps.map((s, i) => (
            <Reveal key={i} delay={i * 120}>
              <div style={{
                padding: 28, borderRadius: 20,
                background: i === 0 ? "linear-gradient(180deg, rgba(220,38,38,.12), rgba(220,38,38,.02))" :
                          i === 1 ? "linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.02))" :
                          i === 2 ? "linear-gradient(180deg, rgba(22,163,74,.12), rgba(22,163,74,.02))" :
                          "linear-gradient(180deg, rgba(244,236,224,.05), rgba(244,236,224,.015))",
                border: "1px solid var(--line-2)",
                position: "relative", minHeight: 220
              }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 72, lineHeight: 0.9, color: "transparent",
                  WebkitTextStroke: "1px " + (i===0?"#dc2626":i===1?"#f59e0b":i===2?"#16a34a":"#7a715f"), marginBottom: 20 }}>{s.n}</div>
                <h3 className="h3" style={{ marginBottom: 10 }}>{s.t}</h3>
                <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.5 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PhoneMockup, PhoneSearchScreen, PhoneSeatScreen, PhoneTicketScreen, Mission, Features, Journey, Diorama3D });
