/* EasyFly — shared UI components (typed) */
;(() => {
const Ic = window.Ic;

interface NavProps { go: (s: ScreenName) => void; active?: ScreenName | null; }

function Logo({ onClick }: { onClick?: () => void }) {
  return (
    <div className="logo" onClick={onClick} role="button">
      <div className="logo-mark">
        <Ic.PlaneDiag s={22} c="#fff" />
      </div>
      <div className="logo-word">easy<span className="fly">fly</span></div>
    </div>
  );
}

function TopNav({ go, active }: NavProps) {
  const links: [string, ScreenName | null][] =
    [["Réserver", "home"], ["Mes vols", null], ["Enregistrement", null], ["Fidélité", null], ["Aide", null]];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <Logo onClick={() => go("home")} />
        <div className="nav-links">
          {links.map(([label, dest]) => (
            <a key={label} href="#"
               onClick={(e) => { e.preventDefault(); if (dest) go(dest); }}
               style={active === dest ? { color: "var(--accent)" } : undefined}>{label}</a>
          ))}
        </div>
        <div className="nav-right">
          <span className="mono" style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-500)" }}>FR · EUR</span>
          <button className="btn btn-ghost" style={{ padding: "9px 16px", fontSize: 14 }}>
            <Ic.User s={16} /> Connexion
          </button>
        </div>
      </div>
    </nav>
  );
}

interface RouteArcProps { from?: string; to?: string; dur: string; stops: number; w?: number; light?: boolean; }

function RouteArc({ dur, stops, w = 220, light }: RouteArcProps) {
  const ink: string = light ? "rgba(255,255,255,.55)" : "var(--ink-400)";
  const dot: string = light ? "#fff" : "var(--navy-700)";
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: w, flex: "0 0 auto" }}>
      <svg width={w} height="34" viewBox={`0 0 ${w} 34`} fill="none" style={{ overflow: "visible" }}>
        <circle cx="6" cy="26" r="4" fill={dot} />
        <path d={`M10 26 Q ${w/2} -6 ${w-10} 26`} stroke={ink} strokeWidth="1.6" strokeDasharray="2 4" strokeLinecap="round" fill="none" />
        <circle cx={w-6} cy="26" r="4" fill={dot} />
        <g transform={`translate(${w/2 - 9}, 0) rotate(45 9 9)`}>
          <Ic.PlaneDiag s={18} c={light ? "#fff" : "var(--accent)"} />
        </g>
      </svg>
      <div className="mono" style={{ fontSize: 11.5, color: ink, marginTop: 2, letterSpacing: ".03em" }}>
        {dur}{stops === 0 ? " · direct" : ` · ${stops} escale`}
      </div>
    </div>
  );
}

function Stepper({ step }: { step: number }) {
  const steps: string[] = ["Recherche", "Vol", "Siège", "Paiement"];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{
              width: 24, height: 24, borderRadius: 999, display: "grid", placeItems: "center",
              fontSize: 12.5, fontWeight: 800, fontFamily: "var(--font-mono)",
              background: i <= step ? "var(--accent)" : "var(--sky-100)",
              color: i <= step ? "#fff" : "var(--ink-400)",
            }}>{i < step ? "✓" : i + 1}</span>
            <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: "-.01em",
              color: i <= step ? "var(--ink-900)" : "var(--ink-400)" }}>{s}</span>
          </div>
          {i < steps.length - 1 && <span style={{ width: 22, height: 2, borderRadius: 2,
            background: i < step ? "var(--accent)" : "var(--line)" }} />}
        </React.Fragment>
      ))}
    </div>
  );
}

function Footer() {
  const cols: [string, string[]][] = [
    ["EasyFly", ["À propos", "Carrières", "Engagements", "Presse"]],
    ["Voyager", ["Destinations", "Bagages", "Familles", "Mobilité réduite"]],
    ["Aide", ["Centre d'aide", "Modifier un vol", "Remboursement", "Contact"]],
  ];
  return (
    <footer style={{ background: "var(--navy-900)", color: "rgba(255,255,255,.8)", marginTop: 64 }}>
      <div className="wrap" style={{ padding: "52px 28px 34px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 32 }}>
          <div>
            <Logo />
            <p style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 250, marginTop: 16, color: "rgba(255,255,255,.6)" }}>
              La compagnie qui rapproche les villes d'Europe et du monde. 220 destinations, une flotte renouvelée.
            </p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14.5, marginBottom: 14, color: "#fff" }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map((it) => (
                  <a key={it} href="#" onClick={(e)=>e.preventDefault()}
                     style={{ fontSize: 13.5, color: "rgba(255,255,255,.6)", textDecoration: "none" }}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 40, paddingTop: 22,
          borderTop: "1px solid rgba(255,255,255,.12)", fontSize: 12.5, color: "rgba(255,255,255,.5)" }}>
          <span>© 2026 EasyFly — site de démonstration fictif</span>
          <span style={{ marginLeft: "auto" }}>Mentions légales · Confidentialité · Cookies</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, TopNav, RouteArc, Stepper, Footer });
})();