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

/* ---------- HERO ---------- */
const FriendsHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1529156069898-49953e39b3ac?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">Friends Group</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">FOR A CREW · 26 GUIDES · {FRIENDS_META.newThisSeason} NEW THIS SEASON</span>
          <h1>
            Friends<em>Group.</em>
          </h1>
          <p className="lede">
            Group dynamics, shared houses, <em>the one person planning.</em> Twelve cities that work for a crew, eight itineraries to copy, and the practical brief nobody writes down until it's too late.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>26</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{FRIENDS_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Avg trip length</span>
              <span className="v">{FRIENDS_META.avgLengthDays} days</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{FRIENDS_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{FRIENDS_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="#roundtrips"><span className="n">RT</span>Roundtrips</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">38°43′N · 09°08′W · LISBON</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 072 · MARCUS</div>
  </section>
);

/* ---------- I · SHORTLIST OF CITIES ---------- */
const FriendsPlaces = () => {
  const [region, setRegion] = useFState("All");
  const regions = ["All", "Americas", "Europe"];
  const filtered = FRIENDS_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 a crew.</em></h2>
            <p>Picked by editors who've planned group trips badly enough to know what works — destinations where the shared house is affordable, the dinners are long, and the group stays intact.</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 || "#"} 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 {FRIENDS_PLACES.length}</span>
          <a href="#">All 26 group-trip destinations <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · STYLES (sub-types) ---------- */
const FriendsStyles = () => (
  <section className="solo-styles" id="styles">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Six kinds<em>of group trip.</em></h2>
          <p>A bachelorette, a reunion, and an adult friends trip are three different logistics problems. Pick the one that fits — the rest of the brief follows from it.</p>
        </div>
        <div className="right">All six lanes <Icon name="arrow" size={12} /></div>
      </div>

      <div className="styles-grid">
        {FRIENDS_STYLES.map(s => (
          <a key={s.id} href="#" 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 FriendsItins = () => (
  <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 by the desk and tested with actual groups. Each includes per-person cost, pacing notes, and the booking sequence that avoids the usual chaos.</p>
        </div>
        <div className="right">All itineraries <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {FRIENDS_ITINS.map(it => (
          <a key={it.ref} href="#" 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 FriendsByLength = () => (
  <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 can you get everyone to commit? Pick a row and we'll point you at the destinations that actually fit the 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>
        {FRIENDS_BY_LENGTH.map(l => (
          <a href="#" 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>
);

/* ---------- ROUNDTRIPS SECTION (between IV and V) ---------- */
const RtPanel = ({ p }) => (
  <div className={`rt-panel ${p.size}`}>
    <div className="pic" style={{ backgroundImage: `url(${p.img})` }}></div>
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
  </div>
);

const RoundtripsSection = () => (
  <section className="roundtrips-section" id="roundtrips">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">PARTNER · ROUNDTRIPS</span></div>
          <h2>One app.<em>The whole crew.</em></h2>
        </div>
        <p>Itineraries that update for everyone. Expenses that balance themselves. Votes that break ties. <em>A shared calendar that actually respects who's in and who's out.</em></p>
      </div>

      <div className="rt-grid">
        {ROUNDTRIPS_PANELS.map((p, i) => <RtPanel key={i} p={p} />)}
      </div>

      <div className="rt-footer">
        <div className="note">
          We picked one partner for the friends-trip lane and it's <em>Roundtrips</em>. Free for the first trip, then $4/person.
        </div>
        <div className="actions">
          <a href="https://roundtrips.org" className="btn-rt">Try Roundtrips →</a>
          <a href="https://roundtrips.org" className="link-rt">Read the review</a>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- V · PRACTICAL BRIEF ---------- */
const FriendsPractical = () => (
  <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 things, in order of importance.</em></h2>
          <p>The operational layer. The things that determine whether the group returns home still friends — or at least, not actively annoyed at each other.</p>
        </div>
        <div className="right">Full planning guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {FRIENDS_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 FriendsReading = () => (
  <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 below this page. If you're planning a group trip and only have time for one, read the first one.</p>
        </div>
        <div className="right">All Group essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {FRIENDS_READING.map((r, i) => (
          <a key={i} href="#" 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 FriendsVoices = () => (
  <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 Friends desk.<em>Five editors, 119 group trips.</em></h2>
          <p>This is a personal beat. These are the people writing it — what they've learned, what they'd do differently, and what they'd never change.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        {FRIENDS_DESK.map((v, i) => (
          <article key={v.name} className="voice" style={
            i === 0 ? {} :
            i === 1 ? { paddingLeft: "36px", paddingRight: "36px" } :
            i === 2 ? { paddingLeft: "36px", borderRight: "none" } :
            i === 3 ? { paddingLeft: "0", paddingRight: "36px", borderRight: "1px solid rgba(241,235,224,0.14)" } :
            { paddingLeft: "36px", borderRight: "none" }
          }>
            <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} group trips</span>
              <a href="#">Read their lane <Icon name="arrow" size={12} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VIII · FAQ ---------- */
const FriendsFAQ = () => {
  const [open, setOpen] = useFState(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>Reader letters from people who are mid-plan and slightly stressed. Lightly edited.</p>
              </div>
            </div>
            <a href="mailto:friends@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {FRIENDS_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 FriendsCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">TWELVE CITIES · EIGHT ITINERARIES · ONE SHARED HOUSE</div>
      <h2>Plan the group trip<em>without the group chat.</em></h2>
      <p>Open the shortlist, copy an itinerary, hand the expense tracker to Roundtrips. The rest is just agreeing on a date — which is the hard part and always was.</p>
      <div className="cta-actions">
        <button className="btn-p">Open the shortlist →</button>
        <a href="/en/plan/trip-types/" className="btn-g">↑ Back to Trip Types</a>
      </div>
    </div>
    <div className="coord">FRIENDS GROUP · LANE 04 · UPDATED 26.04.2026</div>
    <div className="coord right">FIELD DESK Nº 072</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const FriendsApp = () => (
  <div data-screen-label="Friends Group Lane">
    <FriendsHero />
    <FriendsPlaces />
    <FriendsStyles />
    <FriendsItins />
    <FriendsByLength />
    <RoundtripsSection />
    <FriendsPractical />
    <FriendsReading />
    <FriendsVoices />
    <FriendsFAQ />
    <FriendsCTA />
    <Footer />
  </div>
);

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