/* global React, Sparkle, BeautyMark, Icon */

function Hero({ onBook }) {
  return (
    <section id="topo" style={heroStyles.section}>
      <div className="split" style={heroStyles.grid}>
        <div style={heroStyles.copy}>
          <span className="kicker"><Sparkle size={10}/> Beauty</span>
          <h1 style={heroStyles.h1}>
            Realce sua beleza.<br/>
            <em style={heroStyles.em}>Sinta-se Refinada.</em>
          </h1>
          <p style={heroStyles.lede}>
            Estética e bem-estar com a sofisticação que você merece. Esmalteria, cabelo, sobrancelhas, massagem, depilação e podologia — em um só lugar, em Maceió.
          </p>
          <div style={heroStyles.ctaRow}>
            <button className="btn btn--primary btn--lg" onClick={onBook}>Agendar agora</button>
            <a href="#servicos" className="btn btn--ghost" onClick={(e) => { e.preventDefault(); document.getElementById('servicos').scrollIntoView({ behavior: 'smooth' }); }}>
              Ver serviços →
            </a>
          </div>
          <div style={heroStyles.meta}>
            <div style={heroStyles.metaItem}>
              <Icon name="pin" size={16} color="var(--rb-rose)" />
              <span>Prado, Maceió/AL</span>
            </div>
            <span style={{ color: 'var(--rb-champagne)' }}>·</span>
            <div style={heroStyles.metaItem}>
              <Icon name="clock" size={16} color="var(--rb-rose)" />
              <span>Seg–Sáb · 08–18h</span>
            </div>
            <span style={{ color: 'var(--rb-champagne)' }} className="hide-mobile">·</span>
            <div style={heroStyles.metaItem} className="hide-mobile">
              <Icon name="star" size={16} color="var(--rb-rose)" />
              <span>5,0 · Google Reviews</span>
            </div>
          </div>
        </div>

        <div style={heroStyles.imageWrap}>
          <img src="assets/hero-podologia.jpg" alt="Cliente Refinada Beauty" style={heroStyles.image} />
          <div style={heroStyles.badge}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--rb-espresso)' }}>"Cuidado<br/>como deve ser."</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--rb-rose)', marginTop: 8 }}>#SouRefinada</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  section: {
    padding: 'clamp(48px, 7vw, 88px) var(--page-pad) clamp(64px, 9vw, 112px)',
    background: 'var(--rb-nude)',
    position: 'relative',
  },
  grid: {
    maxWidth: 1280, margin: '0 auto',
  },
  copy: { display: 'flex', flexDirection: 'column', gap: 24, minWidth: 0 },
  h1: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(40px, 6.5vw, 76px)',
    fontWeight: 400,
    lineHeight: 1.02, letterSpacing: '-0.015em', margin: 0,
    color: 'var(--fg-1)',
  },
  em: { fontStyle: 'italic', fontWeight: 400, color: 'var(--rb-rose-deep)' },
  lede: {
    fontFamily: 'var(--font-sans)',
    fontSize: 'clamp(15px, 1.5vw, 17px)',
    lineHeight: 1.7,
    color: 'var(--fg-2)', maxWidth: 500, margin: 0,
    textWrap: 'pretty',
  },
  ctaRow: { display: 'flex', alignItems: 'center', gap: 24, paddingTop: 4, flexWrap: 'wrap' },
  meta: {
    display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
    paddingTop: 18, borderTop: '1px solid var(--rb-champagne)',
    fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-2)',
    letterSpacing: '0.04em',
    marginTop: 4,
  },
  metaItem: { display: 'flex', alignItems: 'center', gap: 8 },
  imageWrap: {
    position: 'relative',
    borderRadius: 22, overflow: 'hidden',
    boxShadow: '0 24px 60px rgba(43,27,18,0.14)',
    aspectRatio: '4 / 5',
    minWidth: 0,
  },
  image: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: '90% center' },
  badge: {
    position: 'absolute', left: 20, bottom: 20,
    background: 'rgba(255,247,240,0.95)',
    backdropFilter: 'blur(14px)',
    padding: '16px 20px', borderRadius: 14,
    display: 'flex', flexDirection: 'column',
    boxShadow: 'var(--shadow-2)',
    maxWidth: '70%',
  },
  cornerTag: {
    position: 'absolute', top: 20, right: 20,
    background: 'var(--rb-espresso)',
    color: 'var(--rb-creme)',
    padding: '10px 16px',
    borderRadius: 999,
    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
    letterSpacing: '0.12em',
    display: 'flex', alignItems: 'center', gap: 8,
  },
};

Object.assign(window, { Hero });