import type { ReactNode } from "react";
import { JsonLd } from "@/components/JsonLd";
import { SafeImage } from "@/components/SafeImage";
import { EmailGatedDownload } from "@/components/EmailGatedDownload";
import { breadcrumbSchema, createPageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export const metadata = createPageMetadata({
  title: "Marloth Park for International Visitors | Free Visitor Guide",
  description:
    "Free visitor-facing Marloth Park Central guide for international visitors planning arrival, driving, Kruger day trips, safety and practical local orientation.",
  path: "/international-visitors-guide",
  image: "/images/heroes/international-visitors-guide-hero.webp",
  keywords: [
    "Marloth Park international visitors",
    "Marloth Park visitor guide",
    "Kruger from Marloth Park",
    "Marloth Park travel help",
  ],
});

const contents = [
  ["01", "Best for", "#best-for"],
  ["02", "Before you fly", "#before-you-fly"],
  ["03", "Local map", "#map"],
  ["04", "Arrival roadmap", "#arrival"],
  ["05", "5-day route", "#route"],
  ["06", "Kruger day", "#kruger"],
  ["07", "Local options", "#local-options"],
  ["08", "Safety", "#safety"],
  ["09", "Checklist", "#checklist"],
  ["10", "Official links", "#sources"],
];

const officialLinks = [
  ["SANParks Kruger entrance gates", "Gate times, gate contacts and official entrance information.", "https://www.sanparks.org/parks/kruger/travel/entrance-gates"],
  ["SANParks Kruger rates and fees", "Use the official fee page before budgeting or confirming.", "https://www.sanparks.org/parks/kruger/rates-entry-fees"],
  ["SANParks Kruger travel times", "Approximate drive times between gates and camps.", "https://www.sanparks.org/parks/kruger/travel/travel-times"],
  ["SANParks vital information", "Rules, speed limits, vehicle rules, drone warnings and safety notes.", "https://www.sanparks.org/parks/kruger/useful-information/vital-information"],
  ["SAPS tourist safety tips", "Official tourist safety and emergency information.", "https://www.saps.gov.za/alert/safety_tips_tourist.php"],
  ["South African Tourism safety tips", "Road-travel and visitor safety guidance.", "https://www.tourism.gov.za/Pages/Safe_Travels.aspx"],
  ["Marloth Park local information", "Local orientation and Marloth Park context.", "https://www.marlothpark.com/"],
  ["Marloth Park Info Centre", "Local visitor information contact point.", "https://www.marlothkruger.com/pages/marloth-park-info-centre/"],
  ["SANParks malaria information", "Official Kruger malaria information and prevention guidance.", "https://www.sanparks.org/parks/kruger/useful-information/malaria"],
  ["Department of Home Affairs ePermit FAQ", "Passport and visa basics.", "https://ehome.dha.gov.za/epermit/questions"],
];

const visitorChecklistItems = [
  "Passport validity and visa requirement checked.",
  "Travel insurance saved offline and printed.",
  "Driving licence or International Driving Permit packed.",
  "Accommodation address, host contact and check-in details saved offline.",
  "Offline maps viewed for the airport, N4, Mbombela, Malalane, Komatipoort, Marloth Park and Kruger gates.",
  "Emergency numbers saved: 112, 10111 and 10177.",
  "Travel clinic or doctor consulted about malaria prevention.",
  "Rental car checked: spare tyre, jack, fuel, charger and emergency number.",
  "Water, snacks, sunscreen, hat, insect repellent and medication packed.",
  "Groceries, firewood and breakfast basics used before first night.",
  "Kruger conservation fees and gate times checked on official SANParks pages.",
  "No feeding wildlife, no spotlighting, no loud noise and no littering.",
];

const checklistPreviewBullets = [
  "Trip details: arrival date, departure date, accommodation, host contact, emergency contact and Kruger gate choice.",
  "Documents and entry: passport, visa, travel insurance, official entry rules, copies and accommodation booking.",
  "Health and medicine: travel clinic advice, malaria preparation, prescriptions, first-aid, sunscreen and fever warning.",
  "Phone, internet and money: roaming or SIM/eSIM, WhatsApp, power bank, adapters, offline maps, cards and cash backup.",
  "Driving and rental car: licence, International Driving Permit if required, spare tyre, jack, emergency triangle and left-side driving.",
  "Arrival in Marloth Park: host instructions, groceries, drinking water, firewood, insect repellent and wildlife-safety rules.",
  "Kruger day control: gate choice, gate times, conservation fees, passports, permit details, fuel, water, snacks and turn-back time.",
  "Emergency readiness and departure: 112, 10111, 10177, accommodation contact, pharmacy/doctor check, fuel, documents and keys.",
  "Official pages to check: SANParks gate times and fees, Kruger rules, SAPS tourist safety, malaria advice and host instructions.",
];

function CheckList({ items }: { items: string[] }) {
  return (
    <ul className="ivg-check-list">
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

function Step({ day, title, children }: { day: string; title: string; children: ReactNode }) {
  return (
    <article className="ivg-route-step">
      <div className="ivg-day-badge">{day}</div>
      <div>
        <h3>{title}</h3>
        <p>{children}</p>
      </div>
    </article>
  );
}

export default function Page() {
  return (
    <main className="international-visitors-guide-route">
      <JsonLd
        data={breadcrumbSchema([
          { name: "Home", path: "/" },
          { name: "Free Guides", path: "/free-guides" },
          { name: "International Visitors Guide", path: "/international-visitors-guide" },
        ])}
      />
      <style>{`
        .international-visitors-guide-route {
          --ivg-forest: #07130c;
          --ivg-forest-2: #102015;
          --ivg-paper: #fff8e7;
          --ivg-paper-2: #f7ead0;
          --ivg-ink: #21180f;
          --ivg-muted: #6f604d;
          --ivg-gold: #d89a35;
          --ivg-gold-2: #f5c76e;
          --ivg-line: rgba(69, 45, 22, .17);
          --ivg-radius: 30px;
          background: linear-gradient(180deg, #07130c 0%, #0b130d 16%, #f8edda 16%, #fff9ec 100%);
          color: var(--ivg-ink);
          font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .ivg-wrap { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }

        /* v6.82.95: guard against oversized header logo inheritance on this page */
        .topbar .logo,
        .site-header .brand-logo,
        .site-header .header-emblem-logo {
          width: 54px !important;
          height: 54px !important;
          max-width: 54px !important;
          max-height: 54px !important;
          object-fit: contain !important;
        }
        .ivg-hero {
          position: relative;
          min-height: clamp(560px, 72vh, 760px);
          overflow: hidden;
          background: #0b120b;
          color: #fff8e7;
        }
        .ivg-hero-image { position: absolute; inset: 0; }
        .ivg-hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: var(--mpc-image-position-desktop, 50% 50%); filter: saturate(1.08) contrast(1.06); }
        .ivg-hero::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, rgba(3, 9, 5, .92) 0%, rgba(3, 9, 5, .72) 48%, rgba(3, 9, 5, .33) 100%), linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.68));
        }
        .ivg-hero-content {
          position: relative;
          z-index: 1;
          display: grid;
          align-content: center;
          min-height: inherit;
          padding: clamp(3rem, 7vw, 6rem) 0;
        }
        .ivg-kicker {
          color: var(--ivg-gold-2);
          font-weight: 950;
          letter-spacing: .12em;
          text-transform: uppercase;
          font-size: .82rem;
          margin: 0 0 .9rem;
        }
        .ivg-hero h1 {
          margin: 0;
          max-width: 920px;
          font-family: Georgia, "Times New Roman", serif;
          font-size: clamp(3rem, 9vw, 6.5rem);
          line-height: .92;
          letter-spacing: -.06em;
          text-wrap: balance;
        }
        .ivg-hero-text {
          max-width: 760px;
          margin: 1.25rem 0 0;
          color: #fff0cf;
          font-size: clamp(1.08rem, 2.3vw, 1.35rem);
          line-height: 1.55;
          font-weight: 720;
        }
        .ivg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; }
        .ivg-btn {
          display: inline-flex;
          min-height: 48px;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          padding: .85rem 1.15rem;
          font-weight: 950;
          text-decoration: none;
          border: 1px solid rgba(255,255,255,.18);
        }
        .ivg-btn.gold { background: linear-gradient(135deg, var(--ivg-gold), var(--ivg-gold-2)); color: #1d140a; border-color: transparent; }
        .ivg-btn.dark { background: rgba(8,17,11,.8); color: #fff8e7; }
        .ivg-btn.light { background: #fff8e7; color: #1f170f; border-color: var(--ivg-line); }
        .ivg-btn.print { background: #102015; color: #fff8e7; border-color: rgba(33,24,15,.18); }
        .ivg-checklist-action-bar { margin-top: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid rgba(216,154,53,.28); border-radius: 24px; background: linear-gradient(135deg, rgba(216,154,53,.18), rgba(255,248,231,.72)); }
        .ivg-checklist-action-bar strong { display: block; width: 100%; color: #2a1b0e; font-size: 1.02rem; }
        .ivg-safari-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(216,154,53,.24); border-radius: 22px; background: rgba(216,154,53,.14); }
        .ivg-safari-cta strong { color: #24190e; }
        .ivg-preview-bullets { margin: 1rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
        .ivg-preview-bullets li { break-inside: avoid; margin-bottom: .72rem; color: #423524; font-weight: 760; line-height: 1.38; }
        .ivg-preview-note { margin-top: .85rem; color: #685640; font-weight: 760; }
        .ivg-quick { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; margin-top: 2rem; max-width: 980px; }
        .ivg-quick div { background: rgba(5,12,7,.7); border: 1px solid rgba(255,255,255,.17); border-radius: 20px; padding: 1rem; backdrop-filter: blur(8px); }
        .ivg-quick b { display: block; color: #ffe0a0; }
        .ivg-quick span { display: block; margin-top: .25rem; color: #eadfc8; font-size: .9rem; }
        .ivg-page-body { padding: 2rem 0 4rem; }
        .ivg-panel {
          background: linear-gradient(145deg, #fffdf6, #f6e5c4);
          border: 1px solid var(--ivg-line);
          border-radius: var(--ivg-radius);
          box-shadow: 0 26px 80px rgba(43,29,12,.11);
          padding: clamp(1.1rem, 4vw, 2.3rem);
          margin: 1rem 0 1.35rem;
        }
        .ivg-panel.soft { background: linear-gradient(145deg, #fff9ed, #f2dfbb); }
        .ivg-panel.green { background: linear-gradient(145deg, #0f2015, #183020); color: #fff8e7; border-color: rgba(255,255,255,.12); }
        .ivg-panel.green p, .ivg-panel.green li { color: #eadfc8; }
        .ivg-panel.green .ivg-card { background: rgba(255,255,255,.07); color: #fff8e7; border-color: rgba(255,255,255,.15); }
        .ivg-panel h2 {
          margin: 0;
          font-family: Georgia, "Times New Roman", serif;
          color: var(--ivg-ink);
          font-size: clamp(2rem, 5vw, 3.7rem);
          line-height: 1;
          letter-spacing: -.05em;
          text-wrap: balance;
        }
        .ivg-panel.green h2, .ivg-panel.green h3 { color: #fff8e7; }
        .ivg-lead { color: #514333; max-width: 850px; font-size: 1.06rem; line-height: 1.75; margin: .8rem 0 0; }
        .ivg-grid { display: grid; gap: 1rem; margin-top: 1.3rem; }
        .ivg-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .ivg-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
        .ivg-card {
          background: rgba(255,255,255,.62);
          border: 1px solid var(--ivg-line);
          border-radius: 22px;
          padding: 1.1rem;
          color: var(--ivg-ink);
        }
        .ivg-card h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--ivg-ink); }
        .ivg-card p { margin: 0; color: #594a39; line-height: 1.65; }
        .ivg-card.warning { background: #fff2db; border-color: rgba(192, 103, 41, .28); }
        .ivg-card.urgent { background: #fff0e9; border-color: rgba(155, 44, 27, .24); }
        .ivg-card.urgent a { color: #752214; font-weight: 950; }
        .ivg-toc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-top: 1.3rem; }
        .ivg-toc a {
          display: grid;
          grid-template-columns: 58px 1fr;
          align-items: center;
          gap: .85rem;
          padding: .95rem 1rem;
          border-radius: 18px;
          background: #fff9ef;
          color: #24190e;
          border: 1px solid rgba(71,49,25,.17);
          text-decoration: none;
          font-weight: 900;
          box-shadow: 0 8px 28px rgba(37,24,10,.05);
        }
        .ivg-toc span { color: #9a641e; font-weight: 1000; }
        .ivg-pill-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.1rem; }
        .ivg-pill { background: #fff6e5; color: #2b1b0a; border: 1px solid rgba(90,60,24,.18); border-radius: 999px; padding: .5rem .85rem; font-weight: 900; }
        .ivg-check-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .68rem; }
        .ivg-check-list li { position: relative; padding-left: 2.1rem; color: #554636; line-height: 1.55; }
        .ivg-check-list li::before { content: "✓"; position: absolute; left: 0; top: .02rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e3f0d5; color: #3d772f; font-weight: 1000; }
        .ivg-map-shell { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; margin-top: 1.3rem; align-items: stretch; }
        .ivg-map-frame { min-height: 430px; width: 100%; border: 0; border-radius: 24px; box-shadow: 0 20px 60px rgba(16,25,12,.18); background: #d7c198; }
        .ivg-map-links { display: grid; gap: .75rem; }
        .ivg-map-link { display: block; background: #fff7e7; border: 1px solid var(--ivg-line); border-radius: 20px; padding: 1rem; color: #24190e; text-decoration: none; }
        .ivg-map-link strong { display: block; font-size: 1.05rem; }
        .ivg-map-link span { display: block; margin-top: .25rem; color: #67553e; }
        .ivg-route-step { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--ivg-line); }
        .ivg-route-step:first-child { border-top: 0; }
        .ivg-day-badge { width: 58px; height: 58px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ivg-gold), var(--ivg-gold-2)); color: #21170d; font-weight: 1000; }
        .ivg-route-step h3 { margin: 0; color: #23190f; }
        .ivg-route-step p { margin: .35rem 0 0; color: #594a39; line-height: 1.65; }
        .ivg-cta-band { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(216,154,53,.16); border: 1px solid rgba(130,85,28,.16); border-radius: 24px; padding: 1rem; }
        .ivg-print-box { background: #fffdf8; border: 1px solid rgba(48,36,22,.18); border-radius: 24px; padding: 1.2rem; margin-top: 1.2rem; }
        .ivg-print-box ul { margin: 1rem 0 0; padding-left: 0; list-style: none; }
        .ivg-print-box li { break-inside: avoid; margin-bottom: .58rem; color: #423524; }
        .ivg-view-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(216,154,53,.28); border-radius: 24px; background: linear-gradient(135deg, rgba(216,154,53,.18), rgba(255,248,231,.72)); }
        .ivg-view-note { margin: .65rem 0 0; color: #6b5942; font-size: .95rem; }
        .ivg-source-list { display: grid; gap: .75rem; margin-top: 1.2rem; }
        .ivg-source-list a { display: block; background: #fff9ef; border: 1px solid var(--ivg-line); border-radius: 18px; padding: .95rem 1rem; color: #2a1b0e; text-decoration: none; }
        .ivg-source-list strong { display: block; }
        .ivg-source-list span { display: block; color: #6b5942; margin-top: .25rem; }
        @media (max-width: 860px) {
          .international-visitors-guide-route { background: linear-gradient(180deg, #07130c 0%, #0b130d 12%, #fff7e8 12%, #fff9ef 100%); }
          .ivg-wrap { width: min(100% - 1.1rem, 1120px); }
          .ivg-hero { min-height: 640px; }
          .ivg-hero-image img { object-position: var(--mpc-image-position-mobile, 50% 50%); }
          .ivg-hero::after { background: linear-gradient(180deg, rgba(3,9,5,.48), rgba(3,9,5,.95)); }
          .ivg-quick, .ivg-grid.two, .ivg-grid.three, .ivg-map-shell, .ivg-toc { grid-template-columns: 1fr; }
          .ivg-panel { border-radius: 24px; }
          .ivg-print-box ul, .ivg-preview-bullets { columns: 1; }
        }
        @media print {
          .international-visitors-guide-route { background: #fff; }
          .ivg-hero, .ivg-actions, .ivg-cta-band, .ivg-map-frame { display: none !important; }
          .ivg-panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
        }
      `}</style>

      <section className="ivg-hero">
        <div className="ivg-hero-image" aria-hidden="true">
          <SafeImage
            src="/images/heroes/international-visitors-guide-hero.webp"
            alt="Marloth Park and Kruger visitor planning hero"
            className="mpc-page-hero-img"
            priority
          />
        </div>
        <div className="ivg-wrap ivg-hero-content">
          <p className="ivg-kicker">Free MPC visitor guide · International visitors</p>
          <h1>Marloth Park for international visitors.</h1>
          <p className="ivg-hero-text">
            A clear, pleasant planning page for overseas guests using Marloth Park as a base for Kruger, self-catering stays,
            local services, safety checks and arrival-day decisions.
          </p>
          <div className="ivg-actions">
            <a className="ivg-btn gold" href="/free-guides#free-guide-gate">Get the free guides</a>
            <a className="ivg-btn dark" href="/accommodation">View accommodation</a>
            <a className="ivg-btn dark" href="/contact?topic=international-visitors">Ask MPC</a>
          </div>
          <div className="ivg-quick" aria-label="Guide facts">
            <div><b>Best for</b><span>First-time overseas visitors</span></div>
            <div><b>Base</b><span>Marloth Park and southern Kruger</span></div>
            <div><b>Use it for</b><span>Arrival, routes and safety basics</span></div>
            <div><b>Access</b><span>Free public page</span></div>
          </div>
        </div>
      </section>

      <div className="ivg-page-body">
        <div className="ivg-wrap">
          <section id="toc" className="ivg-panel" aria-labelledby="toc-title">
            <p className="ivg-kicker">Clickable table of contents</p>
            <h2 id="toc-title">Start where you need help.</h2>
            <p className="ivg-lead">
              This page is designed for a phone screen first: quick decisions, readable wording, practical next steps and a
              print-ready checklist for travel days.
            </p>
            <div className="ivg-toc">
              {contents.map(([number, label, href]) => (
                <a key={href} href={href}><span>{number}</span>{label}</a>
              ))}
            </div>
          </section>

          <section id="best-for" className="ivg-panel soft" aria-labelledby="best-for-title">
            <p className="ivg-kicker">Best for</p>
            <h2 id="best-for-title">Plan a Marloth Park and Kruger stay with less stress.</h2>
            <p className="ivg-lead">
              Use this guide when you are arriving from outside South Africa and need plain-English local orientation before
              you drive, check in, enter Kruger or decide what to do next.
            </p>
            <div className="ivg-pill-row">
              {[
                "First-time South Africa travellers",
                "Overseas families",
                "Couples and honeymooners",
                "Self-drive visitors",
                "Visitors without local contacts",
                "Kruger day visitors",
              ].map((pill) => <span className="ivg-pill" key={pill}>{pill}</span>)}
            </div>
            <div className="ivg-grid three">
              <article className="ivg-card"><h3>What this guide helps with</h3><p>Driving, gate times, conservation fees, local etiquette, emergency numbers, safer stopping points, food planning and choosing local options carefully.</p></article>
              <article className="ivg-card"><h3>What this guide does not do</h3><p>It does not replace official visa advice, medical advice, host instructions, gate permits, live SANParks notices or emergency services.</p></article>
              <article className="ivg-card"><h3>Where to go next</h3><p>After reading, move to the correct MPC page for accommodation, free guides, services, local options or contact support.</p></article>
            </div>
            <div className="ivg-cta-band">
              <strong>Looking for a Marloth Park stay?</strong>
              <a className="ivg-btn gold" href="/accommodation">View accommodation</a>
            </div>
          </section>

          <section id="before-you-fly" className="ivg-panel" aria-labelledby="before-title">
            <p className="ivg-kicker">Before you fly</p>
            <h2 id="before-title">The overseas visitor pre-check.</h2>
            <p className="ivg-lead">Before leaving home, confirm passport validity, visa requirements, travel insurance, medical preparation, driving documents and offline access to key information.</p>
            <div className="ivg-grid two">
              <article className="ivg-card">
                <h3>Documents</h3>
                <CheckList items={[
                  "Check whether your nationality requires a South African visitor visa.",
                  "Travel with a passport that remains valid after your planned departure and has blank endorsement pages.",
                  "Keep digital and printed copies of your passport, travel insurance, accommodation booking, car rental agreement and return flight.",
                  "Carry your driving licence. If it is not in English, arrange an International Driving Permit before travel.",
                ]} />
              </article>
              <article className="ivg-card">
                <h3>Health and travel readiness</h3>
                <CheckList items={[
                  "Speak to a travel clinic or doctor about malaria prevention before visiting the Kruger/Mpumalanga Lowveld area.",
                  "Pack prescription medication in original packaging with a copy of your prescription.",
                  "Save offline maps for Johannesburg/OR Tambo, N4, Mbombela, Malalane, Komatipoort, Marloth Park and Kruger gates.",
                  "Save emergency numbers before landing: 112 from a mobile, 10111 for police and 10177 for ambulance/fire.",
                ]} />
              </article>
            </div>
            <article className="ivg-card warning" style={{ marginTop: "1rem" }}>
              <h3>Check before travelling</h3>
              <p>Visa rules, health advisories, SANParks rates and gate times can change. Use the official links on this page and check current information before travelling.</p>
            </article>
          </section>

          <section id="map" className="ivg-panel green" aria-labelledby="map-title">
            <p className="ivg-kicker">Local map</p>
            <h2 id="map-title">Where Marloth Park fits into the trip.</h2>
            <p className="ivg-lead">
              Marloth Park sits beside Kruger National Park on the Crocodile River side of the southern Kruger area. Use the live map below for orientation only, then confirm current routes and gate times before travelling.
            </p>
            <div className="ivg-map-shell">
              <iframe
                className="ivg-map-frame"
                title="Google map showing Marloth Park and southern Kruger area"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                src="https://www.google.com/maps?q=Marloth%20Park%2C%20Mpumalanga%2C%20South%20Africa&output=embed"
              />
              <div className="ivg-map-links">
                <a className="ivg-map-link" href="https://www.google.com/maps/search/?api=1&query=Marloth%20Park%20Mpumalanga" target="_blank" rel="noopener"><strong>Open Marloth Park in Google Maps</strong><span>Use this for general orientation.</span></a>
                <a className="ivg-map-link" href="https://www.google.com/maps/search/?api=1&query=Crocodile%20Bridge%20Gate%20Kruger" target="_blank" rel="noopener"><strong>Crocodile Bridge Gate</strong><span>Common southern Kruger gate from Marloth Park.</span></a>
                <a className="ivg-map-link" href="https://www.google.com/maps/search/?api=1&query=Malelane%20Gate%20Kruger" target="_blank" rel="noopener"><strong>Malalane / Malelane Gate</strong><span>Useful for western southern Kruger planning.</span></a>
                <a className="ivg-map-link" href="/plan-my-visit"><strong>Plan your visit with MPC</strong><span>Use the visitor-help page after checking the map.</span></a>
              </div>
            </div>
          </section>

          <section id="arrival" className="ivg-panel" aria-labelledby="arrival-title">
            <p className="ivg-kicker">Arrival roadmap</p>
            <h2 id="arrival-title">The first 24 hours must feel calm.</h2>
            <p className="ivg-lead">For international visitors, the most useful plan is simple: arrive safely, understand the place and make good decisions from hour one.</p>
            <div className="ivg-grid two">
              <article className="ivg-card"><h3>Airport to Marloth</h3><CheckList items={["Collect the rental vehicle in daylight if possible.", "Confirm the car has a spare tyre, jack, reflective triangle and emergency number.", "Use the N4 corridor and plan fuel and food stops before the Lowveld leg.", "Avoid unnecessary night driving; rural roads can have poor lighting, pedestrians, animals, potholes and slow vehicles."]} /></article>
              <article className="ivg-card"><h3>Entering Marloth</h3><CheckList items={["Share arrival time with your host before reaching Marloth Park.", "Drive slowly because wildlife, cyclists, pedestrians and gravel roads demand patience.", "Do not feed wildlife, use spotlights, litter, play loud music or treat animals as tame.", "View water, food, firewood, insect repellent and breakfast basics before settling in for the night."]} /></article>
            </div>
          </section>

          <section id="route" className="ivg-panel soft" aria-labelledby="route-title">
            <p className="ivg-kicker">Day-by-day route</p>
            <h2 id="route-title">A 5-day soft-landing itinerary for overseas guests.</h2>
            <p className="ivg-lead">This avoids overloading the first Kruger day and gives visitors a calm structure for arrival, orientation, Kruger planning and departure.</p>
            <div style={{ marginTop: "1.2rem" }}>
              <Step day="D0" title="Before departure: confirm and save">Check visa/passport requirements, travel insurance, driving documents, malaria advice, arrival directions, offline maps and your host’s check-in instructions.</Step>
              <Step day="D1" title="Arrival: land, drive, shop, settle">Drive in daylight where possible. Stop for fuel, groceries, water, braai basics, insect repellent and medication before reaching Marloth.</Step>
              <Step day="D2" title="Marloth orientation: river, rules, rhythm">Start slow. Learn the road rhythm, identify nearby restaurants and shops, save emergency contacts and keep the first full day manageable.</Step>
              <Step day="D3" title="Kruger day: Crocodile Bridge or Malelane">Leave early, carry ID, water and snacks, obey speed limits and plan your turn-back time before the gate closes.</Step>
              <Step day="D4" title="Flexible day: choose your travel style">Choose a rest day, guided safari, food stop, river viewpoint or slower local activity based on your energy and weather.</Step>
              <Step day="D5" title="Departure: clean, calm, no rushing">Pack early, check passports and devices, fuel before long road sections and avoid major last-minute detours before flights.</Step>
            </div>
          </section>

          <section id="kruger" className="ivg-panel" aria-labelledby="kruger-title">
            <p className="ivg-kicker">Kruger day planning</p>
            <h2 id="kruger-title">The Kruger day must be timed, not guessed.</h2>
            <p className="ivg-lead">Treat a Kruger day like a timed field operation. Gates close, speeds are controlled, routes take longer than maps suggest and official rules are enforced.</p>
            <div className="ivg-safari-cta">
              <strong>Need safari-drive options for a Kruger day from Marloth Park?</strong>
              <a className="ivg-btn gold" href="/local/safari-drives">View safari drives</a>
            </div>
            <div className="ivg-grid three">
              <article className="ivg-card"><h3>Fees</h3><p>Use the official SANParks rates page before budgeting or confirming. Fees and rules can change.</p></article>
              <article className="ivg-card"><h3>Gate discipline</h3><p>Confirm gate times before arrival. Turn around early enough to exit before the gate deadline.</p></article>
              <article className="ivg-card"><h3>Travel-time discipline</h3><p>Add time for sightings, restrooms, queues, food stops, slow traffic and conservative driving.</p></article>
            </div>
            <article className="ivg-card warning" style={{ marginTop: "1rem" }}>
              <h3>Non-negotiable Kruger behaviour</h3>
              <CheckList items={["Stay inside the vehicle unless you are at a designated area.", "Do not feed, disturb, approach or lure animals.", "Follow Kruger speed limits: 50 km/h on tar roads and 40 km/h on gravel roads.", "Do not fly drones in or over national parks.", "Check your gate permit and exit before the gate deadline."]} />
            </article>
          </section>

          <section id="local-options" className="ivg-panel soft" aria-labelledby="local-title">
            <p className="ivg-kicker">MPC local options</p>
            <h2 id="local-title">Use MPC pages as your next step.</h2>
            <p className="ivg-lead">This guide is the orientation page. These MPC links help visitors move from planning into the right local category.</p>
            <div className="ivg-grid three">
              <article className="ivg-card"><h3>Accommodation</h3><p>Review Marloth Park stay options and direct enquiry paths.</p><p><a className="ivg-btn light" href="/accommodation">View accommodation</a></p></article>
              <article className="ivg-card"><h3>Safari drives</h3><p>Open the single safari-drive button in the Kruger day section, then confirm availability and routes directly.</p></article>
              <article className="ivg-card"><h3>Food and dining</h3><p>Find food, dining, groceries and practical stop ideas.</p><p><a className="ivg-btn light" href="/local/food-dining">Food and dining</a></p></article>
              <article className="ivg-card"><h3>Services</h3><p>Use service categories for practical visitor and local support needs.</p><p><a className="ivg-btn light" href="/services">View services</a></p></article>
              <article className="ivg-card"><h3>Practical help</h3><p>Use official emergency numbers first. For non-emergency support, start here.</p><p><a className="ivg-btn light" href="/local/practical-help">Practical help</a></p></article>
              <article className="ivg-card"><h3>Still unsure?</h3><p>Send a clear message with your dates, visitor type and what feels confusing.</p><p><a className="ivg-btn light" href="/contact?topic=international-visitors">Contact MPC</a></p></article>
            </div>
          </section>

          <section id="safety" className="ivg-panel green" aria-labelledby="safety-title">
            <p className="ivg-kicker">Emergency and safety</p>
            <h2 id="safety-title">Save these before you need them.</h2>
            <p className="ivg-lead">Save official emergency numbers before travelling. Use MPC pages only as a local planning starting point.</p>
            <div className="ivg-grid three">
              <article className="ivg-card urgent"><h3>Any mobile emergency</h3><p><a href="tel:112">112</a><br />Works from a cellphone in South Africa.</p></article>
              <article className="ivg-card urgent"><h3>Police / SAPS</h3><p><a href="tel:10111">10111</a><br />Crime, serious emergency or urgent police assistance.</p></article>
              <article className="ivg-card urgent"><h3>Ambulance / fire</h3><p><a href="tel:10177">10177</a><br />Medical or fire emergency support number.</p></article>
            </div>
            <div className="ivg-grid two">
              <article className="ivg-card"><h3>Road safety</h3><CheckList items={["South Africa drives on the left.", "Keep doors locked and valuables out of sight.", "Use fuel stations or busy, well-lit areas for stops.", "Carry water, snacks, a phone charger and first-aid basics."]} /></article>
              <article className="ivg-card"><h3>Marloth and wildlife safety</h3><CheckList items={["Wild animals are not pets, even when they approach a house.", "Do not feed animals or leave food/refuse where animals can access it.", "Keep children supervised around wildlife and pools.", "Use torches for walking visibility, not spotlighting animals."]} /></article>
            </div>
          </section>

          <section id="checklist" className="ivg-panel" aria-labelledby="checklist-title">
            <p className="ivg-kicker">Printable checklist</p>
            <h2 id="checklist-title">Print this before the trip.</h2>
            <p className="ivg-lead">Use this before departure, on arrival day and before entering Kruger.</p>
            <div className="ivg-print-box">
              <h3>Marloth Park International Visitor Checklist preview</h3>
              <p className="ivg-preview-note">
                This page only previews the checklist sections. View the full free MPC-branded PDF to print, write trip details, and tick each box by hand.
              </p>
              <ul className="ivg-preview-bullets">
                {checklistPreviewBullets.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </div>
            <div className="ivg-view-actions single">
              <a className="ivg-btn gold" href="#marloth-park-international-visitor-checklist-email-gate">
                Get the free checklist pack
              </a>
            </div>
            <p className="ivg-view-note">
              The protected ZIP includes the full, standard and quick printable checklist PDFs with trip-detail fields, emergency numbers, official-page reminders and tick boxes.
            </p>
            <EmailGatedDownload
              bundleSlug="marloth-park-international-visitor-checklist"
              title="Get the free International Visitor Checklist Pack"
              description="Enter your email address, use the one-time code MPC sends you, and download the printable full, standard and quick checklist PDFs in one ZIP."
              sourcePage="/international-visitors-guide#checklist"
              requestButtonLabel="Email my checklist access code"
              downloadButtonLabel="Download checklist pack"
              eyebrow="Protected free download"
              className="ivg-email-download-gate"
            />
          </section>

          <section id="sources" className="ivg-panel soft" aria-labelledby="sources-title">
            <p className="ivg-kicker">Official links</p>
            <h2 id="sources-title">Use official pages before travelling.</h2>
            <p className="ivg-lead">These links help you check current gate, fee, safety, health and visitor information before relying on a plan.</p>
            <div className="ivg-source-list">
              {officialLinks.map(([title, description, href]) => (
                <a href={href} target="_blank" rel="noopener" key={href}>
                  <strong>{title}</strong>
                  <span>{description}</span>
                </a>
              ))}
            </div>
          </section>
        </div>
      </div>
    </main>
  );
}
