/* eslint-disable */
// Safety Basics — first-trip-abroad L3 hub. Mirrors the three-day template's
// editorial vocabulary (cream/teal/tan, Playfair + DM Sans/Mono, numbered sections,
// hero masthead). Voice: experienced friend, calm, opinionated. Not alarmist.

const { useState: useSBState } = React;

/* ---------- HERO ---------- */
const SBHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1473625247510-8ceb1760943f?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/first-trip-abroad/">First Trip Abroad</a>
        <span className="sep">/</span>
        <span className="here">Safety Basics</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">A CALM FIRST TRIP · 40 GUIDES · {SB_META.newThisSeason} NEW THIS SEASON</span>
          <h1>
            Safety<em>Basics.</em>
          </h1>
          <p className="lede">
            Most countries are safer than the news makes them sound. The work of a first trip abroad isn't avoiding risk; it's learning the <em>difference between the noise and the signal.</em> Twelve safety topics worth thinking through, eight country briefings, the desk's reading list, and a calm brief you can keep in your back pocket.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{SB_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{SB_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Topic</span>
              <span className="v">First trip · safety</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{SB_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{SB_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>Twelve topics</a>
        <span className="dot">·</span>
        <a href="#field"><span className="n">II</span>Field notes</a>
        <span className="dot">·</span>
        <a href="#itins"><span className="n">III</span>Eight situations</a>
        <span className="dot">·</span>
        <a href="#bucket"><span className="n">IV</span>By trip shape</a>
        <span className="dot">·</span>
        <a href="#reading"><span className="n">V</span>Reading list</a>
        <span className="dot">·</span>
        <a href="#voices"><span className="n">VI</span>The desk</a>
        <span className="dot">·</span>
        <a href="#practical"><span className="n">VII</span>The brief</a>
        <span className="dot">·</span>
        <a href="#faq"><span className="n">VIII</span>FAQ</a>
      </div>
    </div>

    <div className="hero-coord">FORM Nº 11 · A CALM FIRST TRIP · CARRY-ON ONLY</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 118 · IRIS</div>
  </section>
);

/* ---------- I · TWELVE TOPICS ---------- */
const SBPlaces = () => {
  const [region, setRegion] = useSBState("All");
  const regions = ["All", "Awareness", "Solo", "Women alone", "Night", "Logistics", "Emergency"];
  const filtered = SB_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 safety topics,<em>before you leave.</em></h2>
            <p>The questions worth thinking through once, calmly, before the flight. Each card opens a hand-built brief by the desk — practical, opinionated, never alarmist.</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></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 {SB_PLACES.length}</span>
          <a href="/en/plan/first-trip-abroad/">All First-Trip-Abroad guides <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · FIELD NOTES (essay quote, dark band) ---------- */
const SBField = () => (
  <section className="solo-practical" id="field" style={{ paddingTop: 110, paddingBottom: 110 }}>
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes.<em>The signal vs. the noise.</em></h2>
          <p>The opening pages of the desk's house brief on first-trip safety — what the data says, what travelers actually email about, and the small set of things that make the real difference.</p>
        </div>
        <div className="right">Read the seed essay <Icon name="arrow" size={12} /></div>
      </div>

      <blockquote style={{
        fontFamily: "var(--serif)",
        fontSize: "clamp(22px, 2.4vw, 30px)",
        lineHeight: 1.45,
        color: "var(--cream)",
        fontStyle: "italic",
        maxWidth: 920,
        borderLeft: "1px solid var(--tan)",
        padding: "8px 0 8px 32px",
        marginBottom: 28,
      }}>
        "Solo travel safety comes down to three things: research before you go, trust your instincts while you're there, and always have backup plans. Most travelers never encounter serious problems, but preparation makes the difference between a story you tell and a story that ends a trip. The work isn't fear; it's specific."
      </blockquote>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
        marginBottom: 18,
      }}>
        The most common mistake on a first trip is being scared of the wrong things. The crowded plaza looks dangerous; the back of the unmarked taxi at midnight is dangerous. The street vendor with a smile feels suspicious; the friendly stranger at the bar who offers to walk you home is the actual concern. Most countries are safer than their headlines. The work of a first-time traveler is learning which neighborhoods, which hours, which apps — not which countries.
      </p>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
      }}>
        What you protect, on a first trip abroad, is the same thing every good traveler protects: enough margin that the trip can surprise you. Two cards in two pockets. The ride home booked before you leave the hotel. A photograph of your passport in cloud storage. Then forget it all and walk somewhere new.
      </p>
      <p style={{
        marginTop: 32,
        fontFamily: "var(--mono)",
        fontSize: 11,
        letterSpacing: "0.18em",
        color: "var(--tan)",
        textTransform: "uppercase",
      }}>— Iris Mendoza, Planning Desk · House brief Nº 11</p>
    </div>
  </section>
);

