// Page d'accueil

const HomePage = ({ setRoute }) => {
  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="hero__blob" />
        <div className="container hero__grid">
          <div>
            <span className="hero__eyebrow">Angers · 7 groupes actifs</span>
            <h1 className="hero__title">
              L'amour fraternel,<br />
              <em>à deux pas</em> de chez toi.
            </h1>
            <p className="hero__sub">
              Famille d'Impact rassemble des chrétiens autour d'un repas, d'une prière,
              d'un partage — en petits groupes proches géographiquement. À Angers, il y
              en a probablement une dans ton quartier.
            </p>
            <div className="hero__ctas">
              <button className="btn btn--primary btn--lg" onClick={() => setRoute("find")}>
                <Icon name="pin" size={18} />
                Trouver ma FI
              </button>
              <button className="btn btn--ghost btn--lg" onClick={() => setRoute("about")}>
                C'est quoi une FI ?
              </button>
            </div>
          </div>

          <div className="hero__visual">
            <HeroMap setRoute={setRoute} />
          </div>
        </div>
      </section>

      {/* STATS */}
      <section style={{ padding: "0 0 60px" }}>
        <div className="container">
          <div className="stats">
            <div className="stat">
              <div className="stat__num">7<span>Familles</span></div>
              <div className="stat__label">autour d'Angers</div>
            </div>
            <div className="stat">
              <div className="stat__num">+ 50<span></span></div>
              <div className="stat__label">FRÈRES ET sœurs</div>
            </div>
            <div className="stat">
              <div className="stat__num">100<span>%</span></div>
              <div className="stat__label">vies transformées</div>
            </div>
            <div className="stat">
              <div className="stat__num">100<span>%</span></div>
              <div className="stat__label">amour fraternel</div>
            </div>
          </div>
        </div>
      </section>

      {/* C'EST QUOI */}
      <section className="section section--cream">
        <div className="container">
          <div className="section__head">
            <div className="section__eyebrow">Le concept</div>
            <h2 className="section__title">Une cellule de maison, dans ton quartier.</h2>
            <p className="section__lede">
              Une Famille d'Impact (FI), c'est un petit groupe de 7 à 12 personnes qui se retrouvent
              chaque semaine, dans une maison du quartier. Simple, régulier, profond.
            </p>
          </div>
          <div className="feature-grid">
            <div className="feature">
              <div className="feature__icon"><Icon name="home" size={26} stroke={1.8} /></div>
              <h3 className="feature__title">Chez quelqu'un, près de chez toi</h3>
              <p className="feature__body">Chaque FI se réunit dans une maison du quartier — une famille porteuse t'ouvre sa porte chaque semaine. Pas de grande salle, pas de logistique : juste un foyer.


              </p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Icon name="users" size={26} stroke={1.8} /></div>
              <h3 className="feature__title">Un petit groupe, où on se connaît</h3>
              <p className="feature__body">
                Étudiants, jeunes pros, familles, retraités — la FI rassemble large. À taille humaine,
                pour qu'on se voie vraiment, qu'on prenne le temps d'écouter et de partager.
              </p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Icon name="heart" size={26} stroke={1.8} /></div>
              <h3 className="feature__title">Repas, prière, partage</h3>
              <p className="feature__body">On mange ensemble, on partage et médite la Parole, on prie les uns pour les autres. Une heure et demie, une fois par semaine : la communion fraternelle.


              </p>
            </div>
          </div>
        </div>
      </section>

      {/* COMMENT ÇA MARCHE */}
      <section className="section section--ink">
        <div className="container">
          <div className="section__head">
            <div className="section__eyebrow" style={{ color: "var(--coral-soft)" }}>Comment ça marche</div>
            <h2 className="section__title">Quatre étapes pour rejoindre une FI.</h2>
          </div>
          <div className="steps">
            <div className="step">
              <h3 className="step__title">Localise</h3>
              <p className="step__body">Entre ton adresse ou active ta position : on te montre les FI les plus proches.</p>
            </div>
            <div className="step">
              <h3 className="step__title">Choisis</h3>
              <p className="step__body">Consulte le profil de chaque groupe.</p>
            </div>
            <div className="step">
              <h3 className="step__title">Contacte</h3>
              <p className="step__body">Un clic sur WhatsApp pour échanger avec le référent et te présenter.</p>
            </div>
            <div className="step">
              <h3 className="step__title">Viens</h3>
              <p className="step__body">Tu reçois l'adresse exacte. On t'accueille comme un membre de la famille, dès la première fois.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section style={{ padding: "20px 0 90px" }}>
        <div className="container">
          <div className="cta-band">
            <div>
              <h2>Prêt à trouver la FI la plus proche de chez toi ?</h2>
              <p>Quelques secondes pour entrer ton adresse. Le reste, c'est une rencontre.</p>
            </div>
            <div className="cta-band__actions">
              <button className="btn btn--primary btn--lg" onClick={() => setRoute("find")}>
                <Icon name="pin" size={18} /> Trouver ma FI
              </button>
              <button className="btn btn--ghost btn--lg" onClick={() => setRoute("about")}>
                En savoir plus
              </button>
            </div>
          </div>
        </div>
      </section>
    </>);

};

