/* global React, PageHeader, PhotoPH, toRoman, FadeUp, Blason */
const { useState: useStateAcc, useEffect: useEffectAcc } = React;

function PageAccueil({ onNav }) {
  return (
    <div>
      {/* HERO */}
      <section
        style={{
          position: "relative",
          overflow: "hidden",
          borderBottom: "1px solid var(--hairline)",
        }}
      >
        <div className="container-wide" style={{ padding: "0 32px" }}>
          <div
            className="hero-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1.05fr 1fr",
              gap: 64,
              alignItems: "center",
              minHeight: "78vh",
              padding: "60px 0",
            }}
          >
            {/* texte */}
            <div style={{ position: "relative", zIndex: 2 }}>
              <div
                className="tag-gold"
                style={{
                  marginBottom: 28,
                  fontSize: 12,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 14,
                }}
              >
                <span
                  style={{ width: 28, height: 1, background: "var(--accent)" }}
                />
                Depuis 1474 · Pro Deo et Patria
                <span
                  style={{ width: 28, height: 1, background: "var(--accent)" }}
                />
              </div>
              <h1
                style={{
                  fontFamily: "var(--display)",
                  fontWeight: 500,
                  fontSize: "clamp(48px, 6.5vw, 96px)",
                  lineHeight: 0.98,
                  margin: 0,
                  letterSpacing: "-0.02em",
                }}
              >
                Le tir sportif
                <br />
                <em style={{ color: "var(--accent-deep)", fontWeight: 500 }}>
                  au stand de Saint-Georges.
                </em>
              </h1>
              <div
                style={{
                  width: 60,
                  height: 1,
                  background: "var(--accent)",
                  margin: "36px 0",
                }}
              />
              <p
                style={{
                  fontSize: 17,
                  lineHeight: 1.65,
                  color: "var(--ink-soft)",
                  maxWidth: 480,
                  margin: 0,
                }}
              >
                Cinq cent cinquante-deux ans d'une tradition vivante, perpétuée
                au stand de Saint-Georges à Petit-Lancy. Concours hebdomadaires,
                école de tir Jeunesse+Sport, accueil des nouveaux tireurs.
              </p>
              <div
                style={{
                  display: "flex",
                  gap: 14,
                  marginTop: 40,
                  flexWrap: "wrap",
                }}
              >
                <button
                  className="btn btn-red"
                  onClick={() => onNav("calendrier")}
                >
                  Calendrier des tirs <span>→</span>
                </button>
                <button
                  className="btn btn-ghost-gold"
                  onClick={() => onNav("histoire")}
                >
                  Découvrir l'histoire
                </button>
              </div>
            </div>

            {/* photo */}
            <div style={{ position: "relative" }}>
              <PhotoPH
                height="68vh"
                ratio="3/4"
                src="assets/images/photo-stand-renove.png"
                alt="Stand de tir de Saint-Georges"
              />
              {/* corner annotation */}
              <div
                style={{
                  position: "absolute",
                  bottom: -1,
                  left: -1,
                  background: "var(--ink)",
                  color: "var(--paper)",
                  padding: "14px 22px",
                  fontFamily: "var(--mono)",
                  fontSize: 10,
                  letterSpacing: "0.2em",
                  textTransform: "uppercase",
                }}
              >
                <div style={{ color: "var(--accent-soft)", marginBottom: 4 }}>
                  STAND DE SAINT-GEORGES
                </div>
                <div>Pas de tir 300m · Petit-Lancy</div>
              </div>
              {/* ornament */}
              <div
                style={{
                  position: "absolute",
                  top: -1,
                  right: -1,
                  width: 80,
                  height: 80,
                  border: "1px solid var(--accent)",
                  borderLeft: 0,
                  borderBottom: 0,
                  pointerEvents: "none",
                }}
              />
            </div>
          </div>
        </div>

        {/* watermark */}
        <div
          className="watermark hide-mobile"
          style={{ bottom: -100, left: -40, fontSize: 320 }}
        >
          MCDLXXIV
        </div>
      </section>

      {/* BANDEAU STATS */}
      <section
        style={{
          background: "var(--paper-2)",
          borderBottom: "1px solid var(--hairline)",
        }}
      >
        <div className="container-wide" style={{ padding: "64px 32px" }}>
          <div
            className="tag-mono"
            style={{ textAlign: "center", marginBottom: 48, fontSize: 11 }}
          >
            — Le stand de Saint-Georges en chiffres —
          </div>
          <div
            className="stats-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              alignItems: "end",
            }}
          >
            {[
              { n: "20", label: "Cibles 300m" },
              { n: "24", label: "Cibles 50m PC" },
              { n: "48", label: "Cibles 10m" },
              { n: "552", label: "Ans d'histoire" },
            ].map((s, i) => (
              <div
                key={i}
                style={{
                  borderRight: i < 3 ? "1px solid var(--hairline)" : "none",
                  padding: "0 32px",
                  textAlign: "center",
                }}
              >
                <div
                  style={{
                    fontFamily: "var(--display)",
                    fontStyle: "italic",
                    color: "var(--accent-deep)",
                    fontSize: "clamp(56px, 7vw, 96px)",
                    lineHeight: 1,
                    fontWeight: 500,
                  }}
                >
                  {s.n}
                </div>
                <div
                  className="tag-mono"
                  style={{ marginTop: 16, fontSize: 11 }}
                >
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 4 CARDS ROMAINES */}
      <section className="section">
        <div className="container-wide">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 40,
              flexWrap: "wrap",
              gap: 16,
            }}
          >
            <div>
              <div className="tag-gold" style={{ marginBottom: 12 }}>
                — Sommaire —
              </div>
              <h2
                style={{
                  fontFamily: "var(--display)",
                  fontStyle: "italic",
                  fontSize: 44,
                  fontWeight: 500,
                  margin: 0,
                  letterSpacing: "-0.01em",
                }}
              >
                L'essentiel
              </h2>
            </div>
            <span className="tag-mono">I — IV</span>
          </div>

          <div
            className="cards-4"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 24,
            }}
          >
            {[
              {
                n: 1,
                title: "Calendrier",
                sub: "503 manifestations en 2026",
                desc: "Tout l'agenda de la saison filtrable par discipline, type ou société. Vue mois ou liste, fiche détaillée par évènement.",
                cta: "Voir tous les tirs",
                target: "calendrier",
              },
              {
                n: 2,
                title: "Résultats",
                sub: "39 saisons depuis 1985",
                desc: "7 disciplines, plus de 100 manches au programme. Classements et archives complètes.",
                cta: "Consulter les classements",
                target: "resultats",
              },
              {
                n: 3,
                title: "Le Stand",
                sub: "20 + 24 + 18 + 6 cibles",
                desc: "300m, 50m PC, 50m, 25m. Cibles électroniques SIUS, équipement moderne, salle polyvalente.",
                cta: "Découvrir les pas de tir",
                target: "stand",
              },
              {
                n: 4,
                title: "Bourse EAN",
                sub: "38 annonces actives",
                desc: "Petites annonces entre membres : armes, munitions, équipement.",
                cta: "Parcourir la bourse",
                target: "boutique",
              },
            ].map((c, i) => (
              <FadeUp key={c.n} delay={i * 80}>
                <div
                  className="card-action"
                  style={{
                    minHeight: 280,
                    display: "flex",
                    flexDirection: "column",
                    cursor: "pointer",
                  }}
                  onClick={() => onNav(c.target)}
                >
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "flex-start",
                    }}
                  >
                    <span
                      style={{
                        fontFamily: "var(--display)",
                        fontStyle: "italic",
                        fontSize: 32,
                        color: "var(--accent-deep)",
                        lineHeight: 1,
                      }}
                    >
                      {toRoman(c.n)}
                    </span>
                    <CardIcon n={c.n} />
                  </div>
                  <h3
                    style={{
                      fontFamily: "var(--display)",
                      fontWeight: 500,
                      fontSize: 28,
                      margin: "32px 0 6px",
                      letterSpacing: "-0.01em",
                    }}
                  >
                    {c.title}
                  </h3>
                  <div
                    className="tag-mono"
                    style={{ fontSize: 10, marginBottom: 14 }}
                  >
                    {c.sub}
                  </div>
                  <p
                    style={{
                      fontSize: 14,
                      color: "var(--gray)",
                      lineHeight: 1.55,
                      margin: "0 0 24px",
                      flex: 1,
                    }}
                  >
                    {c.desc}
                  </p>
                  <div className="link-arrow">
                    <span>{c.cta}</span> <span className="a">→</span>
                  </div>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      {/* BANDEAU DEVISE */}
      <section
        style={{
          background:
            "linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%)",
          borderTop: "1px solid var(--hairline)",
          borderBottom: "1px solid var(--hairline)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          className="watermark hide-mobile"
          style={{ top: -80, right: -60, fontSize: 240, opacity: 0.05 }}
        >
          MCDLXXIV
        </div>
        <div
          className="container"
          style={{
            padding: "120px 32px",
            textAlign: "center",
            position: "relative",
          }}
        >
          <div
            style={{
              marginBottom: 28,
              display: "flex",
              justifyContent: "center",
            }}
          >
            <Blason size={36} />
          </div>
          <p
            style={{
              fontFamily: "var(--display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: "clamp(24px, 3vw, 36px)",
              lineHeight: 1.35,
              margin: 0,
              maxWidth: 880,
              marginInline: "auto",
              color: "var(--ink)",
              letterSpacing: "-0.005em",
            }}
          >
            « Pro Deo et Patria. La précision est une discipline qui se transmet
            de siècle en siècle. »
          </p>
          <div className="tag-mono" style={{ marginTop: 32, fontSize: 11 }}>
            — Devise des EAN · 1474 —
          </div>
        </div>
      </section>

      {/* NOUVELLES */}
      <section className="section">
        <div className="container-wide">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 40,
              flexWrap: "wrap",
              gap: 16,
            }}
          >
            <h2
              style={{
                fontFamily: "var(--display)",
                fontStyle: "italic",
                fontSize: 44,
                fontWeight: 500,
                margin: 0,
                letterSpacing: "-0.01em",
              }}
            >
              Nouvelles
            </h2>
            <a href="#" className="link-arrow">
              <span>Voir toutes</span> <span className="a">→</span>
            </a>
          </div>

          <div
            className="news-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 32,
            }}
          >
            {[
              {
                cat: "COMPÉTITION",
                date: "28 AVR 2026",
                title: "Tir fédéral en campagne — inscriptions ouvertes",
                excerpt:
                  "La saison 2026 du Tir fédéral en campagne s'ouvre le 30 mai à Bernex. Inscription au secrétariat avant le 25 mai.",
                src: "assets/images/photo-cibles-25m.png",
              },
              {
                cat: "PATRIMOINE",
                date: "21 AVR 2026",
                title: "Nouvelle buvette inaugurée à Saint-Georges",
                excerpt:
                  "Après plusieurs mois de travaux, la buvette du stand rouvre ses portes avec une carte renouvelée et une grande terrasse.",
                src: "assets/images/photo-buvette.png",
              },
              {
                cat: "CULTURE",
                date: "14 AVR 2026",
                title: "Brass Band Arquebuse · concert de printemps",
                excerpt:
                  "L'écho musical de l'institution donne son concert annuel le 17 mai. Entrée libre, contributions bienvenues.",
                src: "assets/images/brass-band.jpg",
              },
            ].map((n, i) => (
              <FadeUp key={i} delay={i * 100}>
                <article style={{ display: "flex", flexDirection: "column" }}>
                  <PhotoPH ratio="3/2" src={n.src} alt={n.title} />
                  <div
                    style={{
                      display: "flex",
                      gap: 14,
                      marginTop: 18,
                      fontFamily: "var(--mono)",
                      fontSize: 10,
                      letterSpacing: "0.16em",
                      textTransform: "uppercase",
                    }}
                  >
                    <span style={{ color: "var(--accent-deep)" }}>{n.cat}</span>
                    <span style={{ color: "var(--gray-2)" }}>·</span>
                    <span style={{ color: "var(--gray)" }}>{n.date}</span>
                  </div>
                  <h3
                    style={{
                      fontFamily: "var(--display)",
                      fontWeight: 500,
                      fontSize: 24,
                      margin: "12px 0 10px",
                      lineHeight: 1.2,
                      letterSpacing: "-0.005em",
                    }}
                  >
                    {n.title}
                  </h3>
                  <p
                    style={{
                      fontSize: 14,
                      color: "var(--gray)",
                      lineHeight: 1.55,
                      margin: 0,
                    }}
                  >
                    {n.excerpt}
                  </p>
                  <a href="#" className="link-arrow" style={{ marginTop: 18 }}>
                    <span>Lire l'article</span> <span className="a">→</span>
                  </a>
                </article>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; min-height: auto !important; }
          .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 0; }
          .stats-grid > div:nth-child(2) { border-right: 0 !important; }
          .cards-4 { grid-template-columns: 1fr !important; }
          .news-grid { grid-template-columns: 1fr !important; }
        }
        @media (min-width: 901px) and (max-width: 1100px) {
          .cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
}

