from build import pic, page_hero, card
from render import hub_latest, hub_item, empty_note, esc
import content as C

def gallery(items, cls="gallery"):
    return f'<div class="{cls}">' + "".join(f'<figure>{pic(k, src, alt)}<figcaption>{alt}</figcaption></figure>' for k, src, alt in items) + '</div>'

# ------------------------------------------------------------------ Rainforest
RAINFOREST = dict(
    path="rainforest/", title="Rainforest Preservation & Research — HERO",
    desc="HERO owns 100 acres of pristine rainforest in Bocas del Toro, Panama, and supports studies that benefit marine life, coral reefs, rainforests, wildlife, and the people who depend on them.",
    body=page_hero("Rainforest Preservation &amp; Research", "Bocas del Toro, Panama", "Rainforest Preservation &amp; Research",
                   "One hundred acres of pristine rainforest, kept as rainforest — and studied with the scientists who know it best.",
                   cls="green", bg="images/iguana-panama.jpg", bg_key="banner-rainforest", bg_alt="Green iguana in the Panamanian rainforest") + f'''
<section class="band"><div class="wrap">
  <div class="split">
    <div class="prose">
      <h2>100 acres of pristine rainforest</h2>
      <p class="lede">Hannig Environmental Research Organization owns 100 acres of pristine rainforest in Bocas del Toro, Panama. Through its collaboration with local scientific groups, HERO supports studies that benefit marine life, coral reefs, rainforests, wildlife, and the people who depend on them.</p>
      <p>Bocas del Toro is an archipelago on Panama's Caribbean coast where rainforest, mangrove, seagrass and coral reef sit within a few hundred meters of each other. Whatever happens on the hillside ends up in the water — which is why keeping the forest standing is also a way of protecting the reef.</p>
      <div class="actions"><a class="btn primary" href="#reports">Reports from our scientists</a><a class="btn outline" href="#partners">Who we work with</a></div>
    </div>
    <div>
      <div class="ph">{pic("rainforest-frogs", "images/red-frogs-bocas.jpg", "The red frogs of Bocas — poison dart frogs of Bocas del Toro")}</div>
      <div class="card link-card" style="margin-top:1.4rem"><h4>At a glance</h4>
        <p><strong>Where:</strong> Bocas del Toro province, Caribbean coast of Panama<br><strong>Area:</strong> 100 acres of rainforest owned by HERO<br><strong>Focus:</strong> marine life, coral reefs, rainforests, wildlife, and the people who depend on them</p></div>
    </div>
  </div>
</div></section>

<section class="band white" id="partners"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">Collaboration</div><h2>Who we work with</h2><p>HERO facilitates research through local scientific groups and partner organizations.</p></div></div>
  <div class="grid c3">
    <div class="card link-card"><span class="chip teal">Research</span><h3>Smithsonian Tropical Research Institute</h3><p>The Smithsonian has worked in Panama since 1910. Its Bocas del Toro Research Station studies the region's reefs, mangroves, frogs and dolphins.</p><a class="more" href="https://stri.si.edu/" rel="noopener" target="_blank">stri.si.edu ↗</a></div>
    <div class="card link-card"><span class="chip teal">Advocacy</span><h3>SF Baykeeper</h3><p>Defending San Francisco Bay from pollution — a partner in HERO's marine justice work on the Bay.</p><a class="more" href="https://baykeeper.org/" rel="noopener" target="_blank">baykeeper.org ↗</a></div>
    <div class="card link-card"><span class="chip teal">Community</span><h3>All HERO partners</h3><p>MarAlliance, Coral Reef Alliance, Floating Doctors, Sailors for the Sea, Marine Science Institute, Save The Bay, Ridwell and more.</p><a class="more" href="{{R}}about/#community">See the HERO Community →</a></div>
  </div>
</div></section>

<section class="band" id="reports"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">From the field</div><h2>Reports from our scientists</h2><p>Findings and field reports from the researchers working on and around HERO's preserve will be posted here.</p></div></div>
  <div class="report-list" id="reports">{empty_note("The first reports are on their way. Check back soon — or <a href='" + "{R}" + "contact/'>write to us</a> if you are a researcher who would like to work on the preserve.")}</div>
</div></section>

<section class="band white"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">HERO Hub</div><h2>Rainforest reading</h2></div><a class="btn outline sm" href="{{R}}hero-hub/#Rainforest">More in the Hub</a></div>
  <div class="grid c3 hub-grid" data-hub-latest="Rainforest|3">{hub_latest(["Rainforest"], 3)}</div>
</div></section>
''')

