from build import pic, card
from render import hub_latest, partner_logos
import content as C

AREAS = [
    ("Rainforest Preservation & Research", "rainforest/",
     "100 acres of pristine rainforest in Bocas del Toro, Panama, and research that benefits marine life, coral reefs, rainforests, wildlife, and the people who depend on them.",
     "area-rainforest", "images/red-frogs-bocas.jpg", "Poison dart frogs of Bocas del Toro"),
    ("Marine Justice", "marine-justice/",
     "In the spirit of Frank Hannig, HERO advocates for a marine environment that has no voice of its own — including a new dawn at Docktown Marina in Redwood City.",
     "area-marine-justice", "images/docktown/docktown-2025-3.jpg", "Redwood Creek at Docktown, August 2025"),
    ("River to Reef", "river-to-reef/",
     "How what happens in our rivers reaches our reefs, the fight against climate change, articles from our scientists, and water temperature data.",
     "area-river-to-reef", "images/slide-bocas-bay.jpg", "Where forest meets reef, Bocas del Toro"),
    ("HERO Hub", "hero-hub/",
     "News, articles, videos and reports on marine and rainforest ecology, climate change and environmental law.",
     "area-hero-hub", "images/sea-turtle.jpg", "Sea turtle on the beach"),
    ("Student Hub", "student-hub/",
     "Student submissions, the HERO Climate Challenge Scholarship, and educational resources for students and teachers.",
     "area-student-hub", "images/docktown/cleanup-2025-1.jpg", "Student volunteers at the Redwood Creek cleanup"),
]

def area_cards():
    return "".join(card(t, "{R}" + h, d, pic(k, src, alt)) for t, h, d, k, src, alt in AREAS)

SLIDES = [
    ("slide-1", "images/slide-bocas-bay.jpg", "Aerial view of a bay and rainforest in Bocas del Toro, Panama"),
    ("slide-2", "images/slide-dolphins-bocas.jpg", "Bottlenose dolphins in Bocas del Toro"),
    ("slide-3", "images/slide-coastal-sunset.jpg", "Sunset over fog-covered coastal hills"),
]

def slideshow():
    out = '<section class="slideshow" aria-label="HERO photo slideshow">'
    for i, (k, src, alt) in enumerate(SLIDES):
        out += f'<div class="slide{" active" if i == 0 else ""}">{pic(k, src, alt, eager=(i == 0))}</div>'
    out += ('<div class="slide-text"><div class="wrap">'
            '<img class="mark" src="images/logo-mark.png" alt="" width="120" height="117">'
            '<h1 data-cfg="home.slideTagline">Focused on marine and rain forest ecology and environmental justice for our fragile marine environment.</h1>'
            '</div></div>'
            '<div class="slide-dots" role="tablist">' + "".join(f'<button type="button" data-slide="{i}" aria-label="Slide {i+1}"{" class=active" if i == 0 else ""}></button>' for i in range(len(SLIDES))) + '</div>'
            '</section>')
    return out

HOME = dict(
    path="", title="HERO — Hannig Environmental Research Organization",
    desc="Hannig Environmental Research Organization (HERO): focused on marine and rain forest ecology and environmental justice for our fragile marine environment. Rainforest preservation in Bocas del Toro, Panama; marine justice on San Francisco Bay; River to Reef.",
    body=f'''
{slideshow()}

<section class="band white mission"><div class="wrap">
  <div class="split">
    <div class="prose">
      <div class="eyebrow">Our mission</div>
      <h2 data-cfg="home.missionHeading">The H.E.R.O. Mission</h2>
      <p class="lede" data-cfg="org.mission">HERO was established to support and promote global research, education, and the protection of our life-sustaining planet. From river to reef and classroom to courtroom, we strive to be a HERO for the environment.</p>
      <p>HERO focuses on several key environmental areas and is guided by a diverse <a href="{{R}}about/#board">Advisory Board</a> to implement its programs effectively.</p>
    </div>
    <div class="ph tall">{pic("home-mission", "images/dolphins-leaping.jpg", "Dolphin and calf leaping in the Pacific")}</div>
  </div>
</div></section>

<section class="quote-band"><div class="bg">{pic("home-quote-bg", "images/bokeh-blue.jpg", "")}</div><div class="wrap">
  <blockquote><p>“<span data-cfg="home.quote">After almost 100 years on the planet, I now understand the most important place on Earth is not on land, but at sea.</span>”</p><cite>— <span data-cfg="home.quoteBy">Sir David Attenborough</span></cite></blockquote>
</div></section>

<section class="band"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">What we do</div><h2>Five areas, one fragile marine environment</h2><p>From a rainforest preserve in Panama to a courtroom in San Mateo County — and from the river to the reef in between.</p></div></div>
  <div class="grid c3 areas">{area_cards()}</div>
</div></section>

<section class="band white"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">HERO Hub</div><h2>Latest from the Hub</h2></div><a class="btn outline sm" href="{{R}}hero-hub/">All news &amp; articles</a></div>
  <div class="grid c3 hub-grid" data-hub-latest="3">{hub_latest(None, 3)}</div>
</div></section>

<section class="band"><div class="wrap">
  <div class="center"><div class="eyebrow">HERO Community</div><h2>Our partners</h2><p class="muted">The non-profit organizations we support and collaborate with.</p></div>
  {partner_logos()}
</div></section>
''')

PAGES = [HOME]