/* global React */
function ServiceCard({ name, duration, price, body, onBook }) {
  return (
    <article style={{
      background: '#FBF7F1', border: '1px solid rgba(61,47,34,0.12)', borderRadius: 6,
      padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '22px 24px 16px', borderBottom: '1px solid rgba(138,154,123,0.5)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
          <div>
            <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 24, fontWeight: 500, color: '#3D2F22', margin: 0, lineHeight: 1.2 }}>{name}</h3>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 13, color: 'rgba(46,42,38,0.7)', marginTop: 4 }}>{duration}</div>
          </div>
          <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 500, color: '#B5654A', whiteSpace: 'nowrap' }}>{typeof price === 'number' ? `from $${price}` : price}</div>
        </div>
      </div>
      <div style={{ padding: '18px 24px 22px', flex: 1 }}>
        <p style={{ fontFamily: "'Mulish',sans-serif", fontSize: 14.5, lineHeight: 1.6, color: '#2E2A26', margin: '0 0 18px' }}>{body}</p>
        <a href="book.html" onClick={(e)=>{ if (onBook) { e.preventDefault(); onBook(name); } }}
           style={{ fontFamily: "'Mulish',sans-serif", fontSize: 13.5, color: '#B5654A', textDecoration: 'underline', textUnderlineOffset: 4 }}>
          Book this &rsaquo;
        </a>
      </div>
    </article>
  );
}

function ServicesSection({ onBook, full = false }) {
  const Eyebrow = window.GFH_Eyebrow;
  const services = [
    { name: 'Cut & style', duration: 'about 60 minutes', price: 70,
      body: 'Wash, cut, finish. Most guests are out the door right at sixty minutes, with a smooth blow-dry and the kind of hairline you can grow out gracefully.' },
    { name: 'Highlights', duration: 'consultation first', price: 150,
      body: 'Foil highlights to brighten around the face and crown, or all the way through. Tailored to your tone so it looks natural the day of, and grows in softly.' },
    { name: 'Color & gray coverage', duration: 'about 2 hours', price: 80,
      body: 'A single-process or root touch-up. We pick the tone together; I apply, we let it process, and you leave with the warmth you walked in for.' },
    { name: 'Keratin smoothing', duration: '2 to 3 hours', price: 250,
      body: 'For Florida humidity. Calms frizz and keeps movement, without losing the shape of your hair.' },
    { name: 'Olaplex treatment', duration: '45 minutes', price: 60,
      body: 'A bond-building treatment. Useful between color visits, or as a stand-alone reset.' },
    { name: 'Bridal & special occasion', duration: '2 hours, on-location available', price: 175,
      body: "For your day, your daughter's day, the morning before. I'll bring everything; you bring the playlist." },
  ];
  const items = full ? services : services.slice(0, 4);
  return (
    <section style={{ maxWidth: 1180, margin: '0 auto', padding: '88px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 36 }}>
        <div>
          <Eyebrow>Services</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond',serif", fontSize: 40, lineHeight: 1.2, fontWeight: 500, color: '#3D2F22',
            margin: '12px 0 0', textWrap: 'balance', letterSpacing: '-0.01em',
          }}>{full ? 'The full menu, published, no surprises.' : 'Services.'}</h2>
          {!full && (
            <p style={{
              fontFamily: "'Cormorant Garamond',serif", fontSize: 22, lineHeight: 1.4, fontWeight: 400,
              fontStyle: 'italic', color: 'rgba(61,47,34,0.7)',
              margin: '6px 0 0', textWrap: 'balance',
            }}>A few of the things I do.</p>
          )}
        </div>
        {!full && (
          <a href="services.html"
             style={{ fontFamily: "'Mulish',sans-serif", fontSize: 14, color: '#B5654A', textDecoration: 'underline', textUnderlineOffset: 4 }}>
            See the full menu &rsaquo;
          </a>
        )}
      </div>
      <div className="gfh-services-grid" style={{
        display: 'grid', gridTemplateColumns: full ? 'repeat(3, 1fr)' : 'repeat(4, 1fr)', gap: 20,
      }}>
        {items.map((s, i) => <ServiceCard key={i} {...s} onBook={onBook} />)}
      </div>
    </section>
  );
}

window.GFH_ServiceCard = ServiceCard;
window.GFH_ServicesSection = ServicesSection;