# ------------------------------------------------------------------ Marine Justice
DOCKTOWN_2025 = [
    ("docktown-2025-1", "images/docktown/docktown-2025-1.jpg", "Redwood Creek at Docktown, August 2025"),
    ("docktown-2025-2", "images/docktown/docktown-2025-2.jpg", "Open water where the docks once stood"),
    ("docktown-2025-3", "images/docktown/docktown-2025-3.jpg", "Looking across the creek toward the hills"),
    ("docktown-2025-4", "images/docktown/docktown-2025-4.jpg", "The shoreline restored to open space"),
]
CLEANUP = [(f"cleanup-2025-{i}", f"images/docktown/cleanup-2025-{i}.jpg", cap) for i, cap in enumerate([
    "Volunteers, HERO and the Sheriff's Activity League at Redwood Creek, November 15, 2025",
    "Bag after bag of debris collected along the shoreline",
    "Working the creek bank",
    "Young volunteers on the cleanup",
    "Filling the carts",
    "A morning's work",
    "The team at the end of the day"], 1)]
DOCKTOWN_2023 = [
    ("docktown-2023-1", "images/docktown/docktown-2023-1.jpg", "Docktown Marina, July 2023"),
    ("docktown-2023-2", "images/docktown/docktown-2023-2.jpg", "Deteriorating docks, July 2023"),
    ("docktown-2023-3", "images/docktown/docktown-2023-3.jpg", "Styrofoam floats breaking apart, July 2023"),
]

