const { useState, useEffect } = React;

const LOCAL_IMAGES = {
  // ── Bali ──────────────────────────────────────────────────────────────────
  "photo-1537996194471-e657df975ab4": "/assets/photos/bali.jpg",
  "bali-tegenungan-waterfall": "/assets/photos/bali-tegenungan-waterfall.jpg",
  "bali-kelingking-beach": "/assets/photos/bali-kelingking-beach.jpg",
  "bali-gili-trawangan": "/assets/photos/bali-gili-trawangan.jpg",
  // ── Europe ────────────────────────────────────────────────────────────────
  "photo-1530122037265-a5f1f91d3b99": "/assets/photos/switzerland.jpg",
  "photo-1502602898657-3e91760cbb34": "/assets/photos/paris.jpg",
  "dest-greece": "/assets/photos/greece.jpg",
  "dest-turkey": "/assets/photos/turkey.jpg",
  "dest-italy": "/assets/photos/italy.jpg",
  "dest-spain": "/assets/photos/spain.jpg",
  "dest-uk-london": "/assets/photos/london.jpg",
  "dest-eastern-europe": "/assets/photos/eastern-europe.jpg",
  // ── Asia ──────────────────────────────────────────────────────────────────
  "photo-1514282401047-d79a71a590e8": "/assets/photos/maldives.jpg",
  "photo-1512453979798-5ea266f8880c": "/assets/photos/dubai.jpg",
  "photo-1525625293386-3f8f99389edd": "/assets/photos/singapore.jpg",
  "photo-1508009603885-50cf7c579365": "/assets/photos/bangkok.jpg",
  "photo-1540959733332-eab4deabeeaf": "/assets/photos/tokyo.jpg",
  "dest-vietnam": "/assets/photos/vietnam.jpg",
  "dest-singapore-malaysia": "/assets/photos/singapore-malaysia.jpg",
  "dest-thailand-beaches": "/assets/photos/thailand-beaches.jpg",
  "dest-sri-lanka": "/assets/photos/sri-lanka.jpg",
  "dest-baku": "/assets/photos/baku.jpg",
  "dest-georgia": "/assets/photos/georgia.jpg",
  "dest-mauritius": "/assets/photos/mauritius.jpg",
  "dest-almaty": "/assets/photos/almaty.jpg",
  // ── Africa & Oceania ──────────────────────────────────────────────────────
  "dest-south-africa": "/assets/photos/south-africa.jpg",
  "dest-new-zealand": "/assets/photos/new-zealand.jpg",
  // ── Domestic ──────────────────────────────────────────────────────────────
  "photo-1506905925346-21bda4d32df4": "/assets/photos/kashmir.jpg",
  "photo-1602216056096-3b40cc0c9944": "/assets/photos/kerala.jpg",
  "photo-1599661046289-e31897846e41": "/assets/photos/rajasthan.jpg",
  "photo-1512343879784-a960bf40e7f2": "/assets/photos/goa.jpg",
  "photo-1586500036706-41963de24d8b": "/assets/photos/andamans.jpg",
  "photo-1589556264800-08ae9e129a8c": "/assets/photos/ladakh.jpg",
  "photo-1582719471384-894fbb16e074": "/assets/photos/munnar.jpg",
  "photo-1626621341517-bbf3d9990a23": "/assets/photos/manali.jpg",
  "dest-north-east-india": "/assets/photos/north-east-india.jpg",
  "dest-weekend-getaways": "/assets/photos/weekend-getaways.jpg",
  // ── Cruises ───────────────────────────────────────────────────────────────
  "dest-cordelia-cruise": "/assets/photos/cordelia-cruise.jpg",
  "dest-royal-caribbean-singapore": "/assets/photos/royal-caribbean-singapore.jpg",
  "dest-ncl-cruise": "/assets/photos/ncl-cruise.jpg",
  "dest-costa-cruise": "/assets/photos/costa-cruise.jpg",
  // ── Testimonials ──────────────────────────────────────────────────────────
  "photo-1494790108377-be9c29b29330": "/assets/photos/testimonial-aarav-riya.jpg",
  "photo-1438761681033-6461ffad8d80": "/assets/photos/testimonial-priya.jpg",
  "photo-1500648767791-00dcc994a43e": "/assets/photos/testimonial-karthik.jpg",
};
const U = (id) => LOCAL_IMAGES[id];

const CONTACT_EMAIL = "traveldimension.official@gmail.com";
const PHONE_DISPLAY = "+91 88262 98697";
const PHONE_TEL = "+918826298697";
const FOUNDER_IMAGE = "/assets/founder-hitanshu.webp";
const LOGO_SYMBOL = "/assets/logo-symbol.svg";
const INSTAGRAM_PROFILE = {
  handle: "@traveldimensionofficial",
  category: "Travel company",
  bio: "Curated trips, real experiences. We plan, you pack.",
  stats: [
    ["69", "Posts"],
    ["136", "Followers"],
    ["72", "Following"],
    ["5", "Highlights"],
  ],
  highlights: ["Uttarakhand", "Vietnam", "Malaysia", "Bali", "Happy Clients"],
};
const SOCIAL_POSTS = [
  {
    image: "/assets/instagram/ig-mothers-day.jpg",
    tag: "Family trips",
    title: "Vacation ideas for moms, not just wishes.",
    detail: "Recent Mother's Day creative focused on turning family gratitude into a real getaway.",
  },
  {
    image: "/assets/instagram/ig-ladakh.jpg",
    tag: "Ladakh",
    title: "Adventure-led Ladakh enquiries.",
    detail: "The profile is actively inviting DMs for Ladakh trip details and mountain itineraries.",
  },
  {
    image: "/assets/instagram/ig-rishikesh.jpg",
    tag: "Rishikesh",
    title: "Route-first weekend planning.",
    detail: "Haridwar, Shivpuri rafting, Neelkanth Mahadev and Beatles Ashram shaped into a short trip circuit.",
  },
  {
    image: "/assets/instagram/ig-kanatal.jpg",
    tag: "Kanatal",
    title: "Quiet offbeat hill escapes.",
    detail: "Peaceful Uttarakhand stays near Delhi, built around calm mornings and low-chaos travel.",
  },
  {
    image: "/assets/instagram/ig-bali.jpg",
    tag: "Bali",
    title: "5 nights and 6 days in Bali.",
    detail: "A balanced escape mixing beaches, temples, sunsets, adventure and luxury stays.",
  },
  {
    image: "/assets/instagram/ig-thailand.jpg",
    tag: "Thailand",
    title: "Phuket, Krabi and Bangkok reels.",
    detail: "Honeymoon-friendly Thailand routes are part of the active content mix.",
  },
];
const DESTINATION_SUGGESTIONS = [
  // International – Asia
  "Bali",
  "Vietnam",
  "Singapore",
  "Malaysia",
  "Thailand",
  "Sri Lanka",
  "Japan",
  "Hong Kong",
  // International – MEA and West Asia
  "Maldives",
  "Dubai",
  "Azerbaijan - Baku",
  "Georgia",
  "Mauritius",
  "Kazakhstan - Almaty",
  // International – Europe
  "Amsterdam - Paris - Switzerland - Italy",
  "Austria - Prague - Budapest",
  "Croatia - Slovenia France",
  "Greece",
  "Spain",
  "Turkey",
  "London & Scotland",
  // International – Africa & Oceania
  "South Africa",
  "New Zealand",
  // Domestic
  "Kashmir",
  "Leh Ladakh",
  "Ladakh",
  "Goa",
  "Kerala",
  "Andaman Islands",
  "North East & Sikkim",
  "Rajasthan",
  "Uttarakhand",
  "Himachal Pradesh",
  // Cruises
  "Cordelia Cruise India",
  "Royal Caribbean Cruise Singapore",
  "Disney Cruise Singapore",
  "Genting Dream Star Cruises Singapore",
];

