const { SectionHeading, ServiceCard, Badge, Button, Rule, PhotoFrame } = window.WhiskyNoirTheValleyBarbershop_c4fed7;
const SA = '../../assets/';

function ServicesScreen({ onBook, lang }) {
  const V = window.VALLEY;
  const T = (zh, en) => lang === 'en' ? en : zh;
  return (
    <main>
      <section style={{ position: 'relative', minHeight: 380, display: 'grid', alignItems: 'end', overflow: 'hidden' }}>
        <img src={SA + 'banner/hero-banner.png'} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'var(--scrim-left)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--content-max)', width: '100%', margin: '0 auto', padding: '0 var(--gutter-inline) var(--space-8)' }}>
          <SectionHeading eyebrow="Services" title="服務項目" titleEn="Five ways into the chair" />
        </div>
      </section>
      <section style={{ padding: 'var(--section-y) var(--gutter-inline)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', display: 'grid', gap: 'var(--space-7)' }}>
          <div className="g3" style={{ gap: 'var(--space-6)' }}>
            {V.services.map(s => (
              <ServiceCard key={s.index} index={s.index} image={SA + 'heroes/' + s.image + '-1x1.png'} title={s.han} titleEn={s.en} note={T(s.note, s.noteEn)} />
            ))}
            <div style={{ border: '1px solid var(--line-hairline)', borderRadius: 'var(--radius-xs)', padding: 'var(--space-6)', display: 'grid', gap: 'var(--space-4)', alignContent: 'center', background: 'var(--surface-card)' }}>
              <Badge tone="amber">Booking</Badge>
              <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0 }}>{T('請提前三天預約｜當天預約請來電', 'Book three days ahead · same-day bookings by phone')}</p>
              <Button variant="primary" onClick={onBook}>{T('立即預約', 'Book now')}</Button>
            </div>
          </div>
          <Rule label={T('We do not sell products — 我們不推銷產品', 'We do not sell products')} align="start" />
          <div className="g3" style={{ gap: 'var(--space-6)' }}>
            {['detail/tools-flatlay', 'detail/whisky-clippers', 'detail/scissors-comb'].map(k => <PhotoFrame key={k} src={SA + k + '.png'} ratio="16 / 10" />)}
          </div>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { ServicesScreen });