// HydroPulse — Sites index & detail, News index & detail, Resources

// ─────────── SITES INDEX ───────────
window.SitesPage = function SitesPage() {
  useReveal();
  const [selectedId, setSelectedId] = React.useState(null);
  const sites = HP_DATA.sites;
  const d = HP_DATA.project;

  return (
    <main className="page">
      <PageHeader eyebrow="Demonstration sites" title="The most critical ecosystems where hydropower plants operate in Europe." kicker="§ Sites"/>

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

      <section style={{ paddingBottom: "clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          {d.pendingNote && (
            <p className="body-sm reveal" style={{ marginBottom: 32, color: "var(--muted)", maxWidth: 720 }}>{d.pendingNote}</p>
          )}
          <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
            {sites.map(function (s, i) {
              return (
                <div key={s.id} className="reveal hp-site-row" style={{
                  display: "grid", gridTemplateColumns: "60px 1fr 1fr 220px", gap: 28, padding: "clamp(24px, 3vw, 40px) 0",
                  borderBottom: "1px solid var(--rule-strong)", color: "var(--ink)",
                  alignItems: "center", cursor: "pointer",
                }}
                  onClick={function () { setSelectedId(s.id); }}
                >
                  <div className="caption" style={{ fontSize: 13 }}>DS-0{i + 1}</div>
                  <div>
                    <div className="caption" style={{ marginBottom: 6 }}>{s.country.toUpperCase()} · {s.region.toUpperCase()}</div>
                    <h3 className="display-sm" style={{ margin: 0, fontSize: "clamp(22px, 2.2vw, 32px)" }}>{s.name}</h3>
                  </div>
                  <div className="body-sm" style={{ color: "var(--muted)", maxWidth: 440 }}>{s.summary}</div>
                  <div style={{ width: 220, height: 130 }}><PImage src={s.image} ratio="16/10" label="PLACEHOLDER"/></div>
                </div>
              );
            })}
          </div>
          <style>{`@media (max-width: 900px) { .hp-site-row { grid-template-columns: 1fr !important; } .hp-site-row > div:last-child { display: none !important; } }`}</style>
        </div>
      </section>
    </main>
  );
};

