// ============================================================
//  HOME — Page d'accueil inspirante
// ============================================================

// Portrait sacré encadré de Saint Camille de Lellis
const SaintCamilleFrame = () =>
<div className="relative max-w-md mx-auto lg:mx-0 lg:ml-auto">
    {/* Halo doré derrière */}
    <div className="absolute -inset-6 bg-gradient-to-br from-ajc-gold/30 via-ajc-gold/10 to-transparent rounded-[2rem] blur-2xl"></div>

    {/* Cadre extérieur — épais comme un cadre d'icône religieuse */}
    <div className="relative bg-gradient-to-br from-ajc-gold via-ajc-gold2 to-ajc-gold rounded-2xl p-2.5 shadow-cardHover">
      {/* Cadre intérieur sombre (filet bleu) */}
      <div className="rounded-xl bg-ajc-blueDk p-1.5">
        {/* Image */}
        <div className="relative rounded-lg overflow-hidden bg-ajc-cream">
          <img
          src="/static/assets/saint-camille-de-lellis.jpg"
          alt="Saint Camille de Lellis au chevet des malades"
          className="w-full h-auto block"
          loading="lazy" />
        
          {/* Vignette légère pour intégrer dans la palette */}
          <div className="absolute inset-0 pointer-events-none" style={{ boxShadow: 'inset 0 0 60px rgba(11,44,122,0.18)' }}></div>
        </div>
      </div>

      {/* Coins ornementaux */}
      <CornerOrnament className="top-1 left-1" />
      <CornerOrnament className="top-1 right-1" flip="x" />
      <CornerOrnament className="bottom-1 left-1" flip="y" />
      <CornerOrnament className="bottom-1 right-1" flip="xy" />
    </div>

    {/* Cartouche légende sous le cadre */}
    <div className="relative mt-4 bg-white rounded-xl border border-ajc-gold/40 shadow-card overflow-hidden">
      {/* Filet liturgique en haut */}
      <div className="liturgy-underline"></div>
      <div className="px-5 py-4 text-center">
        <div className="font-display text-lg font-semibold text-ajc-blueDk leading-tight">Saint Camille de Lellis</div>
        <div className="text-[10px] uppercase tracking-[0.2em] text-ajc-red font-semibold mt-1">1550 — 1614 · Patron des soignants</div>
        <div className="mt-3 flex items-start gap-2 text-left">
          <Icon name="quote" size={14} className="text-ajc-gold flex-shrink-0 mt-0.5" />
          <p className="font-display italic text-ajc-ink/80 text-sm leading-snug">
            « Plus de cœur dans ces mains. »
          </p>
        </div>
      </div>
    </div>
  </div>;


const CornerOrnament = ({ className = "", flip = "" }) => {
  const transform = `scale(${flip.includes('x') ? -1 : 1}, ${flip.includes('y') ? -1 : 1})`;
  return (
    <div className={"absolute pointer-events-none " + className} style={{ width: 20, height: 20, transform }}>
      <svg viewBox="0 0 20 20" width="20" height="20">
        <path d="M2 2 L8 2 M2 2 L2 8" stroke="#06195A" strokeWidth="1.5" strokeLinecap="round" fill="none" />
        <circle cx="2" cy="2" r="1.5" fill="#C8202E" />
      </svg>
    </div>);

};

