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

TAGS = ["Rainforest", "Marine Justice", "Climate", "Ocean", "Students"]

HERO_HUB = dict(
    path="hero-hub/", title="HERO Hub — News & Articles",
    desc="HERO Hub: news, articles, videos and reports on marine and rainforest ecology, climate change and environmental law.",
    body=page_hero("HERO Hub", "Resources", "HERO Hub",
                   "Stay up to date on HERO news and articles, as well as other resources on climate change, the ocean and the rainforest.",
                   bg="images/sea-turtle.jpg", bg_key="banner-hero-hub", bg_alt="Giant tortoise on a beach", fit=True) + f'''
<section class="band"><div class="wrap">
  <div class="pill-nav filters" id="hub-filters"><button type="button" class="active" data-filter="">All</button>{"".join(f'<button type="button" data-filter="{t}">{t}</button>' for t in TAGS)}</div>
  <div class="grid c3 hub-grid" id="hub-list">{"".join(hub_item(n) for n in C.HUB)}</div>
  <div class="callout" style="margin-top:2.4rem"><h3>Have a story we should see?</h3><p>Research, reporting or a report of your own that touches rivers, reefs, rainforests or marine justice — <a href="{{R}}contact/">send it to us</a>.</p></div>
</div></section>
''')

def student_card(s):
    if s.get("kind") == "video":
        media = f'<div class="video"><iframe src="{esc(s["url"])}" title="{esc(s["name"])}" allowfullscreen loading="lazy" allow="fullscreen; picture-in-picture"></iframe></div>'
        h3 = f'<h3>{esc(s["name"])}</h3>'
    else:
        media = ''
        h3 = f'<h3><a href="{esc(s["url"])}" target="_blank" rel="noopener">{esc(s["name"])}</a></h3>'
    return f'<article class="card">{media}<div class="body"><span class="chip teal">{"Video" if s.get("kind") == "video" else "Link"}</span>{h3}<p>{esc(s["title"])}</p></div></article>'

def resource_card(r):
    ext = r["url"].startswith("http")
    tgt = ' target="_blank" rel="noopener"' if ext else ''
    return (f'<article class="card link-card"><span class="chip">{esc(r["org"])}</span><h3><a href="{esc(r["url"])}"{tgt}>{esc(r["title"])}</a></h3>'
            f'<p>{esc(r["blurb"])}</p><a class="more" href="{esc(r["url"])}"{tgt}>Learn more {"↗" if ext else "→"}</a></article>')

STUDENT_HUB = dict(
    path="student-hub/", title="Student Hub — HERO",
    desc="HERO Student Hub: student submissions, the HERO Climate Challenge Scholarship, and educational resources for students and teachers.",
    body=page_hero("Student Hub", "For students &amp; teachers", "Student Hub",
                   "Student submissions, the HERO Climate Challenge Scholarship, and resources for learning about the ocean, the rainforest and the climate.",
                   cls="green", bg="images/docktown/cleanup-2025-1.jpg", bg_key="banner-student-hub", bg_alt="Student volunteers at the Redwood Creek cleanup") + f'''
<section class="band" id="submissions"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">Student submissions</div><h2>Work by students, for the environment</h2><p>Videos, projects and presentations from the young people HERO supports.</p></div><a class="btn outline sm" href="#submit">Submit your work</a></div>
  <div class="grid c3" id="students">{"".join(student_card(s) for s in C.STUDENTS)}</div>
</div></section>

<section class="band white" id="scholarship"><div class="wrap">
  <div class="split">
    <div class="prose">
      <div class="eyebrow">Scholarship</div>
      <h2>HERO Climate Challenge Scholarship</h2>
      <p>In 2024, HERO presented the Climate Challenge Scholarship to Zeva Gerochi, Luz Romero and Ariana Vega Garcia at the Redwood City-based McKinley Institute of Technology as the students prepared for graduation — and donated $2,500 to the school for environmental field trips. Theresa Hannig, for whom HERO is partly named, was a Redwood City school teacher.</p>
      <p><a href="https://www.smdailyjournal.com/community/class-notes-hannig-environmental-research-organization-at-the-redwood-city-based-mckinley-institute-of-technology/image_43f09924-3038-11ef-89af-4ff03991ddfc.html" target="_blank" rel="noopener">Read the Class Notes in the San Mateo Daily Journal ↗</a></p>
      <div class="callout coral" id="submit"><h3>Submit your work</h3><p>Students and teachers: send us a video, a project, an essay or a question through the <a href="{{R}}contact/">contact form</a> — choose “Student” or “Youth HERO applicant” — and we will reply within 48 hours. Selected submissions are featured here and in the <a href="{{R}}hero-hub/">HERO Hub</a>.</p></div>
    </div>
    <div class="ph">{pic("scholarship-photo", "images/hub/class-notes-mit.jpg", "HERO Climate Challenge Scholarship recipients at McKinley Institute of Technology")}</div>
  </div>
</div></section>

<section class="band" id="resources"><div class="wrap">
  <div class="section-head"><div><div class="eyebrow">Educational resources</div><h2>Learn about climate change, the ocean and the rainforest</h2><p>Trusted starting points for students and teachers, chosen by HERO.</p></div></div>
  <div class="grid c3" id="resources">{"".join(resource_card(r) for r in C.RESOURCES)}</div>
</div></section>
''')

PAGES = [HERO_HUB, STUDENT_HUB]