// Page À propos — contenu tiré du site Famille d'Impact national, adapté Angers

const CROYANCES = [
"Nous croyons au Dieu unique Créateur manifesté en trois personnes : le Père, le Fils et le Saint-Esprit (la trinité).",
"Nous croyons que la Bible est la Parole de Dieu, qu'elle est digne d'autorité et qu'elle contient la vie.",
"Nous croyons en Jésus le Christ, notre Seigneur et Sauveur. Né de la vierge Marie, exempt de tout péché, il a achevé son œuvre en 3 ans avant d'être crucifié à la croix de Golgotha pour le pardon des péchés de l'humanité toute entière. Il est ressuscité et Il agit encore (guérison, restauration, libération…) à travers ceux qui croient en Lui.",
"Nous croyons que quiconque croit au Seigneur Jésus reçoit le salut de son âme et le pardon de ses péchés. Il est ainsi réconcilié à Dieu et reçoit le pouvoir de devenir enfant de Dieu.",
"Nous croyons en la personne, en la présence et en la puissance du Saint-Esprit qui vit dans tous ceux qui croient et acceptent Jésus Christ sincèrement dans leur cœur. Il est la personne la plus importante sur terre et nous aide à trouver et à manifester notre destinée."];


const FAQ_ITEMS = [
{
  q: "Je ne suis pas chrétien, je peux venir ?",
  a: "Bien sûr. Une FI est ouverte à tous. Tu y trouveras des chrétiens qui vivent leur foi simplement et sans pression."
},
{
  q: "Il faut s'engager pour combien de temps ?",
  a: "Aucun engagement. Tu viens une fois pour découvrir, puis tu décides. Ce qui compte, c'est que ta présence soit vraie et libre."
},
{
  q: "Pourquoi les adresses ne sont pas publiques ?",
  a: "Les FI se réunissent chez des particuliers, dans leur maison. Par respect de leur intimité — et pour qu'on se rencontre vraiment avant d'arriver chez eux — l'adresse exacte est communiquée par le référent une fois le contact établi via WhatsApp."
},
{
  q: "Qui anime les rencontres ?",
  a: "Chaque famille a un ou plusieurs pilotes qui anime le déroulé (repas, Parole, prière, témoignages, etc), mais la rencontre se construit ensemble. Chacun apporte quelque chose : un plat, un témoignage, une question, une réponse, etc."
},
{
  q: "Il y a un coût ?",
  a: "La FI est gratuite. Chacun apporte ce qu'il peut pour le repas partagé — souvent un plat, une boisson, un dessert."
}];


