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

function PageHistoire() {
  const jalons = [
    {
      year: 1474,
      title: "Fondation des Exercices",
      text: "Constitution des compagnies d'arquebusiers, arbalétriers et navigateurs au sein de la défense genevoise. Devise Pro Deo et Patria.",
      src: "assets/images/photo-drapeau.jpg",
      label: "DRAPEAU · ACTE FONDATEUR",
    },
    {
      year: 1601,
      title: "L'Escalade de Genève",
      text: "Dans la nuit du 11 au 12 décembre, les arquebusiers participent à la défense de la cité contre les troupes savoyardes. Épisode fondateur de la mémoire genevoise.",
      src: "assets/images/photo-histoire.png",
      label: "ESCALADE · 1601",
    },
    {
      year: "XVIIIe",
      title: "Hôtel rue du Stand",
      text: "Les compagnies se dotent d'un siège permanent au cœur de Genève, le bâtiment de la rue du Stand qui sert encore aujourd'hui à la Fondation EAN.",
      src: "assets/images/photo-hotel.jpg",
      label: "HÔTEL RUE DU STAND",
    },
    {
      year: "XIXe",
      title: "Du militaire au sportif",
      text: "La vocation militaire cède progressivement la place à la pratique sportive. Le tir devient discipline d'adresse, art de la précision, école de la patience.",
      src: "assets/images/photo-stand-vue.jpg",
      label: "STAND · VUE D'ÉPOQUE",
    },
    {
      year: 1898,
      title: "Stand de Saint-Georges",
      text: "Inauguration du stand actuel à Petit-Lancy. Cibles à différentes distances, salle polyvalente, lieu central de la pratique du tir genevois.",
      src: "assets/images/photo-stand-1.jpg",
      label: "STAND DE SAINT-GEORGES",
    },
    {
      year: 2026,
      title: "Refonte numérique",
      text: "Le présent site marque le 552ᵉ anniversaire — une identité visuelle renouvelée, un outil unifié pour les cinquante prochaines années.",
      src: "assets/images/photo-stand-renove.png",
      label: "STAND RÉNOVÉ · MMXXVI",
    },
  ];

  return (
    <div>
      {/* HERO crème */}
      <section
        style={{
          background: "var(--paper-2)",
          borderBottom: "1px solid var(--hairline)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          className="watermark hide-mobile"
          style={{
            top: "-10%",
            left: "50%",
            transform: "translateX(-50%)",
            fontSize: 480,
            opacity: 0.045,
          }}
        >
          MCDLXXIV
        </div>
        <div
          className="container"
          style={{
            padding: "120px 32px",
            textAlign: "center",
            position: "relative",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              marginBottom: 36,
            }}
          >
            <Blason size={80} />
          </div>
          <div className="tag-gold" style={{ marginBottom: 28 }}>
            — V·C·LII ans —
          </div>
          <h1
            style={{
              fontFamily: "var(--display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: "clamp(56px, 9vw, 130px)",
              lineHeight: 0.98,
              margin: 0,
              letterSpacing: "-0.025em",
            }}
          >
            552 ans
            <br />
            d'<em style={{ color: "var(--accent-deep)" }}>Arquebuse</em>
          </h1>
          <div
            className="tag-mono"
            style={{ marginTop: 36, fontSize: 13, letterSpacing: "0.32em" }}
          >
            MCDLXXIV — MMXXVI · PRO DEO ET PATRIA
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section">
        <div className="container">
          <div style={{ position: "relative" }}>
            <div
              className="timeline-rail"
              style={{
                position: "absolute",
                left: "50%",
                top: 0,
                bottom: 0,
                width: 1,
                background: "var(--accent)",
                opacity: 0.4,
              }}
            />
            {jalons.map((j, i) => {
              const left = i % 2 === 0;
              return (
                <FadeUp key={j.year} delay={50}>
                  <div
                    className="timeline-row"
                    style={{
                      display: "grid",
                      gridTemplateColumns: "1fr 60px 1fr",
                      gap: 0,
                      marginBottom: 80,
                      alignItems: "center",
                    }}
                  >
                    {/* left col */}
                    <div style={{ paddingRight: 40, textAlign: "right" }}>
                      {left ? (
                        <JalonContent j={j} align="right" />
                      ) : (
                        <PhotoPH ratio="4/3" src={j.src} label={j.label} />
                      )}
                    </div>
                    {/* dot */}
                    <div style={{ display: "flex", justifyContent: "center" }}>
                      <div
                        style={{
                          width: 14,
                          height: 14,
                          borderRadius: "50%",
                          background: "var(--bg)",
                          border: "2px solid var(--accent)",
                          position: "relative",
                          zIndex: 2,
                        }}
                      />
                    </div>
                    {/* right col */}
                    <div style={{ paddingLeft: 40 }}>
                      {left ? (
                        <PhotoPH ratio="4/3" src={j.src} label={j.label} />
                      ) : (
                        <JalonContent j={j} align="left" />
                      )}
                    </div>
                  </div>
                </FadeUp>
              );
            })}
          </div>
        </div>
      </section>

      {/* Structure Fondation / Association */}
      <section
        style={{
          background: "var(--paper-2)",
          borderTop: "1px solid var(--hairline)",
          borderBottom: "1px solid var(--hairline)",
        }}
      >
        <div className="container-wide section">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <div className="tag-gold" style={{ marginBottom: 16 }}>
              — Structure —
            </div>
            <h2
              style={{
                fontFamily: "var(--display)",
                fontStyle: "italic",
                fontSize: 44,
                fontWeight: 500,
                margin: 0,
              }}
            >
              Deux institutions, une mission
            </h2>
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: 24,
            }}
            className="struct-grid"
          >
            <div className="card-action" style={{ padding: "40px 32px" }}>
              <div
                className="tag-mono"
                style={{ fontSize: 10, marginBottom: 8 }}
              >
                — LA FONDATION
              </div>
              <h3
                style={{
                  fontFamily: "var(--display)",
                  fontSize: 32,
                  fontWeight: 500,
                  margin: "0 0 16px",
                }}
              >
                Le patrimoine
              </h3>
              <p
                style={{
                  fontSize: 15,
                  color: "var(--gray)",
                  lineHeight: 1.7,
                  margin: 0,
                }}
              >
                Propriétaire des bâtiments historiques : l'hôtel de la rue du
                Stand, le stand de Saint-Georges, le musée de la ferme. Veille à
                la conservation et à la transmission de ce patrimoine.
              </p>
            </div>
            <div className="card-action" style={{ padding: "40px 32px" }}>
              <div
                className="tag-mono"
                style={{ fontSize: 10, marginBottom: 8 }}
              >
                — L'ASSOCIATION
              </div>
              <h3
                style={{
                  fontFamily: "var(--display)",
                  fontSize: 32,
                  fontWeight: 500,
                  margin: "0 0 16px",
                }}
              >
                Les tireurs
              </h3>
              <p
                style={{
                  fontSize: 15,
                  color: "var(--gray)",
                  lineHeight: 1.7,
                  margin: 0,
                }}
              >
                Regroupe les tireurs actifs et organise la vie sportive :
                entraînements, compétitions, école Jeunesse+Sport, sous-sections
                affiliées (Guidon Genevois, Bracailleurs, Pistoliers).
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Devenir membre */}
      <section className="section" style={{ textAlign: "center" }}>
        <div className="container">
          <p
            style={{
              fontFamily: "var(--display)",
              fontStyle: "italic",
              fontSize: "clamp(28px, 4vw, 44px)",
              fontWeight: 500,
              lineHeight: 1.25,
              margin: "0 auto 36px",
              maxWidth: 720,
            }}
          >
            « Perpétuer une tradition de cinq siècles et demi. »
          </p>
          <button className="btn btn-primary" style={{ padding: "18px 32px" }}>
            Rejoindre l'Arquebuse →
          </button>
        </div>
      </section>

      <style>{`
        @media (max-width: 900px) {
          .timeline-rail { left: 12px !important; }
          .timeline-row { grid-template-columns: 24px 1fr !important; gap: 16px !important; margin-bottom: 48px !important; }
          .timeline-row > div:first-child { padding-right: 0 !important; text-align: left !important; order: 0; }
          .timeline-row > div:nth-child(2) { order: 0; }
          .timeline-row > div:last-child { padding-left: 0 !important; order: 0; }
          .timeline-row > div:first-child .placeholder-photo { display: none !important; }
          .struct-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function JalonContent({ j, align }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--display)",
          fontStyle: "italic",
          fontWeight: 500,
          color: "var(--accent-deep)",
          fontSize: 72,
          lineHeight: 1,
          letterSpacing: "-0.02em",
        }}
      >
        {j.year}
      </div>
      <h3
        style={{
          fontFamily: "var(--display)",
          fontStyle: "italic",
          fontSize: 26,
          fontWeight: 500,
          margin: "12px 0 14px",
        }}
      >
        {j.title}
      </h3>
      <p
        style={{
          fontSize: 15,
          color: "var(--gray)",
          lineHeight: 1.65,
          margin: 0,
          maxWidth: 380,
          marginLeft: align === "right" ? "auto" : 0,
        }}
      >
        {j.text}
      </p>
    </div>
  );
}

window.PageHistoire = PageHistoire;