/* global React, Sparkle, Icon */
const { useState } = React;

const SERVICES = [
  // Esmalteria
  { cat: 'Esmalteria',  name: 'Manicure tradicional',     desc: 'Hidratação, modelagem e esmaltação clássica.',         time: '45 min',  price: 45 },
  { cat: 'Esmalteria',  name: 'Unhas em gel',             desc: 'Alongamento, modelagem e finalização de longa duração.', time: '90 min',  price: 130 },
  { cat: 'Esmalteria',  name: 'Esmaltação em gel',        desc: 'Resistência e brilho por até 3 semanas.',              time: '60 min',  price: 75 },
  { cat: 'Esmalteria',  name: 'Pedicure completa',        desc: 'Cuidado clássico para pés bem tratados.',              time: '50 min',  price: 55 },
  // Cabelo
  { cat: 'Cabelo',      name: 'Escova modeladora',        desc: 'Lavagem, finalização e modelagem profissional.',       time: '45 min',  price: 60 },
  { cat: 'Cabelo',      name: 'Hidratação profunda',      desc: 'Máscara nutritiva, ampolas e selagem do fio.',          time: '60 min',  price: 90 },
  // Sobrancelhas
  { cat: 'Sobrancelhas', name: 'Design de sobrancelhas',  desc: 'Mapeamento facial, modelagem e finalização.',           time: '30 min',  price: 50, featured: true },
  { cat: 'Sobrancelhas', name: 'Design com henna',        desc: 'Modelagem com tonalização natural.',                    time: '45 min',  price: 70 },
  // Massagem
  { cat: 'Massagem',    name: 'Massagem relaxante',       desc: 'Pressão modulada e óleos essenciais selecionados.',     time: '60 min',  price: 150 },
  { cat: 'Massagem',    name: 'Drenagem linfática',       desc: 'Técnica suave para reduzir retenção e bem-estar.',      time: '60 min',  price: 160 },
  // Depilação
  { cat: 'Depilação',   name: 'Cera quente — pernas',     desc: 'Cera depiladora premium, baixo desconforto.',          time: '45 min',  price: 80 },
  { cat: 'Depilação',   name: 'Cera quente — buço',       desc: 'Procedimento delicado, finalização calmante.',          time: '15 min',  price: 25 },
  // Podologia
  { cat: 'Podologia',   name: 'Podologia clínica',        desc: 'Avaliação completa, tratamento de cutícula e calos.',   time: '60 min',  price: 110 },
  { cat: 'Podologia',   name: 'Podologia + spa',          desc: 'Tratamento clínico com finalização relaxante.',          time: '90 min',  price: 160 },
  // Produtos
  { cat: 'Boutique',    name: 'Kit Refinada home',        desc: 'Produtos selecionados para cuidado entre as visitas.',  time: '—',        price: 'A partir de 89', isProduct: true },
];

const CATS = [
  { id: 'Esmalteria',  label: 'Esmalteria',     icon: 'hand' },
  { id: 'Cabelo',      label: 'Cabelo',         icon: 'scissors' },
  { id: 'Sobrancelhas',label: 'Sobrancelhas',   icon: 'leaf' },
  { id: 'Massagem',    label: 'Massagem',       icon: 'droplet' },
  { id: 'Depilação',   label: 'Depilação',      icon: 'sparkles' },
  { id: 'Podologia',   label: 'Podologia',      icon: 'foot' },
  { id: 'Boutique',    label: 'Boutique',       icon: 'bag' },
];

