// HydroPulse — About, Work packages, Consortium, Advisory board, Media, Engage, Contact, Legal

// ─────────── ABOUT ───────────
window.AboutPage = function AboutPage() {
  useReveal();
  const d = HP_DATA.project;
  const features = HP_DATA.features || {};
  return (
    <main className="page">
      <PageHeader eyebrow="About HydroPulse" title={d.aboutLead} kicker="§ About"/>

      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: "clamp(32px, 6vw, 100px)" }} className="hp-two-col">
            <div className="reveal">
              <div className="eyebrow">§ 01 — About</div>
            </div>
            <div>
              <p className="lead reveal" style={{ margin: "0 0 32px" }}>{d.aboutBody}</p>
            </div>
          </div>
        </div>
      </section>

      <PImage src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2400&q=75" ratio="21/9" label="PLACEHOLDER IMAGE"/>

      {features.showAboutObjectives && (
        <section style={{ padding: "clamp(80px, 10vw, 140px) 0" }}>
          <div className="wrap">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: "clamp(32px, 6vw, 100px)" }} className="hp-two-col">
              <div className="reveal"><div className="eyebrow">§ 02 — Objectives</div></div>
              <div>
                {[
                  ["Respond.", "Advance real-time hydropower operations through digital twins, predictive monitoring, and ecosystem-aware energy management systems."],
                  ["Anticipate.", "Develop near-term forecasting and adaptive planning tools to improve flexibility, water allocation, biodiversity protection, and climate resilience."],
                  ["Restore.", "Enhance river connectivity, ecosystem health, fish migration, water quality, and sediment management through ecosystem-based and nature-based solutions."],
                  ["Collaborate.", "Co-create socially accepted innovations through Communities of Practice, stakeholder engagement, and Responsible Research and Innovation."],
                  ["Scale.", "Design and validate transferable hydropower solutions, tools, and models that can be replicated across diverse European regions and energy systems."],
                ].map(function (row, i) {
                  return (
                    <div key={i} className="reveal" style={{ padding: "28px 0", borderTop: i === 0 ? "1px solid var(--rule-strong)" : "1px solid var(--rule)", display: "grid", gridTemplateColumns: "60px 1fr 2fr", gap: 20, alignItems: "baseline" }}>
                      <div className="caption">{String(i + 1).padStart(2, "0")}</div>
                      <h3 className="display-sm" style={{ margin: 0 }}>{row[0]}</h3>
                      <p className="body" style={{ color: "var(--muted)", margin: 0 }}>{row[1]}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>
      )}

      {features.showProgrammeFacts && (
      <section style={{ background: "var(--paper)", padding: "clamp(60px, 9vw, 120px) 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div className="eyebrow reveal" style={{ marginBottom: 40 }}>§ {features.showAboutObjectives ? "03" : "02"} — Programme at a glance</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} className="hp-facts">
            {[
              ["Duration", d.duration],
              ["Coordinator", "NTUA"],
              ["Partners", d.partnerCount + " organisations"],
              ["Budget", d.budget],
              ["Work packages", String(d.workPackages)],
              ["Demonstration sites", String(d.demoSites)],
              ["European cases", String(d.europeanCases)],
              ["Funding", d.funding],
            ].map(function (row, i) {
              return (
                <div key={i} className="reveal" style={{ padding: "24px 20px", borderLeft: i % 4 === 0 ? "none" : "1px solid var(--rule)", borderTop: i >= 4 ? "1px solid var(--rule)" : "none" }}>
                  <div className="caption">{row[0].toUpperCase()}</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 22, marginTop: 8 }}>{row[1]}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      )}
    </main>
  );
};

// ─────────── WORK PACKAGES ───────────
window.WorkPackagesPage = function WorkPackagesPage() {
  useReveal();
  return (
    <main className="page">
      <PageHeader eyebrow="Work packages" title="Fifteen work packages, one shared vision for sustainable hydropower." kicker="§ Research"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
            {HP_DATA.workPackages.map(function (t) {
              return (
                <div key={t.id} id={t.id} className="reveal hp-theme-grid" style={{ padding: "clamp(32px, 4vw, 48px) 0", borderBottom: "1px solid var(--rule-strong)", display: "grid", gridTemplateColumns: "100px 1fr 1.4fr", gap: 32 }}>
                  <div className="caption" style={{ fontSize: 14 }}>{t.number}</div>
                  <div>
                    <h3 className="display-md" style={{ margin: 0, fontSize: "clamp(28px, 2.8vw, 40px)" }}>{t.title}</h3>
                    <div style={{ marginTop: 20, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)", textTransform: "uppercase" }}>
                      LEAD · {t.lead}<br/>WORK PACKAGES · {t.workPackages.join(" / ")}
                    </div>
                  </div>
                  <div>
                    <p className="body-lg" style={{ marginTop: 0 }}>{t.summary}</p>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 20 }}>
                      {t.tags.map(function (x) {
                        return <span key={x} style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", padding: "4px 10px", border: "1px solid var(--rule-strong)", color: "var(--muted)" }}>{x}</span>;
                      })}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
};

window.ThemesPage = window.WorkPackagesPage;

// ─────────── CONSORTIUM ───────────
window.ConsortiumPage = function ConsortiumPage() {
  useReveal();
  const [selectedId, setSelectedId] = React.useState(null);
  const [expandedId, setExpandedId] = React.useState(null);
  const features = HP_DATA.features || {};
  const partners = HP_DATA.partners;

  return (
    <main className="page">
      <PageHeader eyebrow="Consortium" title={HP_DATA.project.consortiumPartners + " HydroPulse consortium partners."} kicker="§ Partners"/>

      <section style={{ padding: "clamp(40px, 6vw, 80px) 0" }}>
        <div className="wrap reveal">
          <EuropeMap
            mode="partners"
            highlightSites={false}
            selectedId={selectedId}
            onSelect={function (id) { setSelectedId(id); }}
            showInfoPanel={true}
            compact
          />
        </div>
      </section>

      <section style={{ padding: "clamp(40px, 5vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }} className="hp-partner-full">
            {partners.map(function (p, i) {
              return (
                <div key={p.id} className="reveal" style={{ padding: "28px 24px", borderRight: (i + 1) % 2 === 0 ? "none" : "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", minHeight: 180 }}>
                  <div className="caption" style={{ display: "flex", justifyContent: "space-between" }}>
                    <span>{p.shortName}</span>
                    <span>{p.country.toUpperCase()}</span>
                  </div>
                  <div className="display-sm" style={{ margin: "14px 0 10px", fontSize: 22 }}>{p.name}</div>
                  <div className="body-sm" style={{ color: "var(--muted)" }}>{p.role}</div>
                  <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--teal-deep)" }}>
                    MAIN CONTACT · {p.pi}
                  </div>
                  {features.showAdvisoryBoardDetails && p.summary && (
                    <div>
                      <button type="button" onClick={function () { setExpandedId(expandedId === p.id ? null : p.id); }}
                        style={{ marginTop: 16, background: "transparent", border: "1px solid var(--rule)", padding: "6px 12px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: 10 }}>
                        {expandedId === p.id ? "HIDE DETAILS" : "READ MORE"}
                      </button>
                      {expandedId === p.id && <p className="body-sm" style={{ marginTop: 14, color: "var(--muted)" }}>{p.summary}</p>}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <style>{`@media (max-width: 900px) { .hp-partner-full { grid-template-columns: 1fr !important; } .hp-partner-full > div { border-right: none !important; } }`}</style>
        </div>
      </section>
    </main>
  );
};

// ─────────── ADVISORY BOARD ───────────
window.AdvisoryBoardPage = function AdvisoryBoardPage() {
  useReveal();
  return (
    <main className="page">
      <PageHeader eyebrow="Stakeholders' Advisory Board" title="Advisory board members." kicker="§ Governance"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
            {HP_DATA.advisoryBoard.map(function (m, i) {
              return (
                <div key={m.name} className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 180px", gap: 24, padding: "22px 0", borderBottom: "1px solid var(--rule)", alignItems: "baseline" }}>
                  <div className="body" style={{ fontWeight: 500 }}>{m.name}</div>
                  <div className="caption">{m.country.toUpperCase()}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
};

// ─────────── DISSEMINATION KIT ───────────
window.MediaPage = function MediaPage() {
  useReveal();
  var kit = (HP_DATA && HP_DATA.dissemination) || { intro: "", logos: [], documents: [] };
  var enabled = !HP_DATA.features || HP_DATA.features.showDisseminationKit;
  // Cache-bust assets so replaced files (logos/brochure/poster) are always re-fetched. Bump HP_DATA.dissemination.assetVersion on swap.
  var ver = kit.assetVersion ? ("?v=" + kit.assetVersion) : "";
  return (
    <main className="page">
      <PageHeader eyebrow="Dissemination kit" title="Logos, brochure and roll-up — ready to download and share." kicker="§ Dissemination"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <p className="body reveal" style={{ color: "var(--muted)", maxWidth: 640, margin: "0 0 clamp(40px, 6vw, 72px)" }}>{kit.intro}</p>

          {enabled && (
            <React.Fragment>
              {/* ── Brand & visual identity (folded into the kit; full guidelines on /brand) ── */}
              <a href="#/brand" className="reveal hp-kit-brand" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) auto", gap: 24, alignItems: "center", background: "var(--logo-navy)", color: "var(--paper)", textDecoration: "none", padding: "clamp(26px, 3.4vw, 38px) clamp(24px, 3.4vw, 40px)", marginBottom: "clamp(48px, 7vw, 84px)" }}>
                <div>
                  <div className="caption" style={{ color: "var(--logo-sky)", marginBottom: 12 }}>BRAND &amp; VISUAL IDENTITY</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.15, marginBottom: 12 }}>The mark, palette, typography and usage rules.</div>
                  <p className="body-sm" style={{ color: "color-mix(in srgb, var(--paper) 78%, transparent)", margin: 0, maxWidth: 540 }}>Everything that keeps HydroPulse consistent — start here before using the logos and documents below.</p>
                </div>
                <span className="link-arrow" style={{ color: "var(--paper)", whiteSpace: "nowrap" }}>Open brand guidelines <Icon name="arrow-right" size={14}/></span>
              </a>

              {/* ── Logos ── */}
              <div className="reveal" style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 18, marginBottom: 28, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <h2 className="display-sm" style={{ margin: 0, fontSize: "clamp(24px, 2.4vw, 34px)" }}>Logos</h2>
                <span className="caption">{kit.logos.length} variants · all formats inside each ZIP</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 24 }} className="hp-media-grid">
                {kit.logos.map(function (lg, i) {
                  var dark = lg.tone === "dark";
                  return (
                    <div key={lg.slug} className="reveal" style={{ border: "1px solid var(--rule-strong)", background: "var(--paper)", display: "flex", flexDirection: "column" }}>
                      <div style={{ aspectRatio: "4/3", background: dark ? "var(--ink)" : "#f3efe6", display: "flex", alignItems: "center", justifyContent: "center", padding: 22, overflow: "hidden" }}>
                        <img src={lg.preview + ver} alt={"HydroPulse logo — " + lg.label + (lg.tagline ? " with tagline" : "")} loading="lazy" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}/>
                      </div>
                      <div style={{ padding: "18px 18px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
                        <div className="caption" style={{ display: "flex", justifyContent: "space-between" }}>
                          <span>{String(i + 1).padStart(2, "0")}</span><span>{lg.size}</span>
                        </div>
                        <h3 className="display-sm" style={{ margin: "10px 0 4px", fontSize: 20 }}>{lg.label}</h3>
                        <p className="caption" style={{ color: "var(--muted)", margin: "0 0 8px" }}>{lg.tagline ? "with tagline" : "without tagline"}</p>
                        <p className="body-sm" style={{ color: "var(--muted)", margin: "0 0 16px" }}>{lg.formats.join(" · ")}</p>
                        <a href={lg.zip + ver} download className="link-arrow" style={{ marginTop: "auto", display: "inline-flex" }}>
                          Download ZIP <Icon name="download" size={13}/>
                        </a>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* ── Documents ── */}
              <div className="reveal" style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 18, margin: "clamp(56px, 8vw, 96px) 0 28px" }}>
                <h2 className="display-sm" style={{ margin: 0, fontSize: "clamp(24px, 2.4vw, 34px)" }}>Documents</h2>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }} className="hp-media-grid">
                {kit.documents.map(function (doc, i) {
                  return (
                    <div key={i} className="reveal" style={{ border: "1px solid var(--rule-strong)", background: "var(--paper)", display: "flex", flexDirection: "column" }}>
                      <div style={{ aspectRatio: "4/3", background: "#f3efe6", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", padding: 22 }}>
                        <img src={doc.cover + ver} alt={doc.title + " — cover"} loading="lazy" style={{ maxWidth: "100%", maxHeight: "100%", width: "auto", height: "auto", objectFit: "contain", display: "block", boxShadow: "0 2px 14px rgba(17,32,58,0.16)" }}/>
                      </div>
                      <div style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", flex: 1 }}>
                        <div className="caption" style={{ display: "flex", justifyContent: "space-between" }}>
                          <span>{doc.format}</span><span>{doc.size}</span>
                        </div>
                        <h3 className="display-sm" style={{ margin: "12px 0 8px", fontSize: 24 }}>{doc.title}</h3>
                        <p className="body-sm" style={{ color: "var(--muted)", margin: "0 0 18px", maxWidth: 440 }}>{doc.desc}</p>
                        <a href={doc.href + ver} download className="link-arrow" style={{ marginTop: "auto", display: "inline-flex" }}>
                          Download {doc.format} <Icon name="download" size={13}/>
                        </a>
                      </div>
                    </div>
                  );
                })}
              </div>
            </React.Fragment>
          )}

          <style>{`@media (max-width: 900px) { .hp-media-grid { grid-template-columns: 1fr !important; } } @media (min-width: 901px) and (max-width: 1180px) { .hp-media-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 640px) { .hp-kit-brand { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </main>
  );
};
window.DisseminationKitPage = window.MediaPage;

// ─────────── BRAND ───────────
window.BrandPage = function BrandPage() {
  useReveal();
  var b = (HP_DATA && HP_DATA.brand) || { intro: "", mark: { lockups: [] }, palette: [], type: [], usage: { dos: [], donts: [] } };
  var enabled = !HP_DATA.features || HP_DATA.features.showBrand;
  var mark = b.mark || { lockups: [] };
  var usage = b.usage || { dos: [], donts: [] };

  function SubHead(props) {
    return (
      <div className="reveal" style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 18, margin: (props.first ? "0" : "clamp(56px, 8vw, 96px)") + " 0 28px", display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
        <h2 className="display-sm" style={{ margin: 0, fontSize: "clamp(24px, 2.4vw, 34px)" }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--muted)", marginRight: 14 }}>{props.n}</span>{props.title}
        </h2>
        {props.aside && <span className="caption" style={{ color: "var(--muted)" }}>{props.aside}</span>}
      </div>
    );
  }

  return (
    <main className="page">
      <PageHeader eyebrow="Brand" title="One mark, one palette — used with care." kicker="§ Brand"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <p className="body reveal" style={{ color: "var(--muted)", maxWidth: 640, margin: "0 0 clamp(40px, 6vw, 72px)" }}>{b.intro}</p>

          {enabled && (
            <React.Fragment>
              {/* ── The mark ── */}
              <SubHead n="01" title="The mark" first={true}/>
              <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, alignItems: "stretch" }} className="hp-brand-2col">
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  {mark.lockups.map(function (lk, i) {
                    var dark = lk.tone === "dark";
                    return (
                      <div key={i} className="reveal" style={{ border: "1px solid var(--rule-strong)", display: "flex", flexDirection: "column" }}>
                        <div style={{ flex: 1, minHeight: 150, background: dark ? "var(--logo-navy)" : "#f3efe6", display: "flex", alignItems: "center", justifyContent: "center", padding: 26 }}>
                          <img src={lk.src} alt={"HydroPulse lockup — " + lk.label} style={{ maxWidth: "100%", maxHeight: 90, objectFit: "contain", display: "block" }}/>
                        </div>
                        <div style={{ padding: "12px 14px", background: "var(--paper)", borderTop: "1px solid var(--rule-strong)" }}>
                          <div style={{ fontFamily: "var(--display)", fontSize: 15 }}>{lk.label}</div>
                          <div className="caption" style={{ color: "var(--muted)" }}>{lk.note}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
                <div className="reveal" style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 20 }}>
                  <p className="body" style={{ margin: 0 }}>{mark.meaning}</p>
                  <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    <div style={{ display: "flex", gap: 12 }}>
                      <span className="caption" style={{ color: "var(--teal-deep)", minWidth: 92 }}>CLEAR SPACE</span>
                      <span className="body-sm" style={{ color: "var(--muted)", margin: 0 }}>{mark.clearSpace}</span>
                    </div>
                    <div style={{ display: "flex", gap: 12 }}>
                      <span className="caption" style={{ color: "var(--teal-deep)", minWidth: 92 }}>MIN SIZE</span>
                      <span className="body-sm" style={{ color: "var(--muted)", margin: 0 }}>{mark.minSize}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* ── Colour ── */}
              <SubHead n="02" title="Colour" aside={b.palette.length + " brand colours"}/>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 16 }}>
                {b.palette.map(function (c, i) {
                  var onColor = c.tone === "light" ? "#F1F6FB" : "#11203A";
                  return (
                    <div key={i} className="reveal" style={{ border: "1px solid var(--rule-strong)", display: "flex", flexDirection: "column" }}>
                      <div style={{ background: c.hex, color: onColor, aspectRatio: "5/3", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 14 }}>
                        <span style={{ fontFamily: "var(--display)", fontSize: 17 }}>{c.name}</span>
                        <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.04em", opacity: 0.92 }}>{c.hex}</span>
                      </div>
                      <div style={{ padding: "10px 12px 14px", background: "var(--paper)", borderTop: "1px solid var(--rule-strong)" }}>
                        <p className="caption" style={{ color: "var(--muted)", margin: 0 }}>{c.role}</p>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* ── Typography ── */}
              <SubHead n="03" title="Typography"/>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {b.type.map(function (t, i) {
                  return (
                    <div key={i} className="reveal hp-brand-type-row" style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 24, padding: "26px 0", borderBottom: "1px solid var(--rule)", alignItems: "center" }}>
                      <div>
                        <div style={{ fontFamily: "var(--display)", fontSize: 19, letterSpacing: "-0.01em" }}>{t.name}</div>
                        <div className="caption" style={{ color: "var(--muted)", marginTop: 4 }}>{t.role}</div>
                        <div className="caption" style={{ color: "var(--muted)", marginTop: 2, opacity: 0.8 }}>{t.note}</div>
                      </div>
                      <div style={{ fontFamily: t.family, fontWeight: t.weight, fontSize: "clamp(22px, 3vw, 34px)", lineHeight: 1.15, color: "var(--ink)" }}>{t.sample}</div>
                    </div>
                  );
                })}
              </div>

              {/* Type scale ladder — ten sizes */}
              {(b.typeScale || []).length > 0 && (
                <div className="reveal hp-typescale" style={{ marginTop: 30, borderTop: "1px solid var(--rule)" }}>
                  {b.typeScale.map(function (s, i) {
                    var isMono = s.fam === "mono";
                    var fam = isMono
                      ? "var(--mono)"
                      : "'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
                    return (
                      <div key={i} className="hp-ts-row" style={{ display: "grid", gridTemplateColumns: "104px 64px 1fr", gap: 18, alignItems: "baseline", padding: "16px 0", borderBottom: "1px solid var(--rule)" }}>
                        <div className="caption" style={{ color: "var(--muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{s.name}</div>
                        <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", opacity: 0.85 }}>{s.size}/{Math.round(s.size * s.line)}</div>
                        <div className="hp-ts-sample" style={{ fontFamily: fam, fontWeight: s.weight, fontSize: s.size, lineHeight: s.line, letterSpacing: s.kerning, fontStyle: s.fam === "display-i" ? "italic" : "normal", color: "var(--ink)", textTransform: isMono ? "uppercase" : "none" }}>{s.sample}</div>
                      </div>
                    );
                  })}
                </div>
              )}

              {/* ── Motifs & patterns ── */}
              {(b.motifs || []).length > 0 && (
                <React.Fragment>
                  <SubHead n="04" title="Motifs & patterns" aside="Five elements + textures"/>
                  <p className="body-sm reveal" style={{ color: "var(--muted)", maxWidth: 620, margin: "0 0 26px" }}>
                    Each piece of the pictorial mark is also a reusable motif — for partner badges, section markers, posters and ornaments. Repeat the hero motif at low opacity for confident, branded surfaces that replace photography.
                  </p>
                  <div className="hp-motif-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(170px, 1fr))", gap: 16 }}>
                    {b.motifs.map(function (m, i) {
                      var art;
                      if (m.key === "hero") art = <HPRotor size={108} color="#000547" accent="#25B8F0"/>;
                      else if (m.key === "community") art = <HPCommunityTrio size={132} color="#25B8F0"/>;
                      else if (m.key === "fishleaf") art = <HPFishLeaf size={160} fishColor="#25B8F0" leafColor="#3DA17A"/>;
                      else if (m.key === "pulse") art = <HPPulseLine width={150} height={34} color="#0078B6" stroke={3}/>;
                      else art = <HPConstellation size={120} color="#000547" dotR={26}/>;
                      return (
                        <div key={i} className="reveal" style={{ border: "1px solid var(--rule-strong)", background: "var(--paper)", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 12, padding: "26px 14px 18px" }}>
                          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 120 }}>{art}</div>
                          <div style={{ fontFamily: "var(--display)", fontSize: 16 }}>{m.name}</div>
                          <div className="caption" style={{ color: "var(--muted)", lineHeight: 1.45 }}>{m.blurb}</div>
                        </div>
                      );
                    })}
                  </div>
                  <div className="hp-pattern-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16, marginTop: 16 }}>
                    {(b.patterns || []).map(function (p, i) {
                      var img = p.kind === "dots"
                        ? HP_dotPattern(p.color, p.opacity, p.tile, 1.2)
                        : HP_turbinePattern(p.color, p.opacity, p.tile);
                      return (
                        <div key={i} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                          <div style={{ minHeight: 180, background: p.bg, backgroundImage: img, backgroundRepeat: "repeat", border: "1px solid var(--rule-strong)" }}/>
                          <div>
                            <div style={{ fontFamily: "var(--display)", fontSize: 15 }}>{p.name}</div>
                            <div className="caption" style={{ color: "var(--muted)" }}>{p.note}</div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </React.Fragment>
              )}

              {/* ── Stationery & large format ── */}
              {(b.surfaces || []).length > 0 && (
                <React.Fragment>
                  <SubHead n="05" title="Stationery & large format" aside="Print-ready previews"/>
                  {b.surfacesIntro && (
                    <p className="body-sm reveal" style={{ color: "var(--muted)", maxWidth: 620, margin: "0 0 26px" }}>{b.surfacesIntro}</p>
                  )}
                  <div className="hp-surface-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(230px, 1fr))", gap: 16 }}>
                    {b.surfaces.map(function (s, i) {
                      var ver = b.brandAssetVersion ? ("?v=" + b.brandAssetVersion) : "";
                      var card = (
                        <React.Fragment>
                          <div style={{ aspectRatio: "4 / 3", background: "#eef1f6", borderBottom: "1px solid var(--rule-strong)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
                            <img src={s.preview + ver} alt={s.title + " preview"} loading="lazy" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}/>
                          </div>
                          <div style={{ padding: "12px 14px 14px", background: "var(--paper)" }}>
                            <div style={{ fontFamily: "var(--display)", fontSize: 15, display: "flex", alignItems: "center", gap: 8 }}>
                              {s.title}
                              {s.href && <Icon name="arrow-down" size={12}/>}
                            </div>
                            <div className="caption" style={{ color: "var(--muted)", marginTop: 3 }}>{s.note}</div>
                          </div>
                        </React.Fragment>
                      );
                      var cardStyle = { border: "1px solid var(--rule-strong)", display: "flex", flexDirection: "column", textDecoration: "none", color: "inherit" };
                      return s.href
                        ? <a key={i} className="reveal" href={s.href + ver} target="_blank" rel="noopener" style={cardStyle}>{card}</a>
                        : <div key={i} className="reveal" style={cardStyle}>{card}</div>;
                    })}
                  </div>
                </React.Fragment>
              )}

              {/* ── Usage ── */}
              <SubHead n="06" title="Usage"/>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="hp-brand-2col">
                <div className="reveal" style={{ border: "1px solid var(--rule-strong)", background: "var(--paper)", padding: "26px 26px 30px" }}>
                  <div className="caption" style={{ color: "var(--moss)", marginBottom: 14 }}>DO</div>
                  {usage.dos.map(function (d, i) {
                    return (
                      <div key={i} style={{ display: "flex", gap: 12, padding: "9px 0", borderTop: i === 0 ? "none" : "1px solid var(--rule)" }}>
                        <span style={{ color: "var(--moss)", flexShrink: 0, fontFamily: "var(--mono)", fontSize: 15, lineHeight: "16px" }}>✓</span>
                        <span className="body-sm" style={{ margin: 0 }}>{d}</span>
                      </div>
                    );
                  })}
                </div>
                <div className="reveal" style={{ border: "1px solid var(--rule-strong)", background: "var(--paper)", padding: "26px 26px 30px" }}>
                  <div className="caption" style={{ color: "#C0564A", marginBottom: 14 }}>DON'T</div>
                  {usage.donts.map(function (d, i) {
                    return (
                      <div key={i} style={{ display: "flex", gap: 12, padding: "9px 0", borderTop: i === 0 ? "none" : "1px solid var(--rule)" }}>
                        <span style={{ color: "#C0564A", flexShrink: 0, fontFamily: "var(--mono)", fontSize: 15, lineHeight: "16px" }}>×</span>
                        <span className="body-sm" style={{ margin: 0 }}>{d}</span>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* ── Downloads CTA ── */}
              <a href="#/dissemination-kit" className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap", marginTop: "clamp(56px, 8vw, 96px)", padding: "28px 30px", background: "var(--logo-navy)", color: "var(--paper)", textDecoration: "none" }}>
                <div>
                  <div className="caption" style={{ color: "var(--logo-sky)", marginBottom: 6 }}>DISSEMINATION KIT</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: "clamp(20px, 2.2vw, 28px)" }}>Download the logos, brochure, roll-up and template.</div>
                </div>
                <span className="link-arrow" style={{ color: "var(--paper)", whiteSpace: "nowrap" }}>Open kit <Icon name="arrow-right" size={14}/></span>
              </a>
            </React.Fragment>
          )}
          <style>{`
            @media (max-width: 900px) {
              .hp-brand-2col { grid-template-columns: 1fr !important; }
              .hp-brand-type-row { grid-template-columns: 1fr !important; gap: 10px !important; }
            }
          `}</style>
        </div>
      </section>
    </main>
  );
};

// ─────────── ENGAGE ───────────
window.EngagePage = function EngagePage() {
  useReveal();
  return (
    <main className="page">
      <PageHeader eyebrow="Get involved" title="HydroPulse is designed to be worked with — not around." kicker="§ Engagement"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="hp-media-grid">
            {[
              { h: "Researchers & PhDs", d: "Join open summer schools, apply for secondments, co-author on consortium publications." , cta: "Academic programme"},
              { h: "Operators", d: "Contribute demonstration-site protocols and participate in adaptive-operations pilots." , cta: "Industry engagement"},
              { h: "Regulators & policymakers", d: "Subscribe to policy briefings and participate in biannual stakeholder roundtables." , cta: "Policy programme"},
              { h: "Communities & civil society", d: "Take part in deliberative forums on each demonstration river." , cta: "Community forums"},
            ].map((x, i) => (
              <div key={i} className="reveal" style={{ padding: "36px 36px 40px", border: "1px solid var(--rule-strong)", background: "var(--paper)" }}>
                <div className="caption">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="display-md" style={{ margin: "16px 0 14px", fontSize: "clamp(26px, 2.4vw, 36px)" }}>{x.h}</h3>
                <p className="body" style={{ color: "var(--muted)", maxWidth: 440 }}>{x.d}</p>
                <a href="#/contact" className="link-arrow" style={{ marginTop: 22, display: "inline-flex" }}>{x.cta} <Icon name="arrow-right" size={14}/></a>
              </div>
            ))}
          </div>
          <div className="reveal" style={{ marginTop: 80, padding: "clamp(32px, 5vw, 60px)", background: "var(--ink)", color: "var(--paper)" }}>
            <div className="eyebrow" style={{ color: "rgba(250,247,240,0.55)" }}>Newsletter</div>
            <h3 className="display-md" style={{ color: "var(--paper)", margin: "14px 0 22px", fontWeight: 300 }}>Quarterly updates from the consortium.</h3>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", gap: 0, maxWidth: 520, border: "1px solid rgba(250,247,240,0.3)" }}>
              <input type="email" placeholder="your@institution.eu" style={{ flex: 1, background: "transparent", border: 0, padding: "16px 18px", color: "var(--paper)", fontFamily: "var(--sans)", fontSize: 15, outline: "none" }}/>
              <button type="submit" style={{ padding: "16px 22px", background: "var(--paper)", color: "var(--ink)", border: 0, fontFamily: "var(--sans)", fontSize: 14, cursor: "pointer", fontWeight: 500 }}>Subscribe</button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
};

// ─────────── CONTACT ───────────
window.ContactPage = function ContactPage() {
  useReveal();
  return (
    <main className="page">
      <PageHeader eyebrow="Contact" title="Reach the consortium." kicker="§ Contact"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px, 5vw, 80px)" }} className="hp-two-col">
            <div className="reveal">
              <h3 className="display-sm" style={{ margin: "0 0 24px" }}>Direct lines</h3>
              {[
                ["General enquiries", "info@hydropulse.eu"],
                ["Press & media", "press@hydropulse.eu"],
                ["Partnerships", "partners@hydropulse.eu"],
                ["Data & open science", "data@hydropulse.eu"],
              ].map(([l, e]) => (
                <div key={l} style={{ padding: "18px 0", borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between" }}>
                  <span className="body-sm" style={{ color: "var(--muted)" }}>{l}</span>
                  <a href={"mailto:" + e} className="link-inline">{e}</a>
                </div>
              ))}
              <div style={{ marginTop: 48, padding: 24, border: "1px solid var(--rule-strong)", background: "var(--paper)" }}>
                <div className="caption">COORDINATOR</div>
                <div className="display-sm" style={{ margin: "10px 0 6px", fontSize: 22 }}>National Technical University of Athens (NTUA)</div>
                <div className="body-sm" style={{ color: "var(--muted)" }}>School of Civil Engineering<br/>Athens, Greece</div>
              </div>
            </div>
            <form onSubmit={(e) => { e.preventDefault(); alert("Message submitted (prototype)"); }} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <h3 className="display-sm" style={{ margin: "0 0 8px" }}>Write to us</h3>
              {[
                ["Your name", "text", "name"],
                ["Email", "email", "email"],
                ["Institution", "text", "inst"],
              ].map(([l, t, n]) => (
                <label key={n} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span className="caption">{l.toUpperCase()}</span>
                  <input type={t} name={n} required style={{ padding: "14px 0", border: 0, borderBottom: "1px solid var(--rule-strong)", background: "transparent", fontFamily: "var(--sans)", fontSize: 15, outline: "none", color: "var(--ink)" }}/>
                </label>
              ))}
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span className="caption">TOPIC</span>
                <select style={{ padding: "14px 0", border: 0, borderBottom: "1px solid var(--rule-strong)", background: "transparent", fontFamily: "var(--sans)", fontSize: 15, outline: "none", color: "var(--ink)", appearance: "none" }}>
                  <option>General enquiry</option><option>Press & media</option><option>Partnership</option><option>Data request</option>
                </select>
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span className="caption">MESSAGE</span>
                <textarea rows="5" required style={{ padding: "14px 0", border: 0, borderBottom: "1px solid var(--rule-strong)", background: "transparent", fontFamily: "var(--sans)", fontSize: 15, outline: "none", color: "var(--ink)", resize: "vertical" }}/>
              </label>
              <button type="submit" className="btn" style={{ marginTop: 14, alignSelf: "start" }}>Send message <Icon name="arrow-right" size={14}/></button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
};

// ─────────── LEGAL stub ───────────
window.LegalPage = function LegalPage() {
  return (
    <main className="page">
      <PageHeader eyebrow="Legal" title="Legal notice, privacy and accessibility." kicker="§ Legal"/>
      <section style={{ padding: "clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap-tight">
          <p className="body-lg">This site is operated by the HydroPulse consortium, coordinated by NTUA, under grant agreement No. 101198xxx of the European Union's Horizon Europe research and innovation programme.</p>
          <p className="body">Views and opinions expressed are those of the authors only and do not necessarily reflect those of the European Union. Neither the European Union nor the granting authority can be held responsible for them.</p>
        </div>
      </section>
    </main>
  );
};

// ─────────── Shared Page header ───────────
window.PageHeader = function PageHeader({ eyebrow, title, kicker }) {
  return (
    <section style={{ padding: "clamp(100px, 12vw, 160px) 0 clamp(32px, 5vw, 64px)" }}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 32 }}>{kicker}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2.2fr", gap: "clamp(24px, 5vw, 80px)", alignItems: "end" }} className="hp-two-col">
          <div className="caption" style={{ fontSize: 12 }}>{eyebrow.toUpperCase()}</div>
          <h1 className="display-lg" style={{ margin: 0, fontWeight: 300, lineHeight: 1.06 }}>{title}</h1>
        </div>
        <hr className="rule-strong" style={{ marginTop: 56 }}/>
      </div>
    </section>
  );
};