// REVIEWS — social proof, real-data-safe. No fabricated reviews/ratings.
// Renders ONLY owner-approved real reviews from window.SZ_getApprovedReviews()
// (see reviews.js). With none approved yet, it shows a polished empty state.
function Reviews() {
  const { ReviewSlot, Button } = window.ShoyuzukeDesignSystem_1a4266;
  const Icon = window.Icon;

  const approved = (typeof window.SZ_getApprovedReviews === 'function')
    ? window.SZ_getApprovedReviews()
    : [];
  const hasReviews = approved.length > 0;

  // One real, approved review → tappable card linking to its public proof.
  const renderReview = (r, i) => {
    const post = window.SZ_toReviewPost(r);
    const card = <ReviewSlot key={i} state="real" post={post} />;
    if (!r.sourceUrl) return card;
    return (
      <a key={i} href={r.sourceUrl} target="_blank" rel="noreferrer"
        style={{ textDecoration: 'none', display: 'block' }}
        title="View the original post">
        {card}
      </a>
    );
  };

  return (
    <section id="reviews" className="section" style={{ background: 'transparent' }}>
      <div className="container container-wide">
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto var(--space-6)' }}>
          <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>Loved by customers</span>
          <h2 className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>Real customer reviews</h2>
          <p className="t-lead" style={{ color: 'var(--text-muted)', marginTop: 8 }}>
            Only real, approved posts from our Instagram and TikTok appear here. We never write our own reviews.
          </p>
        </div>

        {hasReviews ? (
          <div className="sz-reviews-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-4)' }}>
            {approved.map(renderReview)}
          </div>
        ) : (
          <div style={{
            maxWidth: 560, margin: '0 auto', textAlign: 'center',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
            padding: 'var(--space-7) var(--space-6)',
            background: 'rgba(28,23,20,0.50)',
            backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
            border: '1px dashed rgba(251,244,234,0.16)', borderRadius: 'var(--radius-xl)',
            boxShadow: '0 2px 0 rgba(251,244,234,0.04) inset, 0 14px 40px rgba(0,0,0,0.5)',
          }}>
            <span className="t-jp" style={{ fontSize: 30, color: 'var(--text-faint)' }}>醤油漬け</span>
            <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 18, color: 'var(--text-strong)' }}>
              Real customer reviews will appear here soon.
            </h3>
            <p className="t-body" style={{ color: 'var(--text-muted)', maxWidth: 420 }}>
              We only feature genuine, customer-approved posts from our social channels.
              Tried a flavour? Tag <strong style={{ color: 'var(--shoyu-orange)' }}>@shoyuzukemnl</strong> and you might see yourself here.
            </p>
          </div>
        )}

        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 'var(--space-6)', flexWrap: 'wrap' }}>
          <Button as="a" href="https://instagram.com/shoyuzukemnl" target="_blank" rel="noreferrer" variant="secondary" iconLeft={<Icon name="Instagram" size={18} />}>@shoyuzukemnl</Button>
          <Button as="a" href="https://tiktok.com/@shoyuzukemnl" target="_blank" rel="noreferrer" variant="secondary" iconLeft={<Icon name="Music2" size={18} />}>TikTok</Button>
        </div>
      </div>
    </section>
  );
}
window.Reviews = Reviews;