/* Testimonials.jsx — guest reviews carousel */

function Testimonials({ reviews }) {
  const [idx, setIdx] = React.useState(0);
  const list = Array.isArray(reviews) ? reviews : [];
  // Honesty: no real reviews → don't render fake/empty social proof at all.
  if (list.length === 0) return null;
  const r = list[Math.min(idx, list.length - 1)];

  return (
    <section className="section" style={{ background: 'var(--sand-100)' }}>
      <div className="container">
        <SectionOpener
          overline="Guest reviews"
          title="What guests say"
        />

        <div style={{
          maxWidth: 880, margin: '0 auto',
          background: '#fff', borderRadius: 18,
          padding: 48,
          boxShadow: 'var(--shadow-soft)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Subtle bg image */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${r.bg})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            opacity: 0.04, pointerEvents: 'none',
          }}/>

          <div style={{ position: 'relative', zIndex: 2 }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontSize: 'clamp(60px, 6vw, 96px)', lineHeight: 1,
              color: 'var(--sun-coral)', height: 32, marginBottom: 8,
            }}>"</div>
            <p key={idx} style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
              fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.45,
              color: 'var(--navy-900)', margin: '0 0 28px 0', textWrap: 'balance',
            }}>{r.text}</p>

            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              flexWrap: 'wrap', gap: 16,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 999,
                  background: 'var(--sunset-gradient)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20,
                }}>{(r.name && r.name[0]) || '★'}</div>
                <div>
                  <div style={{ fontWeight: 500, color: 'var(--navy-900)' }}>{r.name || 'Verified guest'}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{r.source ? `Verified · ${r.source}` : 'Verified guest'}</div>
                </div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <button onClick={() => setIdx((idx - 1 + list.length) % list.length)}
                  style={{
                    width: 40, height: 40, borderRadius: 999, border: '1px solid var(--line)',
                    background: '#fff', cursor: 'pointer', color: 'var(--navy-700)',
                  }}>←</button>
                <span style={{ fontFamily: 'var(--font-text)', fontFeatureSettings: '"tnum"',
                               fontSize: 13, color: 'var(--ink-500)' }}>
                  {String(idx + 1).padStart(2, '0')} / {String(list.length).padStart(2, '0')}
                </span>
                <button onClick={() => setIdx((idx + 1) % list.length)}
                  style={{
                    width: 40, height: 40, borderRadius: 999, border: '1px solid var(--line)',
                    background: '#fff', cursor: 'pointer', color: 'var(--navy-700)',
                  }}>→</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;