<section class="hero">
  <div class="container">
    <h1>{{ t('home_hero_title') }}</h1>
    <p class="subtitle">{{ t('home_hero_subtitle') }}</p>
    <div class="cta-buttons">
      <a href="/import" class="btn btn-primary">{{ t('start_import') }}</a>
      <a href="/export" class="btn btn-secondary">{{ t('start_export') }}</a>
    </div>
  </div>
</section>

<section class="features">
  <div class="container">
    <h2>{{ t('home_simplified_title') }}</h2>
    <p style="text-align: center; max-width: 800px; margin: 0 auto 3rem;">
      {{ t('home_simplified_description') }}
    </p>

    <h3 style="text-align: center; margin: 4rem 0 2rem;">{{ t('home_why_choose_us') }}</h3>
    <div class="comparison-grid">
      <div class="comparison-card highlight">
        <h4>MyAutoImport.ch</h4>
        <p class="price">50 CHF</p>
        <p class="time">~ 5 {{ t('minutes') }}</p>
        <ul class="features-list">
          <li>✅ {{ t('feature_simple_guided') }}</li>
          <li>✅ {{ t('feature_fast_online') }}</li>
          <li>✅ {{ t('feature_affordable') }}</li>
        </ul>
      </div>
      <div class="comparison-card">
        <h4>{{ t('traditional_forwarder') }}</h4>
        <p class="price">Min. 100 CHF</p>
        <p class="time">~ 45 {{ t('minutes') }} {{ t('or_more') }}</p>
        <ul class="features-list">
          <li>❌ {{ t('feature_waiting_times') }}</li>
          <li>❌ {{ t('feature_more_expensive') }}</li>
          <li>❌ {{ t('feature_travel_required') }}</li>
        </ul>
      </div>
      <div class="comparison-card">
        <h4>e-dec Web ({{ t('official_site') }})</h4>
        <p class="price">{{ t('free') }}</p>
        <p class="time">{{ t('very_variable') }}</p>
        <ul class="features-list">
          <li>❌ {{ t('feature_very_complex') }}</li>
          <li>❌ {{ t('feature_costly_mistakes') }}</li>
          <li>❌ {{ t('feature_no_support') }}</li>
        </ul>
      </div>
    </div>
  </div>
</section>