const { Button, Icon, Badge, SectionLabel, ServiceCard } = window.RinseNRepeatDesignSystem_9f80bd;

function PageHead({ eyebrow, title, highlight, sub }) {
  return (
    <section style={{ background: 'var(--black-950)', padding: 'clamp(44px,7vw,64px) 0 clamp(52px,8vw,72px)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', marginBottom: 20 }}><Badge variant="orange" dot>{eyebrow}</Badge></div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(32px,6.5vw,52px)', letterSpacing: '-.02em', color: '#fff', margin: 0 }}>
          {title} {highlight ? <span style={{ color: 'var(--orange-500)' }}>{highlight}</span> : null}
        </h1>
        {sub ? <p style={{ color: 'rgba(255,255,255,.75)', fontSize: 18, maxWidth: 620, margin: '18px auto 0', lineHeight: 1.5 }}>{sub}</p> : null}
      </div>
    </section>
  );
}
window.RNRPageHead = PageHead;

function ServicesScreen({ go }) {
  const D = window.RNR_DATA;
  return (
    <div>
      <PageHead eyebrow="Our Services" title="Detailed cleaning for every" highlight="surface" sub="From delicate soft washing to heavy-duty pressure cleaning — each service is tailored to protect and enhance the beauty of your property." />
      <section style={{ background: 'var(--paper)', padding: 'var(--section-pad) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(230px,100%),1fr))', gap: 18 }}>
            {D.services.map((s, i) => (
              <ServiceCard key={s.title} icon={s.icon} title={s.title} description={s.desc} tone={i % 2 === 0 ? 'dark' : 'light'} onClick={() => go('Book')} />
            ))}
          </div>
          <div style={{ marginTop: 56, display: 'flex', gap: 22, alignItems: 'center', justifyContent: 'space-between', background: 'var(--charcoal-700)', borderRadius: 'var(--radius-2xl)', padding: 'clamp(24px,5vw,40px) clamp(24px,5.5vw,44px)', flexWrap: 'wrap' }}>
            <div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(24px,5vw,30px)', color: '#fff', margin: 0 }}>Not sure what you need?</h2>
              <p style={{ color: 'rgba(255,255,255,.7)', fontSize: 16, margin: '10px 0 0' }}>Tell us about your property and we'll recommend the right service — free of charge.</p>
            </div>
            <Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={20} />} onClick={() => go('Book')}>Get a Free Quote</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.RNRServices = ServicesScreen;