{{template "base.html" .}}

{{define "content"}}

<!-- Hero Section -->
<section class="hero" style="background-image: url('/static/images/hero.webp');" aria-label="Hero banner">
  <div class="hero-overlay"></div>
  <div class="container hero-content">
    <span class="hero-eyebrow"><i class="fas fa-globe" aria-hidden="true"></i> {{.Site.Tagline}}</span>
    <h1 class="hero-title">{{.Site.Name}}</h1>
    <p class="hero-subtitle">{{.Site.Description}}</p>
    <div class="hero-ctas">
      <a href="/articles" class="btn btn-accent">
        <i class="fas fa-book-open" aria-hidden="true"></i> Browse Articles
      </a>
      <a href="/about" class="btn btn-outline-light">
        <i class="fas fa-info-circle" aria-hidden="true"></i> Learn More
      </a>
    </div>
  </div>
  <div class="hero-scroll-hint" aria-hidden="true">
    <i class="fas fa-chevron-down"></i>
  </div>
</section>

<!-- Ad Zone: Leaderboard between hero and features -->
<!-- ad-zone: in-content -->
<div class="ad-zone ad-leaderboard">
  <div class="ad-placeholder" style="max-width:728px;height:90px;margin:0 auto;">
    <img src="/static/images/ad-728x90.webp" alt="" width="728" height="90" loading="lazy"
         onerror="this.parentElement.innerHTML='<span class=\'ad-label\'>Advertisement</span>'">
  </div>
</div>
<div class="ad-zone ad-mobile-banner">
  <div class="ad-placeholder" style="max-width:320px;height:100px;margin:0 auto;">
    <img src="/static/images/ad-320x100.webp" alt="" width="320" height="100" loading="lazy"
         onerror="this.parentElement.innerHTML='<span class=\'ad-label\'>Advertisement</span>'">
  </div>
</div>

<!-- Features Section -->
<section class="features-section section-pad" aria-labelledby="features-heading">
  <div class="container">
    <div class="section-header fade-in-up">
      <h2 id="features-heading" class="section-title">Why {{.Site.Name}}?</h2>
      <p class="section-subtitle">Everything you need — all in one place.</p>
    </div>
    <div class="features-grid">
      <div class="feature-card fade-in-up">
        <div class="feature-icon">
          <i class="fas fa-book-open" aria-hidden="true"></i>
        </div>
        <h3>Expert Content</h3>
        <p>In-depth articles and guides written by knowledgeable contributors covering every aspect of the topic.</p>
      </div>
      <div class="feature-card fade-in-up">
        <div class="feature-icon">
          <i class="fas fa-lightbulb" aria-hidden="true"></i>
        </div>
        <h3>Practical Tips</h3>
        <p>Actionable advice you can apply right away, from beginner fundamentals to advanced strategies.</p>
      </div>
      <div class="feature-card fade-in-up">
        <div class="feature-icon">
          <i class="fas fa-user-graduate" aria-hidden="true"></i>
        </div>
        <h3>All Skill Levels</h3>
        <p>Whether you are just starting out or a seasoned expert, find content tailored to your experience level.</p>
      </div>
      <div class="feature-card fade-in-up">
        <div class="feature-icon">
          <i class="fas fa-sync-alt" aria-hidden="true"></i>
        </div>
        <h3>Regularly Updated</h3>
        <p>Fresh content published regularly so you always have the latest information and techniques at your fingertips.</p>
      </div>
    </div>
  </div>
</section>

