/* Packages — cleaner three-tier layout, handhold-style cream cards */

function PackageCard({ pkg }) {
  const cardRef = useCardTilt(pkg.highlight ? 2 : 5);
  return (
    <article ref={cardRef}
      id={`pkg-${pkg.tier.toLowerCase()}`}
      className="card-3d rounded-[28px] relative h-full flex flex-col"
      style={{
        background: pkg.highlight ? 'var(--ink)' : 'var(--white)',
        border: pkg.highlight ? '1px solid var(--ink)' : '1px solid var(--hairline)',
        boxShadow: pkg.highlight
          ? '0 24px 60px rgba(14,14,14,0.18)'
          : '0 2px 14px rgba(20,20,20,0.04)',
      }}>

      {pkg.badge && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-[0.16em] font-medium"
          style={{ background: 'var(--terra)', color: 'var(--white)' }}>
          {pkg.badge}
        </div>
      )}

      <div className="p-9 md:p-10 flex-1 flex flex-col">
        {/* Tier label */}
        <div className="flex items-baseline justify-between mb-1">
          <p className="section-label" style={{ color: pkg.highlight ? 'rgba(255,255,255,0.7)' : 'var(--body)' }}>{pkg.tier}</p>
          <span className="serif text-[15px]" style={{ color: pkg.highlight ? 'rgba(255,255,255,0.5)' : 'var(--muted)' }}>— 0{pkg.idx}</span>
        </div>

        <h3 className="serif tracking-[-0.02em] leading-[1.05] mb-7"
          style={{ fontSize: 'clamp(1.6rem, 2.4vw, 2rem)', color: pkg.highlight ? 'var(--white)' : 'var(--ink)' }}>
          {pkg.headline.split('|').map((part, i) => i === 1 ? <em key={i} className="serif-it"> {part}</em> : <span key={i}>{part}</span>)}
        </h3>

        {/* Price */}
        <div className="mb-6 flex items-baseline gap-2">
          <span className="serif" style={{ fontSize: 'clamp(2.4rem, 4vw, 3.4rem)', color: pkg.highlight ? 'var(--white)' : 'var(--ink)', letterSpacing: '-0.025em' }}>
            ${pkg.price}
          </span>
          <span className="text-[12px]" style={{ color: pkg.highlight ? 'rgba(255,255,255,0.55)' : 'var(--muted)' }}>{pkg.period}</span>
        </div>

        <div className="h-px mb-7" style={{ background: pkg.highlight ? 'rgba(255,255,255,0.12)' : 'var(--hairline)' }} />

        <ul className="space-y-3.5 mb-10 flex-1">
          {pkg.features.map(f => (
            <li key={f} className="flex items-start gap-3 text-[13.5px] leading-relaxed"
              style={{ color: pkg.highlight ? 'rgba(255,255,255,0.78)' : 'var(--body)' }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={pkg.highlight ? '#8FBED8' : 'var(--sky)'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 mt-[5px]">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
              {f}
            </li>
          ))}
        </ul>

        <a href="#contact"
          className="block w-full py-3 rounded-full text-center text-[14px] font-normal transition-colors duration-200"
          style={pkg.highlight
            ? { background: 'var(--white)', color: 'var(--ink)' }
            : { background: 'var(--ink)', color: 'var(--white)' }
          }>
          {pkg.cta}
        </a>
      </div>
    </article>
  );
}

function Packages() {
  const PACKAGES = [
    {
      idx: 1, tier: 'Escape', headline: 'A first taste of |elsewhere|.',
      price: '1,200', period: 'per person', highlight: false, badge: null,
      features: ['3 nights, hand-picked stay', 'Economy flights', 'Boutique 3-star hotel', 'Private airport transfer', 'Local recommendations PDF'],
      cta: 'Get started',
    },
    {
      idx: 2, tier: 'Journey', headline: 'The complete |unhurried| trip.',
      price: '3,400', period: 'per person', highlight: true, badge: 'Most chosen',
      features: ['7 nights, curated stay', 'Business class flights', '5-star hotel or villa', 'Private airport transfer', 'Personal local fixer', 'Bookings made for you', '24/7 trip line, anywhere'],
      cta: 'Plan the Journey',
    },
    {
      idx: 3, tier: 'Elite', headline: 'Everything, |bespoke|.',
      price: '8,900', period: 'per person', highlight: false, badge: null,
      features: ['14 nights, your itinerary', 'First class flights', 'Private villas & resorts', 'Private jet transfer option', 'Dedicated trip director', 'Daily reservations & access', 'Michelin & off-menu dining'],
      cta: 'Plan something Elite',
    },
  ];

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

        {/* Header */}
        <div className="text-center mb-20 max-w-2xl mx-auto">
          <p className="section-label mb-5 eyebrow-dot">Three ways to travel with us</p>
          <h2 className="serif tracking-[-0.025em] leading-[0.98] mb-6"
            style={{ fontSize: 'clamp(2.6rem, 6vw, 5rem)', color: 'var(--ink)' }}>
            Choose your<br/>
            <span className="serif-it" style={{ color: 'var(--sky-deep)' }}>altitude</span>.
          </h2>
          <p className="text-[15px] leading-relaxed mx-auto max-w-md" style={{ color: 'var(--ink-soft)' }}>
            Three starting points — every itinerary is then built around you.
            No two trips we've ever planned look the same.
          </p>
        </div>

        {/* Cards */}
        <div className="grid md:grid-cols-3 gap-5 items-stretch">
          {PACKAGES.map(p => <PackageCard key={p.tier} pkg={p} />)}
        </div>

        {/* Footnote row */}
        <div className="mt-12 flex flex-col md:flex-row items-center justify-center gap-2 text-center">
          <p className="text-[13px]" style={{ color: 'var(--body)' }}>
            All trips include carbon offsetting and a 24/7 trip line.
          </p>
          <a href="#contact" className="text-[13px] underline underline-offset-4 decoration-[var(--hairline-2)] hover:decoration-[var(--ink)] transition-colors text-[var(--ink)]">
            Compare in detail →
          </a>
        </div>
      </div>
    </section>
  );
}

window.Packages = Packages;