/* ============================================================
   READING — curated reading list
   A single-page bibliography organized by topic. Sources are
   ordered roughly from foundational to advanced within each
   category. Content adapted from the Energy Reading List.
   Reuses the .ep-* shell styling from the Energy Primer and
   adds .rd-* classes (reading.css) for the source rows.
   ============================================================ */
const { useState: rdUse, useEffect: rdEffect } = React;

/* ---------- reading list data ----------
   Each category groups sources; each source has a title, a
   primary url, an explanatory note, and a rough time estimate. */
const RD_CATEGORIES = [
  {
    id: "foundations",
    title: "Energy Foundations",
    note: "Five sources. Read in this order.",
    foot: "Total reading: 7–8 hours. Spread across the week.",
    sources: [
      {
        title: "IEA, World Energy Outlook 2024",
        url: "https://www.iea.org/reports/world-energy-outlook-2024",
        note: "Executive Summary and the “Scenario design and key assumptions” chapter. Free at iea.org. Get the structure of the three scenarios (STEPS, APS, NZE) into your head.",
        time: "~2 hours",
      },
      {
        title: "Vaclav Smil, How the World Really Works",
        url: "https://www.penguinrandomhouse.com/books/666342/how-the-world-really-works-by-vaclav-smil/",
        note: "Chapter 1 (“Understanding Energy”) and Chapter 6 (“Understanding the Environment”). The systems view from the most skeptical credible voice — an important counterweight to transition optimism.",
        time: "~3 hours",
      },
      {
        title: "Our World in Data, “Energy” entry",
        url: "https://ourworldindata.org/energy",
        note: "Read all the charts on the main page, paying attention to per-capita vs. absolute and primary vs. final framings. Free.",
        time: "~1 hour",
      },
      {
        title: "BP / Energy Institute, Statistical Review of World Energy 2024",
        url: "https://www.energyinst.org/statistical-review",
        note: "The annual data bible. Skim the executive summary; bookmark the data tables.",
        time: "~1 hour reading, lifetime reference",
      },
      {
        title: "Hannah Ritchie, “The Energy Mix” series",
        url: "https://www.sustainabilitybynumbers.com/",
        note: "Any 2 articles. A clean, accessible application of these framings to current debates.",
        time: "~30 minutes",
      },
    ],
  },
  {
    id: "global-system",
    title: "Global Energy System",
    sources: [
      {
        title: "IEA, World Energy Outlook (annual)",
        url: "https://www.iea.org/reports/world-energy-outlook-2024",
        note: "Free chapter excerpts at iea.org. The foundational annual update; read the scenarios chapter.",
        time: "~3 hours",
      },
      {
        title: "Energy Institute, Statistical Review of World Energy (annual)",
        url: "https://www.energyinst.org/statistical-review",
        note: "Free. The data backbone — formerly BP’s publication, now hosted by the EI.",
        time: "~2 hours",
      },
      {
        title: "Our World in Data — energy section",
        url: "https://ourworldindata.org/energy",
        note: "Free. The best free visualizations of the system.",
        time: "~2 hours of exploration",
      },
      {
        title: "Daniel Yergin, The New Map (2020)",
        url: "https://www.penguinrandomhouse.com/books/317939/the-new-map-by-daniel-yergin/",
        note: "The historical and geopolitical context for the current system.",
        time: "~6 hours",
      },
      {
        title: "Vaclav Smil, How the World Really Works (2022)",
        url: "https://www.penguinrandomhouse.com/books/666342/how-the-world-really-works-by-vaclav-smil/",
        note: "The skeptical view on transition pace; a valuable counterweight.",
        time: "~5 hours",
      },
    ],
  },
  {
    id: "oil",
    title: "Oil",
    sources: [
      {
        title: "Daniel Yergin, The New Map (2020), Part I",
        url: "https://www.penguinrandomhouse.com/books/317939/the-new-map-by-daniel-yergin/",
        note: "On the new geopolitics of oil. Higher signal than The Prize for current relevance.",
        time: "~3 hours",
      },
      {
        title: "IEA, Oil 2024 report",
        url: "https://www.iea.org/reports/oil-2024",
        note: "Executive summary and key chapters. Free at iea.org. The annual demand–supply outlook.",
        time: "~2 hours",
      },
      {
        title: "OPEC, World Oil Outlook 2024",
        url: "https://woo.opec.org/",
        note: "Chapter on long-term demand. Free at opec.org. The producer view; contrast with the IEA.",
        time: "~1.5 hours",
      },
      {
        title: "S&P Global Commodity Insights (Platts) / OPIS refining margins",
        url: "https://www.spglobal.com/commodityinsights/",
        note: "A sample read of daily refining margin reports. Builds intuition for crack spreads.",
        time: "~30 minutes",
      },
      {
        title: "Investor Day presentations — a major and a shale pure-play",
        url: "https://corporate.exxonmobil.com/investors",
        note: "E.g., ExxonMobil and a pure-play such as Pioneer or Diamondback (before acquisition). The corporate strategy view.",
        time: "~2 hours",
      },
    ],
  },
  {
    id: "gas-lng",
    title: "Natural Gas and LNG",
    sources: [
      {
        title: "Anne-Sophie Corbeau et al. — reshaping of the global LNG market (CGEP, 2024)",
        url: "https://www.energypolicy.columbia.edu/how-geopolitics-is-reshaping-the-global-outlook-for-natural-gas-and-lng/",
        note: "Columbia Center on Global Energy Policy. Free. The best single overview of post-2022 LNG dynamics.",
        time: "~2 hours",
      },
      {
        title: "IEA, Gas Market Report (quarterly)",
        url: "https://www.iea.org/reports/gas-market-report-q1-2026",
        note: "Most recent issue. Free at iea.org. The data spine.",
        time: "~1.5 hours",
      },
      {
        title: "Cheniere Energy Investor Day 2024",
        url: "https://www.cheniere.com/",
        note: "Or most recent. Free at cheniere.com. The economic model of US LNG, from the originator.",
        time: "~1 hour",
      },
      {
        title: "Bruegel and CSIS on EU gas dependencies and the 2022 crisis",
        url: "https://www.bruegel.org/",
        note: "Various publications. The policy-strategic perspective.",
        time: "~2 hours",
      },
      {
        title: "An operator’s LNG outlook — Shell or Total",
        url: "https://www.shell.com/",
        note: "Annual publication, free. The integrated major’s view.",
        time: "~1 hour",
      },
    ],
  },
  {
    id: "power-markets",
    title: "Power Markets",
    sources: [
      {
        title: "PJM, “Markets and Operations 101”",
        url: "https://learn.pjm.com/",
        note: "Or ERCOT’s equivalent. Free. The clearest plain-language introduction to a major US market.",
        time: "~2 hours",
      },
      {
        title: "MIT / National Academies, The Future of Electric Power in the United States (2021)",
        url: "https://nap.nationalacademies.org/catalog/25968/the-future-of-electric-power-in-the-united-states",
        note: "Free. Read Chapters 1–3 on market design and Chapter 5 on integrating renewables.",
        time: "~3 hours",
      },
      {
        title: "Brattle Group, capacity market work",
        url: "https://www.brattle.com/insights-events/publications/",
        note: "“Capacity Markets at a Crossroads” and related. Free. The state of the art on capacity market design.",
        time: "~1.5 hours",
      },
      {
        title: "Lion Hirth, “What Caused the Drop in European Electricity Prices?”",
        url: "https://www.strommarkttreffen.org/Hirth-What_caused_the_drop_in_European_electricity_prices.pdf",
        note: "A factor decomposition analysis. The best primer on the merit-order effect.",
        time: "~1 hour",
      },
      {
        title: "EIA, Today in Energy — power markets",
        url: "https://www.eia.gov/todayinenergy/",
        note: "Accessible weekly briefings on US power markets.",
        time: "~1 hour total",
      },
    ],
  },
  {
    id: "renewables",
    title: "Renewables Economics",
    sources: [
      {
        title: "Lazard, Levelized Cost of Energy Analysis",
        url: "https://www.lazard.com/research-insights/",
        note: "Most recent edition. Free at lazard.com. The industry-standard reference.",
        time: "~1.5 hours",
      },
      {
        title: "IRENA, Renewable Power Generation Costs 2023",
        url: "https://www.irena.org/Publications",
        note: "Or most recent. Free at irena.org. A global perspective, more granular than Lazard.",
        time: "~2 hours",
      },
      {
        title: "IEA, Renewables 2024 report",
        url: "https://www.iea.org/reports/renewables-2024",
        note: "Free at iea.org. Annual outlook and deployment data.",
        time: "~2 hours",
      },
      {
        title: "Lion Hirth, “The Market Value of Variable Renewables” (2013)",
        url: "https://doi.org/10.1016/j.eneco.2013.02.004",
        note: "And follow-on papers. The foundational academic treatment of value deflation.",
        time: "~2 hours",
      },
      {
        title: "A major developer investor day — Ørsted, NextEra, or Iberdrola",
        url: "https://orsted.com/",
        note: "The corporate strategy view.",
        time: "~1.5 hours",
      },
    ],
  },
  {
    id: "storage",
    title: "Storage and Flexibility",
    sources: [
      {
        title: "BloombergNEF, Energy Storage Outlook and Battery Price Survey",
        url: "https://about.bnef.com/",
        note: "Most recent. Free summaries.",
        time: "~1.5 hours",
      },
      {
        title: "NREL ATB (Annual Technology Baseline) — storage section",
        url: "https://atb.nrel.gov/",
        note: "Free, exceptionally detailed.",
        time: "~1.5 hours",
      },
      {
        title: "Sepulveda, Jenkins et al., “The Role of Firm Low-Carbon Electricity Resources in Deep Decarbonization” (Joule, 2018)",
        url: "https://doi.org/10.1016/j.joule.2018.08.006",
        note: "The foundational academic paper on flexibility cost stacks.",
        time: "~1 hour",
      },
      {
        title: "MIT, Future of Energy Storage (2022)",
        url: "https://energy.mit.edu/research/future-of-energy-storage/",
        note: "Free. The state of the art on technologies and policy.",
        time: "~3 hours",
      },
      {
        title: "An operator’s perspective — NextEra, AES, or Fluence",
        url: "https://fluenceenergy.com/",
        note: "On storage strategy.",
        time: "~1 hour",
      },
    ],
  },
  {
    id: "nuclear",
    title: "Nuclear and Other Firm Power",
    sources: [
      {
        title: "World Nuclear Association — country profiles and reactor database",
        url: "https://world-nuclear.org/",
        note: "Free. The definitive data on the global fleet.",
        time: "~2 hours",
      },
      {
        title: "MIT, The Future of Nuclear Energy in a Carbon-Constrained World (2018)",
        url: "https://energy.mit.edu/research/future-nuclear-energy-carbon-constrained-world",
        note: "Free. The most rigorous recent academic analysis.",
        time: "~3 hours",
      },
      {
        title: "IEA, Nuclear Power in a Clean Energy System (2019)",
        url: "https://www.iea.org/reports/nuclear-power-in-a-clean-energy-system",
        note: "Plus periodic updates. Free at iea.org. The IEA’s framing.",
        time: "~2 hours",
      },
      {
        title: "Jacopo Buongiorno (MIT)",
        url: "https://nse.mit.edu/",
        note: "Various papers and shorter pieces. The most thoughtful pro-nuclear technical analysis.",
        time: "~2 hours",
      },
      {
        title: "Breakthrough Institute — energy work",
        url: "https://thebreakthrough.org/",
        note: "Free. The pragmatist environmental case for nuclear.",
        time: "~1.5 hours",
      },
      {
        title: "NuScale, X-energy, TerraPower, Fervo — investor and public materials",
        url: "https://www.nuscalepower.com/",
        note: "The companies themselves on their projects and economics.",
        time: "~1 hour each",
      },
    ],
  },
  {
    id: "decarbonization",
    title: "Decarbonization Pathways",
    sources: [
      {
        title: "IEA, Energy Technology Perspectives 2024",
        url: "https://www.iea.org/reports/energy-technology-perspectives-2024",
        note: "Free. The most detailed sectoral roadmap publicly available.",
        time: "~3 hours",
      },
      {
        title: "Princeton Net-Zero America (2021)",
        url: "https://netzeroamerica.princeton.edu/",
        note: "Free, large. Executive summary plus 2 chapters. A sector-by-sector US deep dive.",
        time: "~3 hours",
      },
      {
        title: "Mission Possible Partnership reports",
        url: "https://www.missionpossiblepartnership.org/",
        note: "E.g., steel, cement, aviation. Free. Industry-led decarbonization roadmaps.",
        time: "~2 hours per sector",
      },
      {
        title: "Vaclav Smil, Numbers Don’t Lie or How the World Really Works",
        url: "https://www.penguinrandomhouse.com/books/663649/numbers-dont-lie-by-vaclav-smil/",
        note: "The skeptical view; a useful counterweight.",
        time: "~3 hours",
      },
      {
        title: "A major corporate transition plan — ArcelorMittal, Holcim, or Maersk",
        url: "https://corporate.arcelormittal.com/",
        note: "Real corporate strategy, with disclosure of costs and uncertainties.",
        time: "~1 hour",
      },
    ],
  },
  {
    id: "geopolitics",
    title: "Geopolitics and Critical Minerals",
    sources: [
      {
        title: "IEA, Global Critical Minerals Outlook 2024",
        url: "https://www.iea.org/reports/global-critical-minerals-outlook-2024",
        note: "Free at iea.org. The single best overview.",
        time: "~2 hours",
      },
      {
        title: "CSIS, Energy Security and Geopolitics in the Age of Energy Transition",
        url: "https://www.csis.org/programs/energy-security-and-climate-change-program",
        note: "Or similar recent reports. Free at csis.org.",
        time: "~1.5 hours",
      },
      {
        title: "Daniel Yergin, The New Map (2020), Part III",
        url: "https://www.penguinrandomhouse.com/books/317939/the-new-map-by-daniel-yergin/",
        note: "On the new energy map and critical minerals.",
        time: "~2 hours",
      },
      {
        title: "An IEA World Energy Outlook chapter on critical minerals or geopolitics",
        url: "https://www.iea.org/reports/world-energy-outlook-2024",
        note: "Free chapter excerpts at iea.org.",
        time: "~1 hour",
      },
      {
        title: "BloombergNEF or Wood Mackenzie on EV supply chains",
        url: "https://about.bnef.com/",
        note: "Industry publications on the minerals-to-batteries chain.",
        time: "~1.5 hours",
      },
      {
        title: "Brad Setser, “Follow the Money” (CFR blog)",
        url: "https://www.cfr.org/blog/Setser",
        note: "E.g., “How Much Is the IRA Worth?” The fiscal scale of US industrial policy.",
        time: "~30 min",
      },
    ],
  },
];