/* ---------- III · EIGHT SITUATIONS ---------- */
const SBItins = () => (
  <section className="solo-itins" id="itins">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Eight situations,<em>by country.</em></h2>
          <p>Country-specific safety briefs from correspondents who actually went. Not the worst-case lists — the day-to-day texture: the apps that work in Medellín, the dress code in Aswan, the scooter rule in Hanoi.</p>
        </div>
        <div className="right">All country briefs <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {SB_ITINS.map(it => (
          <a key={it.ref} href={it.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">brief</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 · MATRIX ---------- */
const SBByStyle = () => (
  <section className="solo-length" id="bucket">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The first-trip<em>safety matrix.</em></h2>
          <p>Six trip shapes, six different briefs. Pick the row that matches the trip you're actually taking, not the worst-case version someone at dinner warned you about.</p>
        </div>
        <div className="right">All categories <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Trip shape</div>
          <div className="d">Scope</div>
          <div className="ct">Guides</div>
          <div className="ex">Best examples</div>
          <div className="pr">Read</div>
          <div></div>
        </div>
        {SB_BY_STYLE.map(l => (
          <a href="/en/plan/first-trip-abroad/" key={l.len} className="row">
            <div className="lbl">{l.len}</div>
            <div className="d"><em>{l.days}</em></div>
            <div className="ct">{l.count} guides</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 · READING LIST ---------- */
const SBReading = () => (
  <section className="solo-reading" id="reading">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>Eight reads,<em>by depth.</em></h2>
          <p>The pieces sitting one click below this page. The first is the seed essay; the rest are country briefs and category-specific reads, hand-built. Read in order or skip to the trip you're already planning.</p>
        </div>
        <div className="right">All Safety essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {SB_READING.map((r, i) => (
          <a key={i} href={r.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>
);

/* ---------- VI · DESK ---------- */
const SBVoices = () => (
  <section className="solo-voices" id="voices">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VI</div>
        <div className="titles">
          <h2>The Planning desk.<em>Three editors on safety.</em></h2>
          <p>Safety is the topic the desk argues about most — what's a real risk, what's a paper one, what's worth packing for, what's worth ignoring. These are the people writing it.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {SB_VOICES.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} field trips</span>
              <a href="/en/plan/first-trip-abroad/">Read their lane <Icon name="arrow" size={12} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VII · THE BRIEF ---------- */
const SBPractical = () => (
  <section className="solo-practical" id="practical">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VII</div>
        <div className="titles">
          <h2>The brief.<em>Eight tips, in order of importance.</em></h2>
          <p>The non-obvious things. Tested on the road, ordered by how much they matter on a first trip abroad. Read once. Forget on purpose. Walk somewhere new.</p>
        </div>
        <div className="right">Full safety guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {SB_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>
);

/* ---------- VIII · FAQ ---------- */
const SBFAQ = () => {
  const [open, setOpen] = useSBState(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>readers send in.</em></h2>
                <p>Lightly edited reader letters about safety on a first trip abroad. If yours isn't here, the planning desk reads every email.</p>
              </div>
            </div>
            <a href="mailto:planning@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {SB_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 SBCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">TWO CARDS · TWO POCKETS · ONE PHOTOGRAPHED PASSPORT</div>
      <h2>Take the trip<em>that already feels safe.</em></h2>
      <p>Pick the brief that matches your trip. Pre-book the ride home. Photograph the passport. Then forget all of it and go walk somewhere new.</p>
      <div className="cta-actions">
        <a href="/en/planning/safety/how-to-stay-safe-solo" className="btn-p">Read the seed essay →</a>
        <a href="/en/plan/first-trip-abroad/" className="btn-g">↑ Back to First Trip Abroad</a>
      </div>
    </div>
    <div className="coord">SAFETY BASICS · FORM Nº 11 · UPDATED 06.05.2026</div>
    <div className="coord right">FIELD DESK Nº 118</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const SBApp = () => (
  <div data-screen-label="Safety Basics">
    <SBHero />
    <SBPlaces />
    <SBField />
    <SBItins />
    <SBByStyle />
    <SBReading />
    <SBVoices />
    <SBPractical />
    <SBFAQ />
    <SBCTA />
    <Footer />
  </div>
);

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