/* WhyUs — editorial-numbered benefits, no slop icons */

function WhyUs() {
  const BENEFITS = [
    {
      no: '01',
      title: 'Curated, not aggregated.',
      description: 'Every destination on our atlas has been visited by a member of the team — usually in the last twelve months. We sell only what we would book ourselves.',
    },
    {
      no: '02',
      title: 'Best price, in writing.',
      description: 'Find a like-for-like itinerary elsewhere and we match it, plus a 5% credit toward your next trip. No fine print. We send the comparison in writing.',
    },
    {
      no: '03',
      title: 'One person, one phone.',
      description: 'Your planner is the same person who answers when something changes at 3am in Tokyo. No call centers, no ticket numbers, no "let me transfer you."',
    },
    {
      no: '04',
      title: 'Plans that bend.',
      description: 'Free changes up to 48 hours from departure and a flat re-route policy after that. Weather happens. Moods happen. We built our terms for that.',
    },
  ];

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

        {/* Header */}
        <div className="grid md:grid-cols-12 gap-10 items-end mb-20">
          <div className="md:col-span-7">
            <p className="section-label mb-5 eyebrow-dot">The Be Happy difference</p>
            <h2 className="serif tracking-[-0.025em] leading-[0.96]"
              style={{ fontSize: 'clamp(2.6rem, 6vw, 5rem)', color: 'var(--ink)' }}>
              Travel built<br/>
              <span className="serif-it" style={{ color: 'var(--sky-deep)' }}>around you</span>,<br/>
              not the other way around.
            </h2>
          </div>
          <div className="md:col-span-4 md:col-start-9">
            <p className="text-[15px] leading-relaxed" style={{ color: 'var(--ink-soft)' }}>
              We're a small team — sixteen of us — and we keep it that way on purpose.
              It's how every traveler ends up with a planner who actually remembers their name.
            </p>
          </div>
        </div>

        {/* 2x2 large editorial grid */}
        <div className="grid md:grid-cols-2 gap-[1px]" style={{ background: 'var(--hairline)' }}>
          {BENEFITS.map((b) => (
            <div key={b.no}
              className="group p-10 md:p-14 transition-colors duration-300"
              style={{ background: 'var(--white)' }}>
              <div className="flex items-baseline gap-4 mb-6">
                <span className="serif text-[15px]" style={{ color: 'var(--muted)' }}>— {b.no}</span>
                <span className="h-px flex-1 mt-3" style={{ background: 'var(--hairline)' }} />
              </div>
              <h3 className="serif tracking-[-0.02em] leading-[1.08] mb-5"
                style={{ fontSize: 'clamp(1.7rem, 2.6vw, 2.2rem)', color: 'var(--ink)' }}>
                {b.title}
              </h3>
              <p className="text-[15px] leading-relaxed max-w-md" style={{ color: 'var(--body)' }}>
                {b.description}
              </p>
            </div>
          ))}
        </div>

        {/* Quiet footer line */}
        <div className="mt-14 text-center">
          <p className="serif-it text-[20px] mb-6" style={{ color: 'var(--ink-soft)' }}>
            "We answered the phone in fifteen seconds. From a riad in Marrakech."
          </p>
          <p className="text-[12px] tracking-[0.14em] uppercase" style={{ color: 'var(--muted)' }}>
            — A traveler, March 2026
          </p>
        </div>
      </div>
    </section>
  );
}

window.WhyUs = WhyUs;