{% extends "base.html" %}
{% import "macros/social-icons.html" as social %}

{% block title %}{{ section.title }}{% endblock title %}
{% block meta_description %}
<meta name="description" content="{{ section.description | default(value=config.description) }}" />
{% endblock meta_description %}

{% block page_background %}
<div id="webgl-background" aria-hidden="true"></div>
{% endblock page_background %}

{% block body_class %}page-home has-particle-background{% endblock body_class %}

{% block content %}
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <h1>
        Future of textbooks.
        <span style="display: inline-block; border: 2px solid #9a6b2e; border-radius: 50%; padding: 0 0.4em; margin: 0 0.1em; line-height: 1; background: rgba(154,107,46,0.13); color: #9a6b2e;">Free</span>
        to read.
        <span style="display: inline-block; border: 2px solid #29a05d; border-radius: 50%; padding: 0 0.4em; margin: 0 0.1em; line-height: 1; background: rgba(41,160,93,0.13); color: #29a05d;">Open</span>
        to improve.
 
      </h1>
      <p class="hero-lead">
        High-quality learning materials for elementary school through university — on the web, at no cost.
      </p>
      <ul class="hero-points">
        <li><strong>Free</strong> means the whole book, for everyone — read it all online without paywalls.</li>
        <li><strong>Open</strong> means open source — anyone can fix a typo, add a chapter, or fork a book on GitHub.</li>
      </ul>
      <div class="hero-actions">
        <a class="button button-primary" href="{{ config.extra.browse_url | safe }}">Browse books</a>
        <a class="button button-secondary" href="{{ config.extra.github_url | safe }}">View on GitHub</a>
      </div>
    </div>
  </div>
</section>

<div id="marquee"></div>

{% include "partials/why-sections.html" %}

{% include "partials/community-section.html" %}

{% include "partials/sponsors-section.html" %}

<section id="browse-by-subject">
  <div class="container">
    <p class="section-kicker">Catalog</p>
    <h2 class="section-title">Browse by subject</h2>
    <div class="work-grid" data-scroll-reveal>
      <article class="work-card work-card--link" data-scroll-reveal-card>
        <a class="work-card__anchor" href="{{ get_url(path='/catalog/') | safe }}?subject=math">
          <h3>Mathematics</h3>
          <p class="card-subtitle">Live chapters</p>
          <p>Three strands from number and algebra through data handling — starting with quadratic equations.</p>
        </a>
      </article>
      <article class="work-card" data-scroll-reveal-card>
        <h3>Science</h3>
        <p class="card-subtitle">Coming soon</p>
        <p>Physics, chemistry, biology, and earth science from introductory to advanced levels.</p>
      </article>
      <article class="work-card" data-scroll-reveal-card>
        <h3>Humanities</h3>
        <p class="card-subtitle">Coming soon</p>
        <p>History, literature, philosophy, and languages — readable, citable, and free to share.</p>
      </article>
      <article class="work-card" data-scroll-reveal-card>
        <h3>Computing</h3>
        <p class="card-subtitle">Coming soon</p>
        <p>Programming, computer science fundamentals, and practical skills for students and teachers.</p>
      </article>
    </div>
    <p class="section-note">Subject pages and full catalogs are on the roadmap. Contribute a book on GitHub.</p>
  </div>
</section>

<section id="featured-books">
  <div class="container">
    <p class="section-kicker">Featured</p>
    <h2 class="section-title">Featured books</h2>
    <div class="work-grid" data-scroll-reveal>
      <article class="work-card work-card--link" data-scroll-reveal-card>
        <a class="work-card__anchor" href="{{ get_url(path='/math/quadratic-equations/') | safe }}">
          <h3>Quadratic equations</h3>
          <p class="card-subtitle">Featured chapter</p>
          <p>Discriminant, nature of roots, and an interactive graph explorer — read in the browser.</p>
        </a>
      </article>
      <article class="work-card" data-scroll-reveal-card>
        <h3>Community contributions</h3>
        <p class="card-subtitle">Open source</p>
        <p>Every book is a repository you can fork, translate, or adapt for your classroom.</p>
      </article>
    </div>
    <p class="section-note">Want to list a book? Open a pull request or start a discussion on GitHub.</p>
  </div>
</section>

<section class="tree-cta" aria-labelledby="tree-cta-title">
  <div class="container tree-cta__inner">
    <p class="section-kicker">For Every Learner</p>
    <h2 id="tree-cta-title" class="tree-cta__title">The next generation is our future.</h2>
    <p class="tree-cta__lead">Let's provide good, free education that anyone can read, share, and improve.</p>
    <div class="tree-cta__actions">
      <a class="button button-primary" href="{{ config.extra.browse_url | safe }}">Start reading</a>
      <a class="button button-secondary" href="{{ config.extra.contributing_url | safe }}">Help grow the library</a>
    </div>
  </div>
</section>
{% endblock content %}