<?php /** /app/views/public/sobre.php */ ?>

<section style="padding: 80px 0 40px;background:var(--color-soft)">
  <div class="container" style="text-align:center;max-width:720px">
    <span style="font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--color-gold)">Nossa história</span>
    <h1 style="margin:16px 0 0"><?= e($config['sobre_titulo'] ?? 'Sobre a OFFICE') ?></h1>
  </div>
</section>

<section>
  <div class="container" style="max-width: 780px">
    <div style="font-size:1.05rem;line-height:1.9;color:var(--color-text)">
      <?= nl2br(e($config['sobre_texto'] ?? '')) ?>
    </div>

    <div style="text-align:center;margin-top:60px">
      <a href="<?= url('catalogo') ?>" class="btn">Conhecer a coleção</a>
    </div>
  </div>
</section>

<section style="background:var(--color-primary);color:#fff;padding:80px 0;margin-top:40px">
  <div class="container" style="text-align:center;max-width:620px">
    <span style="font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--color-gold)">Valores</span>
    <h2 style="color:#fff;margin:16px 0 32px">Design, qualidade e atitude</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;text-align:center">
      <div>
        <div style="font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--color-gold)">◎</div>
        <h3 style="color:#fff;font-size:1rem;letter-spacing:.15em;text-transform:uppercase">Design autoral</h3>
        <p style="color:#d8d8d8;font-size:.92rem">Cada modelo é pensado até o último detalhe.</p>
      </div>
      <div>
        <div style="font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--color-gold)">✦</div>
        <h3 style="color:#fff;font-size:1rem;letter-spacing:.15em;text-transform:uppercase">Qualidade premium</h3>
        <p style="color:#d8d8d8;font-size:.92rem">Materiais de alta durabilidade e lentes com proteção certificada.</p>
      </div>
      <div>
        <div style="font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--color-gold)">✧</div>
        <h3 style="color:#fff;font-size:1rem;letter-spacing:.15em;text-transform:uppercase">Atemporal</h3>
        <p style="color:#d8d8d8;font-size:.92rem">Peças pensadas para durar — no estilo e no uso.</p>
      </div>
    </div>
  </div>
</section>
