const { Button, SectionHeading, ServiceCard, Statement, ProcessStep, PromiseItem, PhotoFrame, Rule, Badge } = window.WhiskyNoirTheValleyBarbershop_c4fed7;
const HA = '../../assets/';

const Section = ({ children, texture, pad = true, style }) => (
  <section style={{ position: 'relative', isolation: 'isolate', padding: pad ? 'var(--section-y) var(--gutter-inline)' : 0, ...style }}>
    {texture ? <div style={{ position: 'absolute', inset: 0, zIndex: -1, background: 'url(' + HA + 'textures/' + texture + '.png) center/cover', opacity: 'var(--texture-opacity)' }} /> : null}
    <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto' }}>{children}</div>
  </section>
);

function HomeScreen({ go, lang, onBook, onBookSlot }) {
  const V = window.VALLEY;
  const T = (zh, en) => lang === 'en' ? en : zh;
  return (
    <main>
      <ScrubFilm onBook={onBook} go={go} lang={lang} />

      <Section texture="plaster-charcoal">
        <div className="g2a" style={{ gap: 'var(--space-9)', alignItems: 'center' }}>
          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <SectionHeading eyebrow="About Us" title="醉漢精神" titleEn="No suits, no formalities" />
            <p style={{ fontFamily: 'var(--font-han)', fontWeight: 500, fontSize: 'var(--text-lg)', letterSpacing: '.08em', color: 'var(--bone-500)', margin: 0 }}>{T('「醉漢理髮店」— 沒有華美的西裝套裝束縛', '"The Valley Barbershop" — no need for suits or formalities')}</p>
            <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0, maxWidth: 'var(--measure-han)' }}>{T('短暫逃離喧擾的工作、生活，給自己一個小時的寧靜與沉澱，只管專注在髮型上，安心地把頭髮交給我們專業的理髮師，你負責休息，我們負責讓你帥氣。', 'Step away from the noise of work and life. Give yourself one quiet hour — leave your hair to our barbers. You rest, we make you look handsome.')}</p>
            <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0, maxWidth: 'var(--measure-han)' }}>{T('不為潮流所綁，不為世俗所限，我們嘗試以現代的方式呈現19世紀Barbershop的樣貌，以及一種對生活與風格的反叛精神，把酒與秘密都藏在理髮店裡。', 'Bound by no trend and no convention, we bring the 19th-century barbershop into the present — with a rebellious streak, and the whisky and secrets kept inside.')}</p>
          </div>
          <PhotoFrame src={HA + 'environment/empty-chair.png'} ratio="4 / 5" overlay={HA + 'atmosphere/haze-01.png'} caption={T('The chair is waiting 你的位子', 'The chair is waiting')} />
        </div>
      </Section>

      <Section style={{ background: 'var(--ink-800)' }}>
        <div style={{ display: 'grid', gap: 'var(--space-8)', justifyItems: 'center', textAlign: 'center' }}>
          <Statement align="center" han="這 裡 ， 是 你 卸 下 盔 甲 的 地 方" en="Step away from the noise. One hour to relax, reset, and focus on your style." />
          <div className="g3" style={{ gap: 'var(--space-6)', width: '100%' }}>
            {['action/hot-towel', 'ritual/whisky-pour', 'action/razor-line'].map(k => (
              <PhotoFrame key={k} src={HA + k + '.png'} ratio="4 / 3" />
            ))}
          </div>
        </div>
      </Section>

      <Section>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-6)', marginBottom: 'var(--space-7)', flexWrap: 'wrap' }}>
          <SectionHeading eyebrow="Services" title="服務項目" titleEn="Services get the hero treatment" />
          <Button variant="ghost" onClick={() => go('services')}>{T('查看更多', 'See more')}</Button>
        </div>
        <div className="g3" style={{ gap: 'var(--space-6)' }}>
          {V.services.slice(0, 3).map(s => (
            <ServiceCard key={s.index} index={s.index} image={HA + 'heroes/' + s.image + '-1x1.png'} title={s.han} titleEn={s.en} note={T(s.note, s.noteEn)} />
          ))}
        </div>
      </Section>

      <Section texture="leather-oxblood">
        <div className="g2b" style={{ gap: 'var(--space-9)', alignItems: 'start' }}>
          <SectionHeading eyebrow="Process" title="服務流程" titleEn="From booking to the last comb" />
          <ol style={{ margin: 0, padding: 0 }}>
            {V.process.map((p, i) => <ProcessStep key={p.n} number={p.n} title={T(p.han, p.hanEn)} body={T(p.body, p.bodyEn)} last={i === V.process.length - 1} />)}
          </ol>
        </div>
      </Section>

      <Section style={{ background: 'var(--ink-800)' }}>
        <SectionHeading eyebrow="Promise" title="服務承諾" titleEn="Three things we hold to" />
        <div className="g3" style={{ gap: 'var(--space-6)', marginTop: 'var(--space-7)' }}>
          {V.promises.map(p => <PromiseItem key={p.han} title={T(p.han, p.hanEn)} body={T(p.body, p.bodyEn)} />)}
        </div>
      </Section>

      <Section>
        <div className="g2c" style={{ gap: 'var(--space-9)', alignItems: 'center' }}>
          <PhotoFrame src={HA + 'people/owner-portrait-16x9.png'} ratio="16 / 10" scrim="bottom" caption={T('Owen · 創辦人 Founder', 'Owen · Founder')} />
          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <SectionHeading eyebrow="Founding Story" title="創辦故事" titleEn="Owen, a travelling barber" />
            <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0 }}>{T('醉漢理髮店的創辦人 Owen，曾是走遍世界的自由理髮師，從日本的精緻剪裁、英國的俐落漸層，到澳洲的街頭風格。在自我磨練的歲月之間發現，人與髮型之間的關係，其實是一種「自我認同」的展現。', "Owen, the founder, was a travelling barber — precise Japanese cutting, sharp British fades, Australian street style. Along the way he found that the bond between a man and his haircut is really a statement of identity.")}</p>
            <Rule label="LGBTQIA+ friendly" align="start" />
            <Button variant="secondary" onClick={() => go('contact')}>{T('聯絡我們', 'Contact us')}</Button>
          </div>
        </div>
      </Section>

      <Section style={{ background: 'var(--ink-800)' }}>
        <div className="g2b" style={{ gap: 'var(--space-9)', alignItems: 'center' }}>
          <div style={{ display: 'grid', gap: 'var(--space-5)', justifyItems: 'start' }}>
            <SectionHeading eyebrow="Booking" title="本週時段" titleEn="See what's open this week" />
            <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0, maxWidth: 'var(--measure-han)' }}>{T('挑一個有空的時段，位子直接幫你留著。當天想來？打電話最快。', 'Pick an open slot and the chair is held for you. Coming today? Calling is fastest.')}</p>
            <Button variant="primary" size="lg" onClick={onBook}>{T('立即預約', 'Book now')}</Button>
          </div>
          <AvailabilityCalendar lang={lang} onBookSlot={onBookSlot} />
        </div>
      </Section>
    </main>
  );
}
Object.assign(window, { HomeScreen });