// ─── Stylized teaser map for hero (no Leaflet — pure SVG) ───
const HeroMap = ({ setRoute }) => {
  // Re-render when FIs get geocoded so dots reflect the real coords
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const on = () => setTick((t) => t + 1);
    window.addEventListener("fiGeocoded", on);
    return () => window.removeEventListener("fiGeocoded", on);
  }, []);
  // Coordinates of the FIs projected into a 1:1.05 viewport.
  // Anjou bbox approx: lng -0.74 to -0.42 (W→E), lat 47.34 to 47.50 (S→N) — covers all 7 FI.
  const project = (lng, lat) => {
    const x = (lng - -0.74) / (-0.42 - -0.74) * 100;
    const y = (47.50 - lat) / (47.50 - 47.34) * 100;
    return { x, y };
  };
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", background: "var(--cream-warm)", overflow: "hidden", cursor: "pointer" }}
    onClick={() => setRoute("find")}>
      <svg viewBox="0 0 100 105" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <pattern id="dots" width="3" height="3" patternUnits="userSpaceOnUse">
            <circle cx="1.5" cy="1.5" r="0.35" fill="#E0D3BB" />
          </pattern>
        </defs>
        <rect width="100" height="105" fill="url(#dots)" />
        {/* Schematic Maine river through Angers */}
        <path d="M 22 0 Q 26 25, 24 45 T 28 80 L 30 105" stroke="#C8DCE0" strokeWidth="3" fill="none" opacity="0.7" />
        <path d="M 22 0 Q 26 25, 24 45 T 28 80 L 30 105" stroke="#A8C5CC" strokeWidth="1" fill="none" />
        {/* Fuzzy FI circles */}
        {window.FI_DATA.map((fi, i) => {
          const { x, y } = project(fi.lng, fi.lat);
          return (
            <g key={fi.id}>
              <circle cx={x} cy={y} r="6" fill="#EE7D4F" opacity="0.18" />
              <circle cx={x} cy={y} r="3.5" fill="#EE7D4F" opacity="0.4" />
              <circle cx={x} cy={y} r="1.6" fill="#D9633A" />
            </g>);

        })}
        {/* Center label */}
        <text x="50" y="50" textAnchor="middle" fontFamily="var(--font-display)" fontSize="3" fill="#7B786F" letterSpacing="0.3">ANGERS</text>
      </svg>
      {/* Overlay hint */}
      <div style={{
        position: "absolute", bottom: 16, left: 16, right: 16,
        background: "var(--white)", borderRadius: "var(--r-md)",
        padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center",
        border: "1px solid var(--line)", boxShadow: "0 4px 14px -4px rgba(0,0,0,0.08)"
      }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15 }}>7 FI autour d'Angers</div>
          <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>Cherche celle qui te correspond →</div>
        </div>
        <Icon name="arrow" size={20} />
      </div>
    </div>);

};

window.HomePage = HomePage;