/* Destinations — photo-led editorial cards with drop-in image-slot.
   Asymmetric, handhold-flavored: large cards, generous whitespace,
   tiny labels, one italic word in the headline. */

function DestCard({ dest, large }) {
  const cardRef = useCardTilt(large ? 5 : 7);
  return (
    <article ref={cardRef}
      id={`dest-${dest.id}`}
      className="dest-card card-3d relative rounded-[28px] overflow-hidden cursor-pointer group"
      style={{
        aspectRatio: large ? '4/5' : '4/5.2',
        background: dest.fallback,
        boxShadow: '0 10px 30px rgba(20,20,20,0.08)',
      }}>

      {/* User-droppable image slot — persists between reloads */}
      <image-slot
        id={`destimg-${dest.id}`}
        shape="rect"
        placeholder={`Drop a photo of ${dest.name}`}
      ></image-slot>

      {/* Tint + bottom shade */}
      <div className="absolute inset-0 pointer-events-none z-[2]"
        style={{ background: 'linear-gradient(to top, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.15) 40%, transparent 65%)' }} />

      {/* Top-left small label */}
      <div className="absolute top-5 left-5 z-[3] flex items-center gap-2">
        <span className="px-2.5 py-1 rounded-full bg-white/85 backdrop-blur-sm text-[10px] uppercase tracking-[0.12em] text-[var(--ink)] font-medium">
          {dest.region}
        </span>
      </div>

      {/* Top-right index numeral */}
      <div className="absolute top-5 right-5 z-[3]">
        <span className="serif text-white/85 text-[18px] tracking-[-0.01em]">— {dest.no}</span>
      </div>

      {/* Bottom content */}
      <div className="absolute left-0 right-0 bottom-0 p-6 z-[3] flex items-end justify-between gap-4">
        <div>
          <p className="text-white/70 text-[11px] tracking-[0.16em] uppercase mb-1.5">{dest.tag}</p>
          <h3 className="serif text-white tracking-[-0.02em] leading-[0.95]"
            style={{ fontSize: large ? 'clamp(2rem, 3.4vw, 2.7rem)' : 'clamp(1.7rem, 2.6vw, 2.1rem)' }}>
            {dest.name.split(' ').map((w, i, arr) => (
              <span key={i}>
                {i === arr.length - 1 ? <em className="serif-it">{w}</em> : w}
                {i < arr.length - 1 ? ' ' : ''}
              </span>
            ))}
          </h3>
          <p className="text-white/75 text-[12px] mt-2">
            {dest.nights} · from <span className="text-white">{dest.price}</span>
          </p>
        </div>
        <div className="w-10 h-10 rounded-full bg-white/15 border border-white/30 backdrop-blur-sm flex items-center justify-center shrink-0 group-hover:bg-white group-hover:text-[var(--ink)] transition-all duration-300">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M12 5l7 7-7 7"/>
          </svg>
        </div>
      </div>
    </article>
  );
}

function Destinations() {
  const DESTINATIONS = [
    { id: 'maldives',   no: '01', name: 'The Maldives',     region: 'Indian Ocean', tag: 'Island & water', nights: '7 nights', price: '$4,200', fallback: 'linear-gradient(145deg,#3D8BC8,#1E5A8F)' },
    { id: 'santorini',  no: '02', name: 'Aegean Santorini', region: 'Greece',       tag: 'Sea & stone',    nights: '5 nights', price: '$3,100', fallback: 'linear-gradient(145deg,#E8A87C,#C04848)' },
    { id: 'alps',       no: '03', name: 'The Swiss Alps',   region: 'Switzerland',  tag: 'Mountain air',   nights: '6 nights', price: '$2,800', fallback: 'linear-gradient(145deg,#8FA5C6,#3F4F7E)' },
    { id: 'tokyo',      no: '04', name: 'Tokyo by night',   region: 'Japan',        tag: 'City & craft',   nights: '8 nights', price: '$3,500', fallback: 'linear-gradient(145deg,#1E2B40,#4A6585)' },
    { id: 'bali',       no: '05', name: 'Lush Bali',        region: 'Indonesia',    tag: 'Jungle & rice',  nights: '7 nights', price: '$1,900', fallback: 'linear-gradient(145deg,#5C8A6B,#1F4A3A)' },
    { id: 'paris',      no: '06', name: 'Paris in autumn',  region: 'France',       tag: 'City & table',   nights: '5 nights', price: '$2,400', fallback: 'linear-gradient(145deg,#C99366,#7A4B2A)' },
  ];

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

        {/* Editorial header */}
        <div className="grid md:grid-cols-12 gap-8 items-end mb-16">
          <div className="md:col-span-7">
            <p className="section-label mb-5 eyebrow-dot">Our atlas — 50 places</p>
            <h2 className="serif tracking-[-0.025em] leading-[0.96]"
              style={{ fontSize: 'clamp(2.6rem, 6vw, 5rem)', color: 'var(--ink)' }}>
              Places worth<br/>
              <span className="serif-it" style={{ color: 'var(--sky-deep)' }}>going slowly</span>.
            </h2>
          </div>
          <div className="md:col-span-4 md:col-start-9">
            <p className="text-[15px] leading-relaxed mb-5" style={{ color: 'var(--ink-soft)' }}>
              Every destination is visited, vetted, and quietly rated by our planning team — at least
              once a year, often more. No partner content, no commission listings.
            </p>
            <a href="#packages" className="inline-flex items-center gap-1.5 text-[14px] text-[var(--ink)] border-b border-[var(--hairline-2)] hover:border-[var(--ink)] transition-colors pb-1">
              View the full atlas
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>

        {/* Asymmetric grid — 2 / 1 / 1 / 2 rhythm via offsets */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-5">
          <div className="md:col-span-7"><DestCard dest={DESTINATIONS[0]} large /></div>
          <div className="md:col-span-5 md:pt-12"><DestCard dest={DESTINATIONS[1]} /></div>
          <div className="md:col-span-4"><DestCard dest={DESTINATIONS[2]} /></div>
          <div className="md:col-span-4 md:pt-10"><DestCard dest={DESTINATIONS[3]} /></div>
          <div className="md:col-span-4"><DestCard dest={DESTINATIONS[4]} /></div>
          <div className="md:col-span-5 md:col-start-8"><DestCard dest={DESTINATIONS[5]} /></div>
        </div>

        {/* Footnote */}
        <div className="mt-16 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 pt-8 border-t border-[var(--hairline)]">
          <p className="text-[13px]" style={{ color: 'var(--muted)' }}>
            Showing 6 of 50 destinations. Routes refresh seasonally.
          </p>
          <a href="#packages" className="btn-ghost">
            See the rest
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Destinations = Destinations;