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

<section class="hero">
  <div class="container hero-inner">
    <div class="hero-text">
      <h1>
        一吸锁住虫子，也留住好奇心
        <span class="hero-en">
          One gentle vacuum holds the bugs – and keeps curiosity alive.
        </span>
      </h1>
      <p class="hero-sub">
        BUGHOLD 是一款连接吸尘器使用的高端抓虫附件。
        为怕虫子的人、热爱观察昆虫的孩子与兴趣爱好者、
        以及需要野外采集样本的科研人员提供一种
        干净、优雅、可观察又安全的抓虫方式。
        <span class="hero-sub-en">
          BUGHOLD is a high-end attachment for your vacuum cleaner, designed for
          people who are afraid of bugs, for kids and hobbyists who love watching them,
          and for researchers who need to collect insect samples in the field.
        </span>
      </p>

      <div class="hero-cta">
        <a href="#contact" class="btn btn-primary">预约试用 / 商务合作</a>
        <a href="#how-it-works" class="btn btn-ghost">了解工作原理 Learn more</a>
      </div>

      <div class="hero-tags">
        <span>磁吸快拆 / Magnetic quick-release</span>
        <span>透明观察虫仓 / Transparent viewing chamber</span>
        <span>科研样本采集 / Field sampling</span>
      </div>
    </div>

    <div class="hero-media">
      <img src="{{ url_for('static', filename='img/bughold-hero.png') }}"
           alt="BUGHOLD 抓虫器主视觉 Bughold main hero render"
           class="hero-image">
    </div>
  </div>
</section>


<section id="features" class="section">
  <div class="container">
    <h2 class="section-title">
      四种典型场景 · 一只 BUGHOLD 就够了
      <span class="section-sub-en">One device, four core scenarios.</span>
    </h2>
    <p class="section-subtitle">
      不再只是“把虫子吸走”这么简单。BUGHOLD 从安全、观察、科研、亲子四个维度重新设计抓虫体验。
      <span class="section-subtitle-en">
        BUGHOLD is more than a simple suction nozzle. It is re-designed around safety,
        observation, research and playful learning.
      </span>
    </p>

    <div class="feature-grid">
      <!-- 1 为怕虫子的人 -->
      <div class="feature-card">
        <div class="icon-pill">
          <!-- 这里你可以 include 对应 SVG，或者直接粘上前面的 icon SVG -->
          <!-- 安心防虫 icon -->
          <!-- 示例：{% include "icons/icon-fearless.svg" %} -->
        </div>
        <h3>① 为怕虫子的人设计<br><span class="en">For people afraid of bugs</span></h3>
        <p>
          不用靠近虫子、不用拍死、更不会弄脏墙面或地板。将进风口伸向墙角或天花板，一吸即可锁住虫子。
          <span class="en">
            No more smashing bugs or getting too close. Just point the intake
            towards a corner or ceiling and let the vacuum do the work.
          </span>
        </p>
      </div>

      <!-- 2 兴趣爱好者 / 孩子观察 -->
      <div class="feature-card">
        <div class="icon-pill">
          <!-- icon-observe.svg -->
        </div>
        <h3>② 为兴趣爱好者和孩子提供观察窗口<br>
            <span class="en">For hobbyists and kids to observe</span></h3>
        <p>
          透明兜虫容器，让孩子可以近距离安全地观察昆虫的触角、翅膀和爬行姿态，变“害怕”为“好奇心”。
          <span class="en">
            The transparent chamber turns fear into curiosity: kids can safely
            watch legs, wings and antennae up close.
          </span>
        </p>
      </div>

      <!-- 3 科研工作者 -->
      <div class="feature-card">
        <div class="icon-pill">
          <!-- icon-research.svg -->
        </div>
        <h3>③ 为科研工作者提供野外样本采集工具<br>
            <span class="en">For researchers in the field</span></h3>
        <p>
          不锈钢结构与防虫跑弹片让虫体保持完整，便于野外快速采集、分类与转移到样品瓶中。
          <span class="en">
            Stainless steel parts and the one-way gate keep specimens intact,
            ideal for field collection and transfer to sample vials.
          </span>
        </p>
      </div>

      <!-- 4 春天捕捉蝴蝶蜻蜓 -->
      <div class="feature-card">
        <div class="icon-pill">
          <!-- icon-kids.svg -->
        </div>
        <h3>④ 为孩子春天捕捉蝴蝶与蜻蜓提供方便<br>
            <span class="en">For springtime bug-catching with kids</span></h3>
        <p>
          春天里追逐蝴蝶、蜻蜓、瓢虫，只需轻轻一吸即可捕获，不伤害昆虫，也不弄脏小手。
          <span class="en">
            In spring, kids can gently capture butterflies, dragonflies and ladybugs
            with a soft suction instead of nets or hands.
          </span>
        </p>
      </div>
    </div>
  </div>
</section>