const RD_TOTAL_SOURCES = RD_CATEGORIES.reduce((n, c) => n + c.sources.length, 0);

/* ============================================================
   VIEW
   ============================================================ */
function ReadingView() {
  const [active, setActive] = rdUse(RD_CATEGORIES[0].id);

  // scroll spy: highlight the category currently in view
  rdEffect(() => {
    const handler = () => {
      let current = RD_CATEGORIES[0].id;
      for (const c of RD_CATEGORIES) {
        const el = document.getElementById("rd-" + c.id);
        if (el && el.getBoundingClientRect().top < 140) current = c.id;
      }
      setActive(current);
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  const jump = (id) => {
    const el = document.getElementById("rd-" + id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" });
  };

  return (
    <div className="ep">
      <div className="ep-bar">
        <div className="ep-bar-left">
          <span className="ep-bar-brand"><span className="ep-bar-dot" />Reading</span>
          <span className="ep-bar-crumb"><span className="ep-bar-sep">·</span><span>Curated reading list</span></span>
        </div>
        <div className="ep-bar-right">
          <span className="ep-bar-prog">
            <span>{RD_CATEGORIES.length} topics · {RD_TOTAL_SOURCES} sources</span>
          </span>
        </div>
      </div>

      <header className="ep-home-hero">
        <div>
          <div className="ep-home-eyebrow">A curated reading list</div>
          <h1 className="ep-home-title">
            Read your way to <em>energy fluency</em>.
          </h1>
          <p className="ep-home-lede">
            A working bibliography organized by topic, from foundations to the new
            geopolitics of minerals. Within each category, sources are ordered
            roughly from foundational to advanced — start at the top and read down.
          </p>
        </div>
        <div className="ep-home-meta">
          <div className="ep-home-meta-row">
            <span className="ep-home-meta-lbl">Topics</span>
            <span className="ep-home-meta-val">{RD_CATEGORIES.length}<small>foundations to geopolitics</small></span>
          </div>
          <div className="ep-home-meta-row">
            <span className="ep-home-meta-lbl">Sources</span>
            <span className="ep-home-meta-val">{RD_TOTAL_SOURCES}<small>reports · books · papers</small></span>
          </div>
          <div className="ep-home-meta-row">
            <span className="ep-home-meta-lbl">Order</span>
            <span className="ep-home-meta-val">Foundational first<small>read top to bottom</small></span>
          </div>
        </div>
      </header>

      <div className="rd-layout">
        {/* left rail: topic jump links with scroll spy */}
        <aside className="rd-nav">
          <div className="rd-nav-title">Topics</div>
          <ol className="rd-nav-list">
            {RD_CATEGORIES.map((c, i) => (
              <li key={c.id}>
                <a
                  className={"rd-nav-link " + (active === c.id ? "is-active" : "")}
                  href={"#/reading"}
                  onClick={(e) => { e.preventDefault(); jump(c.id); }}>
                  <span className="rd-nav-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="rd-nav-name">{c.title}</span>
                  <span className="rd-nav-count">{c.sources.length}</span>
                </a>
              </li>
            ))}
          </ol>
        </aside>

        {/* right: the list itself */}
        <div className="rd-body">
          {RD_CATEGORIES.map((c, i) => (
            <section className="rd-cat" id={"rd-" + c.id} key={c.id}>
              <div className="rd-cat-head">
                <span className="rd-cat-num">{String(i + 1).padStart(2, "0")}</span>
                <h2 className="rd-cat-title">{c.title}</h2>
                <span className="rd-cat-count">{c.sources.length} sources</span>
              </div>
              {c.note && <p className="rd-cat-note">{c.note}</p>}
              <ol className="rd-list">
                {c.sources.map((s, j) => (
                  <li className="rd-item" key={j}>
                    <span className="rd-item-num">{j + 1}</span>
                    <div className="rd-item-body">
                      <a className="rd-item-title" href={s.url} target="_blank" rel="noopener noreferrer">
                        {s.title}
                        <span className="rd-item-ext" aria-hidden="true">↗</span>
                      </a>
                      <p className="rd-item-note">{s.note}</p>
                    </div>
                    <span className="rd-item-time">{s.time}</span>
                  </li>
                ))}
              </ol>
              {c.foot && <p className="rd-cat-foot">{c.foot}</p>}
            </section>
          ))}

          <div className="ep-home-footnote">
            Links point to the publisher or a representative landing page; annual
            reports move year to year, so confirm you are reading the latest edition.
            Always validate live figures against the primary publications.
          </div>
        </div>
      </div>
    </div>
  );
}

window.ReadingView = ReadingView;
