// Biblioteca de predefinições — grid simples

function Presets({ navigate }) {
  return (
    <div style={{ minHeight:'100dvh', background:'var(--bg)' }}>
      <nav className="m-nav" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'22px 48px', borderBottom:'1px solid var(--line)',
        paddingTop: 'calc(14px + var(--safe-top))',
        position:'sticky', top: 0, zIndex: 40,
        background:'rgba(245,241,235,.92)', backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)',
      }}>
        <button onClick={() => navigate('#/landing')} style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <AftershotMark/>
          <span className="serif" style={{ fontSize: 24 }}>Aftershot</span>
        </button>
        <Button variant="primary" size="sm" onClick={() => navigate('#/dashboard')}>
          <span className="hide-mobile">Editar uma foto</span>
          <span className="show-mobile" style={{ display:'none' }}>Editar</span>
          <Icons.Arrow size={14}/>
        </Button>
      </nav>

      <main className="m-section" style={{ maxWidth: 1120, margin:'0 auto', padding:'56px 24px 80px' }}>
        <div style={{ textAlign:'center', marginBottom: 32 }}>
          <h1 className="serif m-h1" style={{ fontSize: 56, lineHeight: 1, margin:'0 0 12px', letterSpacing:'-0.02em' }}>
            Predefinições
          </h1>
          <p style={{ color:'var(--ink-3)', fontSize: 15, margin: 0 }}>
            Dez estilos prontos. Todos incluídos.
          </p>
        </div>

        <div className="m-grid-2" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14 }}>
          {PRESETS.map(p => (
            <button key={p.id} onClick={() => navigate('#/dashboard')}
              className="tap-fade"
              style={{
                background:'var(--paper)', border:'1px solid var(--line)', borderRadius: 16,
                overflow:'hidden', textAlign:'left', padding: 0,
                display:'flex', flexDirection:'column',
                transition:'transform .12s, box-shadow .15s',
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <img src={p.demo.after} alt="" style={{ width:'100%', height:'auto', display:'block' }}/>
              <div style={{ padding: 14, flex: 1 }}>
                <div className="serif" style={{ fontSize: 20, lineHeight: 1.1, marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontSize: 12, color:'var(--ink-3)', lineHeight: 1.45 }}>{p.desc}</div>
              </div>
            </button>
          ))}
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { Presets });