// ─────────── SITE DETAIL ───────────
window.SiteDetailPage = function SiteDetailPage({ id }) {
  useReveal();
  const features = HP_DATA.features || {};

  React.useEffect(function () {
    if (!features.showSiteDetailPages) {
      navTo("/sites");
    }
  }, []);

  if (!features.showSiteDetailPages) {
    return (
      <main className="page">
        <PageHeader eyebrow="Demonstration sites" title="Site profiles are not published yet." kicker="§ Sites"/>
      </main>
    );
  }

  const s = HP_DATA.sites.find(function (x) { return x.id === id; });
  if (!s) return <main className="page"><PageHeader eyebrow="Not found" title="This demonstration site does not exist." kicker="§"/></main>;
  const others = HP_DATA.sites.filter(function (x) { return x.id !== id; });

  return (
    <main className="page">
      <section style={{ padding: "clamp(100px, 12vw, 140px) 0 clamp(40px, 5vw, 60px)" }}>
        <div className="wrap">
          <a href="#/sites" className="link-arrow" style={{ marginBottom: 40, display: "inline-flex" }}>
            <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Icon name="arrow-right" size={14}/></span>
            All demonstration sites
          </a>
          <div className="caption" style={{ marginTop: 40, marginBottom: 20 }}>{s.country.toUpperCase()} · {s.region.toUpperCase()}</div>
          <h1 className="display-xl" style={{ margin: 0, fontWeight: 300, fontSize: "clamp(56px, 8vw, 120px)" }}>{s.name}</h1>
        </div>
      </section>

      <PImage src={s.image} ratio="21/9" label="PLACEHOLDER IMAGE"/>

      <section style={{ padding: "clamp(60px, 8vw, 100px) 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">§ Overview</div>
              <div style={{ marginTop: 28, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--muted)", lineHeight: 1.9, textTransform: "uppercase" }}>
                <div>LEAD · {s.lead}</div>
                <div style={{ marginTop: 6 }}>FOCUS · {s.focus.join(" / ")}</div>
              </div>
            </div>
            <div>
              <p className="lead reveal" style={{ margin: 0 }}>{s.summary}</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "clamp(40px, 6vw, 80px) 0", background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div className="wrap">
          <div className="eyebrow reveal" style={{ marginBottom: 32 }}>§ Key figures</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }} className="hp-facts">
            {s.kpis.map(function (k, i) {
              return (
                <div key={k.label} className="reveal" style={{ padding: "20px 24px", borderLeft: i === 0 ? "none" : "1px solid var(--rule)" }}>
                  <div style={{ fontFamily: "var(--display)", fontSize: "clamp(20px, 2.4vw, 28px)", fontWeight: 400, letterSpacing: "-0.02em" }}>{k.value}</div>
                  <div className="caption" style={{ marginTop: 10 }}>{k.label.toUpperCase()}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {others.length > 0 && (
        <section style={{ padding: "clamp(80px, 10vw, 140px) 0" }}>
          <div className="wrap">
            <div className="eyebrow reveal" style={{ marginBottom: 32 }}>§ Other demonstration sites</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="hp-sites-grid">
              {others.slice(0, 3).map(function (o) {
                return (
                  <a key={o.id} href="#/sites" className="reveal" style={{ textDecoration: "none", color: "var(--ink)" }}>
                    <PImage src={o.image} ratio="4/3" label="PLACEHOLDER"/>
                    <div className="caption" style={{ marginTop: 14 }}>{o.country.toUpperCase()}</div>
                    <h3 className="display-sm" style={{ margin: "8px 0 0", fontSize: 22 }}>{o.name}</h3>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      )}
    </main>
  );
};

// ─────────── NEWS INDEX ───────────
window.NewsPage = function NewsPage() {
  useReveal();
  const items = typeof HP_visibleNews === "function" ? HP_visibleNews() : HP_DATA.news.filter(function (n) { return n.visible !== false; });
  const lead = items[0];
  const rest = items.slice(1);

  return (
    <main className="page">
      <PageHeader eyebrow="News & updates" title="From the consortium." kicker="§ News"/>
      <section style={{ padding: "clamp(24px, 4vw, 48px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          {lead && (
            <a href={"#/news/" + lead.id} className="reveal hp-two-col" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(28px, 4vw, 64px)", marginBottom: rest.length ? 80 : 0, textDecoration: "none", color: "var(--ink)", alignItems: "center" }}>
              <PImage src={lead.image} ratio="4/3" label="PLACEHOLDER"/>
              <div>
                <div className="caption" style={{ display: "flex", gap: 14 }}>
                  <span>{formatDate(lead.date)}</span><span>—</span><span>{lead.category.toUpperCase()}</span><span>—</span><span>{lead.readTime.toUpperCase()}</span>
                </div>
                <h2 className="display-lg" style={{ margin: "16px 0 20px", fontSize: "clamp(32px, 4vw, 56px)" }}>{lead.title}</h2>
                <p className="body-lg" style={{ color: "var(--muted)", maxWidth: 540 }}>{lead.excerpt}</p>
                <span className="link-arrow" style={{ marginTop: 24, display: "inline-flex" }}>Read <Icon name="arrow-right" size={14}/></span>
              </div>
            </a>
          )}

          {rest.length > 0 && (
            <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
              {rest.map(function (n) {
                return (
                  <a key={n.id} href={"#/news/" + n.id} className="reveal hp-news-row" style={{ display: "grid", gridTemplateColumns: "140px 1fr 2fr 200px", gap: 28, padding: "clamp(24px, 3vw, 36px) 0", borderBottom: "1px solid var(--rule-strong)", textDecoration: "none", color: "var(--ink)", alignItems: "center" }}
                    onMouseEnter={function (e) { e.currentTarget.style.background = "var(--paper)"; }}
                    onMouseLeave={function (e) { e.currentTarget.style.background = "transparent"; }}
                  >
                    <div className="caption">{formatDate(n.date)}</div>
                    <div className="caption">{n.category.toUpperCase()}</div>
                    <h3 className="display-sm" style={{ margin: 0, fontSize: "clamp(20px, 1.8vw, 26px)" }}>{n.title}</h3>
                    <div style={{ width: 200, height: 115 }}><PImage src={n.image} ratio="16/10" label="PLACEHOLDER"/></div>
                  </a>
                );
              })}
            </div>
          )}

          {!lead && (
            <div className="body" style={{ color: "var(--muted)", padding: "40px 0" }}>No news items published yet.</div>
          )}
          <style>{`@media (max-width: 900px) { .hp-news-row { grid-template-columns: 1fr !important; } .hp-news-row > div:last-child { display: none !important; } }`}</style>
        </div>
      </section>
    </main>
  );
};

// ─────────── NEWS DETAIL ───────────
window.NewsDetailPage = function NewsDetailPage({ id }) {
  useReveal();
  const n = HP_DATA.news.find(function (x) { return x.id === id; });
  if (!n || n.visible === false) {
    return <main className="page"><PageHeader eyebrow="Not found" title="This article is not available." kicker="§"/></main>;
  }

  return (
    <main className="page">
      <section style={{ padding: "clamp(100px, 12vw, 140px) 0 clamp(32px, 5vw, 60px)" }}>
        <div className="wrap-tight">
          <a href="#/news" className="link-arrow" style={{ marginBottom: 40, display: "inline-flex" }}>
            <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Icon name="arrow-right" size={14}/></span>
            All news
          </a>
          <div className="caption" style={{ marginTop: 40, marginBottom: 24, display: "flex", gap: 14 }}>
            <span>{formatDate(n.date)}</span><span>—</span><span>{n.category.toUpperCase()}</span><span>—</span><span>{n.readTime.toUpperCase()}</span>
          </div>
          <h1 className="display-lg" style={{ margin: 0, fontWeight: 300, fontSize: "clamp(40px, 5.6vw, 72px)" }}>{n.title}</h1>
        </div>
      </section>

      <div className="wrap">
        <PImage src={n.image} ratio="21/9" label="PLACEHOLDER IMAGE"/>
      </div>

      <section style={{ padding: "clamp(60px, 8vw, 100px) 0" }}>
        <div className="wrap-tight">
          <p className="lead">{n.excerpt}</p>
          {n.body && <p className="body-lg" style={{ marginTop: 32, color: "var(--muted)" }}>{n.body}</p>}
        </div>
      </section>
    </main>
  );
};

// ─────────── RESOURCES ───────────
window.ResourcesPage = function ResourcesPage() {
  useReveal();
  const features = HP_DATA.features || {};
  const [filter, setFilter] = React.useState("All");
  const [q, setQ] = React.useState("");
  const types = ["All", ...new Set(HP_DATA.resources.map(function (r) { return r.type; }))];
  let items = filter === "All" ? HP_DATA.resources : HP_DATA.resources.filter(function (r) { return r.type === filter; });
  if (q) items = items.filter(function (r) { return (r.title + r.code + r.type).toLowerCase().includes(q.toLowerCase()); });

  return (
    <main className="page">
      <PageHeader eyebrow="Resources" title="Deliverables, policy briefs, datasets and publications." kicker="§ Knowledge hub"/>
      {!features.showDeliverableItems ? (
        <section style={{ padding: "clamp(24px, 4vw, 48px) 0 clamp(80px, 10vw, 140px)" }}>
          <div className="wrap reveal">
            <p className="lead" style={{ color: "var(--muted)", maxWidth: 760 }}>Deliverables, datasets and publications will be published here from the first reporting period. The section is in place and ready for content as outputs are confirmed.</p>
          </div>
        </section>
      ) : (
      <section style={{ padding: "clamp(24px, 4vw, 48px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="wrap">
          <div className="reveal" style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginBottom: 40, paddingBottom: 24, borderBottom: "1px solid var(--rule)" }}>
            {!features.showDeliverableFilters && (
              <div className="body-sm" style={{ color: "var(--muted)", alignSelf: "center" }}>Deliverable filters are hidden until the first reporting period.</div>
            )}
            {features.showDeliverableFilters && (
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {types.map(function (t) {
                  return (
                    <button key={t} onClick={function () { setFilter(t); }}
                      style={{ padding: "8px 14px", border: "1px solid " + (filter === t ? "var(--ink)" : "var(--rule-strong)"), background: filter === t ? "var(--ink)" : "transparent", color: filter === t ? "var(--paper)" : "var(--ink)", fontFamily: "var(--sans)", fontSize: 12, cursor: "pointer" }}>
                      {t}
                    </button>
                  );
                })}
              </div>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 10, border: "1px solid var(--rule-strong)", padding: "6px 12px", minWidth: 240 }}>
              <Icon name="search" size={13}/>
              <input value={q} onChange={function (e) { setQ(e.target.value); }} placeholder="Search resources…" style={{ flex: 1, border: 0, background: "transparent", fontFamily: "var(--sans)", fontSize: 13, padding: "6px 0", outline: "none", color: "var(--ink)" }}/>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "110px 110px 1fr 120px 140px 180px 40px", gap: 20, padding: "0 0 16px", borderBottom: "1px solid var(--rule-strong)" }} className="hp-res-head">
            <div className="caption">CODE</div>
            <div className="caption">TYPE</div>
            <div className="caption">TITLE</div>
            <div className="caption">DATE</div>
            <div className="caption">SIZE</div>
            <div className="caption">FORMAT</div>
            <div/>
          </div>
          {items.map(function (r) {
            return (
              <a key={r.code} href="#" onClick={function (e) { e.preventDefault(); }} className="reveal hp-res-row" style={{ display: "grid", gridTemplateColumns: "110px 110px 1fr 120px 140px 180px 40px", gap: 20, padding: "22px 0", borderBottom: "1px solid var(--rule)", textDecoration: "none", color: "var(--ink)", alignItems: "center", transition: "background var(--dur) var(--ease)" }}
                onMouseEnter={function (e) { e.currentTarget.style.background = "var(--paper)"; }}
                onMouseLeave={function (e) { e.currentTarget.style.background = "transparent"; }}
              >
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>{r.code}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--teal-deep)" }}>{r.type}</div>
                <div style={{ fontFamily: "var(--display)", fontSize: 18, letterSpacing: "-0.01em" }}>{r.title}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>{r.date}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>{r.size}</div>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>{r.format}</div>
                <div style={{ display: "flex", justifyContent: "flex-end" }}><Icon name="download" size={16}/></div>
              </a>
            );
          })}
          {items.length === 0 && <div style={{ padding: "60px 0", textAlign: "center", color: "var(--muted)" }} className="body">No resources match.</div>}
          <style>{`
            @media (max-width: 1100px) {
              .hp-res-head, .hp-res-row { grid-template-columns: 90px 1fr 80px !important; }
              .hp-res-head > :nth-child(n+4), .hp-res-row > :nth-child(n+4):not(:last-child) { display: none !important; }
            }
          `}</style>
        </div>
      </section>
      )}
    </main>
  );
};