const Home = () => {
  const { t, setPage, members, opps } = useApp();
  const stats = {
    members: members.length,
    years: 2026 - 1968,
    countries: new Set(members.map((m) => m.country)).size,
    promos: new Set(members.map((m) => m.promo)).size
  };

  return (
    <div className="relative">
      {/* Fil conducteur vertical — colonne vertébrale de la page */}
      <div
        aria-hidden
        className="hidden md:block pointer-events-none absolute left-1/2 -translate-x-1/2 z-0"
        style={{
          top: '720px',
          bottom: '320px',
          width: '2px',
          background: 'linear-gradient(to bottom, transparent 0%, rgba(245,197,24,0.0) 0%, rgba(245,197,24,0.45) 8%, rgba(200,32,46,0.3) 50%, rgba(11,44,122,0.35) 92%, transparent 100%)'
        }}>

        {/* Ornement haut — petite croix */}
        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <rect x="7.5" y="2" width="3" height="14" rx="0.5" fill="#F5C518" />
            <rect x="2" y="7.5" width="14" height="3" rx="0.5" fill="#F5C518" />
          </svg>
        </div>
        {/* Ornement milieu — losange */}
        <div className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2">
          <svg width="14" height="14" viewBox="0 0 14 14">
            <rect x="3" y="3" width="8" height="8" transform="rotate(45 7 7)" fill="#C8202E" />
          </svg>
        </div>
        {/* Ornement bas */}
        <div className="absolute -bottom-2 left-1/2 -translate-x-1/2">
          <div className="w-3 h-3 rounded-full bg-ajc-blue"></div>
        </div>
      </div>

      {/* HERO */}
      <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-40 pointer-events-none"></div>
        {/* décor */}
        <div className="absolute top-0 right-0 w-[600px] h-[600px] rounded-full bg-ajc-gold/10 blur-3xl -translate-y-1/3 translate-x-1/4"></div>
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full bg-ajc-red/10 blur-3xl translate-y-1/4 -translate-x-1/4"></div>

        <Section className="relative py-16 md:py-28 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 anim-fade-up">
            <div className="flex items-center gap-3 mb-5">
              <div className="liturgy-underline w-16"></div>
              <div className="text-[11px] uppercase tracking-[0.25em] text-ajc-gold font-semibold">Anno Domini 1968 — 2026</div>
            </div>
            <h1 className="font-display text-5xl md:text-7xl font-semibold leading-[1.05]" style={{ color: "rgb(248, 247, 247)" }}>
              {t.home.hero1}<br />
              <span className="text-ajc-gold italic">{t.home.hero2}</span><br />
              {t.home.hero3}
            </h1>
            <p className="mt-6 text-lg md:text-xl text-white/80 max-w-2xl leading-relaxed">{t.home.lead}</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Btn variant="gold" size="lg" icon="users" onClick={() => setPage("trombi")}>{t.home.cta1}</Btn>
              <button onClick={() => setPage("register")} className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-base font-medium border border-white/30 hover:bg-white/10 transition">
                <Icon name="plus" size={18} /> {t.home.cta2}
              </button>
            </div>

            {/* Stats */}
            <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl">
              {[
              { v: stats.members, l: t.home.stats.members },
              { v: stats.years, l: t.home.stats.years },
              { v: stats.countries, l: t.home.stats.countries },
              { v: stats.promos, l: t.home.stats.promos }].
              map((s, i) =>
              <div key={i} className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl px-4 py-3">
                  <div className="font-display text-3xl md:text-4xl font-semibold text-ajc-gold">{s.v}+</div>
                  <div className="text-[11px] uppercase tracking-wider text-white/60 mt-1">{s.l}</div>
                </div>
              )}
            </div>
          </div>

          {/* Bloc verset + logo */}
          <div className="lg:col-span-5 anim-fade-up flex flex-col items-center" style={{ animationDelay: "0.15s" }}>
            {/* Logo AJC officiel — centré au-dessus du bloc verset */}
            <div className="relative mb-6 hidden lg:block">
              <div className="absolute inset-0 bg-ajc-gold/25 blur-2xl rounded-full"></div>
              <div className="relative bg-white/95 backdrop-blur-sm rounded-2xl p-3 shadow-2xl ring-1 ring-white/30" style={{ width: "180px", height: "180px" }}>
                <img
                  src="/static/assets/logo-ajc-officiel.png"
                  alt="Logo officiel AJC — Association des Anciens Juvénistes de St Camille"
                  className="object-contain" style={{ width: "156px", height: "156px" }} />
              </div>
            </div>
            <div className="relative w-full bg-white/5 backdrop-blur-md border border-white/20 rounded-3xl p-8 md:p-10">
              <div className="flex items-center justify-center mb-4">
                <div className="relative">
                  <div className="absolute inset-0 bg-ajc-gold/30 blur-2xl rounded-full"></div>
                  <img src="https://www.genspark.ai/api/files/s/84OfM36e" alt="IPSCA" className="relative w-32 md:w-40 h-auto" />
                </div>
              </div>
              <div className="text-center font-display italic text-xl md:text-2xl text-white/95 leading-snug">
                "{t.home.verse.replace(/^«\s?|\s?»$/g, '')}"
              </div>
              <div className="text-center mt-3 text-ajc-gold text-sm font-medium tracking-wider">— {t.home.verseRef}</div>
              <div className="mt-6 pt-6 border-t border-white/10 flex items-center justify-center gap-4 text-[11px] uppercase tracking-[0.18em] text-white/60 font-semibold">
                <span>Responsabilité</span>
                <span className="text-ajc-gold">·</span>
                <span>Abnégation</span>
                <span className="text-ajc-gold">·</span>
                <span>Excellence</span>
              </div>
            </div>
          </div>
        </Section>
      </div>

      {/* Valeurs */}
      <Section className="py-12 md:py-16 relative z-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
          {[
          { icon: "users", label: t.home.values[0], color: "blue", desc: "Une famille unie de 1968 à aujourd'hui" },
          { icon: "school", label: t.home.values[1], color: "gold", desc: "Des aînés vers les jeunes générations" },
          { icon: "award", label: t.home.values[2], color: "red", desc: "Le travail bien fait comme prière" },
          { icon: "sparkles", label: t.home.values[3], color: "green", desc: "Toujours en chemin, toujours debout" }].
          map((v, i) => {
            const bgs = { blue: "from-ajc-blue/10 to-ajc-blue/0 text-ajc-blue", gold: "from-ajc-gold/30 to-ajc-gold/0 text-yellow-800", red: "from-ajc-red/10 to-ajc-red/0 text-ajc-red", green: "from-ajc-green/15 to-ajc-green/0 text-emerald-800" };
            return (
              <div key={i} className={"bg-gradient-to-b " + bgs[v.color] + " rounded-2xl p-5 md:p-6 border border-current/10"}>
                <Icon name={v.icon} size={28} strokeWidth={1.6} />
                <div className="font-display text-xl md:text-2xl font-semibold mt-3 text-ajc-blueDk">{v.label}</div>
                <div className="text-xs md:text-sm text-ajc-mute mt-1.5 leading-relaxed">{v.desc}</div>
              </div>);

          })}
        </div>
      </Section>

      {/* Notre histoire — avec portrait de Saint Camille */}
      <Section className="py-12 md:py-20 relative z-10">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
          {/* Texte */}
          <div className="lg:col-span-7">
            <SectionTitle overline="Depuis 1968" title={t.home.sections.story} lead={t.home.sections.storyLead} />
            <div className="space-y-4 text-ajc-ink/80 leading-relaxed">
              <p>L'Institut Privé de Santé Saint Camille de Lellis (IPSCA) a accueilli depuis près de six décennies des centaines de jeunes en formation initiale — les <em>Juvénistes</em> — venus de tout le Burkina Faso et des pays voisins.</p>
              <p>Sous la devise <strong className="text-ajc-blueDk">{t.motto}</strong>, ils y ont reçu une éducation à la fois exigeante, fraternelle et spirituelle, à l'école de <strong className="text-ajc-red">Saint Camille de Lellis</strong> (1550–1614), <em>patron des malades, des soignants et des hôpitaux</em>.</p>
              <p>Aujourd'hui dispersés sur quatre continents, ils restent reliés par un fil invisible — celui de leur formation, de leurs souvenirs et de leur foi commune.</p>
            </div>
            <div className="mt-6">
              <Btn variant="secondary" icon="arrowRight" onClick={() => setPage("about")}>
                Découvrir l'histoire complète
              </Btn>
            </div>
          </div>

          {/* Portrait sacré de Saint Camille */}
          <div className="lg:col-span-5">
            <SaintCamilleFrame />
          </div>
        </div>

        {/* Bande de chiffres — sur toute la largeur */}
        <div className="mt-12 md:mt-16 grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
          <div className="relative rounded-2xl bg-gradient-to-br from-ajc-blue to-ajc-blueDk p-5 text-white overflow-hidden">
            <div className="absolute inset-0 cross-watermark opacity-30"></div>
            <Icon name="church" size={26} className="text-ajc-gold relative" />
            <div className="relative mt-3">
              <div className="font-display text-3xl font-semibold">1968</div>
              <div className="text-[10px] text-white/70 uppercase tracking-wider mt-0.5">Fondation</div>
            </div>
          </div>
          <div className="rounded-2xl bg-ajc-gold p-5 text-ajc-blueDk">
            <Icon name="school" size={26} />
            <div className="mt-3">
              <div className="font-display text-3xl font-semibold">58</div>
              <div className="text-[10px] uppercase tracking-wider mt-0.5">Promotions</div>
            </div>
          </div>
          <div className="rounded-2xl bg-ajc-cream border-2 border-ajc-red/20 p-5">
            <Icon name="cross" size={26} className="text-ajc-red" />
            <div className="mt-3">
              <div className="font-display text-3xl font-semibold text-ajc-blueDk">9</div>
              <div className="text-[10px] uppercase tracking-wider mt-0.5 text-ajc-mute">Pays représentés</div>
            </div>
          </div>
          <div className="rounded-2xl bg-gradient-to-br from-ajc-green to-emerald-700 p-5 text-white">
            <Icon name="handshake" size={26} className="text-white" />
            <div className="mt-3">
              <div className="font-display text-3xl font-semibold">∞</div>
              <div className="text-[10px] uppercase tracking-wider mt-0.5 text-white/70">Fraternité</div>
            </div>
          </div>
        </div>
      </Section>

      {/* Trouver un ancien */}
      <Section className="py-12">
        <SectionTitle overline={t.home.sections.find} title={t.home.sections.findLead} center />
        <div className="grid md:grid-cols-3 gap-5 mt-6">
          {[
          { icon: "calendar", title: "Par promotion", desc: "Retrouvez votre classe d'origine, de 1968 à 2025", action: () => setPage("trombi") },
          { icon: "mapPin", title: "Par pays", desc: "Burkina, France, Canada, Côte d'Ivoire et plus", action: () => setPage("trombi") },
          { icon: "briefcase", title: "Par métier", desc: "Santé, éducation, droit, finance, tech, Église…", action: () => setPage("trombi") }].
          map((c, i) =>
          <button key={i} onClick={c.action}
          className="text-left bg-white rounded-2xl p-6 border border-ajc-blue/10 hover:border-ajc-blue/30 hover:shadow-cardHover transition group">
              <div className="w-12 h-12 rounded-xl bg-ajc-blue/10 flex items-center justify-center text-ajc-blue group-hover:bg-ajc-blue group-hover:text-white transition">
                <Icon name={c.icon} size={22} />
              </div>
              <div className="font-display text-2xl font-semibold mt-4 text-ajc-blueDk">{c.title}</div>
              <div className="text-sm text-ajc-mute mt-1.5 leading-relaxed">{c.desc}</div>
              <div className="mt-4 text-sm font-semibold text-ajc-blue flex items-center gap-1.5">
                Explorer <Icon name="arrowRight" size={14} />
              </div>
            </button>
          )}
        </div>
      </Section>

      {/* Prévisualisation membres récents */}
      <Section className="py-12">
        <div className="flex items-end justify-between mb-6 flex-wrap gap-3">
          <div>
            <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold mb-1">Récemment recensés</div>
            <h2 className="font-display text-3xl md:text-4xl font-semibold text-ajc-blueDk">Quelques visages du réseau</h2>
          </div>
          <Btn variant="secondary" icon="arrowRight" onClick={() => setPage("trombi")}>Voir tout le trombinoscope</Btn>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
          {members.slice(0, 6).map((m) =>
          <button key={m.id} onClick={() => useApp().openProfile(m.id)} className="text-center group">
              <div className="relative aspect-square rounded-2xl overflow-hidden border-2 border-white shadow-card group-hover:shadow-cardHover transition">
                <img src={m.photo} alt={m.first + " " + m.last} className="w-full h-full object-cover" />
              </div>
              <div className="mt-2 text-sm font-semibold text-ajc-blueDk truncate">{m.first} {m.last}</div>
              <div className="text-[11px] text-ajc-mute">Promo {m.promo} · {m.countryFlag}</div>
            </button>
          )}
        </div>
      </Section>

      {/* Verset */}
      <Section className="py-12">
        <VerseBlock verse={t.home.verse.replace(/^«\s?|\s?»$/g, '')} ref_={t.home.verseRef} />
      </Section>

      {/* Opportunités */}
      <Section className="py-12 md:py-16">
        <SectionTitle overline="Opportunités AJC" title={t.home.sections.opps} lead={t.home.sections.oppsLead} />
        <div className="grid md:grid-cols-3 gap-5">
          {[
          { k: "jobs", icon: "briefcase", label: "Postes vacants", count: opps.filter((o) => o.kind === "jobs" && o.status === "published").length, color: "blue" },
          { k: "biz", icon: "handshake", label: "Opportunités d'affaires", count: opps.filter((o) => o.kind === "biz" && o.status === "published").length, color: "gold" },
          { k: "training", icon: "school", label: "Formations", count: opps.filter((o) => o.kind === "training" && o.status === "published").length, color: "green" }].
          map((c) => {
            const bgs = { blue: "from-ajc-blue to-ajc-blueDk text-white", gold: "from-ajc-gold to-ajc-gold2 text-ajc-blueDk", green: "from-ajc-green to-emerald-700 text-white" };
            return (
              <button key={c.k} onClick={() => setPage("opps")}
              className={"text-left rounded-2xl p-6 bg-gradient-to-br " + bgs[c.color] + " hover:shadow-cardHover transition"}>
                <div className="flex items-center justify-between">
                  <Icon name={c.icon} size={28} />
                  <div className="font-display text-4xl font-semibold opacity-90">{c.count}</div>
                </div>
                <div className="font-display text-2xl font-semibold mt-6">{c.label}</div>
                <div className="text-sm opacity-80 mt-1">Cliquez pour explorer</div>
              </button>);

          })}
        </div>
      </Section>

      {/* CTA final */}
      <Section className="py-16">
        <div className="relative rounded-3xl bg-gradient-to-br from-ajc-blue to-ajc-blueDk text-white overflow-hidden p-10 md:p-14">
          <div className="absolute inset-0 cross-watermark opacity-30"></div>
          <div className="absolute top-0 right-0 w-96 h-96 bg-ajc-gold/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
          <div className="relative grid md:grid-cols-2 gap-8 items-center">
            <div>
              <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-gold font-semibold mb-3">{t.home.sections.join}</div>
              <h2 className="font-display text-4xl md:text-5xl font-semibold leading-tight">
                Votre nom mérite d'être dans <span className="text-ajc-gold italic">le grand livre</span> de l'AJC.
              </h2>
              <p className="mt-4 text-white/80 text-lg leading-relaxed">{t.home.sections.joinLead}</p>
            </div>
            <div className="flex md:justify-end">
              <Btn variant="gold" size="lg" icon="plus" onClick={() => setPage("register")}>{t.home.cta2}</Btn>
            </div>
          </div>
        </div>
      </Section>
    </div>);

};

window.Home = Home;