// Reviews — static Google testimonials + custom partial-fill star rating widget
const reviewsDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

// Custom 5-star rating with accurate per-star fractional fill (gap-independent)
function StarRating({ value = 0, size = 22, gap = 3, empty = 'var(--cream-300)', fill = '#F5A623' }) {
  const STAR = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z';
  const Star = ({ frac }) => (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill={empty} style={{ position: 'absolute', inset: 0, display: 'block' }} aria-hidden="true">
        <path d={STAR} />
      </svg>
      <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: `${frac * 100}%`, overflow: 'hidden' }}>
        <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} style={{ display: 'block' }} aria-hidden="true">
          <path d={STAR} />
        </svg>
      </div>
    </div>
  );
  return (
    <div role="img" aria-label={`${value} out of 5 stars`} style={{ display: 'inline-flex', gap, lineHeight: 0 }}>
      {[0, 1, 2, 3, 4].map((i) => <Star key={i} frac={Math.max(0, Math.min(1, value - i))} />)}
    </div>
  );
}

// Google 'G' mark (nominative use, for linking to the Google listing)
function GoogleG({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}>
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
    </svg>
  );
}

function QuoteMark() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="var(--chili-500)" aria-hidden="true" style={{ opacity: 0.16 }}>
      <path d="M7.17 6A5.17 5.17 0 0 0 2 11.17V18h6.83v-6.83H5.5A1.67 1.67 0 0 1 7.17 9.5zM18.83 6a5.17 5.17 0 0 0-5.16 5.17V18h6.83v-6.83h-3.34A1.67 1.67 0 0 1 18.83 9.5z" />
    </svg>
  );
}

function ReviewCard({ quote, source }) {
  return (
    <figure className="tvc-review-card" style={{
      margin: 0, background: 'var(--cream-50)', border: '1px solid var(--cream-300)',
      borderRadius: 'var(--radius-lg)', padding: 'clamp(22px, 2.6vw, 30px)',
      boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 12,
      transition: 'transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out)',
    }}>
      <QuoteMark />
      <blockquote style={{ margin: 0, color: 'var(--char-700)', fontSize: '1rem', lineHeight: 1.6 }}>
        {quote}
      </blockquote>
      <figcaption style={{ marginTop: 'auto', paddingTop: 8, display: 'flex', alignItems: 'center', gap: 8, color: 'var(--char-500)', fontSize: '0.85rem', fontWeight: 600 }}>
        <GoogleG size={16} />
        <span>{source}</span>
      </figcaption>
    </figure>
  );
}

function Reviews() {
  const { SectionHeading } = reviewsDS;
  const {
    REVIEWS = [], GOOGLE_RATING = 0, GOOGLE_REVIEW_COUNT = 0,
    GOOGLE_REVIEWS_URL = '#', GOOGLE_WRITE_REVIEW_URL = '#',
  } = window;

  return (
    <section id="reviews" style={{ background: 'var(--cream-50)', padding: 'var(--section-y) 0' }} data-reveal>
      <style>{`
        .tvc-review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
        @media (max-width:520px){.tvc-rev-divider{display:none;}}
      `}</style>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading align="center"
          eyebrow="Loved In Tulsa"
          title="What Our Guests Say"
          description="Real reviews from real diners on Google. Come taste why Tulsa keeps coming back." />

        {/* Rating summary widget */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'clamp(26px, 3vw, 40px)' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 'clamp(18px, 3vw, 30px)', flexWrap: 'wrap', justifyContent: 'center',
            background: 'var(--cream-100)', border: '1px solid var(--cream-300)',
            borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 38px)',
            boxShadow: 'var(--shadow-sm)',
          }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.8rem, 6vw, 3.6rem)', lineHeight: 1, color: 'var(--char-900)' }}>
                {Number(GOOGLE_RATING).toFixed(1)}
              </div>
              <div style={{ marginTop: 8 }}><StarRating value={GOOGLE_RATING} size={20} /></div>
            </div>
            <div className="tvc-rev-divider" style={{ width: 1, alignSelf: 'stretch', background: 'var(--cream-300)' }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9, minWidth: 180 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <GoogleG size={22} />
                <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, color: 'var(--char-900)', fontSize: '1.05rem' }}>Google Rating</span>
              </div>
              <div style={{ color: 'var(--char-500)', fontSize: '0.95rem' }}>
                Based on <strong style={{ color: 'var(--char-700)' }}>{Number(GOOGLE_REVIEW_COUNT).toLocaleString()}</strong> reviews
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginTop: 2 }}>
                <a href={GOOGLE_REVIEWS_URL} target="_blank" rel="noopener noreferrer"
                  style={{ color: 'var(--chili-500)', fontWeight: 700, fontSize: '0.9rem', textDecoration: 'none' }}>
                  Read all reviews
                </a>
                <span style={{ color: 'var(--cream-300)' }}>·</span>
                <a href={GOOGLE_WRITE_REVIEW_URL} target="_blank" rel="noopener noreferrer"
                  style={{ color: 'var(--char-700)', fontWeight: 700, fontSize: '0.9rem', textDecoration: 'none' }}>
                  Leave a review
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Review cards */}
        <div style={{
          display: 'grid', gap: 'clamp(16px, 2vw, 24px)', marginTop: 'clamp(30px, 3.5vw, 48px)',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        }}>
          {REVIEWS.map((r, i) => <ReviewCard key={i} quote={r.quote} source={r.source} />)}
        </div>

        <p style={{ textAlign: 'center', color: 'var(--char-500)', fontSize: '0.78rem', marginTop: 'clamp(20px, 2.5vw, 28px)' }}>
          Reviews are from Google. Google and the Google logo are trademarks of Google LLC.
        </p>
      </div>
    </section>
  );
}
window.Reviews = Reviews;