MARINE_JUSTICE = dict(
    path="marine-justice/", title="Marine Justice — HERO",
    desc="HERO is committed to protecting the marine environment, wherever that path may lead — including a new dawn at Docktown Marina in Redwood City.",
    body=page_hero("Marine Justice", "Advocacy", "Marine Justice",
                   "Our marine environment has no voice of its own. HERO is dedicated to advocating for its protection.",
                   bg="images/docktown/docktown-2025-4.jpg", bg_key="banner-marine-justice", bg_alt="Redwood Creek shoreline, Redwood City") + f'''
<section class="band"><div class="wrap">
  <div class="split">
    <div class="prose">
      <div class="eyebrow">In the spirit of Frank Hannig</div>
      <h2>Dedication to justice</h2>
      <p>Frank Hannig was celebrated for his dedication to justice, even when it threatened his reputation or friendships. He received Presidential recognition for defending conscientious objectors during the Vietnam War as a decorated World War II veteran, ensuring they received fair hearings. As the foreman of the San Mateo Grand Jury, he prioritized his responsibilities above his longstanding friendships.</p>
      <p>In that spirit, HERO is committed to protecting the marine environment, wherever that path may lead. HERO believes that our marine environment, which has served us well since the beginning, deserves, if not demands, our attention and respect.</p>
      <p>Those who harm the marine environment jeopardize our futures, and HERO is dedicated to advocating for its protection, as it has no voice of its own.</p>
    </div>
    <div class="ph square">{pic("mj-frank-theresa", "images/board/frank-and-theresa-hannig.jpg", "Frank and Theresa Hannig")}</div>
  </div>
</div></section>

<section class="band white" id="docktown"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">Redwood City</div><h2>A New Dawn at Docktown</h2><p>HERO is dedicated to creating a positive environmental impact. After taking legal action, HERO successfully urged the City of Redwood City to end illegal residential use and remove decaying docks that had polluted San Francisco Bay with Styrofoam for over twenty years at Docktown Marina.</p></div></div>
  <div class="split">
    <div class="prose">
      <p>Docktown Marina sits on state-granted public trust lands along Redwood Creek. For more than two decades, aging docks held afloat by deteriorating Styrofoam blocks, together with untreated discharge from dozens of liveaboard vessels, sent pollution straight into the Bay. A 2016 settlement had committed the City to end residential use and clean up the site; by 2023 that work was still unfinished, and HERO went to court to see it through.</p>
      <p>It worked. In June 2025, HERO and the City of Redwood City settled the case with no money changing hands. The settlement confirms that residential use at Docktown has ended, the decaying docks are being removed, and the City intends to prepare the site for future public use — including a public visioning process for what is now envisioned as part of a future Bayfront Park.</p>
      <p>Today, where the docks stood, there is open water, a restored shoreline, and a community that came together to clean it.</p>
      <div class="timeline">
        <div class="step"><div class="n">2016</div><div><h3>The City commits</h3><p>Redwood City settles an earlier lawsuit for $4.5 million, agreeing to end residential use at Docktown and clean up the marina.</p></div></div>
        <div class="step"><div class="n">2023</div><div><h3>HERO takes action</h3><p>With the cleanup still incomplete and Styrofoam breaking into the Bay, HERO files suit in San Mateo County Superior Court on July 21, 2023.</p></div></div>
        <div class="step"><div class="n">2025</div><div><h3>Settlement &amp; cleanup</h3><p>In June the parties settle; on November 15 HERO and the City hold a joint shoreline clean-up day at Redwood Creek.</p></div></div>
        <div class="step"><div class="n">Next</div><div><h3>Public access</h3><p>A public visioning process for recreational and open-space uses of the Docktown lands, consistent with their status as public trust lands.</p></div></div>
      </div>
    </div>
    <div>
      <h3 style="margin-bottom:.8rem">Docktown today — August 2025</h3>
      {gallery(DOCKTOWN_2025, "gallery two")}
    </div>
  </div>
</div></section>

<section class="band" id="settlement"><div class="wrap">
  <div class="split">
    <div class="prose">
      <div class="eyebrow">June 16, 2025</div>
      <h2>The settlement</h2>
      <p>The City of Redwood City and HERO announced they had reached a settlement of the litigation HERO filed over Docktown Marina. The agreement confirms the City successfully took action to end residential uses at Docktown and intends to prepare for future public uses there, including a public visioning process. HERO and the City also agreed to sponsor a joint cleanup along the Redwood City shoreline with the Bair Island Neighborhood Association.</p>
      <blockquote>“We are pleased to see progress on facilitating public use of the marina at Docktown and preservation of the marine ecosystem. We look forward to working with the City to help protect the environment and ensure that these public trust lands benefit the Redwood City community for generations to come.”<br><cite>— Kathleen Harris, HERO President and Executive Director</cite></blockquote>
      <blockquote>“The Docktown lands are an important public trust and community resource and we see them as a key part of a future Bayfront Park.”<br><cite>— Elmer Martinez Saballos, Mayor of Redwood City</cite></blockquote>
      <p>No money changed hands as part of the settlement, and HERO dismissed its lawsuit with prejudice. <a href="https://www.redwoodcity.org/Docktown" rel="noopener" target="_blank">Learn more at RedwoodCity.org/Docktown ↗</a></p>
    </div>
    <div class="ph">{pic("settlement-photo", "images/docktown/docktown-2025-2.jpg", "Redwood Creek, August 2025")}</div>
  </div>
</div></section>

<section class="band white" id="cleanup"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">November 15, 2025</div><h2>Clean Up Day</h2><p>Part of the settlement was to hold a shoreline clean-up day, together with the Bair Island Neighborhood Association, for Redwood City residents to volunteer to clean up trash along Redwood Creek and other shorelines within city limits. HERO invited the community and the Sheriff's Activity League volunteers to take part; City staff provided the supplies. From 8 am to 12 pm an energetic group of volunteers scoured the Redwood Creek area, collecting bag after bag of debris.</p><p><strong>HERO remains optimistic about the future of Redwood Creek and the surrounding areas.</strong></p></div></div>
  {gallery(CLEANUP, "gallery masonry")}
</div></section>

<section class="band" id="record"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">For the record</div><h2>Docktown in the news</h2><p>The reporting and documents behind the case, and photographs of the marina before the cleanup.</p></div></div>
  <div class="grid c3 hub-grid" data-hub-latest="Marine Justice|6">{hub_latest(["Marine Justice"], 6)}</div>
  <div class="split" style="margin-top:2.5rem;align-items:start">
    <div class="callout"><h3>HERO vs. the City of Redwood City</h3><p>The complaint HERO filed with the San Mateo County Superior Court on July 21, 2023, asserting that the City had misused Docktown funds and allowed continued pollution of the Bay.</p><p><a class="btn outline sm" href="images/docs/docktown-complaint-2023-07-21.pdf" target="_blank" rel="noopener">Download the full complaint (PDF, 3 MB)</a></p></div>
    <div><h3 style="margin-bottom:.8rem">Before: July 2023</h3>{gallery(DOCKTOWN_2023, "gallery three")}</div>
  </div>
</div></section>

<section class="band white"><div class="wrap">
  <div class="callout green"><h3>Seen something that harms the water?</h3><p>HERO advocates for waters that cannot speak for themselves. If you know of pollution or a public-trust issue on San Francisco Bay or in Bocas del Toro, <a href="{{R}}contact/">tell us about it</a>. Gifts to HERO fund the legal work, testing and public comment that make cases like Docktown possible — <a href="{{R}}donate/">support the work</a>.</p></div>
</div></section>
''')