function CardIcon({ n }) {
  const stroke = "var(--ink)";
  const sw = 1.2;
  if (n === 1)
    return (
      // calendar
      <svg
        width="22"
        height="22"
        viewBox="0 0 24 24"
        fill="none"
        stroke={stroke}
        strokeWidth={sw}
      >
        <rect x="3" y="5" width="18" height="16" />
        <line x1="3" y1="10" x2="21" y2="10" />
        <line x1="8" y1="3" x2="8" y2="7" />
        <line x1="16" y1="3" x2="16" y2="7" />
      </svg>
    );
  if (n === 2)
    return (
      // chart
      <svg
        width="22"
        height="22"
        viewBox="0 0 24 24"
        fill="none"
        stroke={stroke}
        strokeWidth={sw}
      >
        <line x1="3" y1="21" x2="21" y2="21" />
        <rect x="6" y="13" width="3" height="8" />
        <rect x="11" y="8" width="3" height="13" />
        <rect x="16" y="3" width="3" height="18" />
      </svg>
    );
  if (n === 3)
    return (
      // target
      <svg
        width="22"
        height="22"
        viewBox="0 0 24 24"
        fill="none"
        stroke={stroke}
        strokeWidth={sw}
      >
        <circle cx="12" cy="12" r="9" />
        <circle cx="12" cy="12" r="5.5" />
        <circle cx="12" cy="12" r="2" fill="var(--accent)" stroke="none" />
      </svg>
    );
  return (
    // tag
    <svg
      width="22"
      height="22"
      viewBox="0 0 24 24"
      fill="none"
      stroke={stroke}
      strokeWidth={sw}
    >
      <path d="M3 12 L12 3 L21 3 L21 12 L12 21 Z" />
      <circle cx="16" cy="8" r="1.4" />
    </svg>
  );
}

window.PageAccueil = PageAccueil;