<!-- Latest Articles Section -->
{{if .Articles}}
<section class="latest-articles section-pad bg-surface-alt" aria-labelledby="latest-heading">
  <div class="container">
    <div class="section-header fade-in-up">
      <h2 id="latest-heading" class="section-title">Latest Articles</h2>
      <p class="section-subtitle">Our newest content — updated regularly.</p>
    </div>
    <div class="articles-grid">
      {{range first .Articles 6}}
      <article class="article-card fade-in-up">
        <a href="{{articleURL .Slug}}" class="article-card-img-link" tabindex="-1" aria-hidden="true">
        {{if .Image}}
          <img src="{{imageURL .Image}}" alt="{{.Title}}" loading="lazy" class="article-card-img">
        {{else}}
          <img src="https://picsum.photos/seed/{{.Slug}}/600/400" alt="{{.Title}}" loading="lazy" class="article-card-img">
        {{end}}
        </a>
        <div class="article-card-content">
          {{if .Category.Name}}
          <a href="/articles?category={{.Category.Slug}}" class="article-category">{{.Category.Name}}</a>
          {{end}}
          <h3 class="article-card-title">
            <a href="{{articleURL .Slug}}">{{.Title}}</a>
          </h3>
          <p class="article-card-excerpt">{{truncate .Excerpt 120}}</p>
          <div class="article-meta">
            {{if not .PublishedDate.IsZero}}
            <time datetime="{{formatDateISO .PublishedDate}}">
              <i class="far fa-calendar" aria-hidden="true"></i>
              {{formatDate .PublishedDate "Jan 2, 2006"}}
            </time>
            {{end}}
            {{if .ReadTime}}
            <span class="read-time">
              <i class="far fa-clock" aria-hidden="true"></i>
              {{.ReadTime}} min read
            </span>
            {{end}}
          </div>
          <a href="{{articleURL .Slug}}" class="article-read-more">Read More <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </article>
      {{end}}
    </div>
    <div class="section-cta fade-in-up">
      <a href="/articles" class="btn btn-primary">
        <i class="fas fa-list" aria-hidden="true"></i> View All Articles
      </a>
    </div>
  </div>
</section>
{{end}}

<!-- Categories Section -->
{{if .Site.Categories}}
<section class="categories-section section-pad" aria-labelledby="categories-heading">
  <div class="container">
    <div class="section-header fade-in-up">
      <h2 id="categories-heading" class="section-title">Explore by Category</h2>
      <p class="section-subtitle">Dive deep into the topics that interest you most.</p>
    </div>
    <div class="categories-grid">
      {{range .Site.Categories}}
      <a href="/articles?category={{.Slug}}" class="category-card fade-in-up">
        <div class="category-card-icon">
          <i class="fas fa-folder" aria-hidden="true"></i>
        </div>
        <h3 class="category-card-name">{{.Name}}</h3>
        <p class="category-card-desc">{{truncate .Description 90}}</p>
        <span class="category-card-cta">Explore <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
      </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<!-- Ad Zone: Rectangle between sections -->
<!-- ad-zone: mid-content -->
<div class="ad-zone ad-rectangle-centered">
  <div class="ad-placeholder" style="max-width:300px;height:250px;margin:0 auto;">
    <img src="/static/images/ad-300x250.webp" alt="" width="300" height="250" loading="lazy"
         onerror="this.parentElement.innerHTML='<span class=\'ad-label\'>Advertisement</span>'">
  </div>
</div>

<!-- CTA / Newsletter Section -->
<section class="cta-section" aria-labelledby="cta-heading">
  <div class="container">
    <div class="cta-inner fade-in-up">
      <div class="cta-icon" aria-hidden="true"><i class="fas fa-envelope-open-text"></i></div>
      <h2 id="cta-heading">Stay Updated</h2>
      <p>Get the latest articles, tips, and insights delivered straight to your inbox. Join our community today.</p>
      <form class="cta-form" method="POST" action="/contact" aria-label="Newsletter signup">
        <!-- Honeypot -->
        <input type="text" name="website" class="honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
        <div class="cta-form-row">
          <label for="cta-email" class="sr-only">Your email address</label>
          <input type="email" id="cta-email" name="email" placeholder="Your email address" required
                 aria-label="Email address" class="cta-input" autocomplete="email">
          <button type="submit" class="btn btn-accent">
            <i class="fas fa-paper-plane" aria-hidden="true"></i> Subscribe
          </button>
        </div>
        <p class="cta-note">No spam, ever. Unsubscribe any time.</p>
      </form>
    </div>
  </div>
</section>

<!-- JSON-LD: WebSite -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "{{.Site.Name}}",
  "url": "https://{{.Site.Domain}}",
  "description": "{{.Site.Description}}",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://{{.Site.Domain}}/articles?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

{{end}}