/* eslint-disable */
const { useState: useLState } = React;

/* ---------- HERO ---------- */
const LuxuryHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1573843981267-be1999ff37cd?w=2400&q=85)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />

    <div className="container">
      <div className="solo-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <a href="/en/plan/trip-types/">Trip Types</a>
        <span className="sep">/</span>
        <span className="here">Luxury</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">ELEVATED · {LUXURY_META.count} GUIDES · {LUXURY_META.newThisSeason} NEW THIS SEASON</span>
          <h1>
            Luxury<em>Travel.</em>
          </h1>
          <p className="lede">
            What the best version of each destination actually looks like. <em>Twelve destinations at their ceiling.</em> Eight itineraries costed and tested. The brief on how to spend well rather than just spend a lot.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{LUXURY_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{LUXURY_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Avg trip length</span>
              <span className="v">{LUXURY_META.avgLengthDays} days</span>
            </div>
            <div className="row">
              <span className="k">Starting budget</span>
              <span className="v">{LUXURY_META.topBudget}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{LUXURY_META.updated}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="solo-toc">
        <span className="lbl">In this issue</span>
        <a href="#places"><span className="n">I</span>The shortlist</a>
        <span className="dot">·</span>
        <a href="#styles"><span className="n">II</span>Six trip types</a>
        <span className="dot">·</span>
        <a href="#itins"><span className="n">III</span>Itineraries</a>
        <span className="dot">·</span>
        <a href="#length"><span className="n">IV</span>By trip length</a>
        <span className="dot">·</span>
        <a href="#practical"><span className="n">V</span>The brief</a>
        <span className="dot">·</span>
        <a href="#reading"><span className="n">VI</span>Reading list</a>
        <span className="dot">·</span>
        <a href="#voices"><span className="n">VII</span>The desk</a>
        <span className="dot">·</span>
        <a href="#faq"><span className="n">VIII</span>FAQ</a>
      </div>
    </div>

    <div className="hero-coord">04°10′N · 73°30′E · MALDIVES</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 001 · CÉLINE</div>
  </section>
);

/* ---------- I · SHORTLIST ---------- */
const LuxuryPlaces = () => {
  const [region, setRegion] = useLState("All");
  const regions = ["All", "Europe", "Asia", "Africa", "Middle East"];
  const filtered = LUXURY_PLACES.filter(p => region === "All" || p.region === region);

  return (
    <section className="solo-places" id="places">
      <div className="container">
        <div className="solo-section-head">
          <div className="num">I</div>
          <div className="titles">
            <h2>Twelve destinations,<em>at their ceiling.</em></h2>
            <p>Picked by editors who have stayed in every tier — not because they are expensive, but because this is the version worth the expense.</p>
          </div>
          <div className="right">
            <div className="filter-pills">
              {regions.map(r => (
                <button key={r} className={`f-pill${region === r ? " on" : ""}`} onClick={() => setRegion(r)}>{r}</button>
              ))}
            </div>
          </div>
        </div>

        <div className="places-grid">
          {filtered.map((p, i) => (
            <a
              key={p.id}
              href={`/en/plan/trip-types/luxury/luxury-${p.id}/`}
              className={`place-card${i === 0 && region === "All" ? " feature" : ""}`}
            >
              <div className="img" style={{ backgroundImage: `url(${p.img})` }}></div>
              <div className="scrim"></div>
              {p.tag && <span className="tag">{p.tag}</span>}
              <span className="rank">NO. {String(p.rank).padStart(2, "0")}</span>
              <div className="body">
                <div className="loc">
                  <span className="city">{p.city}</span>
                  <span className="country">{p.country}</span>
                </div>
                <p className="why">{p.why}</p>
                <div className="meta">
                  <span><em>{p.nights}</em> nights</span>
                  <span className="sep">·</span>
                  <span>{p.budget}</span>
                  <span className="sep">·</span>
                  <span>{p.season}</span>
                </div>
                <div className="best-for">
                  {p.best.map(b => <span key={b}>{b}</span>)}
                </div>
              </div>
            </a>
          ))}
        </div>

        <div className="places-foot">
          <span className="ct">{LUXURY_PLACES.length} destinations reviewed · Updated {LUXURY_META.updated}</span>
          <a href="/en/plan/destinations/">All destinations <Icon name="arrow" size={14} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · TRIP STYLES ---------- */
const LuxuryStyles = () => (
  <section className="solo-styles" id="styles">
    <div className="container">
      <div className="solo-section-head stacked">
        <div className="titles">
          <h2>Six ways to travel<em>at this level.</em></h2>
          <p>The destination matters. So does the type of trip. Pick the one that describes how you want to move, not just where.</p>
        </div>
      </div>
      <div className="styles-grid">
        {LUXURY_STYLES.map(s => (
          <a key={s.id} href={`/en/plan/trip-types/luxury/${s.id}/`} className="style-card">
            <div className="pic" style={{ backgroundImage: `url(${s.img})` }}>
              <span className="num-r">{s.num}</span>
            </div>
            <div className="body">
              <h3>{s.title}<em>{s.em}</em></h3>
              <p>{s.desc}</p>
              <div className="foot">
                <span>{s.count}</span>
                <span className="go">Read more <Icon name="arrow" size={12} /></span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- III · ITINERARIES ---------- */
const LuxuryItins = () => (
  <section className="solo-itins" id="itins">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Eight itineraries<em>to copy.</em></h2>
          <p>Day-by-day plans with budgets confirmed in 2026. Each is a complete trip at the right tier — not over-programmed, not under-considered.</p>
        </div>
      </div>
      <div className="itins-grid">
        {LUXURY_ITINS.map(it => (
          <a key={it.ref} href={`/en/plan/trip-types/luxury/${it.ref.toLowerCase()}/`} className="itin-card">
            <div className="pic" style={{ backgroundImage: `url(${it.img})` }}>
              <span className="ref-pill">{it.ref}</span>
              <span className="day-pill"><em>{it.days}</em><span className="d">days</span></span>
            </div>
            <div className="body">
              <h4>{it.title}<em>{it.em}</em></h4>
              <div className="tags">
                {it.tags.map(t => <span key={t}>{t}</span>)}
              </div>
              <div className="foot">
                <span>by {it.author}</span>
                <span className="price">{it.price}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- IV · BY LENGTH ---------- */
const LuxuryLength = () => (
  <section className="solo-length" id="length">
    <div className="container">
      <div className="solo-section-head stacked">
        <div className="titles">
          <h2>By the day count.<em>Pick your window.</em></h2>
          <p>Luxury trips have a different cost-per-day curve. Shorter trips in Paris or Marrakech work. Longer trips in the Maldives or on safari scale proportionally better.</p>
        </div>
      </div>
      <div className="length-table">
        <div className="row head">
          <span>Length</span>
          <span>Days</span>
          <span>Guides</span>
          <span>Destinations</span>
          <span>Budget</span>
          <span></span>
        </div>
        {LUXURY_BY_LENGTH.map(r => (
          <a key={r.len} href={`/en/plan/trip-types/luxury/${r.len.toLowerCase().replace(/\s+/g, "-")}/`} className="row">
            <span className="lbl">{r.len}</span>
            <span className="d"><em>{r.days}</em></span>
            <span className="ct">{r.count}</span>
            <span className="ex">{r.examples}</span>
            <span className="pr">{r.price}</span>
            <span className="go"><Icon name="arrow" size={14} /></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- V · PRACTICAL ---------- */
const LUXURY_PRACTICAL = [
  { num: "01", kind: "Hotel tip", title: "Book direct or via Virtuoso.", p: "Direct bookings get better upgrade odds. Virtuoso-affiliated agents layer on amenity credits and complimentary upgrades at participating properties — at zero additional cost to you. For Paris palace hotels or Maldives overwater villas, the difference is meaningful." },
  { num: "02", kind: "Dining tip", title: "Reserve Michelin restaurants 60 days out.", p: "France is 60 days minimum, often 90 for the top tables. Japan requires a Japanese-speaking intermediary or a hotel concierge with the relationship. Book the restaurant before you book the flight. This is not a joke." },
  { num: "03", kind: "Pace tip", title: "Two nights minimum per property. Three is better.", p: "The one-night luxury hotel stay is a performance. Two nights is when you become a guest. Three nights is when the staff knows your coffee order without asking. Never check into an expensive property for one night if you can avoid it." },
  { num: "04", kind: "Staffing tip", title: "A private guide for the first day changes everything.", p: "Not for every day — just the first. A good guide in Kyoto, Marrakech, or Petra reframes what you're looking at in a way that sticks for the rest of the trip. Skipping the guide to save $300 on a $12,000 trip is one of the most common luxury travel mistakes." },
  { num: "05", kind: "Packing tip", title: "Capsule wardrobe. Valet pressing is included.", p: "Four outfits that mix, two pairs of shoes, one formal option. Every property at this level offers laundry. Pack for one week regardless of trip length. The single exception: whatever cannot be replaced. Everything else, check it." },
  { num: "06", kind: "Timing tip", title: "Shoulder season gives you 70% of the experience at 40% of the crowd.", p: "Amalfi in May instead of July. Paris in September instead of August. Kyoto in late November instead of peak cherry blossom. The food is the same, the views are the same, and you can actually walk through the places you came to see." },
];

const LuxuryPractical = () => (
  <section className="solo-practical" id="practical">
    <div className="container">
      <div className="solo-section-head dark stacked">
        <div className="titles">
          <h2>The brief.<em>Six things that actually matter.</em></h2>
          <p>Not hotel rankings. Not packing lists. The structural decisions that determine whether a high-cost trip delivers what it promised.</p>
        </div>
      </div>
      <div className="practical-grid">
        {LUXURY_PRACTICAL.map(pr => (
          <div key={pr.num} className="pr-card">
            <span className="num">{pr.num}</span>
            <span className="kind">{pr.kind}</span>
            <h4>{pr.title}</h4>
            <p>{pr.p}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VI · READING ---------- */
const LuxuryReading = () => (
  <section className="solo-reading" id="reading">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">VI</div>
        <div className="titles">
          <h2>The reading list.<em>Eight essays from the desk.</em></h2>
          <p>Read the first two before you book anything. Read the timing piece before you commit to a month.</p>
        </div>
      </div>
      <div className="reading-list">
        {LUXURY_READING.map((r, i) => (
          <a key={i} href={`/en/plan/trip-types/luxury/${r.tag.toLowerCase()}-${i + 1}/`} className="r-row">
            <span className="n">{String(i + 1).padStart(2, "0")}</span>
            <span className="tag">{r.tag}</span>
            <span className="t">{r.title}<em>{r.em}</em></span>
            <span className="by">By {r.author}</span>
            <span className="dur">{r.duration} read</span>
            <span className="go"><Icon name="arrow" size={14} /></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VII · VOICES ---------- */
const LuxuryVoices = () => (
  <section className="solo-voices" id="voices">
    <div className="container">
      <div className="solo-section-head dark stacked">
        <div className="titles">
          <h2>The luxury desk.<em>{LUXURY_DESK.length} editors, 124 trips.</em></h2>
          <p>Every guide on this desk was written by someone who has stayed in the property type they are writing about. The advice is specific because the expense was real.</p>
        </div>
      </div>
      <div className="voices-grid">
        {LUXURY_DESK.map((v, i) => (
          <div key={v.name} className="voice">
            <div className="av" style={{ backgroundImage: `url(${v.av})` }}></div>
            <div className="who">
              <div className="name">{v.name}</div>
              <div className="role">{v.role} · {v.trips} trips</div>
            </div>
            <div className="line">"{v.line}"</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VIII · FAQ ---------- */
const LuxuryFaq = () => {
  const [open, setOpen] = useLState(null);
  return (
    <section className="solo-faq" id="faq">
      <div className="container">
        <div className="faq-shell">
          <div className="lhs">
            <div className="solo-section-head stacked">
              <div className="titles">
                <h2>The questions<em>we get a lot.</em></h2>
              </div>
            </div>
            <a href="/contact" className="ask">Ask a question →</a>
          </div>
          <div className="rhs">
            {LUXURY_FAQS.map((f, i) => (
              <div key={i} className={`f-item${open === i ? " open" : ""}`} onClick={() => setOpen(open === i ? null : i)}>
                <div className="q">
                  <span className="qt">{f.q}</span>
                  <span className="tg">+</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- CTA ---------- */
const LuxuryCta = () => (
  <section className="solo-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=2400&q=85)` }}></div>
    <div className="inner">
      <div className="kicker">HowTo: Travel Edition · Luxury Desk</div>
      <h2>Travel well.<em>Not just expensively.</em></h2>
      <p>The difference between a high-cost trip and a genuinely great one is almost never about spending more. Our desk spends 44 guides explaining exactly where that line is.</p>
      <div className="cta-actions">
        <a href="/en/plan/trip-types/luxury/luxury-maldives/" className="btn-p">Start with the Maldives</a>
        <a href="/en/plan/trip-types/" className="btn-g">All trip types</a>
      </div>
    </div>
    <div className="coord">48°51′N · 02°21′E · PARIS</div>
    <div className="coord right">FIELD DESK Nº 001 · CÉLINE MARCHETTI</div>
  </section>
);

/* ---------- ROOT ---------- */
const LuxuryApp = () => (
  <>
    <LuxuryHero />
    <LuxuryPlaces />
    <LuxuryStyles />
    <LuxuryItins />
    <LuxuryLength />
    <LuxuryPractical />
    <LuxuryReading />
    <LuxuryVoices />
    <LuxuryFaq />
    <LuxuryCta />
    <Footer />
  </>
);

const rootEl = document.getElementById("root");
if (rootEl) {
  ReactDOM.createRoot(rootEl).render(<LuxuryApp />);
}
