// HydroPulse — Home page

window.HomePage = function HomePage({ heroVariant = "mixed" }) {
  useReveal();
  const d = HP_DATA.project;
  const features = HP_DATA.features || {};
  const sites = HP_DATA.sites;
  const workPackages = HP_DATA.workPackages;
  const news = typeof HP_visibleNews === "function" ? HP_visibleNews() : HP_DATA.news.filter(function (n) { return n.visible !== false; });
  const [selectedSiteId, setSelectedSiteId] = React.useState(null);

  return (
    <main className="page">
      <section style={{ position: "relative", paddingTop: 20 }}>
        {heroVariant === "image" && <HeroImage d={d}/>}
        {heroVariant === "type" && <HeroType d={d}/>}
        {heroVariant === "map" && <HeroMap d={d}/>}
        {heroVariant === "mixed" && <HeroMixed d={d}/>}
      </section>

      <section style={{ padding: "clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 64px)" }}>
        <div className="wrap">
          <div className="reveal">
            <h1 className="display-xl" style={{ margin: 0, fontWeight: 300, fontSize: "clamp(48px, 8vw, 120px)" }}>
              HydroPulse
            </h1>
            <p className="lead" style={{ marginTop: 28, maxWidth: 920, color: "var(--muted)" }}>
              {d.acronym}
            </p>
          </div>
        </div>
      </section>

      <hr className="rule"/>

      <section style={{ padding: "clamp(60px, 10vw, 120px) 0 clamp(60px, 8vw, 100px)" }}>
        <div className="wrap">
          <div className="reveal">
            <div className="eyebrow">§ 01 &nbsp;— &nbsp; Main page</div>
            <h2 className="display-lg" style={{ margin: "20px 0 32px", maxWidth: 900, fontWeight: 300 }}>
              {d.mainTitle}
            </h2>
            <p className="body-lg" style={{ color: "var(--muted)", maxWidth: 820, margin: "0 0 24px" }}>{d.summary}</p>
            <p className="body-lg" style={{ color: "var(--muted)", maxWidth: 820, margin: 0 }}>{d.longSummary}</p>
            <div className="reveal" style={{ marginTop: 40, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href="#/about" className="btn">About the project <Icon name="arrow-right" size={14}/></a>
              <a href="#/work-packages" className="btn btn-ghost">Work packages <Icon name="arrow-right" size={14}/></a>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule"/>

      <section style={{ padding: "clamp(40px, 6vw, 72px) 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} className="hp-facts">
            {[
              { k: String(d.partnerCount), l: "Partner institutions", sub: "Consortium organisations" },
              { k: String(d.europeanCases), l: "European cases", sub: "Regional case study sites" },
              { k: String(d.demoSites), l: "Demonstration sites", sub: "5 profiles published · more pending" },
              { k: String(d.workPackages), l: "Work packages", sub: "Integrated research programme" },
            ].map(function (f, i) {
              return (
                <div key={i} className="reveal" style={{ padding: "clamp(24px, 3vw, 40px) 24px", borderLeft: i === 0 ? "none" : "1px solid var(--rule)" }}>
                  <div className="display-md" style={{ fontWeight: 400, fontFamily: "var(--display)" }}>{f.k}</div>
                  <div className="body" style={{ marginTop: 12, fontWeight: 500 }}>{f.l}</div>
                  <div className="body-sm" style={{ marginTop: 6 }}>{f.sub}</div>
                </div>
              );
            })}
          </div>
          {d.pendingNote && (
            <p className="body-sm reveal" style={{ marginTop: 24, color: "var(--muted)", maxWidth: 720 }}>{d.pendingNote}</p>
          )}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .hp-facts { grid-template-columns: repeat(2, 1fr) !important; }
            .hp-facts > div { border-left: none !important; border-top: 1px solid var(--rule); }
            .hp-two-col { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      <hr className="rule"/>

      <section style={{ padding: "clamp(80px, 12vw, 140px) 0" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 64, flexWrap: "wrap", gap: 20 }} className="reveal">
            <div>
              <div className="eyebrow">§ 02 &nbsp;— &nbsp; Work packages</div>
              <h2 className="display-lg" style={{ margin: "16px 0 0", maxWidth: 820 }}>
                Fifteen work packages,<br/>one shared vision for sustainable hydropower.
              </h2>
            </div>
            <a href="#/work-packages" className="link-arrow">All work packages <Icon name="arrow-right" size={14}/></a>
          </div>
          <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
            {workPackages.slice(0, 6).map(function (t, i) {
              return <WorkPackageRow key={t.id} t={t} last={i === 5}/>;
            })}
          </div>
        </div>
      </section>

      {features.showFeaturedSite && sites[0] && <FeaturedSite site={sites[0]}/>}

      <section style={{ padding: "clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 20 }} className="reveal">
            <div>
              <div className="eyebrow">§ 03 &nbsp;— &nbsp; Demonstration sites</div>
              <h2 className="display-lg" style={{ margin: "16px 0 0", maxWidth: 820 }}>
                The most critical ecosystems where hydropower plants operate in Europe.
              </h2>
            </div>
            <a href="#/sites" className="link-arrow">All demonstration sites <Icon name="arrow-right" size={14}/></a>
          </div>
          <div className="reveal" style={{ marginBottom: 60 }}>
            <EuropeMap
              mode="sites"
              selectedId={selectedSiteId}
              onSelect={function (id) { setSelectedSiteId(id); }}
              showInfoPanel={true}
            />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }} className="hp-sites-grid">
            {sites.map(function (s, i) {
              return (
                <div key={s.id} className="reveal" style={{
                  display: "block",
                  padding: "28px 24px 36px",
                  borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid var(--rule)",
                  borderBottom: "1px solid var(--rule)",
                  cursor: "pointer",
                }}
                  onClick={function () { setSelectedSiteId(s.id); window.scrollTo({ top: document.querySelector(".hp-map-split") ? document.querySelector(".hp-map-split").offsetTop - 80 : 0, behavior: "smooth" }); }}
                >
                  <div className="caption" style={{ display: "flex", justifyContent: "space-between" }}>
                    <span>DS-0{i + 1}</span>
                    <span>{s.country.toUpperCase()}</span>
                  </div>
                  <h3 className="display-sm" style={{ margin: "16px 0 10px" }}>{s.name}</h3>
                  <div className="body-sm" style={{ color: "var(--muted)" }}>{s.region} · {s.lead}</div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 20 }}>
                    {s.focus.slice(0, 3).map(function (f) {
                      return (
                        <span key={f} style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", padding: "4px 8px", border: "1px solid var(--rule)", color: "var(--muted)" }}>{f}</span>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
          <style>{`
            @media (max-width: 900px) { .hp-sites-grid { grid-template-columns: 1fr !important; } .hp-sites-grid > div { border-right: none !important; } }
            @media (max-width: 1200px) and (min-width: 901px) { .hp-sites-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          `}</style>
        </div>
      </section>

      <hr className="rule"/>

      {news.length > 0 && (
        <section style={{ padding: "clamp(80px, 12vw, 140px) 0" }}>
          <div className="wrap">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56, flexWrap: "wrap", gap: 20 }} className="reveal">
              <div>
                <div className="eyebrow">§ 04 &nbsp;— &nbsp; News</div>
                <h2 className="display-lg" style={{ margin: "16px 0 0" }}>From the consortium.</h2>
              </div>
              <a href="#/news" className="link-arrow">All news <Icon name="arrow-right" size={14}/></a>
            </div>
            <a href={"#/news/" + news[0].id} className="reveal" style={{ textDecoration: "none", color: "var(--ink)", display: "block", maxWidth: 760 }}>
              <PImage src={news[0].image} ratio="16/9" label="PLACEHOLDER"/>
              <div className="caption" style={{ marginTop: 16, display: "flex", gap: 16 }}>
                <span>{formatDate(news[0].date)}</span><span>—</span><span>{news[0].category.toUpperCase()}</span>
              </div>
              <h3 className="display-sm" style={{ margin: "12px 0 10px", maxWidth: 620 }}>{news[0].title}</h3>
              <p className="body-sm" style={{ color: "var(--muted)", maxWidth: 620 }}>{news[0].excerpt}</p>
            </a>
          </div>
        </section>
      )}

      <section style={{ padding: "clamp(60px, 9vw, 100px) 0", background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, flexWrap: "wrap", gap: 16 }} className="reveal">
            <div className="eyebrow">§ 05 &nbsp;— &nbsp; Consortium — {d.consortiumPartners} partners</div>
            <a href="#/consortium" className="link-arrow">The full consortium <Icon name="arrow-right" size={14}/></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }} className="hp-partner-grid">
            {HP_DATA.partners.slice(0, 12).map(function (p, i) {
              return (
                <div key={p.id} className="reveal" style={{
                  padding: "26px 18px", borderRight: (i + 1) % 4 === 0 ? "none" : "1px solid var(--rule)",
                  borderBottom: "1px solid var(--rule)", minHeight: 120, display: "flex", flexDirection: "column", justifyContent: "space-between",
                }}>
                  <div style={{ fontFamily: "var(--display)", fontSize: 17, letterSpacing: "-0.01em", fontWeight: 500 }}>{p.name}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)", marginTop: 12 }}>{p.country}</div>
                </div>
              );
            })}
          </div>
          <style>{`
            @media (max-width: 1000px) { .hp-partner-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          `}</style>
        </div>
      </section>

      <section style={{ padding: "clamp(60px, 9vw, 100px) 0", borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }} className="reveal">
            <div>
              <div className="eyebrow">§ 06 &nbsp;— &nbsp; Stakeholders' Advisory Board</div>
              <h2 className="display-md" style={{ margin: "12px 0 0" }}>Advisory board members</h2>
            </div>
            <a href="#/advisory-board" className="link-arrow">Full list <Icon name="arrow-right" size={14}/></a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }} className="hp-advisory-grid">
            {HP_DATA.advisoryBoard.slice(0, 6).map(function (m, i) {
              return (
                <div key={m.name} className="reveal" style={{ padding: "20px 24px", borderBottom: "1px solid var(--rule)", borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none" }}>
                  <div className="body" style={{ fontWeight: 500 }}>{m.name}</div>
                  <div className="caption" style={{ marginTop: 8 }}>{m.country.toUpperCase()}</div>
                </div>
              );
            })}
          </div>
          <style>{`@media (max-width: 700px) { .hp-advisory-grid { grid-template-columns: 1fr !important; } .hp-advisory-grid > div { border-right: none !important; } }`}</style>
        </div>
      </section>

      <section style={{ padding: "clamp(80px, 12vw, 140px) 0" }}>
        <div className="wrap">
          <div className="reveal" style={{ maxWidth: 980 }}>
            <div className="eyebrow">§ 07 &nbsp;— &nbsp; Get involved</div>
            <h2 className="display-lg" style={{ margin: "20px 0 28px", fontWeight: 300 }}>
              Researchers, operators, regulators, riparian communities — <em style={{ color: "var(--teal-deep)", fontStyle: "italic" }}>HydroPulse is designed to be worked with, not around.</em>
            </h2>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 12 }}>
              <a href="#/engage" className="btn">Ways to engage <Icon name="arrow-right" size={14}/></a>
              <a href="#/contact" className="btn btn-ghost">Contact the consortium <Icon name="arrow-right" size={14}/></a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const HERO_MEDIA = {
  posterAvif: "assets/hero/hydropulse-hero-poster.avif",
  posterJpg: "assets/hero/hydropulse-hero-poster.jpg",
};

function HeroMixed({ d }) {
  return (
    <div className="wrap" style={{ paddingTop: "clamp(40px, 6vw, 72px)", paddingBottom: "clamp(24px, 4vw, 48px)" }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>HORIZON EUROPE · 2026 — 2030</div>
      <h1 className="display-xl" style={{ margin: 0, fontWeight: 300 }}>
        Hydropower,<br/>rebuilt around <em style={{ fontStyle: "italic", color: "var(--teal-deep)" }}>living rivers.</em>
      </h1>
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "clamp(28px, 5vw, 80px)", alignItems: "end", marginTop: 56 }} className="hp-two-col">
        <p className="lead" style={{ margin: 0, maxWidth: 720 }}>{d.summary}</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)", borderLeft: "1px solid var(--rule-strong)", paddingLeft: 24 }}>
          <div><div style={{ opacity: 0.6 }}>DURATION</div><div style={{ color: "var(--ink)", marginTop: 6, fontSize: 13 }}>{d.duration}</div></div>
          <div><div style={{ opacity: 0.6 }}>PARTNERS</div><div style={{ color: "var(--ink)", marginTop: 6, fontSize: 13 }}>{d.partnerCount} · {d.countries} countries</div></div>
          <div><div style={{ opacity: 0.6 }}>COORDINATOR</div><div style={{ color: "var(--ink)", marginTop: 6, fontSize: 13 }}>NTUA</div></div>
          <div><div style={{ opacity: 0.6 }}>WORK PACKAGES</div><div style={{ color: "var(--ink)", marginTop: 6, fontSize: 13 }}>{d.workPackages}</div></div>
        </div>
      </div>
      <div style={{ marginTop: 72 }}>
        <PImage src="https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=2400&q=75" ratio="21/9" label="PLACEHOLDER IMAGE · river / landscape"/>
      </div>
    </div>
  );
}

function HeroImage({ d }) {
  return (
    <section className="hp-hero-image" aria-label="Project introduction">
      <div className="hp-hero-image__media" aria-hidden="true">
        <picture className="hp-hero-image__poster">
          <source srcSet={HERO_MEDIA.posterAvif} type="image/avif"/>
          <img src={HERO_MEDIA.posterJpg} alt="" decoding="async" fetchpriority="high"/>
        </picture>
        <div className="hp-hero-image__water"/>
        <div className="hp-hero-image__scrim"/>
      </div>
      <div className="wrap hp-hero-image__inner">
        <div className="hp-hero-image__block">
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", color: "rgba(250,247,240,0.75)", marginBottom: 32 }}>HORIZON EUROPE · 2026 — 2030</div>
          <h1 className="display-xl hp-hero-image__headline" style={{ margin: 0, fontWeight: 300, color: "var(--paper)" }}>
            Hydropower,<br/>rebuilt around <em style={{ fontStyle: "italic" }}>living rivers.</em>
          </h1>
          <p className="lead hp-hero-image__lead" style={{ marginTop: 32, color: "rgba(250,247,240,0.92)", maxWidth: 720 }}>{d.summary}</p>
        </div>
      </div>
    </section>
  );
}

function HeroType({ d }) {
  return (
    <div className="wrap hp-hero-type" style={{ padding: "clamp(60px, 10vw, 140px) var(--gutter) clamp(40px, 6vw, 80px)" }}>
      <div className="eyebrow" style={{ marginBottom: 48 }}>HORIZON EUROPE · 2026 — 2030</div>
      <h1 className="display-xl" style={{ margin: 0, fontWeight: 300, fontSize: "clamp(48px, 9vw, 184px)" }}>
        Living<br/>rivers.<br/><em style={{ fontStyle: "italic", color: "var(--teal-deep)" }}>Working</em><br/>hydropower.
      </h1>
      <p className="lead" style={{ marginTop: 64, maxWidth: 780 }}>{d.summary}</p>
    </div>
  );
}

function HeroMap({ d }) {
  return (
    <div className="wrap hp-hero-map" style={{ paddingTop: "clamp(40px, 6vw, 72px)" }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>HORIZON EUROPE · 2026 — 2030 · {d.consortiumPartners} PARTNERS · {d.demoSites} DEMONSTRATION SITES</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48, alignItems: "center" }} className="hp-two-col">
        <div className="hp-hero-map__copy">
          <h1 className="display-lg" style={{ margin: 0, fontWeight: 300 }}>
            Five cases.<br/>{d.consortiumPartners} institutions.<br/><em style={{ fontStyle: "italic", color: "var(--teal-deep)" }}>One programme.</em>
          </h1>
          <p className="lead" style={{ marginTop: 36, maxWidth: 540 }}>{d.summary}</p>
        </div>
        <div className="hp-hero-map__viz"><EuropeMap mode="sites"/></div>
      </div>
    </div>
  );
}

function WorkPackageRow({ t, last }) {
  const [open, setOpen] = useStateMap(false);
  return (
    <div className="reveal" style={{ borderBottom: "1px solid var(--rule-strong)" }}>
      <button onClick={function () { setOpen(!open); }}
        style={{ width: "100%", background: "transparent", border: 0, padding: "clamp(24px, 3vw, 36px) 0", cursor: "pointer", textAlign: "left", display: "grid", gridTemplateColumns: "80px 1fr 2fr auto", gap: 24, alignItems: "baseline", color: "var(--ink)", fontFamily: "var(--sans)" }}
        className="hp-theme-row"
      >
        <div className="caption" style={{ fontSize: 13 }}>{t.number}</div>
        <div className="display-sm" style={{ margin: 0 }}>{t.title}</div>
        <div className="body" style={{ color: "var(--muted)", maxWidth: 600 }}>{t.summary}</div>
        <div style={{ padding: 6, border: "1px solid var(--rule-strong)", borderRadius: "50%", width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", transition: "all var(--dur) var(--ease)", background: open ? "var(--ink)" : "transparent", color: open ? "var(--paper)" : "var(--ink)" }}>
          <Icon name={open ? "minus" : "plus"} size={14}/>
        </div>
      </button>
      <div style={{ maxHeight: open ? 400 : 0, overflow: "hidden", transition: "max-height 500ms var(--ease)" }}>
        <div style={{ padding: "0 0 32px", display: "grid", gridTemplateColumns: "80px 1fr 2fr auto", gap: 24 }}>
          <div/><div/><div>
            <div className="caption">LEAD · {t.lead.toUpperCase()}</div>
            <div className="caption" style={{ marginTop: 6 }}>WORK PACKAGES · {t.workPackages.join(" / ")}</div>
            <div style={{ marginTop: 22, display: "flex", gap: 8, flexWrap: "wrap" }}>
              {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>
            <a href={"#/work-packages#" + t.id} className="link-arrow" style={{ marginTop: 22, display: "inline-flex" }}>More on this work package <Icon name="arrow-right" size={14}/></a>
          </div>
          <div/>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .hp-theme-row { grid-template-columns: 48px 1fr auto !important; } .hp-theme-row > :nth-child(3) { display: none !important; } }`}</style>
    </div>
  );
}

function FeaturedSite({ site }) {
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(80px, 12vw, 140px) 0" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px, 5vw, 80px)", alignItems: "center" }} className="hp-two-col">
          <div className="reveal">
            <div className="eyebrow" style={{ color: "rgba(250,247,240,0.55)" }}>Featured demonstration site</div>
            <h2 className="display-lg" style={{ color: "var(--paper)", margin: "12px 0 28px", fontWeight: 300 }}>{site.name}</h2>
            <p className="lead" style={{ color: "rgba(250,247,240,0.82)", maxWidth: 520, marginTop: 0 }}>{site.summary}</p>
          </div>
          <div className="reveal">
            <PImage src={site.image} ratio="4/5" label="PLACEHOLDER IMAGE · hydropower site"/>
          </div>
        </div>
      </div>
    </section>
  );
}

window.formatDate = function formatDate(iso) {
  const d = new Date(iso);
  return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }).toUpperCase();
};