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

function PageAcces() {
  return (
    <div>
      <div className="container-wide">
        <PageHeader
          eyebrow="Petit-Lancy · Genève"
          title="Venir au"
          italic="stand de Saint-Georges"
          subtitle="Le stand est situé route du Pont-Butin 8, à Petit-Lancy, à dix minutes du centre-ville en bus. Parking sur place, accès aux transports publics."
        />
      </div>

      {/* Map réelle OpenStreetMap */}
      <div
        style={{
          position: "relative",
          borderTop: "1px solid var(--hairline)",
          borderBottom: "1px solid var(--hairline)",
        }}
      >
        <div
          style={{
            height: 460,
            position: "relative",
            overflow: "hidden",
            background: "var(--paper-2)",
          }}
        >
          <iframe
            title="Carte du stand de tir de Saint-Georges"
            src="https://www.openstreetmap.org/export/embed.html?bbox=6.0975%2C46.1810%2C6.1155%2C46.1875&layer=mapnik&marker=46.1843%2C6.1065"
            style={{
              width: "100%",
              height: "100%",
              border: 0,
              filter: "saturate(0.85) contrast(0.95)",
            }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />

          {/* Top-left card */}
          <div
            style={{
              position: "absolute",
              top: 24,
              left: 24,
              background: "var(--white)",
              padding: 20,
              border: "1px solid var(--hairline)",
              maxWidth: 300,
              boxShadow: "0 10px 30px -12px rgba(0,0,0,0.15)",
            }}
          >
            <div className="tag-gold" style={{ marginBottom: 8 }}>
              — Stand de tir —
            </div>
            <div
              style={{
                fontFamily: "var(--display)",
                fontSize: 22,
                fontWeight: 500,
                marginBottom: 6,
              }}
            >
              Saint-Georges
            </div>
            <div style={{ fontSize: 13, color: "var(--gray)" }}>
              8, route du Pont-Butin · 1213 Petit-Lancy
            </div>
            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                marginTop: 12,
                fontSize: 12,
              }}
            >
              <span className="dot green" />
              <span
                style={{
                  color: "var(--green)",
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                }}
              >
                Secrétariat ouvert
              </span>
            </div>
          </div>

          {/* legend */}
          <div
            style={{
              position: "absolute",
              bottom: 16,
              right: 16,
              background: "rgba(255,255,255,0.85)",
              padding: "4px 10px",
              fontFamily: "var(--mono)",
              fontSize: 10,
              color: "var(--gray)",
              letterSpacing: "0.1em",
              textTransform: "uppercase",
            }}
          >
            ⛶ Carte interactive · OpenStreetMap
          </div>
        </div>
      </div>

      <div className="container-wide section">
        {/* 3 cards info */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}
          className="info-3"
        >
          {[
            {
              icon: "pin",
              t: "Adresse",
              l1: "8, route du Pont-Butin",
              l2: "1213 Petit-Lancy · Genève",
              cta: "Itinéraire →",
            },
            {
              icon: "bus",
              t: "Transports publics",
              l1: "Bus 22 — arrêt « Saint-Georges »",
              l2: "Bus 21 — arrêt « Pont-Butin »",
              cta: "Voir TPG →",
            },
            {
              icon: "park",
              t: "Parking & vélo",
              l1: "Parking gratuit sur place",
              l2: "Arceaux à vélos · Accès handicapé",
              cta: "Plan d'accès →",
            },
          ].map((c, i) => (
            <FadeUp key={i} delay={i * 70}>
              <div className="card-action" style={{ minHeight: 200 }}>
                <InfoIcon kind={c.icon} />
                <h3
                  style={{
                    fontFamily: "var(--display)",
                    fontWeight: 500,
                    fontSize: 24,
                    margin: "20px 0 10px",
                  }}
                >
                  {c.t}
                </h3>
                <div style={{ fontSize: 14, lineHeight: 1.7 }}>
                  {c.l1}
                  <br />
                  <span style={{ color: "var(--gray)" }}>{c.l2}</span>
                </div>
                <a href="#" className="link-arrow" style={{ marginTop: 24 }}>
                  <span>{c.cta.replace(" →", "")}</span>{" "}
                  <span className="a">→</span>
                </a>
              </div>
            </FadeUp>
          ))}
        </div>

        {/* Horaires secrétariat */}
        <div style={{ marginTop: 80 }}>
          <h2
            style={{
              fontFamily: "var(--display)",
              fontStyle: "italic",
              fontSize: 36,
              fontWeight: 500,
              margin: "0 0 32px",
            }}
          >
            Horaires du secrétariat
          </h2>
          <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
            <table className="tbl" style={{ minWidth: 600 }}>
              <thead>
                <tr>
                  <th>Jour</th>
                  <th>Matin</th>
                  <th>Après-midi</th>
                  <th>Soir</th>
                  <th>Statut</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { j: "Lundi", m: "—", a: "—", s: "—", st: "fermé" },
                  {
                    j: "Mardi",
                    m: "10:00 — 11:00",
                    a: "15:00 — 17:00",
                    s: "—",
                    st: "ouvert",
                  },
                  { j: "Mercredi", m: "—", a: "—", s: "—", st: "fermé" },
                  {
                    j: "Jeudi",
                    m: "10:00 — 11:00",
                    a: "15:00 — 18:30",
                    s: "—",
                    st: "ouvert",
                  },
                  { j: "Vendredi", m: "—", a: "—", s: "—", st: "fermé" },
                  {
                    j: "Samedi",
                    m: "—",
                    a: "—",
                    s: "—",
                    st: "tirs uniquement",
                  },
                  {
                    j: "Dimanche",
                    m: "—",
                    a: "—",
                    s: "—",
                    st: "concours uniquement",
                  },
                ].map((r, i) => (
                  <tr key={i}>
                    <td
                      style={{
                        fontFamily: "var(--display)",
                        fontSize: 17,
                        fontWeight: 500,
                      }}
                    >
                      {r.j}
                    </td>
                    <td className="mono">{r.m}</td>
                    <td className="mono">{r.a}</td>
                    <td className="mono">{r.s}</td>
                    <td>
                      <span
                        style={{
                          display: "inline-flex",
                          gap: 8,
                          alignItems: "center",
                          fontFamily: "var(--mono)",
                          fontSize: 11,
                          letterSpacing: "0.1em",
                          textTransform: "uppercase",
                        }}
                      >
                        <span
                          className={
                            "dot " +
                            (r.st === "ouvert"
                              ? "green"
                              : r.st === "fermé"
                                ? "red"
                                : "gold")
                          }
                        />
                        {r.st}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Contact */}
        <div
          style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 64,
          }}
          className="contact-grid"
        >
          <div>
            <div className="tag-gold" style={{ marginBottom: 14 }}>
              — Secrétariat du stand —
            </div>
            <h3
              style={{
                fontFamily: "var(--display)",
                fontStyle: "italic",
                fontSize: 32,
                fontWeight: 500,
                margin: "0 0 24px",
              }}
            >
              Nous joindre directement
            </h3>
            <div style={{ fontSize: 16, lineHeight: 2 }}>
              <div>
                <span className="tag-mono" style={{ marginRight: 16 }}>
                  TÉL
                </span>{" "}
                <span className="mono">+41 22 792 29 21</span>
              </div>
              <div>
                <span className="tag-mono" style={{ marginRight: 16 }}>
                  FAX
                </span>{" "}
                <span className="mono">+41 22 793 57 22</span>
              </div>
              <div>
                <span className="tag-mono" style={{ marginRight: 16 }}>
                  MAIL
                </span>{" "}
                <a
                  href="mailto:tir@arquebuse.ch"
                  style={{ color: "var(--accent-deep)" }}
                >
                  tir@arquebuse.ch
                </a>
              </div>
              <div>
                <span className="tag-mono" style={{ marginRight: 16 }}>
                  HOR
                </span>{" "}
                Mar &amp; Jeu · matin et après-midi
              </div>
            </div>
            <div
              style={{
                marginTop: 28,
                padding: 18,
                background: "var(--paper-2)",
                border: "1px solid var(--hairline)",
              }}
            >
              <div
                className="tag-mono"
                style={{ marginBottom: 8, fontSize: 10 }}
              >
                — Aussi : Fondation EAN
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.7 }}>
                36, rue du Stand · 1204 Genève
                <br />
                <span className="mono" style={{ color: "var(--gray)" }}>
                  +41 22 329 00 60
                </span>{" "}
                ·{" "}
                <a
                  href="mailto:fondation@arquebuse.ch"
                  style={{ color: "var(--accent-deep)" }}
                >
                  fondation@arquebuse.ch
                </a>
              </div>
            </div>
          </div>
          <div>
            <div className="tag-gold" style={{ marginBottom: 14 }}>
              — Formulaire —
            </div>
            <form style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <select
                style={{
                  padding: 14,
                  border: "1px solid var(--hairline-strong)",
                  background: "var(--white)",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                }}
              >
                <option>Motif de la demande…</option>
                <option>Devenir membre</option>
                <option>Premier tir d'initiation</option>
                <option>École de tir Jeunesse+Sport</option>
                <option>Location de salle polyvalente</option>
                <option>Question sur la bourse / annonces</option>
                <option>Autre</option>
              </select>
              <input
                placeholder="Votre nom"
                style={{
                  padding: 14,
                  border: "1px solid var(--hairline-strong)",
                  background: "var(--white)",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                }}
              />
              <input
                placeholder="Email"
                style={{
                  padding: 14,
                  border: "1px solid var(--hairline-strong)",
                  background: "var(--white)",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                }}
              />
              <textarea
                placeholder="Votre message"
                rows="4"
                style={{
                  padding: 14,
                  border: "1px solid var(--hairline-strong)",
                  background: "var(--white)",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                  resize: "vertical",
                }}
              ></textarea>
              <button
                type="button"
                className="btn btn-primary"
                style={{ alignSelf: "flex-start" }}
              >
                Envoyer →
              </button>
            </form>
          </div>
        </div>

        {/* Hôtel rue du Stand */}
        <div
          style={{
            marginTop: 100,
            display: "grid",
            gridTemplateColumns: "1fr 1.3fr",
            gap: 0,
            border: "1px solid var(--hairline)",
          }}
          className="hotel-grid"
        >
          <PhotoPH
            ratio="4/3"
            src="assets/images/photo-hotel.jpg"
            alt="Hôtel de la rue du Stand"
          />
          <div
            style={{
              padding: 48,
              background: "var(--paper-2)",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <div className="tag-gold" style={{ marginBottom: 12 }}>
              — Aussi —
            </div>
            <h3
              style={{
                fontFamily: "var(--display)",
                fontStyle: "italic",
                fontSize: 36,
                fontWeight: 500,
                margin: "0 0 18px",
                lineHeight: 1.1,
              }}
            >
              L'Hôtel de la rue du Stand
            </h3>
            <p
              style={{
                fontSize: 15,
                color: "var(--gray)",
                lineHeight: 1.65,
                margin: 0,
              }}
            >
              La Fondation EAN possède aussi le bâtiment historique de la rue du
              Stand, au cœur de Genève. Siège administratif, archives et
              patrimoine architectural classé.
            </p>
            <a href="#" className="link-arrow" style={{ marginTop: 28 }}>
              <span>En savoir plus</span> <span className="a">↗</span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .info-3 { grid-template-columns: 1fr !important; }
          .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hotel-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function InfoIcon({ kind }) {
  const sw = 1.3,
    c = "var(--ink)";
  if (kind === "pin")
    return (
      <svg
        width="28"
        height="28"
        viewBox="0 0 24 24"
        fill="none"
        stroke={c}
        strokeWidth={sw}
      >
        <path d="M12 22 C 12 22 5 14 5 9 a7 7 0 0 1 14 0 c0 5 -7 13 -7 13 z" />
        <circle cx="12" cy="9" r="2.5" />
      </svg>
    );
  if (kind === "bus")
    return (
      <svg
        width="28"
        height="28"
        viewBox="0 0 24 24"
        fill="none"
        stroke={c}
        strokeWidth={sw}
      >
        <rect x="4" y="3" width="16" height="14" />
        <circle cx="8" cy="19" r="2" />
        <circle cx="16" cy="19" r="2" />
        <line x1="4" y1="10" x2="20" y2="10" />
      </svg>
    );
  return (
    <svg
      width="28"
      height="28"
      viewBox="0 0 24 24"
      fill="none"
      stroke={c}
      strokeWidth={sw}
    >
      <rect x="4" y="4" width="16" height="16" />
      <text
        x="12"
        y="16"
        textAnchor="middle"
        fontSize="10"
        fontFamily="serif"
        fontWeight="bold"
        stroke="none"
        fill={c}
      >
        P
      </text>
    </svg>
  );
}

window.PageAcces = PageAcces;