// Crown Heights testimonials carousel — replaces the walkability ledger.
// Rotating editorial-style review cards. Each one shows a quote, the
// reviewer's first name, where they came from, and which Dyra home they
// stayed in. Auto-advances every 7s; user can also click dots / arrows.
// Style continues the magazine-spread feel — generous serif, paper bg,
// no avatars (those would feel like AI slop here). Just typography.

function TestimonialsCarousel({ p, serif, hebFont }) {
  const paper = p.card || '#f5efe3';
  const line = p.line || '#d9cfba';
  const ink = p.ink || '#2a241c';
  const muted = p.muted || '#6b5e47';
  const accent = p.accent || '#b8532a';

  // Real-feeling reviews from a kosher rental audience: kashrus details,
  // Shabbos, Yom Tov, simchos, family travel. Each ends with a first name +
  // initial of last name (the inline-comment ask: "first names at the end").
  const reviews = [
    {
      stars: 5,
      heb: 'מדהים',
      headline: 'The kitchen was actually kosher — not just labeled.',
      body: 'Two sinks, two dishwashers, separated meat and milk down to the dish towels. We brought our 9-year-old who keeps strict — for the first time on a trip, she ate everything. The Shabbos lamps were already set. We did nothing.',
      stay: 'The 770 · 4 nights · Shabbos Parshas Mishpatim',
      name: 'Chana M.',
      location: 'Lakewood, NJ',
    },
    {
      stars: 5,
      heb: 'מומלץ מאוד',
      headline: 'Showed up with three kids and a stroller. They had a Pack-n-Play already up.',
      body: 'My in-laws came in from Eretz Yisroel and we needed two beds in a kid-safe room. Dyra moved furniture. They messaged me at 11pm to confirm hot water. Who does that.',
      stay: 'Brooklyn Ave · 5 nights · family Yom Tov',
      name: 'Dovid K.',
      location: 'Toronto, Canada',
    },
    {
      stars: 5,
      heb: 'נקי וחם',
      headline: 'I have a wheelchair. They walked me through every threshold before I booked.',
      body: 'Other rentals say "accessible" and you arrive to four steps. Dyra sent measurements, photos of the bathroom doorway, even the slope of the ramp at 770. I cried a little when we got there. Everything fit.',
      stay: 'Empire Suite · 3 nights',
      name: 'Miriam S.',
      location: 'Manchester, UK',
    },
    {
      stars: 5,
      heb: 'בעזרת השם',
      headline: 'Booked a sheva brachos for 22 people on 6 days notice.',
      body: 'They flipped the dining room into a long table, set up a side room for the kallah, sourced a hot box. The bochurim slept four to a room — clean linens stacked in every closet. Best decision of the week.',
      stay: 'President Pl · 2 nights',
      name: 'Mendy B.',
      location: 'Crown Heights local',
    },
    {
      stars: 5,
      heb: 'מצוין',
      headline: 'Came in for Gimmel Tammuz. Felt like a home, not a hotel.',
      body: 'Walked to the Ohel in fifteen minutes. Came back to a quiet apartment that smelled like cholent — they\'d sent over a tray from the bakery. I will only stay with them now.',
      stay: 'Kingston House · 3 nights',
      name: 'Yossi R.',
      location: 'Melbourne, Australia',
    },
    {
      stars: 5,
      heb: 'שבת קודש',
      headline: 'Friday afternoon panic — they answered on the second ring.',
      body: 'I forgot a hairdryer was muktza-controlled and couldn\'t figure out the switches. Their on-call rebbetzin walked me through it before licht bentchen. Real people, real understanding.',
      stay: 'Crown Studio · 2 nights',
      name: 'Rivka T.',
      location: 'Miami, FL',
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % reviews.length), 7000);
    return () => clearInterval(t);
  }, [paused, reviews.length]);

  const review = reviews[idx];
  const goto = (i) => setIdx(((i % reviews.length) + reviews.length) % reviews.length);

  const Star = ({ filled }) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill={filled ? accent : 'none'} stroke={accent} strokeWidth="1.5">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" strokeLinejoin="round"/>
    </svg>
  );

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        background: paper,
        border: `1px solid ${line}`,
        borderRadius: 14,
        padding: '56px 64px 48px',
        position: 'relative',
        overflow: 'hidden',
        minHeight: 460,
      }}
    >
      {/* Decorative top label — Hebrew + English split */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderBottom: `1px solid ${line}`, paddingBottom: 20, marginBottom: 36,
      }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: muted, marginBottom: 4 }}>
            From our guests
          </div>
          <div style={{ fontFamily: serif, fontSize: 28, color: ink, lineHeight: 1 }}>
            What they said about staying with Dyra
          </div>
        </div>
        <div style={{ fontFamily: hebFont, fontSize: 22, color: accent, direction: 'rtl' }}>
          מן האורחים
        </div>
      </div>

      {/* Slide content — keyed by index so React fades it in cleanly */}
      <div key={idx} style={{ animation: 'tFade 600ms ease-out' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
          {Array.from({ length: 5 }).map((_, i) => <Star key={i} filled={i < review.stars}/>)}
          <span style={{ marginLeft: 14, fontFamily: hebFont, fontSize: 15, color: accent, direction: 'rtl' }}>
            {review.heb}
          </span>
        </div>

        <div style={{
          fontFamily: serif, fontSize: 32, lineHeight: 1.25, letterSpacing: '-0.005em',
          color: ink, marginBottom: 22, maxWidth: 880,
        }}>
          &ldquo;{review.headline}&rdquo;
        </div>

        <div style={{
          fontSize: 16, lineHeight: 1.7, color: muted, marginBottom: 32,
          maxWidth: 720,
        }}>
          {review.body}
        </div>

        {/* Attribution line — name at the end, per inline comment */}
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap',
          paddingTop: 22, borderTop: `1px solid ${line}`,
        }}>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted }}>
            {review.stay}
          </div>
          <div style={{ flex: 1, minWidth: 20 }}/>
          <div style={{ fontFamily: serif, fontSize: 20, color: ink }}>
            — {review.name}
          </div>
          <div style={{ fontSize: 12, color: muted }}>
            {review.location}
          </div>
        </div>
      </div>

      {/* Controls — arrows + dots, anchored bottom-right */}
      <div style={{
        position: 'absolute', bottom: 22, right: 28,
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <button onClick={() => goto(idx - 1)} aria-label="Previous review" style={ctlBtn(line, ink)}>‹</button>
        <div style={{ display: 'flex', gap: 6 }}>
          {reviews.map((_, i) => (
            <button
              key={i}
              onClick={() => setIdx(i)}
              aria-label={`Review ${i + 1}`}
              style={{
                width: i === idx ? 22 : 7, height: 7, padding: 0, border: 'none',
                borderRadius: 4, background: i === idx ? accent : line,
                cursor: 'pointer', transition: 'all 240ms',
              }}
            />
          ))}
        </div>
        <button onClick={() => goto(idx + 1)} aria-label="Next review" style={ctlBtn(line, ink)}>›</button>
      </div>

      {/* Counter — bottom-left, editorial pagination feel */}
      <div style={{
        position: 'absolute', bottom: 22, left: 32,
        fontFamily: serif, fontSize: 13, color: muted, fontVariantNumeric: 'tabular-nums',
        letterSpacing: '0.04em',
      }}>
        <span style={{ color: ink }}>{String(idx + 1).padStart(2, '0')}</span>
        <span style={{ margin: '0 6px', color: line }}>/</span>
        <span>{String(reviews.length).padStart(2, '0')}</span>
      </div>

      <style>{`
        @keyframes tFade {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function ctlBtn(line, ink) {
  return {
    width: 32, height: 32, padding: 0,
    background: 'transparent', border: `1px solid ${line}`,
    borderRadius: 16, cursor: 'pointer', color: ink,
    fontSize: 18, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

window.TestimonialsCarousel = TestimonialsCarousel;