/* global React, ReactDOM */
// NOTE: An earlier version of this file had a click-to-flip card preview
// behavior. It's preserved at repo root as `landing-with-flip.jsx.bak`
// in case we want to bring it back.

// ============================================================
// Data — edit this array to add or change destinations
// ============================================================
const DESTINATIONS = [
  {
    id: "vietnam",
    name: "Vietnam",
    short: "Foggy mountain roads, hidden towns & sleepless cities.",
    img: "/destinations/vietnam.jpg",
    tag: "Southeast Asia",
    featured: true,
  },
  {
    id: "balkans",
    name: "Balkans",
    short: "Albania, Kosovo, Macedonia & Montenegro by road.",
    img: "/destinations/balkans.jpg",
    tag: "The Balkans",
  },
  {
    id: "bali",
    name: "Bali",
    short: "Jungle roads, hidden beaches & villages lost in time.",
    img: "/destinations/bali.jpg",
    tag: "Indonesia",
  },
  {
    id: "morocco",
    name: "Morocco",
    short: "Ancient villages, mountain passes & endless surf.",
    img: "/destinations/morocco.jpg",
    tag: "North Africa",
  },
  {
    id: "soon",
    name: "Coming Soon",
    short: "",
    coming: true,
    img: "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&w=1400&q=80",
    tag: "Soon",
  },
];

const SOON_ITEMS = [
  { label: "Cinematic LUTs",     idx: "01" },
  { label: "BTS travel content", idx: "02" },
  { label: "Long-form edits",    idx: "03" },
  { label: "Courses",            idx: "04" },
  { label: "Consulting calls",   idx: "05" },
  { label: "Prints",             idx: "06" },
  { label: "Group trips",        idx: "07" },
  { label: "Physical products",  idx: "08" },
];

// ============================================================
// Cards — direct link to detail page (no flip)
// ============================================================
function Card({ d, idx }) {
  const num = String(idx + 1).padStart(2, "0");

  // Coming-soon card: no link, no hover preview
  if (d.coming) {
    return (
      <div className="card card--coming" style={{ cursor: "default" }}>
        <div className="card-inner">
          <div className="card-face card-front" style={{ opacity: 0.6 }}>
            <div className="photo" style={{ backgroundImage: `url(${d.img})`, filter: "grayscale(40%) brightness(0.7)" }} />
            <div className="scrim" />
            <div className="meta">
              <div>
                <div className="num">№ {num} · coming soon</div>
                <h3>{d.name}</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Active travel guide: whole card is a link to its detail page
  return (
    <a
      className={`card ${d.featured ? "featured" : ""}`}
      href={`/itineraries/${d.id}`}
      aria-label={`${d.name} travel guide · see details`}
    >
      <div className="card-inner">
        <div className="card-face card-front">
          <div className="photo" style={{ backgroundImage: `url(${d.img})` }} />
          <div className="scrim" />
          <div className="meta">
            <div>
              <div className="desc">{d.short}</div>
              <div className="num">№ {num} · travel guide</div>
              <h3>{d.name}</h3>
            </div>
            <div className="card-hint" aria-hidden="true">
              <span className="hint-label">Explore </span><span className="arrow">→</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  );
}

function CardGrid() {
  return (
    <>
      {DESTINATIONS.map((d, i) => <Card key={d.id} d={d} idx={i} />)}
    </>
  );
}

// ============================================================
// Soon grid
// ============================================================
function SoonGrid() {
  return (
    <>
      {SOON_ITEMS.map(s => (
        <div className="soon-cell" key={s.label}>
          <div className="idx">{s.idx} / soon</div>
          <span className="status" />
          <div className="label">{s.label}</div>
        </div>
      ))}
    </>
  );
}

// ============================================================
// Mount
// ============================================================
const cardsEl = document.getElementById("cards");
if (cardsEl) ReactDOM.createRoot(cardsEl).render(<CardGrid />);

const soonEl = document.getElementById("soonGrid");
if (soonEl) ReactDOM.createRoot(soonEl).render(<SoonGrid />);