/* global React, WIIN_COPY, WIIN_SDG_META, WIIN_STATS, WIIN_PULLQUOTE,
   WIIN_CTA_BANNER,
   useReveal, useMaskReveal, useCounter, useMagnet, fmtInt */

const accentTokens = {
  "green":      { deep: "var(--green-dark)",  soft: "var(--green-light)", mid: "var(--green)" },
  "amber":      { deep: "var(--amber-dark)",  soft: "var(--amber-light)", mid: "var(--amber)" },
  "amber-dark": { deep: "var(--amber-dark)",  soft: "var(--amber-light)", mid: "var(--amber-dark)" },
  "teal":       { deep: "var(--teal-dark)",   soft: "var(--teal-light)",  mid: "var(--teal)" },
  "teal-dark":  { deep: "var(--teal-dark)",   soft: "var(--teal-light)",  mid: "var(--teal-dark)" },
};
function aTok(name) {
  const a = accentTokens[name] || accentTokens.green;
  return { "--accent-deep": a.deep, "--accent-soft": a.soft, "--accent-mid": a.mid };
}

/* ----- SDG marquee (uniform cards with official UN palette) ----- */
function SDGMarquee({ lang }) {
  const nums = WIIN_COPY[lang].home.sdgNumbers;
  // duplicate the list so the loop is seamless at -50% translate
  const items = [...nums, ...nums];
  return (
    <div className="sdg-marquee" aria-label={lang === "fr" ? "Objectifs de développement durable de l'ONU" : "UN Sustainable Development Goals"}>
      <div className="track">
        {items.map((n, i) => {
          const meta = WIIN_SDG_META[n];
          const padded = String(n).padStart(2, "0");
          return (
            <div key={i} className="sdg-chip" aria-hidden={i >= nums.length ? "true" : "false"}>
              <span className="swatch" style={{ background: meta.hex }}>
                {/* Real UN SDG icon — falls back to the number if the un.org host
                    is unreachable (CORS or offline). Keeps tile chrome uniform. */}
                <img
                  src={`https://www.un.org/sustainabledevelopment/wp-content/uploads/2019/01/E_SDG_Icons-${padded}.png`}
                  alt=""
                  width="22" height="22"
                  loading="lazy" decoding="async"
                  referrerPolicy="no-referrer"
                  onError={(e) => { e.currentTarget.style.display = 'none'; }}
                  style={{ display: "block", filter: "brightness(0) invert(1)" }}
                />
                <span aria-hidden="true" style={{ position: "absolute" }}>{n}</span>
              </span>
              <span className="lbl"><strong style={{ fontWeight: 700, color: "var(--text-primary)" }}>{lang === "fr" ? "ODD" : "SDG"} {padded}</strong> · {meta[lang]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* Production hero photography (Gemini Nano Banana Pro 8K, Azure Blob SAS valid → 2027-05-12). */
const HERO_HOME_IMG = "https://stn8ndigigle.blob.core.windows.net/brand-assets/wiin-canada/generated/wiin-hero-home-001.jpg?se=2027-05-12T23%3A59%3A00Z&sp=r&spr=https&sv=2026-02-06&sr=b&sig=yObEfV3Ph%2F1GVDdEEdiMvXsSzwMQws%2BWC%2FKVeAT6o7g%3D";
/* Cinematic loop generated via Google Veo 3 fast (1280×720, 6s, H.264, Azure Blob SAS to 2027-05-13). */
const HERO_HOME_VIDEO = "https://stn8ndigigle.blob.core.windows.net/brand-assets/wiin-canada/generated/wiin-hero-home-loop.mp4?se=2027-05-13T23%3A59%3A00Z&sp=r&spr=https&sv=2026-02-06&sr=b&sig=AqjZBhN%2BUc4I8VlzHwLVTDbM01y9%2B8cG7U4Y7gRDft4%3D";

/* ----- Cinematic hero ----- */
function HomeHero({ lang, go }) {
  const c = WIIN_COPY[lang].home;
  const primaryRef = useMagnet({ strength: 0.30 });
  const altText = lang === "fr"
    ? "Une femme cultivatrice dans un champ de manioc au lever du jour"
    : "A woman cassava farmer in a sunlit field at golden hour";
  return (
    <section className="hero-cinema hero-cinema-photo">
      <video
        className="hero-photo hero-video"
        autoPlay muted loop playsInline preload="metadata"
        poster={HERO_HOME_IMG}
        aria-label={altText}
      >
        <source src={HERO_HOME_VIDEO} type="video/mp4" />
      </video>
      <img
        className="hero-photo hero-photo-fallback"
        src={HERO_HOME_IMG}
        alt={altText}
        loading="eager"
        decoding="async"
        aria-hidden="true"
      />
      <div className="hero-overlay" aria-hidden="true"></div>
      <div className="mesh-layer" aria-hidden="true"></div>
      <div className="bloom-layer" aria-hidden="true"></div>
      <div className="grain-layer" aria-hidden="true"></div>

      <div className="wrap hero-content" style={{ width: "100%" }}>
        <h1 className="display-mega" style={{ marginBottom: 28, maxWidth: "16ch" }}>
          {lang === "fr" ? "Nourrir," : "Nourish,"}{" "}
          <span className="accent-amber">{lang === "fr" ? "autonomiser," : "empower,"}</span>{" "}
          {lang === "fr" ? "préserver." : "preserve."}
        </h1>

        <p style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: "clamp(1.05rem, 1.4vw, 1.3rem)",
          lineHeight: 1.5,
          color: "var(--text-primary)",
          maxWidth: "62ch",
          marginBottom: 36,
          fontWeight: 400,
        }}>
          {c.mission}
        </p>

        <div style={{ display: "flex", gap: 18, flexWrap: "wrap", alignItems: "center" }}>
          <button ref={primaryRef} className="cta-magnet" onClick={() => go("contact")}>
            {lang === "fr" ? "S'impliquer" : "Get involved"}
            <span aria-hidden="true">→</span>
          </button>
          <button className="cta-ghost-magnet" onClick={() => go("mission")}>
            {lang === "fr" ? "Soutenir notre mission" : "Support our mission"}
          </button>
        </div>

        <div style={{ marginTop: "clamp(56px, 8vh, 96px)" }}>
          <SDGMarquee lang={lang} />
        </div>
      </div>
    </section>
  );
}

/* ----- Horizontal pillar carousel ----- */
function PillarRail({ lang }) {
  const c = WIIN_COPY[lang].home;
  return (
    <section className="section-loose">
      <div className="wrap">
        <div className="chapter">
          <span className="ix">01</span>
          <div>
            <div className="meta">{c.pillarsEyebrow}</div>
            <h2 className="head">
              {lang === "fr"
                ? <>Trois piliers de lancement. <em>Onze ODD alignés.</em></>
                : <>Three launch pillars. <em>Eleven SDGs aligned.</em></>
              }
            </h2>
            <p className="rail-hint">{lang === "fr" ? "Faites défiler horizontalement →" : "Scroll horizontally →"}</p>
          </div>
        </div>
      </div>

      <div className="wrap" style={{ padding: 0 }}>
        <div className="pillar-rail" role="region" aria-label={lang === "fr" ? "Carrousel des piliers" : "Pillars carousel"}>
          {c.pillars.map((p, i) => (
            <article key={i} className="pillar-rail-card" style={aTok(p.color)}>
              <span className="ghost-num" aria-hidden="true">{p.num}</span>
              <span className="ghost-icon" aria-hidden="true">{p.icon}</span>
              <div className="overline" style={{ color: "var(--accent-deep)", borderBottomColor: "var(--accent-mid)" }}>
                {lang === "fr" ? `Pilier ${p.num} · lancement` : `Pillar ${p.num} · launch`}
              </div>
              <h3 className="p-title">{p.title}</h3>
              <p className="p-body">{p.body}</p>
              <div className="p-foot">
                <div className="sdg-cluster">
                  {p.sdg.map((n) => {
                    const m = WIIN_SDG_META[n] || {};
                    const desc = m[lang === "fr" ? "descFr" : "descEn"] || "";
                    return (
                      <a key={n}
                         href={m.link || "#"}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="sdg-bubble sdg-bubble-link"
                         style={{ background: m.hex || "var(--green)" }}
                         title={`${lang === "fr" ? "ODD" : "SDG"} ${n} · ${m[lang] || ""}\n${desc}`}
                         aria-label={`${lang === "fr" ? "Objectif" : "Goal"} ${n} — ${m[lang] || ""}`}>{n}</a>
                    );
                  })}
                </div>
                <a className="explore-link" href="#" onClick={(e) => e.preventDefault()}>
                  {lang === "fr" ? "Explorer" : "Explore"}<span className="arrow">→</span>
                </a>
              </div>
            </article>
          ))}
        </div>

        {/* Phase 2 expansion teaser (Year 2+) */}
        {c.pillarsPhase2 && (
          <div style={{
            margin: "28px 0 0", padding: "22px 26px",
            background: "rgba(0,137,123,0.06)",
            border: "1px dashed var(--teal)",
            borderRadius: 16,
            display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap",
          }}>
            <span style={{
              fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 11,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--teal-dark)",
              background: "#fff", padding: "6px 12px", borderRadius: 999,
              border: "1px solid var(--teal)",
              flex: "0 0 auto",
            }}>{c.pillarsPhase2Eyebrow}</span>
            <span style={{
              fontFamily: "'Playfair Display', Georgia, serif",
              fontStyle: "italic", fontWeight: 700,
              fontSize: "clamp(1.05rem, 1.4vw, 1.25rem)",
              color: "var(--text-primary)",
              lineHeight: 1.4,
              flex: "1 1 280px",
            }}>{c.pillarsPhase2}</span>
          </div>
        )}
      </div>
    </section>
  );
}

/* ----- Split-mask mission section ----- */
function MissionSplit({ lang }) {
  const c = WIIN_COPY[lang].home;
  const isFr = lang === "fr";
  return (
    <section className="section-loose section-alt">
      <div className="wrap">
        <div className="chapter">
          <span className="ix">02</span>
          <div>
            <div className="meta">{isFr ? "Mission" : "Mission"}</div>
            <h2 className="head">
              {isFr ? <>Une racine, <em>un horizon partagé.</em></> : <>One root, <em>a shared horizon.</em></>}
            </h2>
          </div>
        </div>

        <div className="split-mission">
          <div className="mission-art">
            {window.MissionCarousel ? (
              <MissionCarousel lang={lang} slotKey="mission-art" ariaLabel={isFr ? "Carrousel mission · jardin de Brossard, atelier, festival" : "Mission carousel · Brossard garden, workshop, festival"} />
            ) : (
              <div className="image-placeholder-card image-placeholder-hero" data-slot="mission-art" role="img"
                aria-label={isFr ? "Carrousel mission en cours de chargement" : "Mission carousel loading"}>
                <span className="iph-icon" aria-hidden="true">📷</span>
                <span className="iph-label">{isFr ? "Carrousel en chargement…" : "Carousel loading…"}</span>
              </div>
            )}
            <div className="corner-tag">{isFr ? "Phase 1 · 2026" : "Phase 1 · 2026"}</div>
          </div>

          <div ref={useReveal()} className="reveal">
            <p className="mission-copy">
              {isFr
                ? <>Faire progresser le <em>développement durable mondial</em> par l'innovation, l'éducation, l'agriculture, l'autonomisation numérique, l'énergie propre, la santé, la culture et le développement communautaire.</>
                : <>Advance <em>global sustainable development</em> through innovation, education, agriculture, digital empowerment, clean energy, health, culture, and community development.</>
              }
            </p>
            <p className="mission-copy en">
              {isFr
                ? "En mettant l'accent sur les femmes, les jeunes, les personnes en situation de handicap et les populations défavorisées en Afrique, dans les Caraïbes et en Amérique du Nord."
                : "Focusing on women, youth, persons with disabilities, and underserved populations in Africa, the Caribbean, and North America."
              }
            </p>
            <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 10 }}>
              {(isFr
                ? ["Femmes", "Jeunes", "Personnes en situation de handicap", "Diaspora", "Afrique", "Caraïbes", "Amérique du Nord"]
                : ["Women", "Youth", "Persons with disabilities", "Diaspora", "Africa", "Caribbean", "North America"]
              ).map((t, i) => (
                <span key={i} style={{
                  padding: "6px 12px", borderRadius: 999,
                  background: "rgba(46,125,50,0.10)", color: "var(--green-dark)",
                  fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 12.5, letterSpacing: "0.02em",
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Dark impact strip with grain ----- */
function ImpactStripDark({ lang }) {
  const stats = WIIN_STATS[lang];
  const q = WIIN_PULLQUOTE[lang];
  return (
    <section className="impact-dark section-loose">
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="chapter">
          <span className="ix" style={{ color: "var(--amber)" }}>03</span>
          <div>
            <div className="meta" style={{ color: "rgba(255,255,255,0.62)" }}>{lang === "fr" ? "Impact mesurable" : "Measurable impact"}</div>
            <h2 className="head" style={{ color: "#fff" }}>
              {lang === "fr" ? <>Des chiffres, <em style={{ color: "#FFCC80" }}>des récits.</em></> : <>The numbers, <em style={{ color: "#FFCC80" }}>the stories.</em></>}
            </h2>
          </div>
        </div>

        <DarkCounters stats={stats} lang={lang} />

        <div style={{ marginTop: "clamp(56px, 8vw, 96px)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <blockquote className="impact-pullquote">
            <span className="quote-mark">“</span>
            {q.quote}
            <cite>— {q.cite}</cite>
          </blockquote>
          <p style={{
            fontFamily: "'Inter', sans-serif",
            color: "rgba(255,255,255,0.82)",
            fontSize: 15, lineHeight: 1.65,
            maxWidth: "52ch",
          }}>
            {lang === "fr"
              ? "Le manioc nourrit plus de 800 millions de personnes à travers les Amériques, l'Afrique et l'Asie. Pour la diaspora africaine et caribéenne du Québec, c'est un fil culturel qui relie ici à là-bas."
              : "Cassava feeds more than 800 million people across the Americas, Africa and Asia. For Québec's African and Caribbean diaspora, it's a cultural thread that links here to over there."
            }
          </p>
        </div>
      </div>
    </section>
  );
}
function DarkCounters({ stats, lang }) {
  return (
    <div className="impact-counters">
      {stats.map((s, i) => <DarkCounter key={i} stat={s} lang={lang} />)}
    </div>
  );
}
function DarkCounter({ stat, lang }) {
  const [val, ref] = useCounter(stat.value);
  return (
    <div className="impact-counter" ref={ref}>
      <div className="v">{fmtInt(val, lang)}{stat.suffix || ""}</div>
      <div className="u">{stat.label}</div>
      <div className="l">{stat.sub}</div>
    </div>
  );
}

/* ----- Governance portrait grid — REMOVED per CEO QA round 1.
 * Not for public disclosure at this stage. */

/* ----- Final teal CTA strip ----- */
function CTAStripTeal({ lang, go }) {
  const c = WIIN_CTA_BANNER[lang];
  const ref = useMagnet({ strength: 0.30 });
  return (
    <section className="cta-strip-teal">
      <div className="inner">
        <div className="overline" style={{ color: "#FFE0B2", borderBottomColor: "#FFE0B2", marginBottom: 20 }}>
          {lang === "fr" ? "Rejoignez-nous" : "Join us"}
        </div>
        <h2 className="display-mega" style={{ fontSize: "clamp(2.8rem, 7vw, 5.5rem)", marginBottom: 26 }}>{c.title}</h2>
        <p style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: "clamp(1.05rem, 1.3vw, 1.2rem)",
          lineHeight: 1.55,
          color: "rgba(255,255,255,0.92)",
          maxWidth: "56ch",
          margin: "0 auto 32px",
        }}>{c.body}</p>
        <div style={{ display: "inline-flex", gap: 16, flexWrap: "wrap", justifyContent: "center" }}>
          <button ref={ref} className="cta-magnet" style={{ background: "#fff", color: "var(--teal-dark)" }} onClick={() => go("contact")}>
            {lang === "fr" ? "Nous contacter" : "Contact us"}<span aria-hidden="true">→</span>
          </button>
          <button className="cta-ghost-magnet" style={{ borderColor: "rgba(255,255,255,0.6)", color: "#fff" }} onClick={() => go("mission")}>
            {lang === "fr" ? "Découvrir notre mission" : "Discover our mission"}
          </button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ lang, go }) {
  return (
    <main role="main">
      <HomeHero lang={lang} go={go} />
      <PillarRail lang={lang} />
      <MissionSplit lang={lang} />
      <ImpactStripDark lang={lang} />
      <CTAStripTeal lang={lang} go={go} />
    </main>
  );
}

window.SDGMarquee = SDGMarquee;
window.HomePage = HomePage;