<?php
require __DIR__ . '/inc/bootstrap.php';
require __DIR__ . '/inc/layout.php';

$title = c('site.company') . ' · 官网';
$desc = '锦好医疗专注助听器研发、生产与销售，自主芯片与算法，覆盖 90 多个国家和地区。';
page_head($title, $desc, 'home');

$phone = (string)c('site.phone');
$stats = c('home.stats', []);
$techCards = c('home.tech_cards', []);
$products = c('products.items', []);
$stores = c('service.stores', []);
$hzStores = array_values(array_filter($stores, function ($s) {
    return ($s['city'] ?? '') === '惠州市';
}));
$hzStores = array_slice($hzStores, 0, 6);
?>
<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="hero-tag"><i></i><?= e(c('home.hero_eyebrow')) ?></div>
      <h1><?= e(c('home.hero_title_main')) ?><br><?= e(c('home.hero_title_accent')) ?></h1>
      <p class="hero-lead"><?= e(c('home.hero_lead')) ?></p>
      <div class="hero-actions">
        <a class="btn btn-primary" href="service.php#store">预约免费听力检测<?= icon('arrow') ?></a>
        <a class="btn btn-ghost" href="technology.php">了解核心技术</a>
      </div>
      <div class="hero-stats">
        <?php foreach ($stats as $s): ?>
          <div><b><?= e($s['value'] ?? '') ?></b><span><?= e($s['label'] ?? '') ?></span></div>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="hero-visual">
      <div class="device-stage">
        <div class="orbit o1"></div>
        <div class="orbit o2"></div>
        <div class="device-tile"><img src="assets/img/a39.jpg" alt="锦好耳内式助听器"></div>
        <div class="wave">
          <?php for ($i = 0; $i < 22; $i++): ?>
            <i style="--i:<?= $i ?>;--h:<?= 14 + ($i * 37) % 40 ?>"></i>
          <?php endfor; ?>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section section--white" id="tech">
  <div class="wrap">
    <?php section_head('Core Technology', c('home.tech_title'), c('home.tech_sub')); ?>
    <div class="grid g-4">
      <?php foreach ($techCards as $i => $card): ?>
        <div class="card reveal" data-delay="<?= $i % 4 ?>">
          <div class="icon-badge"><?= icon((string)($card['icon'] ?? 'wave')) ?></div>
          <h3><?= e($card['title'] ?? '') ?></h3>
          <p><?= e($card['text'] ?? '') ?></p>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section section--paper" id="products">
  <div class="wrap">
    <?php section_head('Products', '宫 · 商 · 羽：', '从轻巧耳内式到经典耳背式，锦好围绕不同耳道条件与聆听需求，提供可选择的助听方案。'); ?>
    <div class="grid g-3"><?php product_cards($products); ?></div>
    <p style="margin-top:26px;font-size:13px;color:var(--muted)"><?= e(str_replace('{phone}', $phone, (string)c('products.note'))) ?></p>
  </div>
</section>

<section class="section section--dark">
  <div class="wrap">
    <?php section_head('R&amp;D · Quality', '研发实力与全球认证', '多年技术沉淀，掌握核心研发生产技术，获得「中美欧」全球专业标准认证。'); ?>
    <div class="grid g-3">
      <div class="card-d reveal"><h3>研发实力</h3><p><?= e(c('technology.rd_cards.0.text')) ?></p></div>
      <div class="card-d reveal" data-delay="1"><h3>技术专利</h3><p><?= e(c('technology.rd_cards.1.text')) ?></p></div>
      <div class="card-d reveal" data-delay="2"><h3>标准认证</h3><p><?= e(c('technology.rd_cards.2.text')) ?></p></div>
    </div>
    <?php cert_strip(c('technology.certs', [])); ?>
  </div>
</section>

<section class="section section--white">
  <div class="wrap">
    <div class="split">
      <div class="media-frame reveal">
        <img src="assets/img/company.jpg" alt="锦好智慧医疗产业园" loading="lazy">
        <div class="media-caption"><i></i>锦好智慧医疗产业园 · 惠州仲恺</div>
      </div>
      <div class="reveal" data-delay="1">
        <span class="eyebrow">About JINGHAO</span>
        <h2 style="font-size:clamp(26px,3vw,38px)"><?= c('home.about_title') ?></h2>
        <p style="margin-top:18px;color:var(--muted)"><?= e(c('home.about_text')) ?></p>
        <?php check_list(c('home.about_points', [])); ?>
        <a class="btn btn-outline" href="about.php" style="margin-top:30px">了解锦好<?= icon('arrow') ?></a>
      </div>
    </div>
  </div>
</section>

<section class="section section--paper" id="history">
  <div class="wrap">
    <?php section_head('Milestones', '十六年，一步一步走过来', '从 2009 年成立，到登陆北交所、建成锦好智慧医疗产业园，锦好医疗持续把技术积累变成产品能力。'); ?>
    <?php timeline(c('about.history', [])); ?>
  </div>
</section>

<section class="section section--white" id="culture">
  <div class="wrap">
    <?php section_head('Brand Culture', '陪伴有声情', '锦好相信，助听器不只是设备，更是子女与父母之间那一声声被听见的牵挂。'); ?>
    <div class="grid g-4">
      <?php foreach (c('about.culture', []) as $i => $item): ?>
        <div class="culture-card reveal" data-delay="<?= $i % 3 ?>"><h3><?= e($item['title'] ?? '') ?></h3><p><?= e($item['text'] ?? '') ?></p></div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<section class="section section--paper">
  <div class="wrap">
    <div style="display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px">
      <div class="section-head reveal" style="margin-bottom:0">
        <span class="eyebrow">News</span>
        <h2>品牌资讯</h2>
        <p>为您呈现最新最全面的资讯动态。</p>
      </div>
      <a class="btn btn-outline reveal" href="news.php">全部资讯<?= icon('arrow') ?></a>
    </div>
    <div class="grid g-3"><?php news_cards(news_all(), 3); ?></div>
  </div>
</section>

<section class="section section--dark" id="service">
  <div class="wrap">
    <?php section_head('Service Network', '线下门店验配', '就近体验、免费检测、专业调试。拨打电话预约，客服会与您确认到店时间。'); ?>
    <h3 style="color:#fff;font-size:14px;letter-spacing:.16em;margin-bottom:18px;display:flex;align-items:center;gap:12px">
      <span style="width:22px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)"></span>惠州市
    </h3>
    <div class="store-grid"><?php store_cards($hzStores, false); ?></div>
    <div style="margin-top:32px;display:flex;gap:14px;flex-wrap:wrap">
      <a class="btn btn-primary" href="service.php#store">查看全部门店<?= icon('arrow') ?></a>
      <a class="btn btn-ghost" href="<?= e(tel_href((string)c('site.store_phone'))) ?>">预约热线 <?= e(c('site.store_phone')) ?></a>
    </div>
  </div>
</section>

<section class="section section--tight section--paper">
  <div class="wrap">
    <div class="band reveal">
      <div class="band-inner">
        <div>
          <h2>听见，是最好的陪伴</h2>
          <p>预约一次免费听力检测，让专业的验配师为家人评估听力状况，找到合适的助听方案。</p>
        </div>
        <div style="display:flex;gap:14px;flex-wrap:wrap">
          <a class="btn btn-primary" href="service.php#test">免费听力检测<?= icon('arrow') ?></a>
          <a class="btn btn-ghost" href="contact.php">联系我们</a>
        </div>
      </div>
    </div>
  </div>
</section>
<?php page_foot();
