{% extends "base.html" %}
{% block content %}

<section class="hero">
  <div class="container hero-inner">
    <div class="hero-text">
      <h1>
        {{ t['hero_headline']|safe }}
      </h1>
      <p class="hero-sub">
        {{ t['hero_sub']|safe }}
      </p>

      <div class="hero-cta">
        <a href="#contact" class="btn btn-primary">{{ t['hero_cta_primary'] }}</a>
        <a href="#how-it-works" class="btn btn-ghost">{{ t['hero_cta_ghost'] }}</a>
      </div>

      <div class="hero-tags">
        <span>{{ t['tag_1'] }}</span>
        <span>{{ t['tag_2'] }}</span>
        <span>{{ t['tag_3'] }}</span>
      </div>
    </div>

    <div class="hero-media">
      <img src="{{ url_for('static', filename='img/bughold-hero.png') }}"
           alt="BUGHOLD 抓虫附件产品图">
    </div>
  </div>
</section>

<section id="features" class="section">
  <div class="container">
    <h2 class="section-title">{{ t['feat_title'] }}</h2>
    <div class="feature-grid">
      <div class="feature-card">
        <h3>{{ t['feat_1_title'] }}</h3>
        <p>{{ t['feat_1_desc']|safe }}</p>
      </div>
      <div class="feature-card">
        <h3>{{ t['feat_2_title'] }}</h3>
        <p>{{ t['feat_2_desc']|safe }}</p>
      </div>
      <div class="feature-card">
        <h3>{{ t['feat_3_title'] }}</h3>
        <p>{{ t['feat_3_desc']|safe }}</p>
      </div>
      <div class="feature-card">
        <h3>{{ t['feat_4_title'] }}</h3>
        <p>{{ t['feat_4_desc']|safe }}</p>
      </div>
    </div>
  </div>
</section>

<section id="how-it-works" class="section section-alt">
  <div class="container">
    <h2 class="section-title">{{ t['nav_how_it_works'] }}</h2>
    <p class="section-subtitle">{{ t['airflow_path_title'] }}</p>
    <div class="diagram-grid">
      <div class="diagram-item">
        <span class="step-num">1</span>
        <img src="{{ url_for('static', filename='img/comp_1.png') }}" alt="{{ t['comp_1'] }}">
        <p>{{ t['comp_1'] }}</p>
      </div>
      <div class="diagram-item">
        <span class="step-num">2</span>
        <img src="{{ url_for('static', filename='img/comp_2.png') }}" alt="{{ t['comp_2'] }}">
        <p>{{ t['comp_2'] }}</p>
      </div>
      <div class="diagram-item">
        <span class="step-num">3</span>
        <img src="{{ url_for('static', filename='img/comp_3.png') }}" alt="{{ t['comp_3'] }}">
        <p>{{ t['comp_3'] }}</p>
      </div>
      <div class="diagram-item">
        <span class="step-num">4</span>
        <img src="{{ url_for('static', filename='img/comp_4.png') }}" alt="{{ t['comp_4'] }}">
        <p>{{ t['comp_4'] }}</p>
      </div>
      <div class="diagram-item">
        <span class="step-num">5</span>
        <img src="{{ url_for('static', filename='img/comp_5.png') }}" alt="{{ t['comp_5'] }}">
        <p>{{ t['comp_5'] }}</p>
      </div>
    </div>
  </div>
</section>

<section id="scenes" class="section">
  <div class="container">
    <h2 class="section-title">{{ t['scenes_title'] }}</h2>
    <div class="scene-grid">
      <div class="scene-card">
        <h3>{{ t['scene_1_title'] }}</h3>
        <p>{{ t['scene_1_desc']|safe }}</p>
      </div>
      <div class="scene-card">
        <h3>{{ t['scene_2_title'] }}</h3>
        <p>{{ t['scene_2_desc']|safe }}</p>
      </div>
      <div class="scene-card">
        <h3>{{ t['scene_3_title'] }}</h3>
        <p>{{ t['scene_3_desc']|safe }}</p>
      </div>
      <div class="scene-card">
        <h3>{{ t['scene_4_title'] }}</h3>
        <p>{{ t['scene_4_desc']|safe }}</p>
      </div>
    </div>
  </div>
</section>


<section id="contact" class="section section-alt">
  <div class="container contact-block">
    <div class="contact-text">
      <h2 class="section-title">
        {{ t['contact_title'] }}
      </h2>
      <p class="section-subtitle">
        {{ t['contact_subtitle']|safe }}
      </p>
      
      <ul class="contact-list">
        <li>
          {{ t['contact_email_text'] }}：
          <a href="mailto:{{ t['contact_email_link'] }}">{{ t['contact_email_link'] }}</a>
        </li>
        <li>{{ t['contact_customization_text'] }}</li>
      </ul>
    </div>
    <div class="contact-info">
      <div class="contact-highlight">
        <p>{{ t['contact_highlight_1'] }}</p>
        <p class="contact-em">{{ t['contact_highlight_2'] }}</p>
      </div>
    </div>
  </div>
</section>


{% endblock %}