const { Button, Icon, Badge, ReviewCard, SectionLabel, Input, Textarea } = window.RinseNRepeatDesignSystem_9f80bd;

function ReviewsScreen({ go }) {
  const D = window.RNR_DATA;
  const [rating, setRating] = React.useState(5);
  const [sent, setSent] = React.useState(false);
  const stats = [['4.9', 'Average rating'], ['320+', 'Jobs completed'], ['98%', 'Would refer a friend']];
  return (
    <div>
      {window.RNRPageHead({ eyebrow: 'Reviews', title: 'What your neighbors', highlight: 'are saying', sub: 'Real reviews from residential and commercial customers across Plainfield & Naperville.' })}
      <section style={{ background: 'var(--paper)', padding: 'clamp(40px,7vw,56px) 0 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(220px,100%),1fr))', gap: 18, marginTop: -96 }}>
            {stats.map(([n, l]) => (
              <div key={l} style={{ background: 'var(--white)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', padding: '28px 24px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(36px,6vw,44px)', color: 'var(--orange-500)', lineHeight: 1 }}>{n}</div>
                <div style={{ color: 'var(--gray-600)', fontSize: 14.5, marginTop: 8, fontWeight: 500 }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(380px,100%),1fr))', gap: 18, marginTop: 40 }}>
            {D.reviews.map((r) => <ReviewCard key={r.name} {...r} />)}
          </div>
        </div>
      </section>

      {/* Leave a review */}
      <section style={{ background: 'var(--black-950)', padding: 'clamp(56px,9vw,80px) 0', marginTop: 'clamp(48px,8vw,72px)' }}>
        <div style={{ maxWidth: 620, margin: '0 auto', padding: '0 var(--gutter-x)', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', marginBottom: 18 }}><Badge variant="orange" dot>Leave a review</Badge></div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(27px,5.5vw,34px)', color: '#fff', margin: '0 0 8px' }}>How did we do?</h2>
          <p style={{ color: 'rgba(255,255,255,.65)', margin: '0 0 28px' }}>Your feedback helps us improve and helps neighbors find us.</p>
          {sent ? (
            <div style={{ background: 'var(--charcoal-700)', borderRadius: 'var(--radius-lg)', padding: 40, color: '#fff' }}>
              <span style={{ display: 'inline-flex', width: 56, height: 56, borderRadius: '50%', background: 'var(--success-500)', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name="check" size={30} color="#fff" strokeWidth={3} /></span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, margin: '0 0 6px' }}>Thank you!</h3>
              <p style={{ color: 'rgba(255,255,255,.7)', margin: 0 }}>Your review has been submitted.</p>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, textAlign: 'left' }}>
              <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                {[1, 2, 3, 4, 5].map((n) => (
                  <button key={n} onClick={() => setRating(n)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2 }}>
                    <Icon name="star" size={34} color={n <= rating ? 'var(--star-gold)' : 'rgba(255,255,255,.22)'} strokeWidth={0} />
                  </button>
                ))}
              </div>
              <Input tone="dark" label="Your name" placeholder="First name, last initial" />
              <Textarea tone="dark" label="Your review" rows={4} placeholder="Tell us about your experience…" />
              <Button variant="primary" size="lg" fullWidth onClick={() => setSent(true)}>Submit Review</Button>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}
window.RNRReviews = ReviewsScreen;