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

function HomeScreen({ go }) {
  const D = window.RNR_DATA;
  return (
    <div>
      {/* Hero */}
      <section style={{ position: 'relative', minHeight: 560, display: 'flex', alignItems: 'center', backgroundImage: `var(--scrim-hero), url('assets/photos/after-blue-house.jpeg')`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(48px,9vw,80px) var(--gutter-x)', width: '100%' }}>
          <Badge variant="orange" dot style={{ marginBottom: 22 }}>{D.brand.area}</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(34px,7.5vw,62px)', lineHeight: 1.06, letterSpacing: '-.02em', color: '#fff', margin: 0, maxWidth: 780 }}>
            Top-quality soft washing &amp; pressure washing <span style={{ color: 'var(--orange-500)' }}>done right</span>
          </h1>
          <p style={{ color: 'rgba(255,255,255,.86)', fontSize: 19, lineHeight: 1.5, maxWidth: 560, margin: '22px 0 34px' }}>
            Windows, driveways, gutters, roofs &amp; more — booked online in under a minute. 100% satisfaction guaranteed or we rewash for free.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconLeft={<Icon name="calendar" size={20} />} onClick={() => go('Book')}>Book an Appointment</Button>
            <Button variant="dark" size="lg" onClick={() => go('Services')}>Explore Services</Button>
          </div>
          <div style={{ display: 'flex', gap: 26, marginTop: 40, flexWrap: 'wrap' }}>
            {[['star', '4.9 average rating'], ['shield-check', 'Licensed & insured'], ['clock', D.brand.hours]].map(([ic, t]) => (
              <span key={t} style={{ display: 'flex', gap: 9, alignItems: 'center', color: 'rgba(255,255,255,.85)', fontSize: 14.5, fontWeight: 500 }}><Icon name={ic} size={18} color="var(--orange-500)" />{t}</span>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section style={{ background: 'var(--paper)', padding: 'var(--section-pad) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <SectionLabel eyebrow="Our Services" title="Everything your property" highlight="needs" action={<Button variant="outline-accent" size="sm" iconRight={<Icon name="arrow-right" size={16} />} onClick={() => go('Services')}>All services</Button>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(230px,100%),1fr))', gap: 18, marginTop: 36 }}>
            {D.services.slice(0, 8).map((s, i) => (
              <ServiceCard key={s.title} icon={s.icon} title={s.title} description={s.desc} tone={i % 2 === 0 ? 'dark' : 'light'} onClick={() => go('Services')} />
            ))}
          </div>
        </div>
      </section>

      {/* Why us — black band */}
      <section style={{ background: 'var(--black-950)', padding: 'var(--section-pad) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <SectionLabel tone="dark" eyebrow="Why Rinse n Repeat" eyebrowVariant="orange" title="Homeowners keep" highlight="coming back" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(300px,100%),1fr))', gap: 18, marginTop: 36 }}>
            {D.features.map((f, i) => (
              <Card key={i} tone={f.tone} radius="xl" style={{ display: 'flex', flexDirection: 'column', gap: 16, minHeight: 180 }}>
                <span style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'rgba(242,106,33,.14)', color: 'var(--orange-500)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={f.icon} size={24} /></span>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: f.tone === 'dark' ? 'rgba(255,255,255,.86)' : 'var(--gray-700)' }}>
                  {f.body[0]}<b style={{ color: 'var(--orange-500)' }}>{f.body[1]}</b>{f.body[2]}
                </p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Recent projects */}
      <section style={{ background: 'var(--paper)', padding: 'var(--section-pad) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <SectionLabel eyebrow="Our Work" title="Recent" highlight="projects" action={<Button variant="outline-accent" size="sm" iconRight={<Icon name="arrow-right" size={16} />} onClick={() => go('Projects')}>View all</Button>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(300px,100%),1fr))', gap: 22, marginTop: 36 }}>
            {D.projects.map((p) => <ProjectCard key={p.caption} image={p.image} category={p.category} caption={p.caption} height={260} onClick={() => go('Projects')} />)}
          </div>
        </div>
      </section>

      {/* Reviews */}
      <section style={{ background: 'var(--black-950)', padding: 'var(--section-pad) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <SectionLabel tone="dark" eyebrow="Reviews" eyebrowVariant="orange" title="Rated 4.9 by your" highlight="neighbors" action={<Button variant="outline" size="sm" onClick={() => go('Reviews')}>Read all</Button>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(300px,100%),1fr))', gap: 18, marginTop: 36 }}>
            {D.reviews.slice(0, 3).map((r) => <ReviewCard key={r.name} tone="dark" {...r} />)}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{ background: 'var(--orange-500)', padding: 'clamp(48px,7vw,64px) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px,5.5vw,38px)', color: '#fff', margin: 0, letterSpacing: '-.01em' }}>Ready for a spotless property?</h2>
            <p style={{ color: 'rgba(255,255,255,.9)', fontSize: 17, margin: '10px 0 0' }}>Get a free quote today — no hidden fees, ever.</p>
          </div>
          <Button variant="dark" size="lg" iconRight={<Icon name="arrow-right" size={20} />} onClick={() => go('Book')}>Book Now</Button>
        </div>
      </section>
    </div>
  );
}

window.RNRHome = HomeScreen;