/* global React, PageHeader, PhotoPH, FadeUp */

function PageStand({ onNav }) {
  const [filter, setFilter] = React.useState("Tous");
  const filters = [
    "Tous",
    "Débutant",
    "Intermédiaire",
    "Avancé",
    "Spécialiste",
  ];

  // Disciplines réelles pratiquées au stand de Saint-Georges
  const disciplines = [
    {
      id: "F300",
      dist: "300m",
      cibles: "20",
      arme: "Fusil standard / d'assaut",
      niveau: "Avancé",
      niveauColor: "red",
      desc: "Tir longue distance, position couchée. Discipline reine.",
      cat: ["Avancé", "Spécialiste"],
    },
    {
      id: "P50",
      dist: "50m",
      cibles: "12",
      arme: "Pistolet libre / sport",
      niveau: "Tous",
      niveauColor: "gold",
      desc: "Pistolet à 50 mètres, debout, bras tendu.",
      cat: ["Intermédiaire", "Avancé"],
    },
    {
      id: "P25",
      dist: "25m",
      cibles: "8",
      arme: "Pistolet sport · vitesse",
      niveau: "Spécialiste",
      niveauColor: "red",
      desc: "Tir rapide sur cibles basculantes. Discipline olympique.",
      cat: ["Spécialiste"],
    },
    {
      id: "C50",
      dist: "50m",
      cibles: "12",
      arme: "Carabine 50m",
      niveau: "Tous",
      niveauColor: "gold",
      desc: "Carabine 50 mètres, ambiance club, matches en musique.",
      cat: ["Intermédiaire"],
    },
    {
      id: "C10",
      dist: "10m",
      cibles: "24",
      arme: "Carabine air comprimé",
      niveau: "Débutant OK",
      niveauColor: "green",
      desc: "Idéal pour débuter. Précision absolue, indoor.",
      cat: ["Débutant", "Intermédiaire"],
    },
    {
      id: "P10",
      dist: "10m",
      cibles: "24",
      arme: "Pistolet air comprimé",
      niveau: "Débutant OK",
      niveauColor: "green",
      desc: "Discipline d'apprentissage et de compétition olympique.",
      cat: ["Débutant", "Intermédiaire"],
    },
    {
      id: "PN",
      dist: "50m",
      cibles: "8",
      arme: "Poudre noire historique",
      niveau: "Intermédiaire",
      niveauColor: "gold",
      desc: "Tir à la poudre noire, pistolets et carabines historiques.",
      cat: ["Intermédiaire", "Avancé"],
    },
  ];

  const visible =
    filter === "Tous"
      ? disciplines
      : disciplines.filter((d) => d.cat.includes(filter));

  return (
    <div>
      <div className="container-wide">
        <PageHeader
          eyebrow="Le stand"
          title="Quel pas de tir"
          italic="vous correspond ?"
          subtitle="Sept disciplines pratiquées à Saint-Georges, du tir à air comprimé pour s'initier au fusil 300 mètres. Chacune a son rythme, ses règles et son matériel — voici comment les choisir."
        />

        <div
          style={{
            display: "flex",
            gap: 8,
            flexWrap: "wrap",
            margin: "8px 0 32px",
          }}
        >
          {filters.map((f) => (
            <button
              key={f}
              className={"chip" + (filter === f ? " active" : "")}
              onClick={() => setFilter(f)}
            >
              {f}
            </button>
          ))}
          <span
            className="tag-mono"
            style={{ marginLeft: "auto", alignSelf: "center" }}
          >
            {visible.length} disciplines
          </span>
        </div>

        {/* TABLE */}
        <div
          style={{
            overflowX: "auto",
            border: "1px solid var(--hairline)",
            background: "var(--white)",
          }}
          className="hide-mobile"
        >
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: "18%" }}>Discipline</th>
                <th>Distance</th>
                <th>Cibles</th>
                <th style={{ width: "22%" }}>Arme</th>
                <th>Niveau</th>
                <th style={{ width: "28%" }}>Résumé</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {visible.map((d) => (
                <tr key={d.id}>
                  <td>
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 12 }}
                    >
                      <span
                        style={{
                          width: 4,
                          height: 28,
                          background: "var(--accent)",
                        }}
                      />
                      <span
                        style={{
                          fontFamily: "var(--display)",
                          fontSize: 22,
                          fontWeight: 600,
                        }}
                      >
                        {d.id}
                      </span>
                    </div>
                  </td>
                  <td className="mono">{d.dist}</td>
                  <td className="mono">{d.cibles}</td>
                  <td style={{ fontSize: 13 }}>{d.arme}</td>
                  <td>
                    <span
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 8,
                        fontFamily: "var(--mono)",
                        fontSize: 11,
                        letterSpacing: "0.08em",
                        textTransform: "uppercase",
                      }}
                    >
                      <span className={"dot " + d.niveauColor} />
                      {d.niveau}
                    </span>
                  </td>
                  <td style={{ fontSize: 13, color: "var(--gray)" }}>
                    {d.desc}
                  </td>
                  <td>
                    <button
                      className="btn btn-ghost-gold"
                      style={{ padding: "8px 14px", fontSize: 12 }}
                    >
                      Réserver →
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* mobile cards */}
        <div
          className="show-mobile"
          style={{ display: "flex", flexDirection: "column", gap: 16 }}
        >
          {visible.map((d) => (
            <div
              key={d.id}
              style={{
                border: "1px solid var(--hairline)",
                background: "var(--white)",
                padding: 18,
              }}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--display)",
                    fontSize: 28,
                    fontWeight: 600,
                  }}
                >
                  {d.id}
                </span>
                <span
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 6,
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    textTransform: "uppercase",
                  }}
                >
                  <span className={"dot " + d.niveauColor} />
                  {d.niveau}
                </span>
              </div>
              <div className="tag-mono" style={{ marginTop: 8, fontSize: 10 }}>
                {d.dist} · {d.cibles} cibles · {d.arme}
              </div>
              <p
                style={{ fontSize: 14, color: "var(--gray)", margin: "14px 0" }}
              >
                {d.desc}
              </p>
              <button
                className="btn btn-ghost-gold"
                style={{ width: "100%", justifyContent: "center" }}
              >
                Réserver →
              </button>
            </div>
          ))}
        </div>

        {/* Tout savoir */}
        <div style={{ marginTop: 80 }}>
          <h2
            style={{
              fontFamily: "var(--display)",
              fontStyle: "italic",
              fontSize: 36,
              fontWeight: 500,
              margin: "0 0 32px",
            }}
          >
            Tout savoir avant de venir
          </h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 24,
            }}
            className="cards-4"
          >
            {[
              {
                t: "Horaires du stand",
                d: "Tirs sur inscription selon le calendrier. Secrétariat ouvert mardi et jeudi pour adhésions et renseignements.",
              },
              {
                t: "Règles de sécurité",
                d: "Bouchons d'oreille obligatoires. Permis de tir à présenter. Respect strict des consignes des moniteurs au pas de tir.",
              },
              {
                t: "Premier tir d'initiation",
                d: "Contactez le secrétariat ou inscrivez-vous à l'école Jeunesse+Sport. Encadrement gratuit pour les moins de 20 ans.",
              },
            ].map((c, i) => (
              <FadeUp key={i} delay={i * 80}>
                <div className="card-action" style={{ minHeight: 200 }}>
                  <h3
                    style={{
                      fontFamily: "var(--display)",
                      fontWeight: 500,
                      fontSize: 22,
                      margin: "8px 0 14px",
                    }}
                  >
                    {c.t}
                  </h3>
                  <p
                    style={{
                      fontSize: 14,
                      color: "var(--gray)",
                      lineHeight: 1.6,
                      margin: 0,
                    }}
                  >
                    {c.d}
                  </p>
                  <a href="#" className="link-arrow" style={{ marginTop: 20 }}>
                    <span>En savoir plus</span> <span className="a">→</span>
                  </a>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>

        {/* Panoramique avec vraie photo */}
        <div style={{ margin: "80px 0", position: "relative" }}>
          <PhotoPH
            ratio="21/9"
            src="assets/images/photo-stand-renove.png"
            alt="Stand de Saint-Georges, vue panoramique"
          />
          <div
            style={{
              position: "absolute",
              left: 32,
              bottom: 32,
              background: "var(--ink)",
              color: "var(--paper)",
              padding: "20px 26px",
              maxWidth: 360,
            }}
          >
            <div
              className="tag-mono"
              style={{ color: "var(--accent-soft)", marginBottom: 8 }}
            >
              — Visite virtuelle —
            </div>
            <div
              style={{
                fontFamily: "var(--display)",
                fontSize: 22,
                lineHeight: 1.2,
                marginBottom: 14,
              }}
            >
              Découvrez le stand en 360°
            </div>
            <button
              className="btn btn-ghost-gold"
              style={{ borderColor: "var(--accent)", color: "var(--paper)" }}
            >
              Lancer la visite →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PageStand = PageStand;