/* eslint-disable */
// Money Abroad — first-trip L3 hub.
// Same editorial language as the Three Day exemplar (cream/teal/tan, Playfair + DM Sans/Mono,
// numbered sections, hero masthead). 8-section format: hero / 12 cards / field-notes essay /
// 8 situations / matrix / 8 reads / desk / 6Q FAQ / sticky CTA.

const { useState: useMAState, useEffect: useMAEffect } = React;

/* ---------- HERO ---------- */
const MAHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1580048915913-4f8f5cb481c4?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">Money Abroad</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">FEES · CARDS · CASH · {MA_META.count} GUIDES · {MA_META.newThisSeason} NEW</span>
          <h1>
            Money<em>Abroad.</em>
          </h1>
          <p className="lede">
            The first international trip is where most travelers quietly hand 6–10% of their budget to ATM operators, hotel exchange desks, and the screen on the card terminal that asks if they'd like to pay in dollars. <em>It's a tax on not knowing the system.</em> The system is small. Twelve money topics, eight situations you'll meet on the road, and the brief on what your bank won't tell you.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{MA_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{MA_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Typical fee leak</span>
              <span className="v">6 – 10%</span>
            </div>
            <div className="row">
              <span className="k">With proper setup</span>
              <span className="v">≈ 0%</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{MA_META.updated}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="solo-toc">
        <span className="lbl">In this issue</span>
        <a href="#topics"><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="#situations"><span className="n">III</span>Eight situations</a>
        <span className="dot">·</span>
        <a href="#matrix"><span className="n">IV</span>By situation</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º 04 · MONEY · FIRST TRIP</div>
    <div className="hero-credit">DESK — MONEY & NUMBERS · IRIS</div>
  </section>
);

/* ---------- I · TWELVE TOPICS ---------- */
const MATopics = () => {
  const [cat, setCat] = useMAState("All");
  const cats = ["All", "Card setup", "ATMs", "Exchange", "Cards", "Spend"];
  const filtered = MA_TOPICS.filter(p => cat === "All" || p.category === cat);

  return (
    <section className="solo-places" id="topics">
      <div className="container">
        <div className="solo-section-head">
          <div className="num">I</div>
          <div className="titles">
            <h2>Twelve money topics,<em>one trip.</em></h2>
            <p>What every first-time international traveler should set up, look up, or carry. Each card opens a hand-built guide — verified URLs, no placeholders. Filter by what you're worried about right now.</p>
          </div>
          <div className="filter-pills">
            {cats.map(r => (
              <button
                key={r}
                className={`f-pill ${cat === r ? "on" : ""}`}
                onClick={() => setCat(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.title}</span>
                  <span className="country">{p.sub}</span>
                </div>
                <p className="why">{p.why}</p>
                <div className="meta">
                  <span><em>{p.kind}</em></span>
                  <span className="sep">·</span>
                  <span>{p.category}</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 {MA_TOPICS.length}</span>
          <a href="/en/plan/first-trip-abroad/">All first-trip topics <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · FIELD NOTES (essay quote, dark band) ---------- */
const MAField = () => (
  <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 friend who lived abroad tells you the honest math.</em></h2>
          <p>The opening pages of the Money desk's house essay on the first international trip — what the banks don't tell you, what the airport counters bet on, and the small system that beats both.</p>
        </div>
        <div className="right">Read the full 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,
      }}>
        "The travel money industry is not designed to rob you. It is designed to charge you a small, polite fee at every step, in a currency you don't quite understand, in a setting where you are tired and a little hungry. The fees compound. A 1% Visa surcharge on top of a 3% dynamic-currency-conversion fee on top of a 7% airport-counter spread is most of a flight. The system isn't crooked — it's bored, and it's expensive. The only edge is to set up the right cards before you fly, say no to one specific screen at every terminal, and use bank ATMs only. That's the whole game."
      </blockquote>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
        marginBottom: 18,
      }}>
        Most first-trip money problems are not exotic. They are the same three or four leaks, repeating: the airport currency counter on landing, the dynamic-currency-conversion screen at every restaurant, the standalone ATM in the pretty square, the home-currency option at the hotel checkout. Each one is a 3–10% tax on not knowing. Stack them and a two-week trip can lose a flight's worth of fees before the trip starts paying for the things you actually came to see.
      </p>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
      }}>
        What you protect, in those first two weeks of international travel, is the discipline that keeps the system small. Two cards, set up before you fly. One backup cash stash in a separate pocket. Bank ATMs, never standalone. Local currency at every terminal, no exceptions. Done in that order, the trip stops bleeding. The plan isn't the trip; the plan is what makes room for the trip.
      </p>
      <p style={{
        marginTop: 32,
        fontFamily: "var(--mono)",
        fontSize: 11,
        letterSpacing: "0.18em",
        color: "var(--tan)",
        textTransform: "uppercase",
      }}>— Iris Mendoza, Money desk · House essay Nº 04</p>
    </div>
  </section>
);

/* ---------- III · SITUATIONS ---------- */
const MASituations = () => (
  <section className="solo-itins" id="situations">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Eight situations<em>you'll meet.</em></h2>
          <p>The actual moments where money on a first international trip goes sideways — at the market, at the ATM, at the airport snack bar, at the pretty restaurant whose card terminal asks if you'd like to be charged in dollars. Each is one short, opinionated read.</p>
        </div>
        <div className="right">All money guides <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {MA_SITUATIONS.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.price.split(" ")[0]}</em><span className="d">{(it.price.split(" ").slice(1).join(" ")) || "ref"}</span></span>
            </div>
            <div className="body">
              <h4>{it.title}<em> {it.em}</em></h4>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-mute)", margin: "8px 0 12px" }}>{it.desc}</p>
              <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 SITUATION (matrix) ---------- */
const MAMatrix = () => (
  <section className="solo-length" id="matrix">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The money<em>matrix.</em></h2>
          <p>Six rows by where the money actually moves. Pre-trip is the highest-leverage row. Defense is the smallest dollar value but the biggest peace-of-mind one. Pick the row that matches what you're worried about today.</p>
        </div>
        <div className="right">All money guides <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Situation</div>
          <div className="d">When</div>
          <div className="ct">Guides</div>
          <div className="ex">Examples</div>
          <div className="pr">Cost</div>
          <div></div>
        </div>
        {MA_BY_SITUATION.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 MAReading = () => (
  <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 primer; the rest are how-tos that earn the click. Read in order, or skip to the one situation you're already worried about.</p>
        </div>
        <div className="right">All Money essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {MA_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 / VOICES ---------- */
const MAVoices = () => (
  <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 Money desk.<em>Three editors on the math.</em></h2>
          <p>The Money desk is the desk that doesn't want to be sentimental. Spreads, fees, partner networks, lost-card protocols. These are the people writing it.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {MA_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 MAPractical = () => (
  <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>Six tips, in order of money saved.</em></h2>
          <p>Ranked by how many dollars each tip is actually worth across a two-week trip. Setup is the highest leverage. Backup is the cheapest insurance. Everything in between is the daily discipline.</p>
        </div>
        <div className="right">Full money guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {MA_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 MAFAQ = () => {
  const [open, setOpen] = useMAState(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 money on a first international trip. If yours isn't here, the Money desk reads every email.</p>
              </div>
            </div>
            <a href="mailto:money@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {MA_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 MACTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1580048915913-4f8f5cb481c4?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">TWO CARDS · BANK ATMs ONLY · LOCAL CURRENCY EVERY TIME</div>
      <h2>Set up the system<em>before you fly.</em></h2>
      <p>Read the primer, apply for the cards six weeks out, screenshot the steps. Twenty minutes of pre-trip work is worth a flight in saved fees over a two-week trip.</p>
      <div className="cta-actions">
        <a href="/en/experiences/money/how-to-handle-money-abroad" className="btn-p">Read the primer →</a>
        <a href="/en/plan/first-trip-abroad/" className="btn-g">↑ Back to First Trip Abroad</a>
      </div>
    </div>
    <div className="coord">MONEY · FORM Nº 04 · UPDATED 06.05.2026</div>
    <div className="coord right">DESK — MONEY & NUMBERS</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const MAApp = () => (
  <div data-screen-label="Money Abroad">
    <MAHero />
    <MATopics />
    <MAField />
    <MASituations />
    <MAMatrix />
    <MAReading />
    <MAVoices />
    <MAPractical />
    <MAFAQ />
    <MACTA />
    <Footer />
  </div>
);

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