# ------------------------------------------------------------------ River to Reef
RIVER_TO_REEF = dict(
    path="river-to-reef/", title="River to Reef — HERO",
    desc="HERO's River 2 Reef program: the link between freshwater activities and our fragile reefs, the fight against climate change, articles from our scientists, and water temperature data.",
    body=page_hero("River to Reef", "Program", "River to Reef",
                   "Fresh water and salt water are one system. What happens in a river arrives on the reef.",
                   bg="images/slide-bocas-bay.jpg", bg_key="banner-river-to-reef", bg_alt="Aerial view of forest, river mouth and reef in Bocas del Toro") + f'''
<section class="band"><div class="wrap">
  <div class="split">
    <div class="prose">
      <img class="r2r-logo" src="images/river2reef-logo.jpg" alt="HERO River 2 Reef" width="512" height="308">
      <h2>River 2 Reef</h2>
      <p>This program emphasizes environmental issues affecting both our freshwater and saltwater ecosystems, particularly the often-overlooked impacts that freshwater sources have on saltwater coral reefs. HERO is committed to researching and understanding the link between freshwater activities, such as agriculture, and our fragile reefs that receive runoff from rivers.</p>
      <p>River to Reef aims to develop educational programs and resources on best practices for activities such as farming to prevent damage to rivers and reefs. A primary focus is on Panama's freshwater ecosystems, where discharges from coffee farms have harmed aquatic life due to the presence of coffee bean pulp.</p>
      <div class="actions"><a class="btn primary" href="https://fb.watch/GvGy328nVl/" target="_blank" rel="noopener" data-cfg-href="links.riverToReefVideo">Watch the video ↗</a><a class="btn outline" href="#articles">Articles from our scientists</a></div>
    </div>
    <div class="ph">{pic("r2r-photo", "images/slide-dolphins-bocas.jpg", "Bottlenose dolphins off the mangroves, Bocas del Toro")}</div>
  </div>
</div></section>

<section class="band white" id="climate"><div class="wrap">
  <div class="split">
    <div class="ph">{pic("climate-photo", "images/slide-coastal-sunset.jpg", "Sunset over fog-covered coastal hills")}</div>
    <div class="prose">
      <div class="eyebrow">Climate</div>
      <h2>Fight Against Climate Change</h2>
      <p>Climate change, mainly caused by increased greenhouse gas emissions from human activities like burning fossil fuels and deforestation, can be addressed by switching to renewable energy sources, improving energy efficiency, and adopting sustainable practices in transportation, agriculture, and industry. HERO has joined this effort to promote a healthier marine ecosystem.</p>
      <p>A warming ocean sits behind nearly every threat HERO works on — bleaching reefs, stressed forests, shifting fisheries. Rivers carry the effects of a changing climate to the reef just as they carry sediment and runoff.</p>
      <p><a href="{{R}}hero-hub/#Climate">Climate reading in the HERO Hub →</a></p>
    </div>
  </div>
</div></section>

<section class="band" id="articles"><div class="wrap">
  <div class="split" style="align-items:start">
    <div>
      <div class="section-head"><div><div class="eyebrow">From our scientists</div><h2>Articles from Dr. Daniel Medina</h2><p>Field notes and articles from HERO Advisory Board member Dr. Daniel Medina on rivers, reefs and the life that depends on both.</p></div></div>
      <div class="report-list" id="articles">{empty_note("Dr. Medina's first articles are being prepared. Check back soon.")}</div>
    </div>
    <div class="person wide"><div class="photo">{pic("board-daniel-medina-r2r", "images/board/daniel-medina.jpg", "Dr. Daniel Medina in the rainforest at night")}</div><h3>Dr. Daniel Medina</h3><p class="role">HERO Advisory Board</p></div>
  </div>
</div></section>

<section class="band white" id="water"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">Data</div><h2>Water temperature &amp; conditions</h2><p>Readings from the waters HERO works in — Bocas del Toro and San Francisco Bay — will be posted here as our team records them.</p></div><a class="btn outline sm" href="https://coralreefwatch.noaa.gov/" target="_blank" rel="noopener">NOAA Coral Reef Watch ↗</a></div>
  <div class="grid c4 water-grid" id="water-data">{empty_note("No readings posted yet.")}</div>
</div></section>

<section class="band"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">HERO Hub</div><h2>Climate &amp; ocean reading</h2></div><a class="btn outline sm" href="{{R}}hero-hub/">More in the Hub</a></div>
  <div class="grid c3 hub-grid" data-hub-latest="Climate,Ocean|3">{hub_latest(["Climate", "Ocean"], 3)}</div>
</div></section>
''')

PAGES = [RAINFOREST, MARINE_JUSTICE, RIVER_TO_REEF]
