// REVIEWS — social proof, real-data-safe. No fabricated reviews/ratings.
// Renders ONLY owner-approved real reviews from window.SZ_getApprovedReviews()
// (see reviews.js). Supports both text cards (ReviewSlot) and video cards
// (VideoReviewCard). Mobile: horizontal swipe carousel. Desktop: 3-col grid.

// ---------------------------------------------------------------------------
// VideoReviewCard — premium card for TikTok / Instagram / Facebook video posts
// ---------------------------------------------------------------------------
function VideoReviewCard({ review }) {
  const isTikTok  = review.videoPlatform === 'tiktok';
  const isFB      = review.videoPlatform === 'facebook';
  const isIG      = review.videoPlatform === 'instagram';

  const TikTokIcon = () => (
    <svg width="11" height="13" viewBox="0 0 11 13" fill="white" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.47.04H6.4v8.79a1.99 1.99 0 01-1.98 1.99A1.99 1.99 0 012.44 8.83a1.99 1.99 0 011.98-1.99c.19 0 .38.03.55.08V4.82a4.02 4.02 0 00-.55-.04A4.02 4.02 0 000 8.83a4.02 4.02 0 004.02 4.02 4.02 4.02 0 004.02-4.02V4.33A6.55 6.55 0 0011 5.35V3.28A4.62 4.62 0 018.47.04z"/>
    </svg>
  );

  const FacebookIcon = () => (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="white" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 6A6 6 0 100 6a6 6 0 0012 0zm-6.6 4.5V6.9H3.8V5.5h1.6V4.5c0-1.57.94-2.4 2.3-2.4.65 0 1.35.05 1.35.05V3.7H8.2c-.74 0-.96.47-.96.94v1.06h1.64L8.6 6.9H7.24v3.6H5.4z"/>
    </svg>
  );

  const InstagramIcon = () => (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="white" xmlns="http://www.w3.org/2000/svg">
      <path d="M6 0C4.37 0 4.16.01 3.52.04 2.88.07 2.45.17 2.07.32a3.07 3.07 0 00-1.11.72A3.07 3.07 0 00.24 2.07C.09 2.45 0 2.88-.03 3.52-.06 4.16-.07 4.37-.07 6s.01 1.84.04 2.48c.03.64.13 1.07.28 1.45.16.38.36.7.72 1.06.36.36.68.56 1.06.72.38.15.81.25 1.45.28C4.16 11.99 4.37 12 6 12s1.84-.01 2.48-.04c.64-.03 1.07-.13 1.45-.28.38-.16.7-.36 1.06-.72.36-.36.56-.68.72-1.06.15-.38.25-.81.28-1.45.03-.64.04-.85.04-2.48s-.01-1.84-.04-2.48c-.03-.64-.13-1.07-.28-1.45a3.07 3.07 0 00-.72-1.11A3.07 3.07 0 009.93.24C9.55.09 9.12 0 8.48-.03 7.84-.06 7.63-.07 6-.07zm0 1.08c1.6 0 1.8.01 2.43.04.59.03.9.12 1.12.2.28.11.48.24.69.45.21.21.34.41.45.69.08.21.17.53.2 1.12.03.63.04.82.04 2.42 0 1.6-.01 1.8-.04 2.43-.03.59-.12.9-.2 1.12-.11.28-.24.48-.45.69-.21.21-.41.34-.69.45-.21.08-.53.17-1.12.2-.63.03-.82.04-2.43.04-1.6 0-1.8-.01-2.43-.04-.59-.03-.9-.12-1.12-.2-.28-.11-.48-.24-.69-.45-.21-.21-.34-.41-.45-.69-.08-.21-.17-.53-.2-1.12C1.09 7.8 1.08 7.6 1.08 6c0-1.6.01-1.8.04-2.43.03-.59.12-.9.2-1.12.11-.28.24-.48.45-.69.21-.21.41-.34.69-.45.21-.08.53-.17 1.12-.2.63-.03.82-.04 2.43-.04zm0 1.84a3.08 3.08 0 100 6.16 3.08 3.08 0 000-6.16zM6 8a2 2 0 110-4 2 2 0 010 4zm3.92-4.67a.72.72 0 11-1.44 0 .72.72 0 011.44 0z"/>
    </svg>
  );

  const platformLabel = isTikTok ? 'TikTok' : isFB ? 'Facebook' : 'Instagram';
  const PlatformIcon  = isTikTok ? TikTokIcon : isFB ? FacebookIcon : InstagramIcon;

  return (
    <a
      href={review.sourceUrl}
      target="_blank"
      rel="noreferrer noopener"
      style={{ textDecoration: 'none', display: 'block', height: '100%', color: 'inherit' }}
    >
      <div style={{
        background: 'rgba(22,18,15,0.80)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: '1px solid rgba(251,244,234,0.09)',
        borderRadius: 18,
        overflow: 'hidden',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        transition: 'border-color 0.2s, box-shadow 0.2s',
        boxShadow: '0 8px 32px rgba(0,0,0,0.45)',
      }}>

        {/* ── Thumbnail / video preview ── */}
        <div style={{
          position: 'relative',
          aspectRatio: '4 / 3',
          background: 'linear-gradient(148deg, rgba(227,99,23,0.14) 0%, #0D0B09 65%)',
          overflow: 'hidden',
          flexShrink: 0,
        }}>
          {/* Real thumbnail if available */}
          {review.image ? (
            <img
              src={review.image}
              alt=""
              loading="lazy"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', display: 'block',
              }}
            />
          ) : (
            /* Brand placeholder — looks premium even without a thumbnail */
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <span style={{
                fontFamily: 'var(--font-jp)',
                fontSize: 28, color: 'rgba(251,244,234,0.18)',
                letterSpacing: '0.2em',
              }}>醤油漬け</span>
              <span style={{
                fontFamily: 'var(--font-body)',
                fontSize: 9, color: 'rgba(251,244,234,0.25)',
                letterSpacing: '0.3em', textTransform: 'uppercase',
              }}>Customer Review</span>
            </div>
          )}

          {/* Bottom gradient fade */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%',
            background: 'linear-gradient(to top, rgba(13,11,9,0.95) 0%, transparent 100%)',
            pointerEvents: 'none',
          }} />

          {/* ── Play button ── */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            pointerEvents: 'none',
          }}>
            <div style={{
              width: 52, height: 52, borderRadius: '50%',
              background: 'rgba(255,255,255,0.10)',
              backdropFilter: 'blur(12px)',
              WebkitBackdropFilter: 'blur(12px)',
              border: '1.5px solid rgba(255,255,255,0.30)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
            }}>
              {/* Triangle */}
              <div style={{
                width: 0, height: 0,
                borderTop: '8px solid transparent',
                borderBottom: '8px solid transparent',
                borderLeft: '15px solid rgba(255,255,255,0.90)',
                marginLeft: 5,
              }} />
            </div>
          </div>

          {/* ── Platform badge ── */}
          <div style={{
            position: 'absolute', top: 10, left: 10,
            background: 'rgba(10,8,6,0.70)',
            backdropFilter: 'blur(10px)',
            WebkitBackdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,0.11)',
            borderRadius: 999,
            padding: '4px 10px 4px 8px',
            display: 'flex', alignItems: 'center', gap: 5,
          }}>
            <PlatformIcon />
            <span style={{
              color: 'rgba(255,255,255,0.92)',
              fontSize: 11, fontWeight: 600,
              fontFamily: 'var(--font-body)',
              letterSpacing: '0.02em',
            }}>{platformLabel}</span>
          </div>
        </div>

        {/* ── Card body ── */}
        <div style={{
          padding: '14px 16px 18px',
          flex: 1, display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center',
            justifyContent: 'space-between', gap: 8,
          }}>
            <span style={{
              color: 'var(--shoyu-orange)',
              fontFamily: 'var(--font-body)',
              fontWeight: 700, fontSize: 13,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{review.handle}</span>
            {review.date && (
              <span style={{
                color: 'var(--text-faint)', fontSize: 11,
                fontFamily: 'var(--font-body)', flexShrink: 0,
              }}>{review.date}</span>
            )}
          </div>

          {review.text && (
            <p style={{
              color: 'var(--text-muted)',
              fontSize: 13.5, lineHeight: 1.55,
              margin: 0, flex: 1,
              display: '-webkit-box',
              WebkitLineClamp: 3,
              WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
              fontFamily: 'var(--font-body)',
            }}>{review.text}</p>
          )}

          {/* Watch CTA */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 5,
            color: 'var(--shoyu-orange)',
            fontSize: 12, fontWeight: 600,
            fontFamily: 'var(--font-body)',
            marginTop: review.text ? 6 : 0,
          }}>
            <span>Watch video</span>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
              stroke="currentColor" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 6h8M7 3l3 3-3 3"/>
            </svg>
          </div>
        </div>
      </div>
    </a>
  );
}
window.VideoReviewCard = VideoReviewCard;

// ---------------------------------------------------------------------------
// Reviews section
// ---------------------------------------------------------------------------
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;

  // Wrap each card in sz-reviews-card-wrap for mobile scroll-snap
  const renderReview = (r, i) => {
    let inner;
    if (r.isVideo || r.videoPlatform) {
      inner = <VideoReviewCard review={r} />;
    } else {
      const post = window.SZ_toReviewPost(r);
      const slot = <ReviewSlot state="real" post={post} />;
      inner = r.sourceUrl
        ? <a href={r.sourceUrl} target="_blank" rel="noreferrer"
            style={{ textDecoration: 'none', display: 'block', height: '100%' }}>{slot}</a>
        : slot;
    }
    return (
      <div key={i} className="sz-reviews-card-wrap" style={{ minWidth: 0 }}>
        {inner}
      </div>
    );
  };

  return (
    <section id="reviews" className="section" style={{ background: 'transparent' }}>
      <div className="container container-wide">
        {/* Section header */}
        <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>

        {/* Reviews grid / carousel */}
        {hasReviews ? (
          <div
            className="sz-reviews-grid"
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 'var(--space-4)',
              alignItems: 'start',
            }}
          >
            {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>
        )}

        {/* Social CTAs */}
        <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;