<section id="how-it-works" class="section section-alt">
  <div class="container">
    <h2 class="section-title">
      工作原理 · 一路气流，一路安全
      <span class="section-sub-en">How it works – one airflow, multiple safeguards.</span>
    </h2>
    <p class="section-subtitle">
      无论你是怕虫子的人、热爱昆虫的孩子，还是专业科研人员，抓虫的过程都应该是「可控制、可观察、可清理」的。
      <span class="section-subtitle-en">
        For every user – fearful, curious or professional – the catching process
        should be controllable, observable and easy to clean.
      </span>
    </p>

    <div class="exploded-layout">
      <img src="{{ url_for('static', filename='img/bughold-exploded-1.png') }}"
           alt="BUGHOLD 结构爆炸图 近景 Exploded view close-up"
           class="exploded-image">
      <div class="exploded-text">
        <ol>
          <li>
            <strong>抓虫进风管 / Intake nozzle</strong>  
            将长形进风管伸到角落或天花板边缘，虫子被吸入。
          </li>
          <li>
            <strong>磁铁 / Magnetic ring</strong>  
            提供稳固又易拆的连接结构，方便拆卸虫仓。
          </li>
          <li>
            <strong>不锈钢防虫跑弹片 / Stainless one-way gate</strong>  
            虫子通过时弹片打开，随后立即复位，形成单向“防逃门”。
          </li>
          <li>
            <strong>不锈钢兜虫容器 / Collection chamber</strong>  
            所有昆虫最终被收集于此，可选择不透明或透明版本。
          </li>
          <li>
            <strong>吸尘器对接头 / Vacuum connector</strong>  
            与吸尘器主机相连，维持稳定吸力和气流路径。
          </li>
        </ol>
      </div>
    </div>

    <div class="exploded-layout reverse">
      <div class="exploded-text">
        <h3>气流路径 / Airflow path</h3>
        <p>
          气流从吸虫进风口高速进入，携带虫子通过弹片进入容器，
          虫子被留在容器中，气流则通过底部孔洞继续流向吸尘器。
          <span class="en">
            Air enters from the intake, carries the bug through the one-way gate
            into the chamber, then exits through the perforated base into the vacuum.
          </span>
        </p>
        <p>
          这种结构既避免虫子被打碎，也避免虫体进入吸尘器主机，
          对家庭用户、兴趣玩家和科研人员都更友好。
          <span class="en">
            This keeps insects intact and out of the vacuum body – cleaner for homes,
            nicer for hobbyists, and more reliable for scientific sampling.
          </span>
        </p>
      </div>
      <img src="{{ url_for('static', filename='img/bughold-exploded-2.png') }}"
           alt="BUGHOLD 结构爆炸图 远景 Exploded view overview"
           class="exploded-image">
    </div>
  </div>
</section>


<section id="scenes" class="section">
  <div class="container">
    <h2 class="section-title">
      典型使用场景
      <span class="section-sub-en">Typical use cases</span>
    </h2>

    <div class="scene-grid">
      <div class="scene-card">
        <h3>卫生间与厨房墙角<br><span class="en">Bathroom & kitchen corners</span></h3>
        <p>
          轻松吸走蟑螂、蜘蛛、飞蛾等，让角落保持干净整洁。
          <span class="en">
            Quickly remove roaches, spiders and moths from corners without leaving marks.
          </span>
        </p>
      </div>
      <div class="scene-card">
        <h3>卧室天花板与窗帘顶端<br><span class="en">Ceilings & curtain rails</span></h3>
        <p>
          不必踩椅子挥拍子，配合吸尘器延长管即可够到高处。
          <span class="en">
            Reach high ceilings and curtain rails with the vacuum extension tube safely.
          </span>
        </p>
      </div>
      <div class="scene-card">
        <h3>亲子自然教育与昆虫观察<br><span class="en">Nature learning with kids</span></h3>
        <p>
          透明虫仓让孩子近距离观察昆虫的生活状态，家长随时掌控安全距离。
          <span class="en">
            The transparent chamber makes close-up observation safe and supervised.
          </span>
        </p>
      </div>
      <div class="scene-card">
        <h3>野外科研采样<br><span class="en">Field research sampling</span></h3>
        <p>
          快速采集并转移到样本瓶中，适合昆虫学、生态调查和教学实习。
          <span class="en">
            Collect and transfer insects efficiently for entomology and ecology work.
          </span>
        </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">
        合作与订购
        <span class="section-sub-en">Partnerships & orders</span>
      </h2>
      <p class="section-subtitle">
        BUGHOLD 面向家庭用户、昆虫兴趣爱好者、亲子教育机构、以及高校与科研单位开放合作。
        <span class="section-subtitle-en">
          BUGHOLD is open for collaboration with home appliance brands,
          education organizations and research institutes.
        </span>
      </p>
      <ul class="contact-list">
        <li>商务合作邮箱：<a href="mailto:hello@bughold.com">hello@bughold.com</a></li>
        <li class="en">Business contact: <a href="mailto:hello@bughold.com">hello@bughold.com</a></li>
        <li>支持颜色、材质、LOGO 与包装定制。</li>
        <li class="en">Color, material, branding and packaging customization are supported.</li>
      </ul>
    </div>
    <div class="contact-highlight">
      <p>想让你的吸尘器多一个“高端抓虫模式”？</p>
      <p class="contact-em">
        Let BUGHOLD hold the bugs for you.
      </p>
    </div>
  </div>
</section>

{% endblock %}