{{include "header.html"}}
{{include "nav.html"}}

{{$slides := HomeSlides}}
<main>
  <section class="hero">
    {{if $slides}}
    <div class="hero-media">
      {{range $i, $s := $slides}}
      <img class="hero-slide {{if eq $i 0}}is-active{{end}}" src="{{$s.Img}}" alt="{{$s.Title}}" data-slide="{{$i}}">
      {{end}}
    </div>
    {{end}}
    <div class="wrap hero-content">
      <p class="eyebrow">{{index .ThemesExt "hero_eyebrow"}}</p>
      <h1>{{index .ThemesExt "hero_title"}}</h1>
      <p>{{index .ThemesExt "hero_text"}}</p>
      <div class="actions">
        <a class="btn primary" href="/message">{{index .ThemesExt "hero_primary"}}</a>
        <a class="btn secondary" href="/products">{{index .ThemesExt "hero_secondary"}}</a>
      </div>
    </div>
  </section>

  <section class="stats-band">
    <div class="wrap stats-grid">
      {{range index .ThemesExt "stats"}}
      <div><strong>{{.value}}</strong><span>{{.label}}</span></div>
      {{end}}
    </div>
  </section>

  {{$products := ColumnContents "products" 6}}
  <section class="section">
    <div class="wrap section-head">
      <div>
        <p class="eyebrow">Product Lines</p>
        <h2>Export-ready small goods with visible specs</h2>
      </div>
      {{$productsCol := Column "products"}}{{if $productsCol}}<a class="text-link" href="{{$productsCol.URL}}">View all products</a>{{end}}
    </div>
    <div class="wrap card-grid three">
      {{range $products}}
      <a class="product-card" href="{{.URL}}">
        <span class="card-img">{{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}</span>
        <span class="card-body">
          <span class="tag">{{index .Ext "category"}}</span>
          <strong>{{.Title}}</strong>
          <em>{{.Description}}</em>
          <span class="spec-line">MOQ: {{index .Ext "moq"}} · {{index .Ext "lead_time"}}</span>
        </span>
      </a>
      {{end}}
    </div>
  </section>

  <section class="section tinted">
    <div class="wrap split">
      <div>
        <p class="eyebrow">Why Buyers Use Meridian</p>
        <h2>Built for importers who need order control, not more catalog noise</h2>
        <p class="lead">Small goods look simple until packaging, MOQ, labels, defect sorting and mixed shipments start moving at different speeds. Our operating model keeps those details in one checklist.</p>
      </div>
      <div class="feature-list">
        {{range index .ThemesExt "advantages"}}
        <article><h3>{{.title}}</h3><p>{{.desc}}</p></article>
        {{end}}
      </div>
    </div>
  </section>

  {{$programs := ColumnContents "programs" 4}}
  <section class="section">
    <div class="wrap section-head">
      <div>
        <p class="eyebrow">Sourcing Programs</p>
        <h2>Procurement paths for different buyer models</h2>
      </div>
      {{$programsCol := Column "programs"}}{{if $programsCol}}<a class="text-link" href="{{$programsCol.URL}}">Explore programs</a>{{end}}
    </div>
    <div class="wrap card-grid two">
      {{range $programs}}
      <a class="program-card" href="{{.URL}}">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
        <span>
          <small>{{index .Ext "buyer_type"}}</small>
          <strong>{{.Title}}</strong>
          <em>{{.Description}}</em>
        </span>
      </a>
      {{end}}
    </div>
  </section>

  <section class="section process">
    <div class="wrap section-head compact">
      <p class="eyebrow">Workflow</p>
      <h2>From brief to shipment release</h2>
    </div>
    <div class="wrap process-grid">
      {{range index .ThemesExt "process"}}
      <article><span>{{.step}}</span><h3>{{.title}}</h3><p>{{.desc}}</p></article>
      {{end}}
    </div>
  </section>

  <section class="section tinted">
    <div class="wrap split reverse">
      <div>
        <p class="eyebrow">Markets Served</p>
        <h2>Assortments for retail, promotion and online resale</h2>
        <div class="pill-list">{{range index .ThemesExt "markets"}}<span>{{.}}</span>{{end}}</div>
      </div>
      <div>
        <p class="eyebrow">Compliance Signals</p>
        <div class="cert-grid">{{range index .ThemesExt "certifications"}}<span>{{.}}</span>{{end}}</div>
      </div>
    </div>
  </section>

  {{$insights := ColumnContents "insights" 4}}
  <section class="section">
    <div class="wrap section-head">
      <div>
        <p class="eyebrow">Sourcing Notes</p>
        <h2>Practical export knowledge for small goods</h2>
      </div>
      {{$insightsCol := Column "insights"}}{{if $insightsCol}}<a class="text-link" href="{{$insightsCol.URL}}">Read insights</a>{{end}}
    </div>
    <div class="wrap card-grid four">
      {{range $insights}}
      <a class="article-card" href="{{.URL}}">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
        <strong>{{.Title}}</strong>
        <span>{{StrLimit .Description 92 "..."}}</span>
      </a>
      {{end}}
    </div>
  </section>

  <section class="section faq-band">
    <div class="wrap split">
      <div>
        <p class="eyebrow">FAQ</p>
        <h2>Common questions before the first quote</h2>
      </div>
      <div class="faq-list">
        {{range index .ThemesExt "faq"}}
        <details><summary>{{.q}}</summary><p>{{.a}}</p></details>
        {{end}}
      </div>
    </div>
  </section>

  <section class="final-cta">
    <div class="wrap">
      <h2>Send a product reference and target quantity. We will return a sourcing route.</h2>
      <a class="btn primary" href="/message">Start an inquiry</a>
    </div>
  </section>
</main>

{{include "footer.html"}}
{{include "js.html"}}