// Loja — experiência própria, mais comercial

const LojaPage = () => (
  <div style={{ background: 'var(--linho)', color: 'var(--terra)', width: 1440 }}>
    <Nav theme="linho" currentArea="loja" />

    {/* HEADER + FILTERS */}
    <section style={{ padding: '60px 56px 40px', borderBottom: '1px solid rgba(54,21,7,.12)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
        <div>
          <div className="eyebrow-mono" style={{ opacity: 0.55 }}>Loja Transformar</div>
          <h1 className="display-serif" style={{ fontSize: 96, marginTop: 12, lineHeight: 0.95 }}>
            Ferramentas para a tua <em>prática diária</em>.
          </h1>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="eyebrow-mono" style={{ opacity: 0.55 }}>62 produtos</div>
          <div style={{ marginTop: 8, fontSize: 13 }}>Ordenar: <strong>Mais recentes ↓</strong></div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {['Todos', 'E-books', 'Cursos online', 'Workshops ao vivo', 'Livros físicos', 'Programas guiados', 'Para profissionais'].map((c, i) => (
          <button key={c} style={{
            padding: '10px 18px',
            borderRadius: 999,
            background: i === 0 ? 'var(--terra)' : 'transparent',
            color: i === 0 ? 'var(--linho)' : 'var(--terra)',
            border: i === 0 ? 'none' : '1px solid rgba(54,21,7,.2)',
            fontSize: 13,
          }}>{c}</button>
        ))}
      </div>
    </section>

    {/* FEATURED */}
    <section style={{ padding: '60px 56px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24 }}>
        <div style={{
          background: 'var(--terra)', color: 'var(--linho)',
          padding: 56, borderRadius: 4, position: 'relative', minHeight: 480,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          overflow: 'hidden',
        }}>
          <div>
            <div className="eyebrow-mono" style={{ color: 'var(--terracota)' }}>Em destaque · Lançamento</div>
            <h2 className="display-serif" style={{ fontSize: 80, marginTop: 20, lineHeight: 0.95, maxWidth: 520 }}>
              Manifesto<br/>
              para a <em style={{ color: 'var(--terracota)' }}>mudança</em>.
            </h2>
            <p style={{ marginTop: 20, maxWidth: 420, opacity: 0.7, fontSize: 15 }}>
              O livro fundador da Academia Transformar. 280 páginas. Capa rígida. Edição numerada.
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div className="display-serif" style={{ fontSize: 44 }}>€26</div>
              <div className="small" style={{ opacity: 0.5 }}>Envio grátis em PT</div>
            </div>
            <a className="btn" style={{ background: 'var(--terracota)', color: 'var(--terra)' }}>Adicionar ao carrinho</a>
          </div>
          {/* Faux book cover */}
          <div style={{ position: 'absolute', top: 56, right: 56, width: 200, height: 280, background: 'var(--linho)', color: 'var(--terra)', padding: 20, transform: 'rotate(4deg)', boxShadow: '0 20px 40px rgba(0,0,0,.3)' }}>
            <div className="eyebrow-mono" style={{ fontSize: 9 }}>Inês Pereira</div>
            <div className="display-serif" style={{ fontSize: 28, marginTop: 16, lineHeight: 1 }}>
              Manifesto<br/>para a<br/><em>mudança</em>
            </div>
            <div style={{ position: 'absolute', bottom: 16, left: 20, right: 20, fontSize: 10, fontFamily: 'var(--font-mono)', opacity: 0.55 }}>academia transformar · 2026</div>
          </div>
        </div>

        <div style={{
          background: 'var(--musgo)', color: 'var(--terra)',
          padding: 40, borderRadius: 4, minHeight: 480,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div>
            <div className="eyebrow-mono">Workshop · 17 mai · Lisboa</div>
            <h3 className="display-serif" style={{ fontSize: 44, marginTop: 16, lineHeight: 1 }}>
              Regulação<br/>emocional<br/><em>na prática</em>
            </h3>
            <p style={{ marginTop: 16, fontSize: 14, opacity: 0.78 }}>
              4 horas presenciais com Tiago Monteiro. Limitado a 30 participantes.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="display-serif" style={{ fontSize: 40 }}>€120</div>
            <div style={{ height: 6, background: 'rgba(54,21,7,.18)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: '74%', height: '100%', background: 'var(--terra)' }}/>
            </div>
            <div className="small" style={{ opacity: 0.7 }}>22 de 30 lugares</div>
            <a className="btn btn-primary" style={{ justifyContent: 'center' }}>Reservar</a>
          </div>
        </div>
      </div>
    </section>

    {/* PRODUCT GRID */}
    <section style={{ padding: '40px 56px 120px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {[
          { type: 'E-book', t: 'Sono · O boot diário', a: 'Inês Pereira', p: '€12', tag: 'PDF + EPUB · 84p', bg: 'var(--linho-deep)' },
          { type: 'Curso', t: 'Mindfulness para profissionais', a: '8 módulos · 6h vídeo', p: '€189', tag: 'Online · acesso vitalício', bg: 'var(--terracota)' },
          { type: 'Programa', t: 'OS Foundation 90d', a: 'Programa guiado', p: '€890', tag: '90 dias · 1:1 + grupo', bg: 'var(--raizes)', dark: true },
          { type: 'Livro', t: 'Conversas com a Equipa', a: 'Coletânea · 2025', p: '€19', tag: 'Capa mole · 220p', bg: 'var(--linho-deep)' },
          { type: 'Workshop', t: 'Liderança consciente', a: 'Lisboa · 8 jun', p: '€220', tag: '6h · com almoço', bg: 'var(--musgo)' },
          { type: 'E-book', t: 'Manual do cuidador', a: 'Para famílias', p: '€8', tag: 'PDF · 56p', bg: 'var(--linho-deep)' },
          { type: 'Curso', t: 'Nutrição cognitiva', a: 'Sofia Almeida', p: '€149', tag: '5h · com receituário', bg: 'var(--terracota)' },
          { type: 'Workshop', t: 'Para profissionais — Setup clínica', a: 'Online · 22 jun', p: '€340', tag: 'Apenas membros incubadora', bg: 'var(--terra)', dark: true },
        ].map((p, i) => (
          <article key={i} style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{
              aspectRatio: '4/5',
              background: p.bg,
              color: p.dark ? 'var(--linho)' : 'var(--terra)',
              padding: 24,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative',
              borderRadius: 4,
            }}>
              <div className="eyebrow-mono" style={{ opacity: 0.7 }}>{p.type}</div>
              <div>
                <div className="display-serif" style={{ fontSize: 28, lineHeight: 1.05 }}>{p.t}</div>
                <div className="small" style={{ marginTop: 8, opacity: 0.65 }}>{p.tag}</div>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
              <div>
                <div className="small" style={{ opacity: 0.55 }}>{p.a}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 2 }}>{p.p}</div>
              </div>
              <button style={{ width: 36, height: 36, borderRadius: 999, border: '1px solid var(--terra)', fontSize: 16 }}>+</button>
            </div>
          </article>
        ))}
      </div>
    </section>

    <Footer theme="terra" />
  </div>
);

Object.assign(window, { LojaPage });