/* Testimonials — quiet editorial quotes (NEW section) */

function Testimonials() {
  const QUOTES = [
    {
      quote: "We told them we wanted to feel less like tourists. They sent us to a tiny vineyard in Piedmont that wasn't on any list. Best week of our marriage.",
      name: 'Hannah & David L.',
      trip: 'Northern Italy · 9 nights',
      slot: 'testi-1',
    },
    {
      quote: "The flight got rerouted at 11pm. By the time we landed, our planner had already moved the next three hotels. I didn't have to do a thing.",
      name: 'Renée S.',
      trip: 'Tokyo → Kyoto · 12 nights',
      slot: 'testi-2',
    },
    {
      quote: "I've used four other agencies. Be Happy is the first one that felt like it was actually about us, not about selling us another upgrade.",
      name: 'Marcus T.',
      trip: 'Maldives · 7 nights',
      slot: 'testi-3',
    },
  ];

  return (
    <section id="testimonials" className="section" style={{ background: 'var(--cream-soft)' }}>
      <div className="container">

        {/* Header */}
        <div className="grid md:grid-cols-12 gap-8 items-end mb-20">
          <div className="md:col-span-8">
            <p className="section-label mb-5 eyebrow-dot">From the people who went</p>
            <h2 className="serif tracking-[-0.025em] leading-[0.96]"
              style={{ fontSize: 'clamp(2.6rem, 6vw, 5rem)', color: 'var(--ink)' }}>
              Letters home,<br/>
              <span className="serif-it" style={{ color: 'var(--sky-deep)' }}>occasionally</span>.
            </h2>
          </div>
          <div className="md:col-span-3 md:col-start-10 text-right">
            <div className="serif text-[44px] leading-none mb-1" style={{ color: 'var(--ink)' }}>4.9</div>
            <div className="flex justify-end gap-0.5 mb-2">
              {[1,2,3,4,5].map(i => (
                <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="var(--terra)" stroke="none">
                  <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"/>
                </svg>
              ))}
            </div>
            <p className="text-[12px]" style={{ color: 'var(--muted)' }}>From 2,400 verified reviews</p>
          </div>
        </div>

        {/* Featured quote — large */}
        <div className="grid md:grid-cols-12 gap-10 items-center mb-20">
          <div className="md:col-span-5">
            <div className="relative rounded-[28px] overflow-hidden aspect-[4/5] bg-[var(--paper)]" style={{ boxShadow: '0 14px 40px rgba(20,20,20,0.08)' }}>
              <image-slot id="testi-feature" shape="rect" placeholder="Drop a traveler portrait"></image-slot>
            </div>
          </div>
          <div className="md:col-span-7">
            <svg width="36" height="28" viewBox="0 0 36 28" className="mb-6" style={{ color: 'var(--sky)' }}>
              <path fill="currentColor" d="M0 28V16c0-9 5-15 14-16v6c-5 1-8 5-8 10h8v12H0zm22 0V16c0-9 5-15 14-16v6c-5 1-8 5-8 10h8v12H22z"/>
            </svg>
            <blockquote className="serif tracking-[-0.015em] leading-[1.18] mb-9"
              style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', color: 'var(--ink)' }}>
              They listened for forty minutes before they suggested a thing.
              Then they built us a month in Patagonia we'd never have found on our own —
              <span className="serif-it" style={{ color: 'var(--sky-deep)' }}> right down to the bakery in El Chaltén</span>.
            </blockquote>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full overflow-hidden bg-[var(--paper)]">
                <image-slot id="testi-avatar" shape="circle" placeholder="Avatar"></image-slot>
              </div>
              <div>
                <p className="text-[14px] font-medium" style={{ color: 'var(--ink)' }}>Priya &amp; Anand K.</p>
                <p className="text-[12px]" style={{ color: 'var(--muted)' }}>Argentina &amp; Chile · 28 nights · Feb 2026</p>
              </div>
            </div>
          </div>
        </div>

        {/* Three short quotes */}
        <div className="grid md:grid-cols-3 gap-5">
          {QUOTES.map((q, i) => (
            <figure key={i} className="rounded-3xl p-8 flex flex-col h-full"
              style={{ background: 'var(--white)', border: '1px solid var(--hairline)' }}>
              <div className="flex gap-0.5 mb-5">
                {[1,2,3,4,5].map(s => (
                  <svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="var(--terra)" stroke="none">
                    <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"/>
                  </svg>
                ))}
              </div>
              <blockquote className="text-[15px] leading-relaxed flex-1 mb-7" style={{ color: 'var(--ink-soft)' }}>
                "{q.quote}"
              </blockquote>
              <figcaption className="flex items-center gap-3 pt-5 border-t border-[var(--hairline)]">
                <div className="w-9 h-9 rounded-full overflow-hidden bg-[var(--paper)] shrink-0">
                  <image-slot id={q.slot} shape="circle" placeholder=""></image-slot>
                </div>
                <div>
                  <p className="text-[13px] font-medium" style={{ color: 'var(--ink)' }}>{q.name}</p>
                  <p className="text-[11px]" style={{ color: 'var(--muted)' }}>{q.trip}</p>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;