function Services({ onBook }) {
  const [cat, setCat] = useState(CATS[0].id);
  const list = SERVICES.filter(s => s.cat === cat);

  return (
    <section id="servicos" style={svcStyles.section}>
      <div className="container">
        <div className="section-head">
          <span className="kicker">Serviços</span>
          <h2>Tudo o que cuidamos por você</h2>
          <p>Da esmaltação ao bem-estar, cada serviço é desenhado com técnica e tempo — para que você saia daqui mais inteira.</p>
        </div>

        <div className="no-scrollbar" style={svcStyles.tabs}>
          {CATS.map(c => (
            <button key={c.id} onClick={() => setCat(c.id)} style={{
              ...svcStyles.tab,
              ...(cat === c.id ? svcStyles.tabActive : {}),
            }}>
              <Icon name={c.icon} size={14} color="currentColor"/>
              {c.label}
            </button>
          ))}
        </div>

        <div className="services-grid">
          {list.map((s, i) => (
            <article key={i} style={{
              ...svcStyles.row,
              ...(s.featured ? svcStyles.rowFeatured : {}),
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <h3 style={svcStyles.rowTitle}>{s.name}</h3>
                  {s.featured && <span style={svcStyles.featuredTag}>Mais agendado</span>}
                </div>
                <p style={svcStyles.rowDesc}>{s.desc}</p>
                <span style={svcStyles.rowTime}>{s.time}</span>
              </div>
              <div style={svcStyles.rowEnd}>
                <span style={svcStyles.rowPrice}>
                  {typeof s.price === 'number' ? `R$ ${s.price}` : s.price}
                </span>
                {!s.isProduct ? (
                  <button className="btn btn--primary" onClick={() => onBook(s)} style={svcStyles.rowCta}>
                    Reservar
                  </button>
                ) : (
                  <button className="btn btn--secondary" style={svcStyles.rowCta}>
                    Ver
                  </button>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const svcStyles = {
  section: { padding: 'var(--section-pad) var(--page-pad)', background: 'var(--bg-2)' },
  tabs: {
    display: 'flex', gap: 8, marginBottom: 36,
    overflowX: 'auto', paddingBottom: 4,
    scrollSnapType: 'x mandatory',
  },
  tab: {
    flexShrink: 0,
    height: 38, padding: '0 16px', borderRadius: 999,
    background: 'transparent', color: 'var(--rb-espresso)',
    border: '1px solid var(--rb-champagne)',
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
    letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'all 280ms var(--ease-refined)',
    scrollSnapAlign: 'start',
  },
  tabActive: { background: 'var(--rb-espresso)', color: 'var(--rb-creme)', borderColor: 'transparent' },

  // Compact horizontal rows
  row: {
    background: 'var(--rb-creme)',
    border: '1px solid var(--rb-champagne)',
    borderRadius: 12,
    padding: '18px 22px',
    display: 'flex', alignItems: 'center', gap: 20,
    transition: 'all 240ms var(--ease-refined)',
  },
  rowFeatured: { background: '#EDC8BE', borderColor: 'transparent' },
  rowTitle: { fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 400, lineHeight: 1.2, margin: 0, color: 'var(--fg-1)' },
  rowDesc: { fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.5, color: 'var(--fg-2)', margin: 0 },
  rowTime: { fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 4 },
  rowEnd: { display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 },
  rowPrice: { fontFamily: 'var(--font-sans)', fontSize: 22, color: 'var(--fg-1)', fontWeight: 350, letterSpacing: '-0.01em' },
  rowCta: { height: 40, padding: '0 18px', fontSize: 11 },

  featuredTag: {
    fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 600,
    letterSpacing: '0.2em', textTransform: 'uppercase',
    background: 'var(--rb-espresso)', color: 'var(--rb-creme)',
    padding: '3px 8px', borderRadius: 999,
  },

  // Legacy card styles kept for reference (unused now)
  card: {
    background: 'var(--rb-creme)',
    border: '1px solid var(--rb-champagne)',
    borderRadius: 14,
    padding: 26,
    display: 'flex', flexDirection: 'column', gap: 10,
    transition: 'all 280ms var(--ease-refined)',
  },
  cardFeatured: { background: '#EDC8BE', borderColor: 'transparent', boxShadow: '0 16px 36px rgba(43,27,18,0.10)' },
  cardHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  cardTitle: { fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 400, lineHeight: 1.15, margin: '6px 0 0', color: 'var(--fg-1)' },
  cardDesc:  { fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.65, color: 'var(--fg-2)', margin: '4px 0 12px' },
  meta: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    padding: '12px 0 14px',
    borderTop: '1px solid var(--rb-champagne)',
    fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.16em',
  },
  time: { textTransform: 'uppercase' },
  price: { fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--fg-1)', fontWeight: 500, letterSpacing: 0 },
};

// Expose the data for booking flow
Object.assign(window, { Services, SERVICES_LIST: SERVICES, SERVICES_CATS: CATS });