function emailHref(subject = "Travel Dimension enquiry", body = "Hi Travel Dimension,\n\nI'd like to plan a trip.") {
  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

function whatsappHref(message = "Hi Travel Dimension, I'd like to plan a trip.") {
  return `https://wa.me/${PHONE_TEL.replace("+", "")}?text=${encodeURIComponent(message)}`;
}

const GENERAL_EMAIL_URL = emailHref();
const WHATSAPP_URL = whatsappHref();
const HOME_LINKS = {
  top: "/",
  destinations: "/#destinations",
  services: "/#services",
  founder: "/#founder",
  process: "/#process",
  voices: "/#voices",
  instagram: "/#instagram",
  contact: "/#contact",
};
const PACKAGE_PREFIX = "/packages/";

function packagePath(slug) {
  return `${PACKAGE_PREFIX}${slug}`;
}

function routeFromLocation() {
  const path = window.location.pathname || "/";
  if (path.startsWith(PACKAGE_PREFIX)) {
    const slug = decodeURIComponent(path.slice(PACKAGE_PREFIX.length).replace(/\/$/, ""));
    return { view: "package", slug };
  }
  return { view: "home" };
}

function isPlainLeftClick(event) {
  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
}

function todayISO() {
  return new Date().toISOString().slice(0, 10);
}

function formatTravelDate(value) {
  if (!value) return "Flexible";
  const parsed = new Date(`${value}T00:00:00`);
  if (Number.isNaN(parsed.getTime())) return value;
  return parsed.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
}

function quoteRequestHref(formData) {
  const destination = formData.get("destination")?.trim() || "Flexible";
  const travelDate = formatTravelDate(formData.get("travelDate")?.trim());
  const travelers = formData.get("travelers") || "2 travelers";
  const body = [
    "Hi Travel Dimension,",
    "",
    "I'd like a free quote.",
    `Destination: ${destination}`,
    `Travel date: ${travelDate}`,
    `Travelers: ${travelers}`,
  ].join("\n");

  return emailHref("Travel quote request", body);
}

function quoteRequestWhatsAppHref(formData) {
  const destination = formData.get("destination")?.trim() || "Flexible";
  const travelDate = formatTravelDate(formData.get("travelDate")?.trim());
  const travelers = formData.get("travelers") || "2 travelers";
  const message = [
    "Hi Travel Dimension, I'd like a free quote.",
    `Destination: ${destination}`,
    `Travel date: ${travelDate}`,
    `Travelers: ${travelers}`,
  ].join("\n");

  return whatsappHref(message);
}

function BrandMark() {
  return (
    <span className="brand-mark">
      <img src={LOGO_SYMBOL} alt="" aria-hidden="true" />
    </span>
  );
}

// ── Icons ─────────────────────────────
const I = {
  globe: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>),
  india: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s-7-7.5-7-13a7 7 0 0 1 14 0c0 5.5-7 13-7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>),
  plane: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/></svg>),
  hotel: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M3 7v14M21 11v10M6 21V7a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v4M9 9h2M13 9h2M9 13h2M13 13h2M9 17h2M13 17h2"/></svg>),
  cruise: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M2 20s2 2 5 2 5-2 5-2 2 2 5 2 5-2 5-2M4 18l1-7h14l1 7M6 11V7l6-2 6 2v4M12 5V2"/></svg>),
  visa: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3h11l4 4v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M9 13l2 2 4-4"/></svg>),
  briefcase: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20"/></svg>),
  search: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>),
  star: (<svg viewBox="0 0 24 24"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1z"/></svg>),
  heart: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>),
  pin: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>),
  arrow: (<svg viewBox="0 0 24 14" fill="none"><path d="M0 7h22M16 1l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  check: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>),
  shield: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>),
  bolt: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>),
  phone: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.4 2.1l-1.3 1.3a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2z"/></svg>),
  wa: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1a8.3 8.3 0 0 1-2.4-1.5 9.1 9.1 0 0 1-1.7-2.1c-.2-.3 0-.5.1-.6l.5-.6c.2-.1.2-.3.3-.5 0-.2 0-.4-.1-.5l-.9-2.2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5 0-.8.4-.3.4-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.4 5.3 4.7l1.7.6c.7.2 1.3.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.6 15l-1 4 4-1A10 10 0 1 0 12 2z"/></svg>),
  ig: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.4A4 4 0 1 1 12.6 8a4 4 0 0 1 3.4 3.4z"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/></svg>),
  fb: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.6 9.9V14.9H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.5 2.9h-2.3v6.9A10 10 0 0 0 22 12z"/></svg>),
  yt: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 7.4a3 3 0 0 0-2-2C19 5 12 5 12 5s-7 0-9 .4a3 3 0 0 0-2 2A31 31 0 0 0 .5 12 31 31 0 0 0 1 16.6a3 3 0 0 0 2 2C5 19 12 19 12 19s7 0 9-.4a3 3 0 0 0 2-2 31 31 0 0 0 .4-4.6 31 31 0 0 0-.4-4.6zM10 15.5v-7l6 3.5z"/></svg>),
  menu: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>),
  close: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>),
  cal: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>),
  user: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>),
  send: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>),
};

// ── Top strip ─────────────────────────
function TopStrip() {
  return (
    <div className="top-strip">
      <div className="shell">
        <div className="left">
          <span><span className="pulse"></span> &nbsp;Best-rate guarantee, year-round</span>
          <span className="hide-sm">|</span>
          <a className="hide-sm" href={`tel:${PHONE_TEL}`}>{PHONE_DISPLAY}</a>
        </div>
        <div className="right">
          <a href={WHATSAPP_URL} target="_blank" rel="noopener">WhatsApp {PHONE_DISPLAY}</a>
          <span>|</span>
          <a href={GENERAL_EMAIL_URL}>{CONTACT_EMAIL}</a>
        </div>
      </div>
    </div>
  );
}

// ── Nav ────────────────────────────
function Nav({ onOpenMenu }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 14);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
      <div className="shell nav">
        <a href={HOME_LINKS.top} className="brand">
          <BrandMark />
          <span className="brand-name">
            Travel Dimension
            <small>Plan · Book · Explore</small>
          </span>
        </a>
        <nav className="nav-links">
          <a href={HOME_LINKS.destinations}>Destinations</a>
          <a href={HOME_LINKS.services}>Services</a>
          <a href={HOME_LINKS.founder}>About</a>
          <a href={HOME_LINKS.process}>How it works</a>
          <a href={HOME_LINKS.voices}>Reviews</a>
        </nav>
        <div className="nav-cta">
          <a href={GENERAL_EMAIL_URL} className="btn btn-outline btn-sm">Get a quote</a>
          <a className="btn btn-wa btn-sm" href={WHATSAPP_URL} target="_blank" rel="noopener">
            {I.wa}<span className="label-full">WhatsApp</span>
          </a>
          <button className="menu-btn" type="button" onClick={onOpenMenu} aria-label="Open menu">{I.menu}</button>
        </div>
      </div>
    </div>
  );
}

