/* global React, Sparkle, Icon */

const HIGHLIGHTS = [
  {
    icon: 'sparkles',
    title: 'Cortesia na primeira visita',
    desc: 'Receba um mimo Refinada no seu primeiro agendamento — uma aplicação de hidratação leve nas mãos por conta da casa.',
    tag: 'BOAS-VINDAS',
  },
  {
    icon: 'heart',
    title: 'Programa Refinada',
    desc: 'A cada 10 serviços, um tratamento cortesia à sua escolha. Os pontos acumulam automaticamente em sua conta.',
    tag: 'FIDELIDADE',
  },
  {
    icon: 'gift',
    title: 'Vale-presente',
    desc: 'Presenteie quem você ama com um momento Refinada. Cartão digital ou físico, com valor à sua escolha.',
    tag: 'PARA PRESENTEAR',
  },
];

function Highlights() {
  return (
    <section id="destaque" style={hlStyles.section}>
      <div className="container">
        <div className="grid-3">
          {HIGHLIGHTS.map(h => (
            <article key={h.title} style={hlStyles.card}>
              <div style={hlStyles.iconWrap}>
                <Icon name={h.icon} size={22} color="var(--rb-rose-deep)" stroke={1.4}/>
              </div>
              <div className="kicker" style={{ fontSize: 16 }}>{h.tag}</div>
              <h3 style={hlStyles.title}>{h.title}</h3>
              <p style={hlStyles.desc}>{h.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const hlStyles = {
  section: {
    background: 'var(--rb-espresso)',
    padding: 'clamp(48px, 7vw, 88px) var(--page-pad)',
  },
  card: {
    background: 'var(--rb-nude)',
    borderRadius: 14,
    padding: 28,
    display: 'flex', flexDirection: 'column', gap: 12,
    border: '1px solid var(--rb-champagne)',
  },
  iconWrap: {
    width: 48, height: 48, borderRadius: 999,
    background: 'rgba(201,138,125,0.18)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 4,
  },
  title: { fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400, lineHeight: 1.2, margin: 0, color: 'var(--fg-1)' },
  desc:  { fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0 },
};

Object.assign(window, { Highlights });