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

/* ---------- HERO ---------- */
const CouplesHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1499678329028-101435549a4e?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">Couples</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">FOR TWO · 44 GUIDES · {COUPLES_META.newThisSeason} NEW THIS SEASON</span>
          <h1>
            Couples<em>Travel.</em>
          </h1>
          <p className="lede">
            Pace, privacy, <em>the right number of restaurants.</em> Twelve cities worth sharing, eight itineraries to steal, and the small art of not killing each other at altitude.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>44</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{COUPLES_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Avg trip length</span>
              <span className="v">{COUPLES_META.avgLengthDays} days</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{COUPLES_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{COUPLES_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 ways to travel as two</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">45°59′N · 09°15′E · LAKE COMO</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 085 · MARCUS</div>
  </section>
);

/* ---------- I · SHORTLIST OF CITIES ---------- */
const CouplesPlaces = () => {
  const [region, setRegion] = useCState("All");
  const regions = ["All", "Europe", "Asia", "Americas", "Africa"];
  const filtered = COUPLES_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 cities,<em>for two.</em></h2>
            <p>Picked by editors who have argued over where to eat in all of them — not because they score high on romance indexes, but because the pace, the lodging options, and the dinner tables make two people feel like the city was designed for exactly them.</p>
          </div>
          <div className="filter-pills">
            {regions.map(r => (
              <button
                key={r}
                className={`f-pill ${region === r ? "on" : ""}`}
                onClick={() => setRegion(r)}
              >{r}</button>
            ))}
          </div>
        </div>

        <div className="places-grid">
          {filtered.map((p, i) => (
            <a key={p.id} href={p.href || "/en/plan/"} className={`place-card ${i === 0 ? "feature" : ""}`}>
              <div className="img" style={{ backgroundImage: `url(${p.img})` }}></div>
              <div className="scrim"></div>
              <span className="rank">No. {String(p.rank).padStart(2, "0")}</span>
              {p.tag && <span className="tag">{p.tag}</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 className="coord">{p.coord}</div>
              </div>
            </a>
          ))}
        </div>
        <div className="places-foot">
          <span className="ct">Showing {filtered.length} of {COUPLES_PLACES.length}</span>
          <a href="/en/plan/">All 44 couples destinations <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · STYLES (sub-types within couples) ---------- */
const CouplesStyles = () => (
  <section className="solo-styles" id="styles">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Six ways<em>to travel as two.</em></h2>
          <p>A honeymoon and a long-stay couple and an adventure pair need different cities, different lodging, different briefs. Pick the one that describes the trip — or the relationship — you're planning for.</p>
        </div>
        <div className="right">All six lanes <Icon name="arrow" size={12} /></div>
      </div>

      <div className="styles-grid">
        {COUPLES_STYLES.map(s => (
          <a key={s.id} href="/en/plan/" 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 className="ct">{s.count}</span>
                <span className="go">Open lane <Icon name="arrow" size={12} /></span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- III · ITINERARIES ---------- */
const CouplesItins = () => (
  <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 built and walked by the desk. Each is a complete trip — flights to last dinner — with a budget that holds in 2026 and a pace that doesn't require negotiation every morning.</p>
        </div>
        <div className="right">All 44 itineraries <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {COUPLES_ITINS.map(it => (
          <a key={it.ref} href="/en/plan/" 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 className="by">By {it.author}</span>
                <span className="price">{it.price}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- IV · BY LENGTH ---------- */
const CouplesByLength = () => (
  <section className="solo-length" id="length">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>By the<em>day count.</em></h2>
          <p>How long do you have? Pick a row; we'll point you to the destinations and itineraries built for that window.</p>
        </div>
        <div className="right">Pace planner <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Trip window</div>
          <div className="d">Days</div>
          <div className="ct">Guides</div>
          <div className="ex">Best examples</div>
          <div className="pr">Starting</div>
          <div></div>
        </div>
        {COUPLES_BY_LENGTH.map(l => (
          <a href="/en/plan/" key={l.len} className="row">
            <div className="lbl">{l.len}</div>
            <div className="d"><em>{l.days}</em></div>
            <div className="ct">{l.count}</div>
            <div className="ex">{l.examples}</div>
            <div className="pr">{l.price}</div>
            <div className="go"><Icon name="arrow" size={14} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- V · PRACTICAL BRIEF ---------- */
const CouplesPractical = () => (
  <section className="solo-practical" id="practical">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">V</div>
        <div className="titles">
          <h2>The brief.<em>Six tips, in order of importance.</em></h2>
          <p>The non-obvious stuff. Things we've noticed matter on couples trips that travel guides don't usually say.</p>
        </div>
        <div className="right">Full planning guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {COUPLES_PRACTICAL.map((p, i) => (
          <div key={i} className="pr-card">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="kind">{p.k}</div>
            <h4>{p.h}</h4>
            <p>{p.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VI · READING LIST ---------- */
const CouplesReading = () => (
  <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>The pieces that sit one click below this page. If you only read three, read the first, the fifth, and the eighth.</p>
        </div>
        <div className="right">All Couples essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {COUPLES_READING.map((r, i) => (
          <a key={i} href="/en/plan/" className="r-row">
            <div className="n">{String(i + 1).padStart(2, "0")}</div>
            <div className="tag">{r.tag}</div>
            <div className="t">{r.title}<em>{r.em}</em></div>
            <div className="by">{r.author}</div>
            <div className="dur">{r.duration}</div>
            <div className="go"><Icon name="arrow" size={12} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VII · DESK / VOICES ---------- */
const CouplesVoices = () => (
  <section className="solo-voices" id="voices">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VII</div>
        <div className="titles">
          <h2>The Couples desk.<em>Four editors, 103 trips.</em></h2>
          <p>Couples travel is an editorial beat that rewards candor. These are the people writing it — and what they've learned by being honest about how two people actually travel.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {COUPLES_DESK.map(v => (
          <article 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}</div>
            </div>
            <p className="line">"{v.line}"</p>
            <div className="foot">
              <span className="trips">{v.trips} couples trips</span>
              <a href="/en/plan/">Read their lane <Icon name="arrow" size={12} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VIII · FAQ ---------- */
const CouplesFAQ = () => {
  const [open, setOpen] = useCState(0);
  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="num">VIII</div>
              <div className="titles">
                <h2>The questions<em>we get a lot.</em></h2>
                <p>Lightly edited reader letters. If yours isn't here, the planning desk reads every email.</p>
              </div>
            </div>
            <a href="mailto:couples@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {COUPLES_FAQS.map((f, i) => (
              <div key={i} className={`f-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : 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 CouplesCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">START WITH ONE CITY · ONE WEEK · TWO GOOD DINNERS</div>
      <h2>Plan a couples trip<em>without the pressure.</em></h2>
      <p>Open the shortlist, copy an itinerary, read the brief, book the table. The whole thing fits on two pages — and most of it just requires agreeing on the city.</p>
      <div className="cta-actions">
        <a href="#places" className="btn-p">Open the shortlist →</a>
        <a href="/en/plan/trip-types/" className="btn-g">↑ Back to Trip Types</a>
      </div>
    </div>
    <div className="coord">COUPLES · LANE 02 · UPDATED 26.04.2026</div>
    <div className="coord right">FIELD DESK Nº 085</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const CouplesApp = () => (
  <div data-screen-label="Couples Lane">
    <CouplesHero />
    <CouplesPlaces />
    <CouplesStyles />
    <CouplesItins />
    <CouplesByLength />
    <CouplesPractical />
    <CouplesReading />
    <CouplesVoices />
    <CouplesFAQ />
    <CouplesCTA />
    <Footer />
  </div>
);

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