// ── Mobile menu ─────────────────────
function MobileMenu({ open, onClose }) {
  useEffect(() => {
    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [open]);
  const items = [
    ["Destinations", HOME_LINKS.destinations],
    ["Services", HOME_LINKS.services],
    ["About founder", HOME_LINKS.founder],
    ["How it works", HOME_LINKS.process],
    ["Reviews", HOME_LINKS.voices],
    ["Instagram", HOME_LINKS.instagram],
    ["Contact", HOME_LINKS.contact],
  ];
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`} aria-hidden={open ? "false" : "true"}>
      <div className="top">
        <div className="brand">
          <BrandMark />
          <span className="brand-name">Travel Dimension</span>
        </div>
        <button className="menu-btn" type="button" onClick={onClose} aria-label="Close menu">{I.close}</button>
      </div>
      <div className="links">
        {items.map(([l, h]) => (
          <a key={h} href={h} onClick={onClose}>{l} <span aria-hidden="true">↗</span></a>
        ))}
      </div>
      <div className="foot">
        <a className="btn btn-wa" href={WHATSAPP_URL} target="_blank" rel="noopener">{I.wa} WhatsApp us</a>
        <a className="btn btn-outline" href={GENERAL_EMAIL_URL}>{I.send} Email us</a>
      </div>
    </div>
  );
}

// ── Hero ────────────────────────────
const HERO_SLIDES = [
  { img: U("photo-1537996194471-e657df975ab4"), city: "Bali", country: "Indonesia" },
  { img: U("photo-1530122037265-a5f1f91d3b99"), city: "Switzerland", country: "Swiss Alps" },
  { img: U("photo-1514282401047-d79a71a590e8"), city: "Maldives", country: "Indian Ocean" },
  { img: U("photo-1512453979798-5ea266f8880c"), city: "Dubai", country: "UAE" },
];
function Hero() {
  const [i, setI] = useState(0);
  const handleQuoteSubmit = (event) => {
    event.preventDefault();
    window.location.href = quoteRequestWhatsAppHref(new FormData(event.currentTarget));
  };
  useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero" id="top">
      <div className="hero-slides">
        {HERO_SLIDES.map((s, k) => (
          <div key={k} className={`hero-slide ${k === i ? "active" : ""}`} style={{ backgroundImage: `url(${s.img})` }} />
        ))}
      </div>
      <div className="hero-scrim"></div>

      <div className="hero-content">
        <div className="shell">
          <div className="hero-eyebrow">
            <span className="dot"></span>
            16+ countries explored · 5 continents · expert-led trips
          </div>
          <h1>
            Stress-free holidays,<br />
            at the <span className="accent-word">best rates</span>.
          </h1>
          <p className="lead">
            Travel Dimension is a boutique travel studio helping you plan unforgettable holidays —
            real travel experience, local insights, and smart trip planning on every journey.
          </p>

          <form className="search-panel" onSubmit={handleQuoteSubmit}>
            <label className="search-field" htmlFor="quote-destination">
              <span className="field-label">Destination</span>
              <input
                id="quote-destination"
                name="destination"
                list="destination-options"
                placeholder="Start typing: Bali, Dubai..."
                autoComplete="off"
              />
              <datalist id="destination-options">
                {DESTINATION_SUGGESTIONS.map((destination) => (
                  <option key={destination} value={destination} />
                ))}
              </datalist>
            </label>
            <label className="search-field" htmlFor="quote-date">
              <span className="field-label">Travel date</span>
              <input id="quote-date" name="travelDate" type="date" min={todayISO()} />
            </label>
            <label className="search-field" htmlFor="quote-travelers">
              <span className="field-label">Travelers</span>
              <select id="quote-travelers" name="travelers" defaultValue="2 travelers">
                <option value="1 traveler">1 traveler</option>
                <option value="2 travelers">2 travelers</option>
                <option value="3 travelers">3 travelers</option>
                <option value="4+ travelers">4+ travelers</option>
                <option value="Group / Corporate">Group / Corporate</option>
              </select>
            </label>
            <button className="search-submit" type="submit">{I.search} Get quote on WhatsApp</button>
          </form>

          <div className="hero-trust">
            <div className="item">{I.shield} 100% personalised itineraries</div>
            <div className="item">{I.bolt} 24/7 on-trip concierge</div>
            <div className="item">{I.check} Best-rate guarantee</div>
          </div>
        </div>
      </div>

      <div className="hero-pager">
        {HERO_SLIDES.map((_, k) => (
          <button
            key={k}
            className={`pip ${k === i ? "active" : ""}`}
            type="button"
            aria-label={`Show ${HERO_SLIDES[k].city} hero image`}
            aria-current={k === i ? "true" : undefined}
            onClick={() => setI(k)}
          />
        ))}
      </div>
    </section>
  );
}

// ── Partner strip ───────────────────
function PartnerStrip() {
  const partners = ["IATA", "Make My Trip", "Emirates", "Qatar Airways", "Marriott Bonvoy", "Royal Caribbean", "Schengen"];
  return (
    <div className="partner-strip">
      <div className="shell row">
        <span className="label">Trusted partners</span>
        <div className="logos">
          {partners.map(p => <span key={p}>{p}</span>)}
        </div>
      </div>
    </div>
  );
}

// ── Destinations ────────────────────
const DEST = {
  "Trending": [
    { city: "Bali", country: "Indonesia", days: "8N · 9D", price: "62,000", strike: "78,000", rating: 4.9, img: U("photo-1537996194471-e657df975ab4"), badge: "Bestseller" },
    { city: "Maldives", country: "Indian Ocean", days: "4N · 5D", price: "78,000", rating: 5.0, img: U("photo-1514282401047-d79a71a590e8"), badge: "Hot deal", hot: true },
    { city: "Dubai", country: "UAE", days: "5N · 6D", price: "45,000", rating: 4.8, img: U("photo-1512453979798-5ea266f8880c"), badge: "Family" },
    { city: "Thailand", country: "Phuket · Krabi · Bangkok", days: "6N · 7D", price: "55,000", rating: 4.8, img: U("dest-thailand-beaches"), badge: "Hot deal", hot: true },
    { city: "Vietnam", country: "Southeast Asia", days: "7N · 8D", price: "68,000", rating: 4.8, img: U("dest-vietnam"), badge: "New" },
    { city: "Georgia", country: "Caucasus", days: "6N · 7D", price: "72,000", rating: 4.8, img: U("dest-georgia"), badge: "Trending" },
    { city: "Switzerland", country: "Europe", days: "8N · 9D", price: "1,85,000", rating: 4.9, img: U("photo-1530122037265-a5f1f91d3b99"), badge: "Honeymoon" },
    { city: "Greece", country: "Santorini · Athens · Mykonos", days: "7N · 8D", price: "1,35,000", rating: 4.9, img: U("dest-greece"), badge: "Romance" },
  ],
  "International": [
    // ── Asia & Middle East ──────────────────────────────────────────────────
    { city: "Bali", country: "Indonesia", days: "8N · 9D", price: "62,000", strike: "78,000", rating: 4.9, img: U("photo-1537996194471-e657df975ab4"), badge: "Bestseller" },
    { city: "Vietnam", country: "Southeast Asia", days: "7N · 8D", price: "68,000", rating: 4.8, img: U("dest-vietnam"), badge: "New" },
    { city: "Singapore & Malaysia", country: "Southeast Asia", days: "7N · 8D", price: "85,000", rating: 4.8, img: U("dest-singapore-malaysia"), badge: "Combo deal" },
    { city: "Thailand", country: "Phuket · Krabi · Bangkok", days: "6N · 7D", price: "55,000", rating: 4.8, img: U("dest-thailand-beaches"), badge: "Hot deal", hot: true },
    { city: "Sri Lanka", country: "Indian Ocean", days: "6N · 7D", price: "52,000", rating: 4.7, img: U("dest-sri-lanka") },
    { city: "Maldives", country: "Indian Ocean", days: "4N · 5D", price: "78,000", rating: 5.0, img: U("photo-1514282401047-d79a71a590e8"), badge: "Luxury" },
    { city: "Dubai", country: "UAE", days: "5N · 6D", price: "45,000", rating: 4.8, img: U("photo-1512453979798-5ea266f8880c"), badge: "Family" },
    { city: "Baku", country: "Azerbaijan", days: "5N · 6D", price: "65,000", rating: 4.7, img: U("dest-baku") },
    { city: "Georgia", country: "Caucasus", days: "6N · 7D", price: "72,000", rating: 4.8, img: U("dest-georgia"), badge: "Trending" },
    { city: "Mauritius", country: "Indian Ocean", days: "6N · 7D", price: "1,15,000", rating: 4.9, img: U("dest-mauritius"), badge: "Honeymoon" },
    { city: "Almaty", country: "Kazakhstan", days: "5N · 6D", price: "70,000", rating: 4.7, img: U("dest-almaty") },
    { city: "Tokyo", country: "Japan", days: "7N · 8D", price: "1,58,000", rating: 4.9, img: U("photo-1540959733332-eab4deabeeaf") },
    // ── Europe ─────────────────────────────────────────────────────────────
    { city: "Switzerland", country: "Europe", days: "8N · 9D", price: "1,85,000", rating: 4.9, img: U("photo-1530122037265-a5f1f91d3b99"), badge: "Honeymoon" },
    { city: "Paris", country: "France", days: "7N · 8D", price: "1,42,000", rating: 4.9, img: U("photo-1502602898657-3e91760cbb34"), badge: "Romance" },
    { city: "Greece", country: "Santorini · Athens · Mykonos", days: "7N · 8D", price: "1,35,000", rating: 4.9, img: U("dest-greece"), badge: "Romance" },
    { city: "Turkey", country: "Istanbul · Cappadocia", days: "7N · 8D", price: "98,000", rating: 4.8, img: U("dest-turkey") },
    { city: "Italy", country: "Europe", days: "8N · 9D", price: "1,55,000", rating: 4.9, img: U("dest-italy") },
    { city: "Spain", country: "Europe", days: "8N · 9D", price: "1,48,000", rating: 4.8, img: U("dest-spain") },
    { city: "London & Scotland", country: "United Kingdom", days: "8N · 9D", price: "1,75,000", rating: 4.8, img: U("dest-uk-london") },
    { city: "Eastern Europe", country: "Prague · Vienna · Budapest", days: "9N · 10D", price: "1,40,000", rating: 4.8, img: U("dest-eastern-europe") },
    // ── Africa & Oceania ───────────────────────────────────────────────────
    { city: "South Africa", country: "Cape Town · Safari", days: "9N · 10D", price: "2,10,000", rating: 4.9, img: U("dest-south-africa") },
    { city: "New Zealand", country: "Oceania", days: "10N · 11D", price: "2,45,000", rating: 4.9, img: U("dest-new-zealand") },
  ],
  "Domestic": [
    { city: "Kashmir", country: "India", days: "5N · 6D", price: "22,000", rating: 4.8, img: U("photo-1506905925346-21bda4d32df4") },
    { city: "Leh Ladakh", country: "India", days: "7N · 8D", price: "34,000", rating: 4.9, img: U("photo-1589556264800-08ae9e129a8c"), badge: "Adventure" },
    { city: "Goa", country: "India", days: "3N · 4D", price: "12,500", rating: 4.6, img: U("photo-1512343879784-a960bf40e7f2"), badge: "Hot deal", hot: true },
    { city: "Kerala", country: "India", days: "6N · 7D", price: "19,500", rating: 4.7, img: U("photo-1602216056096-3b40cc0c9944"), badge: "Backwaters" },
    { city: "Andaman Islands", country: "India", days: "5N · 6D", price: "32,000", rating: 4.8, img: U("photo-1586500036706-41963de24d8b") },
    { city: "North East India", country: "Sikkim · Darjeeling · Meghalaya", days: "8N · 9D", price: "28,000", rating: 4.8, img: U("dest-north-east-india"), badge: "Offbeat" },
    { city: "Rajasthan", country: "India", days: "7N · 8D", price: "24,000", rating: 4.8, img: U("photo-1599661046289-e31897846e41"), badge: "Heritage" },
    { city: "Manali", country: "India", days: "5N · 6D", price: "18,000", rating: 4.5, img: U("photo-1626621341517-bbf3d9990a23") },
    { city: "Munnar", country: "India", days: "4N · 5D", price: "16,500", rating: 4.6, img: U("photo-1582719471384-894fbb16e074") },
    { city: "Weekend Getaways", country: "Delhi NCR · Himachal · Uttarakhand", days: "2N · 3D", price: "8,500", rating: 4.6, img: U("dest-weekend-getaways"), badge: "Quick escape" },
  ],
  "Cruise": [
    { city: "Cordelia Cruise", country: "India Ports", days: "3N · 4D", price: "22,000", rating: 4.6, img: U("dest-cordelia-cruise"), badge: "India's own" },
    { city: "Royal Caribbean", country: "Singapore · Genting Dream", days: "4N · 5D", price: "58,000", rating: 4.8, img: U("dest-royal-caribbean-singapore"), badge: "Popular" },
    { city: "Norwegian Cruise Line", country: "NCL · Global Routes", days: "7N · 8D", price: "1,45,000", rating: 4.8, img: U("dest-ncl-cruise"), badge: "Premium" },
    { city: "Costa Cruises", country: "Mediterranean · Asia", days: "7N · 8D", price: "1,20,000", rating: 4.7, img: U("dest-costa-cruise") },
  ],
};

const DEFAULT_PACKAGE_INCLUSIONS = [
  "Handpicked hotel options with breakfast",
  "Airport transfers and local transport as planned",
  "Day-wise itinerary planning and booking support",
  "Travel Dimension WhatsApp assistance",
];
const DEFAULT_PACKAGE_NOTES = [
  "Flights, visa fees, meals not listed and personal spends are quoted separately.",
  "Final pricing depends on travel dates, hotel category and live availability.",
  "Every itinerary can be customised before booking.",
];
const PACKAGE_DETAILS_BY_KEY = {
  // ── Existing detailed packages (kept intact) ────────────────────────────
  "Bali|Indonesia": {
    slug: "bali-holiday-package",
    packageTitle: "Bali Island Escape",
    route: "Seminyak - Ubud - Gili Island - Nusa Penida",
    overview: "A detailed 8-night Bali route covering Seminyak, Ubud, Gili Island, Finns Beach Club and West Nusa Penida with planned transfers and relaxed leisure windows.",
    highlights: [
      "Indian restaurant dinners with private transfer windows",
      "Tandem ATV ride at Tarantula with Tegenungan Waterfall",
      "Gili Island stay with Wijaya Ferry transfers",
      "West Nusa Penida tour covering Angel's Billabong, Crystal Bay and Kelingking Beach",
    ],
    itinerary: [
      { day: "Day 01", title: "Arrival at airport and Indian dinner", text: "Arrive at Denpasar airport, meet your driver and transfer to the hotel. In the evening, head for dinner at an Indian restaurant with a 5-hour cab window.", image: U("photo-1537996194471-e657df975ab4"), imageAlt: "Bali temple and lake landscape" },
      { day: "Day 02", title: "Day at leisure", text: "Keep the day flexible for rest, cafes, beach time or optional water sport activities based on your comfort and weather conditions.", image: U("photo-1537996194471-e657df975ab4"), imageAlt: "Bali leisure day landscape" },
      { day: "Day 03", title: "Seminyak to Ubud transfer and Indian dinner", text: "Transfer from Seminyak to Ubud, check in and use the evening for dinner at an Indian restaurant with a 5-hour cab window.", image: U("photo-1537996194471-e657df975ab4"), imageAlt: "Bali route from Seminyak to Ubud" },
      { day: "Day 04", title: "Tarantula ATV, Tegenungan Waterfall and Cretya Ubud", text: "Enjoy tandem ATV at Tarantula, continue to Tegenungan Waterfall and finish with drop-only access at Cretya Club Ubud using a 10-hour cab window.", image: U("bali-tegenungan-waterfall"), imageAlt: "Tegenungan Waterfall in Bali" },
      { day: "Day 05", title: "Move to Gili Island by Wijaya Ferry", text: "Transfer to the ferry point, board the Wijaya Ferry to Gili Island and check in at the hotel after arrival.", image: U("bali-gili-trawangan"), imageAlt: "Gili Trawangan beach and sea" },
      { day: "Day 06", title: "Gili Island at leisure", text: "A relaxed island day for beaches, cafes, cycling, snorkelling add-ons or simply slowing down between the Bali sightseeing legs.", image: U("bali-gili-trawangan"), imageAlt: "Gili Island leisure beach" },
      { day: "Day 07", title: "Back to main island and Finns Beach Club drop", text: "Return to Bali main island and continue to Finns Beach Club for drop-only access with a 5-hour cab window.", image: U("photo-1537996194471-e657df975ab4"), imageAlt: "Bali main island return route" },
      { day: "Day 08", title: "West Nusa Penida island tour", text: "Take the West Nusa Penida circuit covering Angel's Billabong, Crystal Bay and Kelingking Beach, with timings planned around ferry movement and road conditions.", image: U("bali-kelingking-beach"), imageAlt: "Kelingking Beach in Nusa Penida" },
      { day: "Day 09", title: "Departure", text: "Checkout and transfer for departure, with buffer time planned around your flight and traffic conditions.", image: U("photo-1537996194471-e657df975ab4"), imageAlt: "Bali departure day landscape" },
    ],
    inclusions: [
      "Airport arrival and departure transfers",
      "Private cab windows as listed in the day-wise plan",
      "Indian restaurant dinner transfers on Day 01 and Day 03",
      "Tandem ATV at Tarantula and Tegenungan Waterfall visit",
      "Wijaya Ferry transfers for the Gili Island leg",
      "West Nusa Penida island tour covering Angel's Billabong, Crystal Bay and Kelingking Beach",
      "Travel Dimension booking and WhatsApp assistance",
    ],
    notes: [
      "Optional water sport activities are quoted separately based on the selected activity and operator availability.",
      "Finns Beach Club and Cretya Club Ubud are planned as drop-only visits unless an entry, table or package is requested.",
      "Final pricing depends on travel dates, hotel category, ferry timings and live availability.",
    ],
    ctaMessage: "Hi Travel Dimension, I want details for the 8N/9D Bali Island Escape.",
  },
  "Dubai|UAE": {
    slug: "dubai-family-tour",
    packageTitle: "Dubai Family Tour",
    route: "Dubai City - Desert Safari - Marina",
    overview: "A polished Dubai break with city sights, desert safari, shopping time and optional theme parks for families or first-time UAE travellers.",
    highlights: ["Dubai city tour and Burj Khalifa add-on", "Desert safari with dinner options", "Marina, mall and souk time", "Easy hotel upgrades near metro or downtown"],
  },
  "Bangkok|Thailand": {
    slug: "best-of-bangkok-pattaya",
    packageTitle: "Best of Bangkok & Pattaya",
    route: "Bangkok - Pattaya - Coral Island",
    overview: "A compact Thailand holiday with Pattaya's beach energy, Coral Island time, Bangkok shopping and easy-paced sightseeing. Built for first-time Thailand travellers who want a practical, value-led itinerary without losing comfort.",
    highlights: [
      "Pattaya stay with Coral Island speedboat excursion",
      "Bangkok city tour with temple visits and shopping time",
      "Balanced leisure windows for cafes, markets and nightlife",
      "Private quote support for flights, hotels, transfers and add-ons",
    ],
    itinerary: [
      { day: "Day 1", title: "Arrive in Bangkok, transfer to Pattaya", text: "Airport assistance, road transfer to Pattaya, hotel check-in and a relaxed evening by the beach." },
      { day: "Day 2", title: "Coral Island excursion", text: "Speedboat ride to Coral Island with time for beaches, optional water sports and a simple Indian lunch add-on if preferred." },
      { day: "Day 3", title: "Pattaya at leisure", text: "Keep the day flexible for Nong Nooch, Sanctuary of Truth, cafes, shopping or an evening show." },
      { day: "Day 4", title: "Transfer to Bangkok", text: "Drive back to Bangkok, check in and spend the evening around malls, markets or rooftop dining." },
      { day: "Day 5", title: "Bangkok city tour", text: "Visit key temples and city sights, then keep dedicated time for Indra Market, Platinum Mall or Asiatique." },
      { day: "Day 6", title: "Departure", text: "Breakfast, checkout and airport transfer with room for last-minute shopping depending on flight timing." },
    ],
    inclusions: [
      "5 nights accommodation with breakfast",
      "Bangkok airport pickup and drop",
      "Bangkok-Pattaya-Bangkok transfers",
      "Coral Island tour by speedboat",
      "Bangkok city tour with local guide support",
      "Travel Dimension booking and WhatsApp assistance",
    ],
    ctaMessage: "Hi Travel Dimension, I want details for Best of Bangkok & Pattaya.",
  },
  "Kashmir|India": {
    slug: "kashmir-holiday-package",
    packageTitle: "Kashmir Scenic Holiday",
    route: "Srinagar - Gulmarg - Pahalgam",
    overview: "A scenic Kashmir plan shaped around houseboats, gardens, mountain drives and flexible leisure time in Gulmarg and Pahalgam.",
    highlights: ["Srinagar gardens and Dal Lake time", "Gulmarg gondola add-on guidance", "Pahalgam valley drives", "Private cab routing with local support"],
  },

  // ── Stub packages – International Asia & Middle East ────────────────────
  "Vietnam|Southeast Asia": { slug: "vietnam-holiday-package", packageTitle: "Vietnam Discovery", route: "Hanoi - Ha Long Bay - Hoi An - Ho Chi Minh City", overview: "A scenic Vietnam route from northern heritage towns and Ha Long Bay cruises down to the lantern-lit streets of Hoi An and the vibrant energy of Ho Chi Minh City.", highlights: ["Ha Long Bay overnight cruise", "Hoi An old town and tailor street", "Street food trails and cooking class add-ons", "Flexible north-to-south or region-specific itineraries"], ctaMessage: "Hi Travel Dimension, I want details for Vietnam." },
  "Singapore & Malaysia|Southeast Asia": { slug: "singapore-malaysia-combo", packageTitle: "Singapore & Malaysia Combo", route: "Singapore - Kuala Lumpur - Langkawi or Penang", overview: "A dual-country Southeast Asia break combining Singapore's polished city energy with Malaysia's rainforests, islands and street food culture.", highlights: ["Singapore city highlights and Gardens by the Bay", "Kuala Lumpur city tour with Petronas Towers", "Optional Langkawi or Penang extension", "Value-led combo pricing for flights and hotels"], ctaMessage: "Hi Travel Dimension, I want details for Singapore & Malaysia." },
  "Thailand|Phuket · Krabi · Bangkok": { slug: "thailand-beaches-package", packageTitle: "Thailand Beaches & Bangkok", route: "Phuket - Krabi - Koh Samui - Bangkok", overview: "A well-rounded Thailand holiday covering Phuket beaches, Krabi limestone cliffs, Koh Samui island stays and Bangkok's temples and markets.", highlights: ["Phi Phi Islands speedboat day trip", "Krabi four-island tour and sunset beach", "Koh Samui leisure and beach club time", "Bangkok city tour with optional floating market"], ctaMessage: "Hi Travel Dimension, I want details for Thailand beaches package." },
  "Sri Lanka|Indian Ocean": { slug: "sri-lanka-holiday", packageTitle: "Sri Lanka Heritage & Beach", route: "Colombo - Kandy - Sigiriya - Mirissa", overview: "A balanced Sri Lanka route mixing ancient ruins, tea country drives, wildlife safaris and tropical beach stays in a compact island circuit.", highlights: ["Sigiriya Rock Fortress guided climb", "Kandy temple and tea plantation drives", "Yala National Park wildlife safari add-on", "Mirissa beach and whale watching option"], ctaMessage: "Hi Travel Dimension, I want details for Sri Lanka." },
  "Maldives|Indian Ocean": { slug: "maldives-island-getaway", packageTitle: "Maldives Island Getaway", route: "Malé - Water Villa Resort", overview: "A curated Maldives stay with overwater villa options, house reef snorkelling, sunset dolphin cruises and all-inclusive resort planning.", highlights: ["Overwater or beach villa options across budget and luxury", "House reef snorkelling and water sports", "Sunset dolphin cruise and sandbank picnic", "All-inclusive resort and half-board options"], ctaMessage: "Hi Travel Dimension, I want details for Maldives." },
  "Baku|Azerbaijan": { slug: "baku-azerbaijan-holiday", packageTitle: "Baku & Azerbaijan Explorer", route: "Baku - Gobustan - Gabala - Sheki", overview: "An emerging destination combining Baku's flame-tower skyline, ancient Gobustan mud volcanoes, lush Gabala mountains and the silk road heritage of Sheki.", highlights: ["Baku old city and Flame Towers evening walk", "Gobustan mud volcanoes and rock carvings", "Gabala mountain resort and cable car", "Sheki caravanserai and stained-glass palace"], ctaMessage: "Hi Travel Dimension, I want details for Baku, Azerbaijan." },
  "Georgia|Caucasus": { slug: "georgia-caucasus-holiday", packageTitle: "Georgia Caucasus Escape", route: "Tbilisi - Kazbegi - Batumi - Kakheti", overview: "A diverse Georgia route combining Tbilisi's old town charm, the dramatic Kazbegi mountain church, Black Sea coastal Batumi and Kakheti wine country.", highlights: ["Tbilisi old town, cable car and Narikala fortress", "Kazbegi and the iconic Gergeti Trinity Church", "Batumi seafront boulevard and Adjara coast", "Kakheti wine region with cellar visits"], ctaMessage: "Hi Travel Dimension, I want details for Georgia." },
  "Mauritius|Indian Ocean": { slug: "mauritius-island-holiday", packageTitle: "Mauritius Island Luxury", route: "Grand Baie - Flic en Flac - Chamarel", overview: "A premium Mauritius break with lagoon beach stays, catamaran day trips, waterfall drives and world-class resort options for honeymoons and anniversaries.", highlights: ["Blue Bay lagoon and catamaran cruise", "Chamarel seven-coloured earth and waterfall", "Submarine or underwater scooter add-on", "All-inclusive resort or boutique villa options"], ctaMessage: "Hi Travel Dimension, I want details for Mauritius." },
  "Almaty|Kazakhstan": { slug: "almaty-kazakhstan-holiday", packageTitle: "Almaty & Kazakhstan Explorer", route: "Almaty - Charyn Canyon - Big Almaty Lake", overview: "A scenic Central Asia break built around Almaty's café culture, Tian Shan mountain day trips, the dramatic Charyn Canyon and Big Almaty Lake landscapes.", highlights: ["Charyn Canyon viewpoints and canyon floor walk", "Big Almaty Lake and Medeu skating rink", "Kolsai Lakes day trip from Almaty", "Almaty green bazaar and Panfilov Park walk"], ctaMessage: "Hi Travel Dimension, I want details for Almaty, Kazakhstan." },
  "Tokyo|Japan": { slug: "tokyo-japan-discovery", packageTitle: "Tokyo Japan Discovery" },

  // ── Stub packages – Europe ───────────────────────────────────────────────
  "Switzerland|Europe": { slug: "switzerland-europe-holiday", packageTitle: "Switzerland Scenic Holiday", route: "Zurich - Interlaken - Jungfraujoch - Lucerne", overview: "A postcard Switzerland route with Jungfraujoch top-of-Europe access, Interlaken adventure base, Lucerne lakeside walks and Mount Titlis or Grindelwald options.", highlights: ["Jungfraujoch top-of-Europe rail journey", "Interlaken paragliding and scenic adventure", "Lucerne Chapel Bridge and lake cruise", "Mount Titlis glacier walk add-on"], ctaMessage: "Hi Travel Dimension, I want details for Switzerland." },
  "Paris|France": { slug: "paris-romance-package", packageTitle: "Paris Romance Package", route: "Paris - Versailles - Loire Valley or Nice", overview: "A romantic France itinerary built around Eiffel Tower evenings, Versailles garden walks, Seine river cruises and optional Riviera or champagne country extensions.", highlights: ["Eiffel Tower summit and Seine river cruise", "Versailles palace and garden day trip", "Montmartre art district and Sacré-Cœur walk", "Optional Nice, Monaco or champagne trail extension"], ctaMessage: "Hi Travel Dimension, I want details for Paris." },
  "Greece|Santorini · Athens · Mykonos": { slug: "greece-islands-holiday", packageTitle: "Greece Islands & Athens", route: "Athens - Santorini - Mykonos", overview: "A classic Greek island route combining Athens' ancient monuments, Santorini's caldera sunsets and Mykonos' whitewashed lanes and beach clubs.", highlights: ["Acropolis and Parthenon guided tour in Athens", "Santorini caldera views and Oia sunset", "Mykonos beach clubs and windmill walks", "Island ferry transfers and flexible night splits"], ctaMessage: "Hi Travel Dimension, I want details for Greece." },
  "Turkey|Istanbul · Cappadocia": { slug: "turkey-holiday-package", packageTitle: "Turkey Heritage & Landscapes", route: "Istanbul - Cappadocia - Pamukkale - Bodrum", overview: "A rich Turkey itinerary spanning Istanbul's bazaars and mosques, Cappadocia's fairy chimneys, Pamukkale's thermal terraces and Bodrum's Aegean coast.", highlights: ["Hagia Sophia, Blue Mosque and Grand Bazaar in Istanbul", "Cappadocia hot air balloon ride at sunrise", "Pamukkale travertine pools and Hierapolis ruins", "Bodrum Aegean coast leisure and boat trip option"], ctaMessage: "Hi Travel Dimension, I want details for Turkey." },
  "Italy|Europe": { slug: "italy-holiday-package", packageTitle: "Italy Grand Tour", route: "Rome - Florence - Venice - Amalfi Coast", overview: "A classic Italy route taking in Roman history, Renaissance Florence, Venice canals and the dramatic coastal scenery of the Amalfi coast.", highlights: ["Colosseum and Vatican with skip-the-line guidance", "Florence Duomo, Uffizi and Tuscan countryside", "Venice Grand Canal gondola and Rialto Bridge", "Amalfi coast drive with Positano and Ravello stops"], ctaMessage: "Hi Travel Dimension, I want details for Italy." },
  "Spain|Europe": { slug: "spain-holiday-package", packageTitle: "Spain Sun & Culture", route: "Barcelona - Madrid - Seville - Costa del Sol", overview: "A vibrant Spain tour covering Gaudí's Barcelona, royal Madrid, flamenco Seville and optional sun and beach time on the Costa del Sol.", highlights: ["Sagrada Família and Park Güell in Barcelona", "Prado Museum and Royal Palace in Madrid", "Flamenco show and Alcázar in Seville", "Costa del Sol beach extension option"], ctaMessage: "Hi Travel Dimension, I want details for Spain." },
  "London & Scotland|United Kingdom": { slug: "london-scotland-uk-holiday", packageTitle: "London & Scotland Discovery", route: "London - Edinburgh - Scottish Highlands", overview: "A dual-city UK break starting with London's iconic landmarks and museums before heading north to Edinburgh Castle, the Royal Mile and the dramatic Scottish Highlands.", highlights: ["London: Tower of London, Big Ben and Thames cruise", "Edinburgh Castle, Royal Mile and Arthur's Seat", "Scottish Highlands: Loch Ness and Glencoe valley", "Optional day trip to Bath, Windsor or Isle of Skye"], ctaMessage: "Hi Travel Dimension, I want details for London & Scotland." },
  "Eastern Europe|Prague · Vienna · Budapest": { slug: "eastern-europe-tour", packageTitle: "Eastern Europe Grand Tour", route: "Prague - Vienna - Budapest - Krakow", overview: "A classic Central and Eastern Europe circuit linking Prague's Gothic lanes, Vienna's imperial grandeur, Budapest's thermal baths and Krakow's old town square.", highlights: ["Prague Old Town, Charles Bridge and castle district", "Vienna Schönbrunn Palace and Ringstrasse boulevard", "Budapest Parliament, thermal spa and Danube cruise", "Krakow old market square and Wieliczka Salt Mine"], ctaMessage: "Hi Travel Dimension, I want details for Eastern Europe." },

  // ── Stub packages – Africa & Oceania ────────────────────────────────────
  "South Africa|Cape Town · Safari": { slug: "south-africa-holiday", packageTitle: "South Africa Cape & Safari", route: "Cape Town - Garden Route - Kruger Safari", overview: "A highlights South Africa tour covering Cape Town's Table Mountain, the scenic Garden Route coast and a Kruger National Park safari for the Big Five.", highlights: ["Table Mountain cable car and Cape of Good Hope drive", "Garden Route: Knysna lagoon and Tsitsikamma forest", "Kruger National Park Big Five game drives", "Cape winelands Stellenbosch day trip"], ctaMessage: "Hi Travel Dimension, I want details for South Africa." },
  "New Zealand|Oceania": { slug: "new-zealand-holiday", packageTitle: "New Zealand North & South", route: "Auckland - Rotorua - Queenstown - Milford Sound", overview: "A spectacular New Zealand circuit from Auckland's harbour city through Rotorua's geothermal parks to Queenstown's adventure capital and Milford Sound's fiords.", highlights: ["Rotorua geothermal pools and Māori cultural experience", "Queenstown bungee, jet boat or skydive options", "Milford Sound cruise through fiord landscapes", "Hobbiton movie set day trip from Rotorua"], ctaMessage: "Hi Travel Dimension, I want details for New Zealand." },

  // ── Stub packages – Domestic ────────────────────────────────────────────
  "Kerala|India": { slug: "kerala-backwaters-holiday", packageTitle: "Kerala Backwaters Holiday" },
  "Rajasthan|India": { slug: "rajasthan-heritage-tour", packageTitle: "Rajasthan Heritage Tour" },
  "Goa|India": { slug: "goa-beach-getaway", packageTitle: "Goa Beach Getaway" },
  "Andaman Islands|India": { slug: "andaman-islands-holiday", packageTitle: "Andaman Islands Holiday" },
  "Leh Ladakh|India": { slug: "ladakh-adventure-tour", packageTitle: "Leh Ladakh Adventure Tour", route: "Leh - Nubra Valley - Pangong Lake - Tso Moriri", overview: "A high-altitude Ladakh road trip covering the world's highest motorable passes, Nubra Valley dunes, the vivid blue Pangong Lake and remote Tso Moriri.", highlights: ["Khardung La pass and Nubra Valley with Bactrian camels", "Pangong Lake sunrise and overnight camp stay", "Leh Palace, Shanti Stupa and monastery circuit", "River rafting on the Zanskar or Indus add-on"], ctaMessage: "Hi Travel Dimension, I want details for Leh Ladakh." },
  "Munnar|India": { slug: "munnar-hill-retreat", packageTitle: "Munnar Hill Retreat" },
  "Manali|India": { slug: "manali-mountain-getaway", packageTitle: "Manali Mountain Getaway" },
  "North East India|Sikkim · Darjeeling · Meghalaya": { slug: "north-east-india-tour", packageTitle: "North East India Explorer", route: "Darjeeling - Gangtok - Shillong - Kaziranga", overview: "A diverse North East circuit from Darjeeling's tea gardens and Kangchenjunga views through Sikkim's monasteries to Meghalaya's living root bridges and Kaziranga's rhinos.", highlights: ["Darjeeling toy train and Tiger Hill sunrise", "Gangtok monastery trail and Tsomgo Lake", "Meghalaya living root bridges and Dawki river", "Kaziranga National Park rhino and elephant safari"], ctaMessage: "Hi Travel Dimension, I want details for North East India." },
  "Weekend Getaways|Delhi NCR · Himachal · Uttarakhand": { slug: "weekend-getaways-north-india", packageTitle: "Weekend Getaways from Delhi", route: "Rishikesh · Manali · Kasol · Mussoorie · Jaipur", overview: "Quick escape packages from Delhi NCR covering hill stations, river camps, heritage towns and mountain valleys — all reachable in an overnight journey or a short flight.", highlights: ["Rishikesh river rafting and yoga retreat options", "Manali, Kasol and Kheerganga trek routes", "Mussoorie, Lansdowne and Kanatal hill stays", "Jaipur, Agra and Mathura heritage day trips"], ctaMessage: "Hi Travel Dimension, I want details for weekend getaways from Delhi." },

  // ── Cruise packages ──────────────────────────────────────────────────────
  "Cordelia Cruise|India Ports": { slug: "cordelia-cruise-india", packageTitle: "Cordelia Cruise India", route: "Mumbai · Goa · Lakshadweep · Kochi", overview: "India's home cruise line offering short getaway sailings from Mumbai and Kochi with ports in Goa, Lakshadweep and coastal India — a relaxed first cruise experience.", highlights: ["Departures from Mumbai, Kochi and Chennai", "Goa and Lakshadweep port calls", "Onboard dining, entertainment and spa options", "3–5 night sailings ideal for first-time cruisers"], ctaMessage: "Hi Travel Dimension, I want details for Cordelia Cruise." },
  "Royal Caribbean|Singapore · Genting Dream": { slug: "royal-caribbean-singapore-cruise", packageTitle: "Royal Caribbean & Genting Dream Singapore", route: "Singapore - Penang - Langkawi - Phuket", overview: "Cruise out of Singapore on Royal Caribbean or Genting Dream with port calls at Penang, Langkawi and Phuket — a Southeast Asia cruise combining sea days and beach destinations.", highlights: ["Embarkation from Singapore's Marina Bay Cruise Centre", "Penang street food and heritage town stop", "Langkawi duty-free island and beach time", "Phuket island excursions and Phi Phi day trip option"], ctaMessage: "Hi Travel Dimension, I want details for Royal Caribbean / Genting Dream Singapore cruise." },
  "Norwegian Cruise Line|NCL · Global Routes": { slug: "ncl-cruise-package", packageTitle: "Norwegian Cruise Line (NCL)", route: "Caribbean · Mediterranean · Alaska · Europe", overview: "Norwegian Cruise Line's freestyle cruising model with diverse global itineraries, speciality dining and flexible sailing schedules across the Caribbean, Mediterranean and beyond.", highlights: ["Flexible dining and no fixed seating policy", "Caribbean, Alaska, Mediterranean and European routes", "Freestyle cabin categories from inside to Haven suites", "Shore excursion packages bookable through Travel Dimension"], ctaMessage: "Hi Travel Dimension, I want details for Norwegian Cruise Line (NCL)." },
  "Costa Cruises|Mediterranean · Asia": { slug: "costa-cruise-package", packageTitle: "Costa Cruises", route: "Mediterranean · Dubai · Asia · Indian Ocean", overview: "Costa Cruises' Italian-flavoured sailings spanning the Mediterranean, Dubai, Asian ports and Indian Ocean itineraries — a European cruise brand with strong Asia and Middle East routes.", highlights: ["Mediterranean classics: Barcelona, Rome, Marseille, Dubrovnik", "Dubai and Abu Dhabi winter sailings", "Asia routes from Singapore and Japan", "Italian onboard dining and entertainment culture"], ctaMessage: "Hi Travel Dimension, I want details for Costa Cruises." },
};

function destinationKey(destination) {
  return `${destination.city}|${destination.country}`;
}

Object.values(DEST).flat().forEach((destination) => {
  Object.assign(destination, PACKAGE_DETAILS_BY_KEY[destinationKey(destination)]);
});

const ALL_PACKAGES = Object.values(DEST).flat().reduce((packages, destination) => {
  if (!packages.some((item) => item.slug === destination.slug)) packages.push(destination);
  return packages;
}, []);

function getPackageBySlug(slug) {
  return ALL_PACKAGES.find((destination) => destination.slug === slug);
}

function defaultPackageTitle(destination) {
  if (destination.country.includes("Cruise")) return `${destination.city} Cruise Package`;
  return `${destination.city} Holiday Package`;
}

function defaultPackageItinerary(destination) {
  if (destination.country.includes("Cruise")) {
    return [
      { day: "Day 1", title: "Embarkation and settling in", text: "Board the cruise, complete formalities and get familiar with dining, decks and entertainment zones." },
      { day: "Days 2-3", title: "Cruise experiences", text: "Enjoy port calls or sea-day activities with optional excursions, shows and relaxed meals." },
      { day: "Final day", title: "Disembarkation", text: "Breakfast, checkout formalities and onward transfer planning based on your flight or hotel stay." },
    ];
  }
  return [
    { day: "Day 1", title: `Arrive in ${destination.city}`, text: "Meet your driver or local contact, check in and keep the first evening relaxed." },
    { day: "Day 2", title: "Signature sightseeing", text: "Cover the must-see landmarks with timings tuned around traffic, weather and local opening hours." },
    { day: "Day 3", title: "Local experiences and leisure", text: "Add markets, cafes, viewpoints, beaches or soft adventure based on your travel style." },
    { day: "Final day", title: "Checkout and return", text: "Use the morning for breakfast or last-minute shopping before your transfer." },
  ];
}

function enrichPackage(destination) {
  const title = destination.packageTitle || defaultPackageTitle(destination);
  return {
    ...destination,
    packageTitle: title,
    route: destination.route || `${destination.city}, ${destination.country}`,
    overview: destination.overview || `A customisable ${destination.days} ${destination.city} itinerary with stays, transfers, sightseeing and practical support shaped around your dates, budget and travel style.`,
    highlights: destination.highlights || [
      `Flexible ${destination.days} plan with room for upgrades`,
      "Hotel choices matched to budget, comfort and location",
      "Sightseeing paced around real travel time",
      "Flights, visas and add-ons available on request",
    ],
    itinerary: destination.itinerary || defaultPackageItinerary(destination),
    inclusions: destination.inclusions || DEFAULT_PACKAGE_INCLUSIONS,
    notes: destination.notes || DEFAULT_PACKAGE_NOTES,
    ctaMessage: destination.ctaMessage || `Hi Travel Dimension, I want details for ${title}.`,
  };
}

function packageEmailHref(destination) {
  const body = [
    "Hi Travel Dimension,",
    "",
    `I'd like details for ${destination.packageTitle}.`,
    `Duration: ${destination.days}`,
    `Starting price: Rs. ${destination.price} per person`,
    "Preferred travel dates: Flexible",
    "Travelers: 2",
  ].join("\n");
  return emailHref(`${destination.packageTitle} enquiry`, body);
}

