/* global React, Icon, PhotoPH, Slashes, useReveal, CountUp, KineticWord, t */

// =====================================================
// HERO
// =====================================================
function HomeHero({ lang, navigate, heroVariant }) {
  // mouse-aware parallax for the // mark
  const slashRef = React.useRef(null);
  React.useEffect(() => {
    const onMove = (e) => {
      if (!slashRef.current) return;
      const x = (e.clientX / window.innerWidth - 0.5) * 18;
      const y = (e.clientY / window.innerHeight - 0.5) * 12;
      slashRef.current.style.transform = `translate(${x}px, ${y}px) skewX(-12deg)`;
    };
    window.addEventListener("pointermove", onMove);
    return () => window.removeEventListener("pointermove", onMove);
  }, []);

  const verbs = lang === "fr"
    ? ["Créer.", "Construire.", "Déployer."]
    : ["Create.", "Build.", "Ship."];

  const tail = lang === "fr"
    ? <>Depuis Bamako et à travers l'Afrique, nous formons des builders à transformer une idée en site, application, automatisation ou outil IA qui fonctionne.</>
    : <>From Bamako to builders across Africa, we train people to turn an idea into a working website, app, automation, or AI tool.</>;

  return (
    <section style={{
      position: "relative", overflow: "hidden",
      color: "white",
      background: "linear-gradient(180deg, #2E1065 0%, #4C1D95 30%, #5B21B6 70%, #6D28D9 100%)",
      minHeight: "min(96vh, 980px)",
      display: "flex", alignItems: "center",
      paddingTop: 32,
    }} className="bg-grain">
      {/* gradient mesh blobs */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(60% 60% at 8% 12%, rgba(124,58,237,0.55) 0%, transparent 60%)," +
          "radial-gradient(45% 50% at 90% 80%, rgba(30,64,175,0.45) 0%, transparent 65%)," +
          "radial-gradient(40% 40% at 70% 10%, rgba(167,139,250,0.30) 0%, transparent 70%)",
        filter: "blur(4px)",
      }}/>

      {/* halftone */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.42) 1.2px, transparent 1.6px)",
        backgroundSize: "13px 13px",
        WebkitMaskImage: "radial-gradient(ellipse at 92% 38%, black 0%, transparent 55%)",
        maskImage: "radial-gradient(ellipse at 92% 38%, black 0%, transparent 55%)",
        opacity: 0.55,
      }}/>

      {/* the // mark */}
      <div ref={slashRef} aria-hidden style={{
        position: "absolute", right: "-2vw", top: "8%",
        zIndex: 1, transition: "transform 200ms var(--ease-out)",
      }}>
        <Slashes size={"min(46vw, 620px)"} color="rgba(196,181,253,0.18)"/>
      </div>

      <div className="container-wide" style={{ position: "relative", zIndex: 2, padding: "80px 32px 110px", width: "100%" }}>
        <div style={{ maxWidth: 1080 }}>
          {/* Kinetic verbs */}
          {heroVariant === "kinetic" ? (
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(56px, 9vw, 148px)", lineHeight: 0.92,
              letterSpacing: "-0.04em", color: "white",
              margin: "0 0 28px", textWrap: "balance",
            }} className="reveal">
              <span style={{ display: "block", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>
                {lang === "fr" ? "Apprendre à" : "Learn to"}
              </span>
              <span style={{ display: "block", color: "white" }}>
                <KineticWord words={verbs} color="#C4B5FD"/>
              </span>
              <span style={{
                display: "block", fontFamily: "var(--font-display)",
                fontStyle: "normal", color: "white", fontWeight: 800,
              }}>
                {lang === "fr"
                  ? <>avec l'IA <span style={{ color: "#A78BFA", fontStyle: "italic", fontWeight: 500 }}>par la pratique</span>.</>
                  : <>with AI <span style={{ color: "#A78BFA", fontStyle: "italic", fontWeight: 500 }}>by doing</span>.</>}
              </span>
            </h1>
          ) : (
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(56px, 9vw, 140px)", lineHeight: 0.95,
              letterSpacing: "-0.04em", color: "white",
              margin: "0 0 28px", textWrap: "balance",
            }} className="reveal">
              {verbs[0]} {verbs[1]}<br/>
              {verbs[2]} <span style={{ color: "#A78BFA", fontStyle: "italic", fontWeight: 500 }}>
                {lang === "fr" ? "l'IA depuis le Mali, à travers l'Afrique." : "AI, from Mali across Africa."}
              </span>
            </h1>
          )}

          {/* tail subline */}
          <p className="reveal" style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(18px, 1.4vw, 22px)",
            lineHeight: 1.45, maxWidth: 660,
            color: "rgba(255,255,255,0.82)",
            margin: "0 0 40px",
          }}>{tail}</p>

          {/* CTAs */}
          <div className="reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 80 }}>
            <a href="#program" onClick={(e) => { e.preventDefault(); navigate("program"); }}
               className="btn btn-light">
              {t("hero.cta_main", lang)} <Icon name="arrow-right" size={16} className="arrow"/>
            </a>
            <a href="#idia" onClick={(e) => { e.preventDefault(); navigate("idia"); }}
               className="btn btn-ghost-dark">
              {t("hero.cta_alt", lang)} <Icon name="arrow-up-right" size={16} className="arrow"/>
            </a>
          </div>

          {/* stat strip */}
          <div className="reveal" style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
            paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.18)",
            maxWidth: 880,
          }} className="stat-strip">
            {[
              ["48h",  lang === "fr" ? "pour livrer des sites fonctionnels" : "to ship working websites"],
              ["130+", lang === "fr" ? "entrepreneurs africains formés avec ALX Ventures" : "African entrepreneurs trained with ALX Ventures"],
              [lang === "fr" ? "Hybride" : "Hybrid", lang === "fr" ? "communauté Claude, à Bamako et en ligne" : "Claude community, in Bamako and online"],
              ["4",   lang === "fr" ? "consultations sectorielles IDIA au Mali" : "IDIA industry consultations in Mali"],
            ].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800,
                              fontSize: "clamp(32px, 3.2vw, 44px)", letterSpacing: "-0.02em",
                              color: "white", lineHeight: 1 }}>{n}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13,
                              color: "rgba(255,255,255,0.7)", marginTop: 8, maxWidth: 180,
                              lineHeight: 1.35 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* scroll cue */}
      <div aria-hidden style={{
        position: "absolute", left: "50%", bottom: 22, transform: "translateX(-50%)",
        zIndex: 3, color: "rgba(255,255,255,0.6)",
        fontFamily: "var(--font-display)", fontSize: 11, letterSpacing: "0.18em",
        textTransform: "uppercase", display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
      }}>
        <span>{lang === "fr" ? "Défiler" : "Scroll"}</span>
        <Icon name="arrow-down" size={14}/>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .stat-strip { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// =====================================================
// IMPACT BAND (white, between hero and pillars)
// =====================================================
function ImpactBand({ lang }) {
  const ref = useReveal();
  const items = [
    { display: "130+", label: lang === "fr" ? "entrepreneurs réunis pour construire des MVP avec l'IA" : "entrepreneurs brought together to build AI-powered MVPs", tag: "Africa · ALX" },
    { display: "48h", label: lang === "fr" ? "pour construire des sites fonctionnels au Vibe Coding" : "to build working sites at Vibe Coding", tag: "Build" },
    { display: lang === "fr" ? "Salle pleine" : "Full room", label: lang === "fr" ? "au lancement hybride de Bamako Claude Community" : "at the hybrid Bamako Claude Community launch", tag: lang === "fr" ? "Communauté" : "Community" },
    { display: lang === "fr" ? "4 pays" : "4 countries", label: lang === "fr" ? "dans le bilan agrégé de la première cohorte IDIA" : "in the first IDIA cohort's aggregate report", tag: lang === "fr" ? "Portée régionale" : "Regional reach" },
  ];
  return (
    <section ref={ref} style={{ padding: "120px 0 96px", background: "white" }}>
      <div className="container-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                      marginBottom: 64, gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 620 }}>
            <span className="eyebrow-mark reveal">{t("impact_eyebrow", lang)}</span>
            <h2 className="reveal" style={{ marginTop: 14, marginBottom: 0 }}>
              {lang === "fr"
                ? <>Ancrés au Mali. <span style={{ color: "var(--fg-3)" }}>Actifs à travers l'Afrique.</span></>
                : <>Rooted in Mali. <span style={{ color: "var(--fg-3)" }}>Working across Africa.</span></>}
            </h2>
          </div>
          <p className="reveal lead" style={{ maxWidth: 380, color: "var(--fg-2)" }}>
            {lang === "fr"
              ? "Nos formations, communautés et consultations relient l'apprentissage pratique aux besoins des participants et des organisations."
              : "Our training, communities, and consultations connect practical learning with the needs of participants and organizations."}
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)",
        }} className="impact-grid">
          {items.map((it, i) => (
            <div key={i} className="reveal"
                 style={{
                   padding: "40px 28px",
                   borderRight: i < items.length - 1 ? "1px solid var(--line-1)" : "none",
                   "--reveal-delay": `${i * 80}ms`,
                 }}>
              <div className="chip" style={{ marginBottom: 20 }}>{it.tag}</div>
              <div className="stat-num" style={it.display && it.display.length > 6 ? { fontSize: "clamp(30px, 3.5vw, 48px)" } : null}>{it.display || <CountUp to={it.num} suffix={it.suffix}/>}</div>
              <div className="stat-label">{it.label}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .impact-grid { grid-template-columns: 1fr 1fr !important; }
          .impact-grid > div:nth-child(2) { border-right: none !important; }
          .impact-grid > div:nth-child(1), .impact-grid > div:nth-child(2) { border-bottom: 1px solid var(--line-1) !important; }
        }
        @media (max-width: 540px) { .impact-grid { grid-template-columns: 1fr !important; }
          .impact-grid > div { border-right: none !important; border-bottom: 1px solid var(--line-1) !important; }
          .impact-grid > div:last-child { border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

// =====================================================
// THREE PILLARS — Former / Influencer / Inclure
// =====================================================
function Pillars({ lang, navigate }) {
  const ref = useReveal();
  const data = [
    {
      verb: lang === "fr" ? "Construire" : "Build",
      en: "01",
      icon: "graduation",
      title: lang === "fr" ? "Des compétences IA acquises en fabriquant quelque chose d'utile." : "AI skills learned by making something useful.",
      lines: [
        lang === "fr" ? "Vibe Coding : des sites fonctionnels en 48 heures" : "Vibe Coding: working websites in 48 hours",
        lang === "fr" ? "Build sprints pour créer et déployer rapidement" : "Build sprints to create and deploy quickly",
        lang === "fr" ? "Masterclasses : apps IA, NotebookLM, Zapier + IA" : "Masterclasses: AI apps, NotebookLM, Zapier + AI",
        lang === "fr" ? "Des formats accessibles sans prérequis de code" : "Formats accessible without coding prerequisites",
      ],
      tone: "purple",
      cta: lang === "fr" ? "Voir les formations" : "Browse programs",
      goto: "program",
    },
    {
      verb: lang === "fr" ? "Rassembler" : "Gather",
      en: "02",
      icon: "megaphone",
      title: lang === "fr" ? "Une communauté où les builders apprennent côte à côte." : "A community where builders learn side by side.",
      lines: [
        lang === "fr" ? "Bamako Claude Community lancée en juin 2026" : "Bamako Claude Community launched in June 2026",
        lang === "fr" ? "Salle pleine et participation en ligne internationale" : "Full room and international online participation",
        lang === "fr" ? "Cas d'usage concrets et apprentissage entre pairs" : "Practical use cases and peer learning",
        lang === "fr" ? "Rencontres pour curieux, créateurs et techniciens" : "Meetups for curious people, creators, and technologists",
      ],
      tone: "blue",
      cta: lang === "fr" ? "Voir la communauté" : "See the community",
      goto: "community",
    },
    {
      verb: lang === "fr" ? "Orienter" : "Shape",
      en: "03",
      icon: "heart-hands",
      title: lang === "fr" ? "Relier la pratique aux choix publics sur l'IA." : "Connect hands-on practice with public choices about AI.",
      lines: [
        lang === "fr" ? "Consultations santé, agriculture, économie et éducation" : "Health, agriculture, economy, and education consultations",
        lang === "fr" ? "Consultation nationale tenue en février 2026" : "National consultation held in February 2026",
        lang === "fr" ? "Compétences, données, financement et inclusion" : "Skills, data, financing, and inclusion",
        lang === "fr" ? "Éthique et régulation ancrées dans le contexte malien" : "Ethics and regulation grounded in Mali's context",
      ],
      tone: "warm",
      cta: lang === "fr" ? "Voir les initiatives" : "See initiatives",
      goto: "idia",
    },
  ];

  const toneStyle = (tone, hovered) => {
    const colors = {
      purple: { bg: "var(--purple-50)", verb: "var(--brand)", border: hovered ? "var(--purple-300)" : "var(--purple-100)" },
      blue:   { bg: "var(--blue-50)",  verb: "var(--accent)", border: hovered ? "var(--blue-300)" : "var(--blue-100)" },
      warm:   { bg: "#FBEFE9",         verb: "#A04A28", border: hovered ? "#E4B59F" : "#F2D8C6" },
    };
    return colors[tone];
  };

  return (
    <section ref={ref} style={{
      padding: "120px 0",
      background: "var(--bg-subtle)",
      position: "relative", overflow: "hidden",
    }}>
      <div className="container-wide">
        <div style={{ marginBottom: 64, maxWidth: 760 }}>
          <span className="eyebrow-mark reveal">{t("pillars.eyebrow", lang)}</span>
          <h2 className="reveal" style={{ marginTop: 14 }}>
            {lang === "fr"
              ? <>Former des builders. Animer une communauté. Faire avancer une IA <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--tagline)" }}>utile</em>, depuis le Mali à travers l'Afrique.</>
              : <>Train builders. Grow a community. Advance <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--tagline)" }}>useful</em> AI from Mali across Africa.</>}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}
             className="pillars-grid">
          {data.map((p, i) => <PillarCard key={i} p={p} toneStyle={toneStyle} delay={i * 100} navigate={navigate} lang={lang}/>)}
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function PillarCard({ p, toneStyle, delay, navigate, lang }) {
  const [hover, setHover] = React.useState(false);
  const ts = toneStyle(p.tone, hover);
  return (
    <article className="reveal"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => navigate(p.goto)}
      style={{
        "--reveal-delay": `${delay}ms`,
        position: "relative",
        background: "white",
        border: `1px solid ${ts.border}`,
        borderRadius: "var(--radius-2xl)",
        padding: "36px 32px 32px",
        cursor: "pointer",
        transition: "transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)",
        transform: hover ? "translateY(-6px)" : "translateY(0)",
        boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-sm)",
        overflow: "hidden",
        isolation: "isolate",
      }}>
      {/* index */}
      <div style={{
        position: "absolute", top: 24, right: 28,
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: 14, color: "var(--fg-3)", letterSpacing: "0.1em",
      }}>{p.en}</div>
      {/* hover wash */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: ts.bg,
        opacity: hover ? 1 : 0,
        transition: "opacity 300ms var(--ease-out)",
      }}/>

      {/* icon disc */}
      <div style={{
        width: 56, height: 56, borderRadius: 999,
        background: ts.verb, color: "white",
        display: "flex", alignItems: "center", justifyContent: "center",
        marginBottom: 24, transition: "transform 300ms var(--ease-out)",
        transform: hover ? "rotate(-6deg) scale(1.06)" : "rotate(0deg) scale(1)",
      }}>
        <Icon name={p.icon} size={26} stroke={2}/>
      </div>

      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 36, letterSpacing: "-0.02em", lineHeight: 1.1,
        margin: "0 0 6px", color: ts.verb,
      }}>{p.verb}.</h3>

      <p style={{
        fontFamily: "var(--font-display)", fontSize: 18, lineHeight: 1.4,
        color: "var(--fg-1)", fontWeight: 600,
        margin: "0 0 24px", textWrap: "balance",
      }}>{p.title}</p>

      <ul style={{
        listStyle: "none", padding: 0, margin: "0 0 28px",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        {p.lines.map((l, i) => (
          <li key={i} style={{
            fontSize: 14, color: "var(--fg-2)",
            display: "flex", alignItems: "flex-start", gap: 10,
            fontFamily: "var(--font-display)",
          }}>
            <span style={{ color: ts.verb, fontWeight: 800, lineHeight: 1.4 }}>//</span>
            <span style={{ lineHeight: 1.4 }}>{l}</span>
          </li>
        ))}
      </ul>

      <div style={{ display: "flex", alignItems: "center", gap: 6,
                    color: ts.verb, fontFamily: "var(--font-display)",
                    fontWeight: 600, fontSize: 14 }}>
        {p.cta}
        <Icon name="arrow-right" size={14}
              style={{ transition: "transform 300ms var(--ease-out)",
                       transform: hover ? "translateX(4px)" : "translateX(0)" }}/>
      </div>
    </article>
  );
}

// Export
Object.assign(window, { HomeHero, ImpactBand, Pillars });