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

<section class="hero">
  <div class="container hero-inner">
    <div class="hero-text">
      <h1>{{ t['hero_headline']|safe }}</h1>
      <div class="hero-sub">{{ t['hero_sub']|safe }}</div>
      <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">
        <img src="{{ url_for('static', filename='img/comp_1.png') }}">
        <p>{{ t['comp_1'] }}</p>
      </div>
      <div class="diagram-item">
        <img src="{{ url_for('static', filename='img/comp_2.png') }}">
        <p>{{ t['comp_2'] }}</p>
      </div>
      <div class="diagram-item">
        <img src="{{ url_for('static', filename='img/comp_3.png') }}">
        <p>{{ t['comp_3'] }}</p>
      </div>
      <div class="diagram-item">
        <img src="{{ url_for('static', filename='img/comp_4.png') }}">
        <p>{{ t['comp_4'] }}</p>
      </div>
      <div class="diagram-item">
        <img src="{{ url_for('static', filename='img/comp_5.png') }}">
        <p>{{ t['comp_5'] }}</p>
      </div>
    </div>
    
    <div class="exploded-layout">
      <div class="exploded-media">
         <img src="{{ url_for('static', filename='img/bughold-exploded-1.png') }}" class="exploded-image">
      </div>
      <div class="exploded-text">
         <h3>设计细节</h3>
         <p>通过精密的磁吸结构与流体力学设计，确保每一次捕捉都精准无误。</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">
        <div class="scene-media">
            <img src="{{ url_for('static', filename='img/scene_1.jpg') }}" alt="Scene 1">
        </div>
        <div class="scene-text">
            <h3>{{ t['scene_1_title'] }}</h3>
            <p>{{ t['scene_1_desc']|safe }}</p>
        </div>
      </div>

      <div class="scene-card">
        <div class="scene-media">
            <img src="{{ url_for('static', filename='img/scene_2.jpg') }}" alt="Scene 2">
        </div>
        <div class="scene-text">
            <h3>{{ t['scene_2_title'] }}</h3>
            <p>{{ t['scene_2_desc']|safe }}</p>
        </div>
      </div>

      <div class="scene-card">
        <div class="scene-media">
            <img src="{{ url_for('static', filename='img/scene_3.jpg') }}" alt="Scene 3">
        </div>
        <div class="scene-text">
            <h3>{{ t['scene_3_title'] }}</h3>
            <p>{{ t['scene_3_desc']|safe }}</p>
        </div>
      </div>

      <div class="scene-card">
        <div class="scene-media">
            <img src="{{ url_for('static', filename='img/scene_4.jpg') }}" alt="Scene 4">
        </div>
        <div class="scene-text">
            <h3>{{ t['scene_4_title'] }}</h3>
            <p>{{ t['scene_4_desc']|safe }}</p>
        </div>
      </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>
      <div class="section-subtitle" style="margin-bottom:20px; text-align:left;">{{ t['contact_subtitle']|safe }}</div>
      <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 %}