function relatedPackages(destination) {
  const sameRegion = ALL_PACKAGES.filter((item) => item.slug !== destination.slug && item.country === destination.country);
  const fallback = ALL_PACKAGES.filter((item) => item.slug !== destination.slug && !sameRegion.some((same) => same.slug === item.slug));
  return [...sameRegion, ...fallback].slice(0, 3);
}

function Destinations({ onNavigate }) {
  const tabs = Object.keys(DEST);
  const [tab, setTab] = useState(tabs[0]);
  const list = DEST[tab];
  return (
    <section className="section" id="destinations">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">{I.pin} Top destinations</span>
            <h2>Where will you go next?</h2>
            <p>Hand-picked itineraries we&rsquo;ve personally walked, tested and priced. Every trip below is fully customisable — change a hotel, extend a city, swap a flight.</p>
          </div>
          <div className="right">
            <a href={WHATSAPP_URL} className="btn btn-outline btn-sm" target="_blank" rel="noopener">View all packages {I.arrow}</a>
          </div>
        </div>

        <div className="tabs">
          {tabs.map(t => (
            <button key={t} className={`tab ${t === tab ? "active" : ""}`} type="button" onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>

        <div className="dest-grid">
          {list.map(d => (
            <DestCard key={d.city + d.country} d={d} onNavigate={onNavigate} />
          ))}
        </div>
      </div>
    </section>
  );
}
function DestCard({ d, onNavigate }) {
  const [liked, setLiked] = useState(false);
  const href = packagePath(d.slug);
  const handleNavigate = (event) => {
    if (!onNavigate || !isPlainLeftClick(event)) return;
    event.preventDefault();
    onNavigate(href);
  };
  return (
    <article className="dest-card">
      <a className="dest-link" href={href} onClick={handleNavigate} aria-label={`View ${d.packageTitle || d.city} package`}>
      <div className="dest-photo" style={{ backgroundImage: `url(${d.img})` }}>
        {d.badge && <span className={`badge ${d.hot ? "hot" : ""}`}>{d.badge}</span>}
        <div className="info">
          <div className="country">{I.pin} {d.country}</div>
          <div className="city">{d.city}</div>
        </div>
        <span className="dest-days">{d.days}</span>
      </div>
      <div className="dest-meta">
        <div className="price">
          <small>Starting from</small>
          <strong>Rs. {d.price} <span>/ person</span></strong>
          {d.strike && <span className="strike">Rs. {d.strike}</span>}
        </div>
        <span className="rating">{I.star} {d.rating}</span>
      </div>
      </a>
      <button className={`heart ${liked ? "on" : ""}`} type="button" aria-label={`Save ${d.city}`} aria-pressed={liked} onClick={(e) => { e.stopPropagation(); setLiked(v => !v); }}>{I.heart}</button>
    </article>
  );
}

// ── Services ──────────────────────
function PackagePage({ slug, onNavigate }) {
  const rawDestination = getPackageBySlug(slug);
  if (!rawDestination) return <PackageNotFound onNavigate={onNavigate} />;

  const destination = enrichPackage(rawDestination);
  const related = relatedPackages(destination);
  const waHref = whatsappHref(destination.ctaMessage);
  const emailUrl = packageEmailHref(destination);
  const backToDestinations = (event) => {
    if (!isPlainLeftClick(event)) return;
    event.preventDefault();
    onNavigate(HOME_LINKS.destinations);
  };
  const navigateRelated = (href) => (event) => {
    if (!isPlainLeftClick(event)) return;
    event.preventDefault();
    onNavigate(href);
  };

  return (
    <main className="package-page">
      <section className="package-hero" style={{ backgroundImage: `url(${destination.img})` }}>
        <div className="package-hero-shade"></div>
        <div className="shell package-hero-content">
          <a className="back-link" href={HOME_LINKS.destinations} onClick={backToDestinations}>{I.arrow} Back to destinations</a>
          <div className="package-kicker">{I.pin} {destination.route}</div>
          <h1>{destination.packageTitle}</h1>
          <p>{destination.overview}</p>
          <div className="package-hero-actions">
            <a className="btn btn-wa" href={waHref} target="_blank" rel="noopener">{I.wa} Enquire on WhatsApp</a>
            <a className="btn btn-light" href={emailUrl}>{I.send} Email itinerary</a>
          </div>
        </div>
      </section>

      <section className="package-summary">
        <div className="shell package-summary-grid">
          <div><span>Duration</span><strong>{destination.days}</strong></div>
          <div><span>Starting from</span><strong>Rs. {destination.price}</strong><small>/ person</small></div>
          <div><span>Rating</span><strong>{destination.rating} / 5</strong></div>
          <div><span>Best for</span><strong>{destination.badge || "Custom trip"}</strong></div>
        </div>
      </section>

      <section className="section package-main">
        <div className="shell package-layout">
          <div className="package-content">
            <section className="package-panel">
              <span className="eyebrow">Overview</span>
              <h2>Trip highlights</h2>
              <div className="highlight-grid">
                {destination.highlights.map((highlight) => (
                  <div className="highlight-item" key={highlight}>{I.check}<span>{highlight}</span></div>
                ))}
              </div>
            </section>

            <section className="package-panel">
              <span className="eyebrow">Itinerary</span>
              <h2>Day-wise plan</h2>
              <div className="itinerary-list">
                {destination.itinerary.map((item) => (
                  <article className={`itinerary-item ${item.image ? "with-image" : ""}`} key={item.day + item.title}>
                    <div className="day-pill">{item.day}</div>
                    {item.image && (
                      <img
                        className="itinerary-image"
                        src={item.image}
                        alt={item.imageAlt || item.title}
                        loading="lazy"
                      />
                    )}
                    <div className="itinerary-copy">
                      <h3>{item.title}</h3>
                      <p>{item.text}</p>
                    </div>
                  </article>
                ))}
              </div>
            </section>

            <section className="package-panel">
              <span className="eyebrow">Inclusions</span>
              <h2>What is covered</h2>
              <div className="package-list-grid">
                {destination.inclusions.map((item) => (
                  <div className="package-list-item" key={item}>{I.check}<span>{item}</span></div>
                ))}
              </div>
            </section>
          </div>

          <aside className="package-sidebar">
            <div className="quote-box">
              <span className="eyebrow">Custom quote</span>
              <h3>Plan this package with Travel Dimension.</h3>
              <p>Share travel dates, hotel preference and traveller count. We will shape the final quote around live availability.</p>
              <a className="btn btn-wa" href={waHref} target="_blank" rel="noopener">{I.wa} WhatsApp now</a>
              <a className="btn btn-outline" href={emailUrl}>{I.send} Email brief</a>
            </div>
            <div className="notes-box">
              <h3>Good to know</h3>
              <ul>
                {destination.notes.map((note) => <li key={note}>{note}</li>)}
              </ul>
            </div>
          </aside>
        </div>
      </section>

      <section className="section related-section">
        <div className="shell">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">More ideas</span>
              <h2>Related packages</h2>
            </div>
          </div>
          <div className="related-grid">
            {related.map((item) => {
              const detail = enrichPackage(item);
              const href = packagePath(detail.slug);
              return (
                <a className="related-card" href={href} onClick={navigateRelated(href)} key={detail.slug}>
                  <div className="related-photo" style={{ backgroundImage: `url(${detail.img})` }}></div>
                  <div>
                    <span>{detail.days}</span>
                    <h3>{detail.packageTitle}</h3>
                    <p>From Rs. {detail.price} / person</p>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}

function PackageNotFound({ onNavigate }) {
  const backToDestinations = (event) => {
    if (!isPlainLeftClick(event)) return;
    event.preventDefault();
    onNavigate(HOME_LINKS.destinations);
  };
  return (
    <main className="package-page package-empty">
      <section className="section">
        <div className="shell empty-package">
          <span className="eyebrow">Package not found</span>
          <h1>This destination page is still boarding.</h1>
          <p>The package link does not match an active Travel Dimension itinerary. Browse the current destinations or message us with your preferred route.</p>
          <div className="package-hero-actions">
            <a className="btn btn-primary" href={HOME_LINKS.destinations} onClick={backToDestinations}>View destinations {I.arrow}</a>
            <a className="btn btn-outline" href={WHATSAPP_URL} target="_blank" rel="noopener">{I.wa} Ask us</a>
          </div>
        </div>
      </section>
    </main>
  );
}

const SVCS = [
  { ico: I.globe, t: "International Packages", d: "Curated trips across Europe, Southeast Asia, the Americas and beyond.", featured: true },
  { ico: I.india, t: "Domestic Getaways", d: "Himalayas, Kerala, Rajasthan, Andaman Islands — the best of incredible India." },
  { ico: I.plane, t: "Flights", d: "Best-rate fares on full-service & low-cost carriers. Multi-city routing." },
  { ico: I.hotel, t: "Hotels", d: "Boutique stays to 5-star resorts at preferred-partner rates." },
  { ico: I.cruise, t: "Cruises", d: "Mediterranean, Caribbean, Singapore, Norwegian fjords." },
  { ico: I.visa, t: "Visa Assistance", d: "Schengen, US/UK, UAE, Australia — checklists, appointments, embassy help." },
  { ico: I.briefcase, t: "Corporate Events", d: "Off-sites, MICE programs, incentive trips with on-ground execution." },
  { ico: I.phone, t: "24/7 Concierge", d: "Real humans on WhatsApp through every leg of your trip." },
];
function Services() {
  return (
    <section className="section" id="services" style={{ background: "var(--bg-soft)" }}>
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">What we do</span>
            <h2>Everything you need, under one roof.</h2>
            <p>Travel Dimension is a full-service studio. One team for flights, stays, visas, cruises, and the small details in between.</p>
          </div>
        </div>
        <div className="services-grid">
          {SVCS.map((s, i) => (
            <div className={`svc-card ${s.featured ? "featured" : ""}`} key={i}>
              <div className="svc-icon">{s.ico}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <a className="more" href={WHATSAPP_URL} target="_blank" rel="noopener">Learn more {I.arrow}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Founder ──────────────────────
function Founder() {
  return (
    <section className="section founder-section" id="founder">
      <div className="shell">
        <div className="founder-grid">
          <div className="founder-photo-wrap">
            <div className="founder-photo" style={{ backgroundImage: `url(${FOUNDER_IMAGE})` }}></div>
            <div className="founder-stamp"><span className="dot"></span> Founder & Travel Expert</div>
            <div className="founder-badge">
              <div className="num">16+</div>
              <div className="lab">Countries personally<br/>explored across 5 continents</div>
            </div>
          </div>
          <div className="founder-body">
            <span className="eyebrow">Meet the founder</span>
            <h2 style={{ marginTop: 12 }}>Hitanshu Khatri</h2>
            <div className="role" style={{ marginTop: 6 }}>Founder & Travel Expert</div>
            <div className="quote">
              &ldquo;I plan trips the way I&rsquo;d plan them for my closest friends — with the local cafe pinned, the airport queue avoided, and the price negotiated twice.&rdquo;
            </div>
            <p className="bio">
              From volcanoes in Indonesia to fjords in Switzerland and souks in the UAE, Hitanshu has spent the last decade
              collecting the kind of trip-planning knowledge you can&rsquo;t Google. Every Travel Dimension itinerary is touched
              by that experience — which hotel actually has the view, which day the museum is empty, which local guide is worth their fee.
            </p>
            <div className="founder-stats">
              <div className="cell"><div className="n">16+</div><div className="l">Countries</div></div>
              <div className="cell"><div className="n">5</div><div className="l">Continents</div></div>
              <div className="cell"><div className="n">10y</div><div className="l">On the road</div></div>
            </div>
            <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href={WHATSAPP_URL} target="_blank" rel="noopener">Plan with Hitanshu {I.arrow}</a>
              <a className="btn btn-outline" href={GENERAL_EMAIL_URL}>{I.send} Email the team</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Process ──────────────────────
function Process() {
  return (
    <section className="section" id="process">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">How it works</span>
            <h2>From idea to suitcase, in four steps.</h2>
            <p>We pack the planning. You pack the bag.</p>
          </div>
        </div>
        <div className="steps">
          <div className="step"><div className="n">01</div><h4>Tell us your trip</h4><p>A 20-minute call. Dates, dreams, budget, dealbreakers. We listen first.</p></div>
          <div className="step"><div className="n">02</div><h4>Custom itinerary</h4><p>A day-by-day plan with transparent pricing — flights, stays, transfers, all of it.</p></div>
          <div className="step"><div className="n">03</div><h4>Refine together</h4><p>Swap hotels, extend a city, add experiences. We rework until it&rsquo;s unmistakably yours.</p></div>
          <div className="step"><div className="n">04</div><h4>Travel & enjoy</h4><p>One WhatsApp thread, all 24 hours. Re-routings, recommendations, last-minute reservations.</p></div>
        </div>
      </div>
    </section>
  );
}

// ── Testimonials ────────────────────
const TST = [
  { stars: 5, q: "Hitanshu planned our 12-day Switzerland honeymoon down to the train seat. Not a single moment felt rushed and the rates were unbeatable.", n: "Aarav & Riya M.", t: "Switzerland · 12 days", av: "A", img: U("photo-1494790108377-be9c29b29330") },
  { stars: 5, q: "We've booked four trips with Travel Dimension now. Best rates, real recommendations, zero sales pitch. Will not book anywhere else.", n: "Priya Shenoy", t: "Bali · Maldives · Dubai", av: "P", img: U("photo-1438761681033-6461ffad8d80") },
  { stars: 5, q: "Our company off-site for 60 people in Phuket — perfectly executed. Even the rain plan had a backup plan. Felt like having a friend in the business.", n: "Karthik R.", t: "Corporate · Phuket", av: "K", img: U("photo-1500648767791-00dcc994a43e") },
];
function Voices() {
  return (
    <section className="section" id="voices" style={{ background: "var(--bg-soft)" }}>
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">{I.star} 4.9 / 5 average rating</span>
            <h2>Travelers love Travel Dimension.</h2>
            <p>A handful of postcards from the last twelve months — across honeymoons, family trips and corporate retreats.</p>
          </div>
        </div>
        <div className="tst-grid">
          {TST.map((t, i) => (
            <div className="tst-card" key={i}>
              <div className="stars">{Array.from({ length: t.stars }, (_, k) => <span key={k}>{I.star}</span>)}</div>
              <p className="quote">{t.q}</p>
              <div className="who">
                <div className="av" style={{ backgroundImage: `url(${t.img})` }}></div>
                <div>
                  <div className="nm">{t.n}</div>
                  <div className="tr">{t.t}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Stats band ──────────────────────
function StatsBand() {
  return (
    <section className="stats-band">
      <div className="shell">
        <div className="stats-grid">
          <div className="cell"><div className="n">16+</div><div className="l">Countries</div><div className="d">Across 5 continents</div></div>
          <div className="cell"><div className="n">2,400+</div><div className="l">Happy travelers</div><div className="d">Repeat-rate of 60%</div></div>
          <div className="cell"><div className="n">100%</div><div className="l">Custom itineraries</div><div className="d">No two trips are alike</div></div>
          <div className="cell"><div className="n">24/7</div><div className="l">On-trip support</div><div className="d">WhatsApp, every continent</div></div>
        </div>
      </div>
    </section>
  );
}

// ── Instagram pulse ──────────────────────
function InstagramPulse() {
  return (
    <section className="section social-section" id="instagram">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">{I.ig} Instagram pulse</span>
            <h2>What Travel Dimension is talking about now.</h2>
            <p>Public profile snapshot from {INSTAGRAM_PROFILE.handle}: {INSTAGRAM_PROFILE.bio}</p>
          </div>
          <div className="right">
            <a className="btn btn-outline btn-sm" href={WHATSAPP_URL} target="_blank" rel="noopener">Plan from the feed {I.arrow}</a>
          </div>
        </div>

        <div className="social-layout">
          <aside className="ig-profile">
            <div className="ig-profile-top">
              <BrandMark />
              <div>
                <div className="ig-handle">{INSTAGRAM_PROFILE.handle}</div>
                <div className="ig-category">{INSTAGRAM_PROFILE.category}</div>
              </div>
            </div>
            <div className="ig-stats">
              {INSTAGRAM_PROFILE.stats.map(([value, label]) => (
                <div className="ig-stat" key={label}>
                  <strong>{value}</strong>
                  <span>{label}</span>
                </div>
              ))}
            </div>
            <div className="ig-highlights">
              <span>Highlights seen in browser</span>
              <div>
                {INSTAGRAM_PROFILE.highlights.map((item) => <b key={item}>{item}</b>)}
              </div>
            </div>
            <a className="btn btn-wa" href={WHATSAPP_URL} target="_blank" rel="noopener">{I.wa} Ask about these trips</a>
            <a className="btn btn-outline" href={GENERAL_EMAIL_URL}>{I.send} Email your shortlist</a>
          </aside>

          <div className="ig-feed-grid">
            {SOCIAL_POSTS.map((post) => (
              <article className="ig-card" key={post.title}>
                <div className="ig-thumb">
                  <img src={post.image} alt={`${post.tag} Instagram post preview`} loading="eager" />
                  <span>{post.tag}</span>
                </div>
                <div className="ig-copy">
                  <h3>{post.title}</h3>
                  <p>{post.detail}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── CTA ─────────────────────────────
function CTA() {
  const [subscribed, setSubscribed] = useState(false);
  const handleNewsletterSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const email = formData.get("email")?.trim();
    event.currentTarget.reset();
    setSubscribed(true);
    window.location.href = emailHref(
      "Subscribe to Travel Dimension deals",
      `Hi Travel Dimension,\n\nPlease add ${email || "my email"} to the monthly travel deals list.`
    );
  };

  return (
    <section className="section" id="contact">
      <div className="shell">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">Plan yours</span>
            <h2>Two ways to start.</h2>
            <p>Message us on WhatsApp for the fastest quote, or email your dates and destination brief for a detailed itinerary.</p>
          </div>
        </div>
        <div className="cta-grid">
          <a className="cta-card cta-wa" href={WHATSAPP_URL} target="_blank" rel="noopener">
            <div className="top">
              <div className="ico">{I.wa}</div>
              <div className="pip"><span style={{width:6,height:6,borderRadius:"50%",background:"#fff",display:"inline-block"}}></span> WhatsApp</div>
            </div>
            <div>
              <h3>Get a fast quote on WhatsApp.</h3>
              <p>Share your destination, dates, traveler count and budget. We will respond with practical options and next steps.</p>
              <span className="arrow">Start on WhatsApp {I.arrow}</span>
            </div>
          </a>
          <a className="cta-card cta-email" href={GENERAL_EMAIL_URL}>
            <div className="top">
              <div className="ico">{I.send}</div>
              <div className="pip">{CONTACT_EMAIL}</div>
            </div>
            <div>
              <h3>Email your trip brief.</h3>
              <p>Send the details once and we will come back with a structured plan for flights, stays, visas and experiences.</p>
              <span className="arrow">Email the team {I.arrow}</span>
            </div>
          </a>
        </div>

        <div className="nl" style={{ marginTop: 24 }}>
          <div>
            <span className="eyebrow">Travel deals, monthly</span>
            <h3 style={{ marginTop: 10 }}>Weekend trips, off-season packages and fare-drop alerts.</h3>
            <p>One thoughtful email a month. Unsubscribe anytime.</p>
          </div>
          <div className="nl-form-wrap">
            <form className="nl-form" onSubmit={handleNewsletterSubmit}>
              <input type="email" name="email" placeholder="you@email.com" required aria-label="Email address" />
              <button type="submit">Subscribe {I.send}</button>
            </form>
            {subscribed && <p className="form-status" role="status">Thanks. We'll be in touch.</p>}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────
function Footer() {
  return (
    <footer>
      <div className="shell">
        <div className="foot-grid">
          <div className="foot-brand">
            <div className="brand">
              <BrandMark />
              <span className="brand-name">Travel Dimension<small>Plan · Book · Explore</small></span>
            </div>
            <p>A boutique travel studio founded by Hitanshu Khatri. Stress-free holidays at the best rates, shaped by 16+ countries of real, on-the-ground experience.</p>
            <div className="foot-socials">
              <a href={GENERAL_EMAIL_URL} aria-label="Email Travel Dimension">{I.send}</a>
              <a href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="WhatsApp">{I.wa}</a>
            </div>
          </div>
          <div className="foot-col">
            <h5>Services</h5>
            <ul>
              <li><a href={HOME_LINKS.services}>International packages</a></li>
              <li><a href={HOME_LINKS.services}>Domestic getaways</a></li>
              <li><a href={HOME_LINKS.services}>Flights & hotels</a></li>
              <li><a href={HOME_LINKS.services}>Cruises</a></li>
              <li><a href={HOME_LINKS.services}>Visa assistance</a></li>
              <li><a href={HOME_LINKS.services}>Corporate events</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <ul>
              <li><a href={HOME_LINKS.founder}>About founder</a></li>
              <li><a href={HOME_LINKS.process}>How it works</a></li>
              <li><a href={HOME_LINKS.voices}>Reviews</a></li>
              <li><a href={HOME_LINKS.instagram}>Instagram pulse</a></li>
              <li><a href={HOME_LINKS.destinations}>Destinations</a></li>
              <li><a href={HOME_LINKS.contact}>Contact</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Get in touch</h5>
            <ul>
              <li><a href={GENERAL_EMAIL_URL}>{CONTACT_EMAIL}</a></li>
              <li><a href={`tel:${PHONE_TEL}`}>{PHONE_DISPLAY}</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">WhatsApp us</a></li>
              <li><a href={GENERAL_EMAIL_URL}>Email the team</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 Travel Dimension · A studio by Hitanshu Khatri · Mumbai, India</span>
          <span>Privacy · Terms · Cancellation policy</span>
        </div>
      </div>
    </footer>
  );
}

// ── Floating WA ──────────────────
function FloatWA() {
  return (
    <a className="float-wa" href={WHATSAPP_URL} target="_blank" rel="noopener" aria-label="WhatsApp">
      {I.wa}
    </a>
  );
}

// ── App ──────────────────────────
function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [route, setRoute] = useState(routeFromLocation);
  const navigate = (href) => {
    window.history.pushState({}, "", href);
    setRoute(routeFromLocation());
    requestAnimationFrame(() => {
      const target = window.location.hash ? document.querySelector(window.location.hash) : null;
      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
      else window.scrollTo({ top: 0, behavior: "smooth" });
    });
  };
  useEffect(() => {
    const handlePopState = () => setRoute(routeFromLocation());
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  }, []);
  useEffect(() => {
    const destination = route.view === "package" ? getPackageBySlug(route.slug) : null;
    document.title = destination
      ? `${enrichPackage(destination).packageTitle} | Travel Dimension`
      : "Travel Dimension - Stress-free holidays, at the best rates";
  }, [route]);
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach(el => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [route.view]);
  const isPackageRoute = route.view === "package";
  return (
    <>
      <TopStrip />
      <Nav onOpenMenu={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      {isPackageRoute ? (
        <PackagePage slug={route.slug} onNavigate={navigate} />
      ) : (
        <>
          <Hero />
          <PartnerStrip />
          <div className="reveal"><Destinations onNavigate={navigate} /></div>
          <div className="reveal"><Services /></div>
          <div className="reveal"><Founder /></div>
          <div className="reveal"><Process /></div>
          <div className="reveal"><Voices /></div>
          <div className="reveal"><InstagramPulse /></div>
          <StatsBand />
          <div className="reveal"><CTA /></div>
        </>
      )}
      <Footer />
      <FloatWA />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