const AboutPage = ({ setRoute }) => {
  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <>
      {/* HERO — Qu'est-ce qu'une FI */}
      <section className="about-intro">
        <div className="container">
          <span className="hero__eyebrow" style={{ display: "inline-flex" }}>À propos</span>
          <h1 className="about-intro__title">
            Qu'est-ce qu'une<br />
            <em>Famille d'Impact</em> ?
          </h1>
          <p className="about-intro__lede">
            Les familles d'Impact sont des groupes de maison permettant aux membres
            des églises Impact Centre Chrétien de se réunir en semaine en plus petit
            comité pour des moments de partage, de communion fraternelle, d'édification
            autour de la Parole de Dieu (la Bible), de prières, de soutien, d'évangélisation
            et bien plus encore.
          </p>
        </div>
      </section>

      {/* VISION — image left, text right */}
      <section className="section about-block">
        <div className="container about-block__grid">
          <div className="about-block__visual">
            <img src="assets/about-mission.jpg" alt="" />
          </div>
          <div className="about-block__body">
            <div className="section__eyebrow">01</div>
            <h2 className="about-block__title">Notre vision</h2>
            <p>
              Notre vision, notre rêve, est d'influencer positivement nos villes
              par les valeurs de Christ en ouvrant une multitude de maisons (les
              familles d'impact) qui vont prendre soin des membres, faire le bien
              dans la ville, soutenir ceux dans le besoin et travailler ensemble
              à anéantir les œuvres des ténèbres dans nos quartiers.
            </p>
          </div>
        </div>
      </section>

      {/* MISSION — text left, image right */}
      <section className="section about-block about-block--cream">
        <div className="container about-block__grid about-block__grid--reverse">
          <div className="about-block__visual">
            <img src="assets/about-vision.jpg" alt="" />
          </div>
          <div className="about-block__body">
            <div className="section__eyebrow">02</div>
            <h2 className="about-block__title">Notre mission</h2>
            <p>
              Impact Centre Chrétien veut être une église à la fois grande (dans
              le temple, autrement dit le dimanche, dans les auditoriums, les
              salles…) et petite (dans les maisons : Les Familles D'Impact).
            </p>
            <p>
              Notre mission est de prendre soin, construire, soutenir et
              influencer positivement nos quartiers.
            </p>
            <div className="verse">
              <span className="verse__ref">Actes 5.42</span>
              <span className="verse__text">
                « Et chaque jour, dans le temple et dans les maisons, ils ne
                cessaient d'enseigner, et d'annoncer la bonne nouvelle de Jésus-Christ. »
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* VALEURS — image left */}
      <section className="section about-block">
        <div className="container about-block__grid">
          <div className="about-block__visual">
            <img src="assets/about-valeurs.jpg" alt="" />
          </div>
          <div className="about-block__body">
            <div className="section__eyebrow">03</div>
            <h2 className="about-block__title">Nos valeurs</h2>
            <p>
              Les familles d'impact sont des lieux d'hospitalité, d'amour. La
              dimension de famille inclut l'amour, mais aussi le sacrifice, la
              solidarité et le soutien.
            </p>
            <p>
              Dans une famille biologique, on s'aime, dans une famille spirituelle,
              on s'aime et on en travaille en plus pour les affaires de notre Père céleste.
            </p>
            <div className="verse">
              <span className="verse__ref">Marc 3.35</span>
              <span className="verse__text">
                « Car quiconque fait la volonté de Dieu, celui-là est mon frère,
                ma sœur et ma mère. »
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* PASTOR QUOTE */}
      <section className="section section--cream">
        <div className="container">
          <div className="pastor">
            <div className="pastor__quote">
              <div className="pastor__mark">"</div>
              <p className="pastor__text">
                La famille de sang s'arrête sur la Terre, la famille spirituelle
                continue dans l'éternité.
              </p>
              <div className="pastor__author">
                <strong>Yvan Castanou</strong>
                <span>Pasteur principal des églises ICC</span>
              </div>
            </div>
            <div className="pastor__photo">
              <img src="assets/about-pasteur.jpg" alt="Yvan Castanou" />
            </div>
          </div>
        </div>
      </section>

      {/* CROYANCES */}
      <section className="section">
        <div className="container">
          <div className="section__head" style={{ maxWidth: 820 }}>
            <div className="section__eyebrow">Ce qui nous unit</div>
            <h2 className="section__title">Nos croyances</h2>
          </div>
          <ul className="croyances">
            {CROYANCES.map((c, i) =>
            <li key={i} className="croyance">
                <span className="croyance__num">{String(i + 1).padStart(2, "0")}</span>
                <span className="croyance__text">{c}</span>
              </li>
            )}
          </ul>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--cream">
        <div className="container">
          <div className="section__head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
            <div className="section__eyebrow">Questions fréquentes</div>
            <h2 className="section__title">On répond aux doutes les plus courants.</h2>
          </div>
          <div className="faq">
            {FAQ_ITEMS.map((it, i) =>
            <div className={"faq__item" + (openFaq === i ? " faq__item--open" : "")} key={i}>
                <button className="faq__q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{it.q}</span>
                </button>
                <div className="faq__a">{it.a}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "20px 0 90px" }}>
        <div className="container">
          <div className="cta-band">
            <div>
              <h2>Une question ? Une intuition ?<br />Écris-nous.</h2>
              <p>L'équipe d'Angers te répond sur WhatsApp.</p>
            </div>
            <div className="cta-band__actions">
              <a className="btn btn--primary btn--lg" href="https://wa.me/33624763374?text=Bonjour%20%21%20J%27ai%20une%20question%20au%20sujet%20des%20Familles%20d%27Impact%20Angers." target="_blank" rel="noreferrer">
                <img src="assets/whatsapp.png" alt="" style={{ width: 22, height: 22 }} />
                +33 6 24 76 33 74
              </a>
              <button className="btn btn--ghost btn--lg" onClick={() => setRoute("find")}>
                <Icon name="pin" size={18} /> Trouver ma FI
              </button>
            </div>
          </div>
        </div>
      </section>
    </>);

};

window.AboutPage = AboutPage;