/* eslint-disable */
// Leaf article — dark dossier
const L = window.LEAF;

const LfRail = () => (
  <aside className="lf-rail">
    <div className="lf-rail-block">
      <div className="lf-rail-lbl">You are here</div>
      <div className="lf-rail-up">
        {L.trail.map((t, i) => (
          <a key={i} href={t.href} className={`depth-${t.depth} ${t.here ? "is-here" : ""}`}>
            {t.depth > 0 && !t.here && <span className="arrow">└</span>}
            <span>{t.label}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="lf-rail-block">
      <div className="lf-rail-lbl">In this guide</div>
      <nav className="lf-rail-jump">
        {(L.rail && L.rail.jumps ? L.rail.jumps : [
          { id: "how", num: "01", label: "How to · 5 steps" },
          { id: "cost", num: "02", label: "What it costs" },
          { id: "docs", num: "03", label: "Docs to bring" },
          { id: "avoid", num: "04", label: "Don't do this" },
          { id: "entry", num: "05", label: "Entry notes" },
          { id: "more", num: "06", label: "See also" },
        ]).map((j) => (
          <a key={j.id} href={`#${j.id}`}><span className="num">{j.num}</span>{j.label}</a>
        ))}
      </nav>
    </div>

    <div className="lf-rail-block">
      <div className="lf-rail-lbl">Article</div>
      <div className="lf-rail-meta">
        <div className="row"><span className="k">Author</span><span className="v">{L.author}</span></div>
        <div className="row"><span className="k">Updated</span><span className="v">{L.updated}</span></div>
        <div className="row"><span className="k">Read</span><span className="v">{L.readMin} min</span></div>
        <div className="row"><span className="k">Topic</span><span className="v">{L.topic}</span></div>
      </div>
    </div>
  </aside>
);

const LfHeader = () => (
  <header className="lf-head">
    <div className="lf-crumb">
      {L.crumb.map((c, i) => {
        const label = typeof c === "string" ? c : c.label;
        const href = typeof c === "object" ? c.href : null;
        const isLast = i === L.crumb.length - 1;
        return (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {!isLast && href
              ? <a href={href}>{label}</a>
              : <span className={isLast ? "here" : undefined}>{label}</span>}
          </React.Fragment>
        );
      })}
    </div>

    <div className="lf-flags">
      {L.flags.map(f => (
        <span key={f.kind} className={`lf-flag ${f.kind}`}>
          <span className="glyph">{f.glyph}</span>
          <span>{f.label}</span>
        </span>
      ))}
    </div>

    <div className="lf-eyebrow">
      <span className="author"><span className="dot" />By {L.author}{L.authorRole ? ` · ${L.authorRole}` : ""}</span>
      <span className="pipe">│</span>
      <span>Updated {L.updated}</span>
      <span className="pipe">│</span>
      <span>{L.readMin} min read</span>
    </div>

    <h1 className="lf-title">
      {L.title.lead}<br/>
      <em>{L.title.em}</em><br/>
      {L.title.trail}
    </h1>

    <p className="lf-stand">{L.stand}</p>
  </header>
);

const LfFacts = () => (
  <div className="lf-facts">
    {L.facts.map((f, i) => (
      <div key={i} className="fact">
        <div className="k">{f.k}</div>
        <div className="v"><em className="num">{f.v}</em></div>
        <div className="sub">{f.sub}</div>
      </div>
    ))}
  </div>
);

const LfSteps = () => {
  const sec = (L.sections && L.sections.steps) || { num: "§ 01 · How to", title: { lead: "Five steps from", em: "passport", trail: "to permanent." } };
  return (
  <section id="how" className="lf-sec">
    <div className="lf-sec-head">
      <div className="lf-sec-num">{sec.num}</div>
      <h2>{sec.title.lead} <em>{sec.title.em}</em> {sec.title.trail}</h2>
    </div>
    <div className="lf-steps">
      {L.steps.map((s, i) => (
        <div key={i} className="lf-step">
          <div className="step-num">{s.n}</div>
          <div className="step-body">
            <h3>{s.h}</h3>
            <p dangerouslySetInnerHTML={{__html: s.body}} />
            {s.meta && (
              <div className="step-meta">
                {s.meta.map((m, j) => (
                  <span key={j} className="pill">{m.k} · <b>{m.v}</b></span>
                ))}
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  </section>
  );
};

const LfBudget = () => (
  <div>
    <h3 style={{
      fontFamily: "Cormorant Garamond, Georgia, serif",
      fontSize: 24,
      fontWeight: 500,
      color: "var(--lf-ink)",
      marginBottom: 18,
      letterSpacing: "-0.01em",
    }}>
      What it <em style={{color: "var(--lf-accent)", fontStyle: "italic"}}>actually</em> costs
    </h3>
    <div className="lf-budget">
      {L.budget.rows.map((r, i) => (
        <div key={i} className="lf-budget-row">
          <div className="label">{r.label}<span className="sub">{r.sub}</span></div>
          <div className="amt">{r.amt}</div>
        </div>
      ))}
      <div className="lf-budget-row is-total">
        <div className="label">{L.budget.total.label}<span className="sub">{L.budget.total.sub}</span></div>
        <div className="amt">{L.budget.total.amt}</div>
      </div>
    </div>
    <p className="lf-budget-foot">{L.budget.foot}</p>
  </div>
);

const LfPack = () => (
  <div>
    <h3 style={{
      fontFamily: "Cormorant Garamond, Georgia, serif",
      fontSize: 24,
      fontWeight: 500,
      color: "var(--lf-ink)",
      marginBottom: 18,
      letterSpacing: "-0.01em",
    }}>
      Documents to <em style={{color: "var(--lf-accent)", fontStyle: "italic"}}>bring</em>
    </h3>
    <div className="lf-pack">
      {L.pack.map((p, i) => (
        <div key={i} className={"lf-pack-item " + (p.required ? "is-required" : "")}>
          <div className="check" />
          <div className="doc">
            {p.doc}
            <span className="note">{p.note}</span>
          </div>
          <div className="tag">{p.tag}</div>
        </div>
      ))}
    </div>
  </div>
);

const LfBudgetPack = () => {
  const sec = (L.sections && L.sections.cost) || { num: "§ 02 · The numbers", title: { lead: "Costs and", em: "paperwork,", trail: "side by side." } };
  return (
  <section id="cost" className="lf-sec">
    <div className="lf-sec-head">
      <div className="lf-sec-num">{sec.num}</div>
      <h2>{sec.title.lead} <em>{sec.title.em}</em> {sec.title.trail}</h2>
    </div>
    <div className="lf-two">
      <LfBudget />
      <LfPack />
    </div>
  </section>
  );
};

const LfPitfalls = () => {
  const sec = (L.sections && L.sections.pitfalls) || { num: "§ 04 · Don't do this", title: { lead: "Four ways this", em: "goes wrong.", trail: "" } };
  return (
  <section id="avoid" className="lf-sec">
    <div className="lf-sec-head">
      <div className="lf-sec-num">{sec.num}</div>
      <h2>{sec.title.lead} <em>{sec.title.em}</em> {sec.title.trail}</h2>
    </div>
    <div className="lf-pitfalls">
      {L.pitfalls.map((p, i) => (
        <div key={i} className="lf-pitfall">
          <div className="lbl">{p.lbl}</div>
          <div className="h">{p.h}</div>
          <div className="b">{p.b}</div>
        </div>
      ))}
    </div>
  </section>
  );
};

const LfNotes = () => {
  const sec = (L.sections && L.sections.notes) || { num: "§ 05 · Entry & visa notes" };
  return (
  <section id="entry" className="lf-sec">
    <div className="lf-sec-head">
      <div className="lf-sec-num">{sec.num}</div>
      <h2>{L.notes.h.lead} <em>{L.notes.h.em}</em> {L.notes.h.trail}</h2>
    </div>
    <div className="lf-notes">
      {L.notes.paragraphs.map((p, i) => (
        <p key={i} dangerouslySetInnerHTML={{__html: p}} />
      ))}
    </div>
  </section>
  );
};

const LfAlso = () => (
  <section id="more" className="lf-also">
    <div className="lf-also-head">
      <div>
        <div className="lbl">§ 06 · See also</div>
        <div className="h">{L.alsoHead.lead} <em>{L.alsoHead.em}</em> {L.alsoHead.trail}</div>
      </div>
    </div>
    <div className="lf-also-grid">
      {L.also.map((a, i) => (
        <a key={i} href={a.href} className="lf-also-card">
          <div className="crumb">{a.crumb}</div>
          <div className="t" dangerouslySetInnerHTML={{__html: a.t}} />
          <div className="blurb">{a.blurb}</div>
          <div className="arrow">Read article →</div>
        </a>
      ))}
    </div>
  </section>
);

const LfFoot = () => {
  const back = L.back || { label: "Back to Plan", href: "/en/plan/" };
  return (
  <div className="lf-foot">
    <span>Ref · {L.ref}</span>
    <span>Spotted an error? <a href="mailto:letters@howto.travel">letters@howto.travel</a></span>
    <span>↑ <a href={back.href}>{back.label}</a></span>
  </div>
  );
};

const LfApp = () => (
  <>
    <Nav />
    <div className="lf-shell">
      <LfRail />
      <article className="lf-article">
        <LfHeader />
        <LfFacts />
        <LfSteps />
        <LfBudgetPack />
        <LfPitfalls />
        <LfNotes />
        <LfAlso />
        <LfFoot />
      </article>
    </div>
    <Footer />
  </>
);

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