/* global React, Sparkle, Icon */

function About() {
  return (
    <section id="sobre" style={aboutStyles.section}>
      <div className="container split">
        <div style={aboutStyles.imgWrap}>
          <img src="assets/about-recepcao.jpg" alt="Recepção Refinada Beauty" style={aboutStyles.img}/>
          <div style={aboutStyles.signature}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--rb-espresso)' }}>Beauty,<br/>refined.</span>
          </div>
        </div>
        <div style={aboutStyles.copy}>
          <span className="kicker">Sobre nós</span>
          <h2 style={aboutStyles.h2}>Um espaço pensado<br/>para você se sentir em casa.</h2>
          <p style={aboutStyles.p}>
            A Refinada Beauty nasceu para reunir, em um só lugar, tudo o que uma rotina de cuidado de verdade precisa — sem pressa, sem ruído, sem improviso. Aqui, cada visita é um momento seu.
          </p>
          <p style={aboutStyles.p}>
            Nossa equipe combina técnica, escuta e produtos selecionados. Trabalhamos com hora marcada para que você seja sempre recebida com tempo e atenção integrais.
          </p>
          <div className="grid-3" style={aboutStyles.stats}>
            <Stat n="8+" l="Anos de prática" />
            <Stat n="7" l="Serviços oferecidos" />
            <Stat n="1.6k" l="Clientes refinadas" />
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="#agendamento" className="btn btn--primary" onClick={(e) => { e.preventDefault(); document.getElementById('agendamento').scrollIntoView({ behavior: 'smooth' }); }}>Agendar uma visita</a>
            <a href="https://www.instagram.com/refinada_beauty" target="_blank" className="btn btn--secondary">
              <Icon name="instagram" size={16}/> refinada_beauty
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 400, color: 'var(--rb-rose-deep)', lineHeight: 1 }}>{n}</span>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-3)', fontWeight: 500 }}>{l}</span>
    </div>
  );
}

const aboutStyles = {
  section: { background: 'var(--bg-1)', padding: 'var(--section-pad) var(--page-pad)' },
  imgWrap: { position: 'relative', borderRadius: 22, overflow: 'hidden', boxShadow: '0 20px 50px rgba(43,27,18,0.10)', aspectRatio: '4 / 5', minWidth: 0 },
  img: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: '10% center' },
  signature: {
    position: 'absolute', right: 18, top: 18,
    background: 'rgba(255,247,240,0.95)',
    backdropFilter: 'blur(12px)',
    padding: '12px 18px', borderRadius: 14,
  },
  copy: { display: 'flex', flexDirection: 'column', gap: 22, minWidth: 0 },
  h2: { fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.4vw, 52px)', fontWeight: 400, lineHeight: 1.08, letterSpacing: '-0.01em', margin: '6px 0 0', color: 'var(--fg-1)' },
  p:  { fontFamily: 'var(--font-sans)', fontSize: 'clamp(15px, 1.4vw, 16px)', lineHeight: 1.75, color: 'var(--fg-2)', margin: 0 },
  stats: { gap: 18, padding: '20px 0', borderTop: '1px solid var(--rb-champagne)', borderBottom: '1px solid var(--rb-champagne)' },
};

Object.assign(window, { About });