// ============================================================
//  ABOUT — À propos de l'AJC
// ============================================================

const About = () => {
  const { t, setPage } = useApp();
  return (
    <div>
      <div className="relative bg-gradient-to-br from-ajc-blueDk via-ajc-blue to-ajc-blue2 text-white overflow-hidden">
        <div className="absolute inset-0 cross-watermark opacity-30"></div>
        <Section className="relative py-16 md:py-24 text-center">
          <div className="flex items-center justify-center gap-3 mb-4">
            <div className="liturgy-underline w-12"></div>
            <div className="text-[11px] uppercase tracking-[0.25em] text-ajc-gold font-semibold">Anno Domini 1968</div>
            <div className="liturgy-underline w-12"></div>
          </div>
          <h1 className="font-display text-5xl md:text-6xl font-semibold">{t.about.title}</h1>
          <p className="mt-3 text-xl text-white/80 italic font-display">{t.about.lead}</p>
        </Section>
      </div>

      <Section className="py-12 md:py-16 grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-7 space-y-5 text-lg leading-relaxed text-ajc-ink/80">
          <p className="first-letter:text-6xl first-letter:font-display first-letter:font-semibold first-letter:text-ajc-blueDk first-letter:float-left first-letter:mr-2 first-letter:leading-[0.85]">
            {t.about.p1}
          </p>
          <p>{t.about.p2}</p>
          <p className="italic text-ajc-blueDk">{t.about.p3}</p>

          <div className="pt-6">
            <h3 className="font-display text-2xl font-semibold text-ajc-blueDk mb-3">{t.about.mission}</h3>
            <ul className="space-y-2.5">
              {t.about.missions.map((m, i) => (
                <li key={i} className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-ajc-gold flex items-center justify-center text-ajc-blueDk font-bold text-xs flex-shrink-0 mt-0.5">{i + 1}</div>
                  <span className="text-ajc-ink/80">{m}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="lg:col-span-5 space-y-5">
          <div className="rounded-2xl bg-gradient-to-br from-ajc-cream to-white border border-ajc-gold/30 p-6 text-center">
            <img src="https://www.genspark.ai/api/files/s/84OfM36e" alt="IPSCA" className="w-48 mx-auto"/>
            <div className="mt-4 font-display italic text-ajc-blueDk text-lg">"{t.motto}"</div>
            <div className="text-xs text-ajc-mute mt-1 tracking-wider uppercase">Devise IPSCA</div>
          </div>
          <VerseBlock verse={t.about.verse.replace(/^["«]\s?|\s?["»]$/g, '')} ref_={t.about.verseRef}/>

          {/* Timeline */}
          <div className="bg-white rounded-2xl border border-ajc-blue/10 p-5 shadow-card">
            <h4 className="font-display text-lg font-semibold text-ajc-blueDk mb-3">Jalons</h4>
            <div className="space-y-3">
              {[
                { y: "1968", t: "Fondation de l'IPSCA Saint Camille" },
                { y: "1985", t: "Premières promotions à atteindre 100 anciens" },
                { y: "2000", t: "Première diaspora vers l'Europe et l'Amérique" },
                { y: "2015", t: "Création informelle du réseau des anciens" },
                { y: "2026", t: "Lancement du Trombinoscope AJC numérique" }
              ].map((j, i) => (
                <div key={i} className="flex gap-4 items-start">
                  <div className="font-display text-xl font-semibold text-ajc-gold w-14 flex-shrink-0">{j.y}</div>
                  <div className="flex-1 text-sm text-ajc-ink/80 pt-1 border-l-2 border-ajc-blue/10 pl-3">{j.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <Section className="pb-16">
        <div className="rounded-3xl bg-gradient-to-br from-ajc-blue to-ajc-blueDk text-white p-10 md:p-14 relative overflow-hidden">
          <div className="absolute inset-0 cross-watermark opacity-25"></div>
          <div className="relative text-center max-w-2xl mx-auto">
            <h2 className="font-display text-3xl md:text-4xl font-semibold">Faites partie de cette histoire</h2>
            <p className="mt-3 text-white/80">Votre présence dans le trombinoscope, c'est un fil de plus dans la tapisserie commune.</p>
            <div className="mt-6 flex gap-3 justify-center">
              <Btn variant="gold" icon="plus" onClick={() => setPage("register")}>{t.nav.register}</Btn>
              <button onClick={() => setPage("trombi")} className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium border border-white/30 hover:bg-white/10">
                {t.nav.trombi}
              </button>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
};

window.About = About;