/* Sections A → window: SectionHead, Hero, Pillars, Context, Value, Clubs */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon, Placeholder = window.Placeholder, RiverFlow = window.RiverFlow;

  const SectionHead = window.SectionHead = function ({ eyebrow, title, lede, align = "left", light, max = 640 }) {
    return (
      <div style={{ textAlign: align, maxWidth: align === "center" ? 760 : max, marginInline: align === "center" ? "auto" : 0 }} data-reveal>
        <div style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: align === "center" ? "center" : "flex-start", marginBottom: 16 }}>
          <span className="kicker-rule"></span>
          <span className="eyebrow">{eyebrow}</span>
        </div>
        <h2 className="display" style={{ fontSize: "clamp(34px,4.4vw,58px)", margin: 0, color: light ? "#fff" : "var(--ink)" }}>{title}</h2>
        {lede && <p className="lede" style={{ marginTop: 18, color: light ? "rgba(255,255,255,.75)" : "var(--ink-soft)" }}>{lede}</p>}
      </div>
    );
  };

  // ============ HERO ============
  window.Hero = function Hero({ C, mark, logoWhite, variant }) {
    const h = C.hero;
    const Title = ({ light }) => (
      <h1 className="display" style={{ fontSize: "clamp(38px,4.8vw,76px)", lineHeight: 1.14, margin: 0, color: light ? "#fff" : "var(--ink)", textWrap: "balance" }}>
        {h.title.map((line, i) => (
          <span key={i} style={{ display: "block" }}>
            {line === h.titleAccent
              ? <span className="serif-it" style={{ color: "var(--gold-500)", fontWeight: 600 }}>{line}</span>
              : line}
          </span>
        ))}
      </h1>
    );
    const Stats = ({ light }) => (
      <div style={{ display: "flex", gap: "clamp(24px,4vw,52px)", marginTop: 44, flexWrap: "wrap" }}>
        {h.stat.map(([n, l], i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column" }}>
            <span className="display" style={{ fontSize: 46, color: "var(--gold-500)", lineHeight: 1 }}>{n}</span>
            <span style={{ fontSize: 13.5, color: light ? "rgba(255,255,255,.7)" : "var(--ink-soft)", marginTop: 6, maxWidth: 110 }}>{l}</span>
          </div>
        ))}
      </div>
    );
    const CTAs = () => (
      <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
        <a href="membership.html" className="btn btn-gold">{h.cta1} <Icon name="arrow" size={17} /></a>
        <a href="contact.html" className="btn btn-ghost">{h.cta2}</a>
      </div>
    );
    const eyebrowEl = (light) => (
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 26 }}>
        <span className="kicker-rule"></span>
        <span className="eyebrow" style={{ color: light ? "var(--gold-300)" : "var(--accent-ink)" }}>{h.eyebrow}</span>
      </div>
    );

    // ----- FULL-BLEED -----
    if (variant === "fullbleed") {
      return (
        <section id="top" style={{ position: "relative", background: "var(--navy-900)", color: "#fff", overflow: "hidden", minHeight: "min(92vh,860px)", display: "flex", alignItems: "flex-end" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.025) 0 22px, rgba(255,255,255,.05) 22px 44px)" }}></div>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 90% at 80% 10%, rgba(184,144,47,.20), transparent 55%)" }}></div>
          <img src="assets/ema_logo_cutout.png" alt="" aria-hidden="true" style={{ position: "absolute", right: "-6%", top: "50%", transform: "translateY(-50%)", width: "min(620px,52vw)", opacity: .12, filter: "brightness(0) invert(1)" }} />
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 240, opacity: .5 }}><RiverFlow opacity={.5} /></div>
          <div className="wrap" style={{ position: "relative", paddingTop: 120, paddingBottom: 96 }} data-reveal>
            {eyebrowEl(true)}
            <Title light />
            <p className="lede" style={{ maxWidth: 560, marginTop: 26, color: "rgba(255,255,255,.78)" }}>{h.sub}</p>
            <CTAs />
            <Stats light />
          </div>
        </section>
      );
    }

    // ----- CENTERED -----
    if (variant === "centered") {
      return (
        <section id="top" style={{ position: "relative", overflow: "hidden", background: "var(--bg)" }}>
          <div style={{ position: "absolute", inset: 0, opacity: .9, pointerEvents: "none" }}>
            <div style={{ position: "absolute", bottom: -20, left: 0, right: 0, height: 260 }}><RiverFlow opacity={.5} /></div>
          </div>
          <div className="wrap" style={{ position: "relative", textAlign: "center", paddingTop: "clamp(80px,12vw,150px)", paddingBottom: "clamp(70px,10vw,120px)" }} data-reveal>
            <img src="assets/ema_logo_cutout.png" alt="EMA" style={{ width: 84, height: 84, margin: "0 auto 30px", objectFit: "contain" }} />
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
              <span className="eyebrow">{h.eyebrow}</span>
            </div>
            <div style={{ maxWidth: 1000, margin: "0 auto" }}><Title /></div>
            <p className="lede" style={{ maxWidth: 620, margin: "26px auto 0" }}>{h.sub}</p>
            <div style={{ display: "flex", justifyContent: "center" }}><CTAs /></div>
            <div style={{ display: "flex", justifyContent: "center" }}><Stats /></div>
          </div>
        </section>
      );
    }

    // ----- SPLIT (default) -----
    return (
      <section id="top" style={{ position: "relative", background: "var(--bg)", overflow: "hidden" }}>
        <div className="wrap ema-hero-split" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: "clamp(32px,5vw,72px)", alignItems: "center", paddingTop: "clamp(56px,7vw,96px)", paddingBottom: "clamp(56px,7vw,96px)", minHeight: "min(82vh,760px)" }}>
          <div data-reveal>
            {eyebrowEl(false)}
            <Title />
            <p className="lede" style={{ maxWidth: 500, marginTop: 26 }}>{h.sub}</p>
            <CTAs />
            <Stats />
          </div>
          <div data-reveal style={{ "--rd": "120ms", position: "relative" }}>
            <div style={{ position: "relative", borderRadius: 8, overflow: "hidden", background: "var(--navy-900)", aspectRatio: "4/5", boxShadow: "0 40px 80px -40px rgba(14,31,58,.5)" }}>
              <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.03) 0 20px, rgba(255,255,255,.06) 20px 40px)" }}></div>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(100% 70% at 70% 20%, rgba(184,144,47,.22), transparent 60%)" }}></div>
              <img src={logoWhite} alt="EMA" style={{ position: "absolute", inset: 0, margin: "auto", width: "62%", opacity: .92 }} />
              <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 180, opacity: .6 }}><RiverFlow opacity={.6} /></div>
              <div style={{ position: "absolute", left: 24, bottom: 22, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>{h.imgLabel}</div>
            </div>
            <div style={{ position: "absolute", left: -22, bottom: 36, background: "var(--gold-500)", color: "#fff", padding: "18px 22px", borderRadius: 6, boxShadow: "0 20px 40px -16px rgba(184,144,47,.6)", maxWidth: 220 }} className="ema-hero-badge">
              <div className="display" style={{ fontSize: 17, lineHeight: 1.2 }}>Europe ⇄ Irak</div>
              <div style={{ fontSize: 12.5, opacity: .9, marginTop: 4 }}>Paris · Bagdad</div>
            </div>
          </div>
        </div>
      </section>
    );
  };

  // ============ PILLARS ============
  window.Pillars = function Pillars({ C }) {
    const p = C.pillars;
    return (
      <section id="pillars" className="section" style={{ background: "var(--bg-alt)", scrollMarginTop: 80 }}>
        <div className="wrap">
          <SectionHead eyebrow={p.eyebrow} title={p.title} lede={p.lede} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 24, marginTop: 56 }} className="ema-3col">
            {p.items.map((it, i) => (
              <div key={i} data-reveal style={{ "--rd": i * 90 + "ms", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 8, padding: "34px 30px 30px", position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", top: 24, right: 26, fontFamily: "var(--display)", fontSize: 56, color: "var(--blue-wash)", lineHeight: 1 }}>{it.k}</div>
                <div style={{ width: 52, height: 52, borderRadius: 99, background: "var(--navy-800)", color: "var(--gold-300)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                  <Icon name={it.icon} size={24} />
                </div>
                <h3 className="display" style={{ fontSize: 25, margin: "0 0 10px" }}>{it.t}</h3>
                <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.6 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  // ============ CONTEXT ============
  window.Context = function Context({ C }) {
    const c = C.context;
    return (
      <section id="context" className="section" style={{ background: "var(--bg)", scrollMarginTop: 80 }}>
        <div className="wrap ema-ctx-grid" style={{ display: "grid", gridTemplateColumns: ".85fr 1.15fr", gap: "clamp(32px,5vw,80px)", alignItems: "start" }}>
          <div className="ema-ctx-head" style={{ position: "sticky", top: 110 }}>
            <SectionHead eyebrow={c.eyebrow} title={c.title} />
            <div style={{ marginTop: 32, height: 130, opacity: .8 }}><RiverFlow /></div>
          </div>
          <div>
            {c.items.map((it, i) => (
              <div key={i} data-reveal style={{ "--rd": i * 90 + "ms", display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, padding: "30px 0", borderTop: i === 0 ? "1px solid var(--hairline)" : "none", borderBottom: "1px solid var(--hairline)" }}>
                <div className="display" style={{ fontSize: 22, color: "var(--gold-500)", paddingTop: 2 }}>{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 26, margin: "0 0 8px" }}>{it.t}</h3>
                  <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 16.5, lineHeight: 1.6 }}>{it.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  // ============ VALUE ============
  window.Value = function Value({ C }) {
    const v = C.value;
    return (
      <section id="value" className="section" style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden", scrollMarginTop: 80 }}>
        <div style={{ position: "absolute", top: -30, right: -10, width: 480, opacity: .06 }}><RiverFlow /></div>
        <div className="wrap" style={{ position: "relative" }}>
          <SectionHead eyebrow={v.eyebrow} title={v.title} light />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 1, marginTop: 56, background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.12)", borderRadius: 8, overflow: "hidden" }} className="ema-3col">
            {v.cols.map((col, i) => (
              <div key={i} data-reveal style={{ "--rd": i * 100 + "ms", background: "var(--navy-900)", padding: "36px 30px" }}>
                <div className="eyebrow" style={{ color: "var(--gold-300)", marginBottom: 22 }}>{col.who}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                  {col.items.map((it, j) => (
                    <li key={j} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 16.5, color: "rgba(255,255,255,.9)" }}>
                      <span style={{ color: "var(--gold-400)", flex: "none", marginTop: 3 }}><Icon name="check" size={17} /></span>{it}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  // ============ CLUBS ============
  window.Clubs = function Clubs({ C, variant, hideHead }) {
    const cl = C.clubs;
    const [active, setActive] = useState(0);

    // mega-menu club picks → select that club
    useEffect(() => {
      const h = (e) => {
        const i = e.detail | 0;
        setActive(Math.max(0, Math.min(cl.list.length - 1, i)));
      };
      window.addEventListener("ema-select-club", h);
      return () => window.removeEventListener("ema-select-club", h);
    }, [cl.list.length]);

    // deep-link via URL hash (#club-3 etc.)
    useEffect(() => {
      const apply = () => {
        const m = (window.location.hash || "").match(/^#club-(\d+)/i);
        if (m) {
          const i = parseInt(m[1], 10) - 1;
          if (i >= 0 && i < cl.list.length) setActive(i);
        }
      };
      apply();
      window.addEventListener("hashchange", apply);
      return () => window.removeEventListener("hashchange", apply);
    }, [cl.list.length]);

    if (variant === "grid") {
      return (
        <section id="clubs" className="section" style={{ background: "var(--bg-alt)", scrollMarginTop: 80 }}>
          <div className="wrap">
            {!hideHead && <SectionHead eyebrow={cl.eyebrow} title={cl.title} lede={cl.lede} />}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(280px,1fr))", gap: 20, marginTop: 52 }}>
              {cl.list.map((c, i) => (
                <div key={i} data-reveal style={{ "--rd": (i % 4) * 70 + "ms", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 8, padding: "30px 28px", transition: "all .3s var(--ease)", cursor: "pointer" }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 44px -28px rgba(14,31,58,.35)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
                    <div style={{ width: 50, height: 50, borderRadius: 99, background: "var(--navy-800)", color: "var(--gold-300)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={c.icon} size={23} /></div>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--slate-400)" }}>{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <h3 className="display" style={{ fontSize: 23, margin: "0 0 10px" }}>{c.t}</h3>
                  <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.55 }}>{c.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      );
    }

    // interactive selector (default)
    const ac = cl.list[active];
    return (
      <section id="clubs" className="section" style={{ background: "var(--bg-alt)", scrollMarginTop: 80 }}>
        <div className="wrap">
          {!hideHead && <SectionHead eyebrow={cl.eyebrow} title={cl.title} lede={cl.lede} />}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: "clamp(28px,4vw,56px)", marginTop: 52, alignItems: "stretch" }} className="ema-clubs-grid" data-reveal>
            {/* list */}
            <div style={{ display: "flex", flexDirection: "column" }}>
              {cl.list.map((c, i) => {
                const on = i === active;
                return (
                  <button key={i} onClick={() => setActive(i)} style={{
                    display: "flex", alignItems: "center", gap: 18, textAlign: "left",
                    padding: "20px 22px", border: 0, borderBottom: "1px solid var(--hairline)",
                    background: on ? "var(--surface)" : "transparent", borderRadius: on ? 8 : 0,
                    boxShadow: on ? "0 16px 36px -26px rgba(14,31,58,.4)" : "none",
                    transition: "all .25s var(--ease)", cursor: "pointer",
                  }}>
                    <span style={{ width: 46, height: 46, flex: "none", borderRadius: 99, background: on ? "var(--navy-800)" : "var(--blue-wash)", color: on ? "var(--gold-300)" : "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center", transition: "all .25s" }}><Icon name={c.icon} size={22} /></span>
                    <span style={{ flex: 1, fontFamily: "var(--display)", fontSize: 21, color: on ? "var(--ink)" : "var(--slate-600)", fontWeight: 600 }}>{c.t}</span>
                    <span style={{ color: "var(--gold-500)", opacity: on ? 1 : 0, transform: on ? "none" : "translateX(-6px)", transition: "all .25s" }}><Icon name="arrow" size={18} /></span>
                  </button>
                );
              })}
            </div>
            {/* detail */}
            <div style={{ position: "relative", borderRadius: 10, overflow: "hidden", background: "var(--navy-900)", color: "#fff", padding: "clamp(30px,4vw,48px)", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 380 }}>
              <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.025) 0 20px, rgba(255,255,255,.05) 20px 40px)" }}></div>
              <div style={{ position: "absolute", top: -20, right: -20, opacity: .14, color: "var(--gold-300)" }}><Icon name={ac.icon} size={220} sw={1} /></div>
              <div style={{ position: "relative" }} key={active}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", color: "var(--gold-300)", animation: "emaFade .4s" }}>CLUB {String(active + 1).padStart(2, "0")} / 07</div>
                <h3 className="display" style={{ fontSize: "clamp(30px,3.4vw,46px)", margin: "16px 0 18px", animation: "emaUp .4s var(--ease)" }}>{ac.t}</h3>
                <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.84)", maxWidth: 440, animation: "emaUp .5s var(--ease)" }}>{ac.d}</p>
              </div>
              <div style={{ position: "relative", display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
                {cl.tags.map((t) => (
                  <span key={t} style={{ fontSize: 13, padding: "7px 14px", borderRadius: 99, border: "1px solid rgba(255,255,255,.22)", color: "rgba(255,255,255,.85)" }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };
})();