/* eslint-disable */
const ChangesHero = () => (
  <section className="changes-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1540339832862-474599807836?w=2400&q=80)` }}></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="changes-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/book/">Book</a>
        <span className="sep">/</span>
        <span className="here">Changes &amp; Cancellations</span>
      </div>
      <div className="changes-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE BOOKING DESK · CHANGES &amp; CANCELLATIONS · 12 GUIDES</span>
          </div>
          <h1>Changes &amp; Cancellations<em>know your rights before you need them.</em></h1>
        </div>
        <p className="lede">
          Airlines change fees. Hotels charge penalties. Plans fall apart. <em>The rules that protect you</em> — DOT 24-hour rule, EU261 compensation, schedule-change triggers, credit card chargebacks — are real, enforceable, and almost never volunteered.
        </p>
      </div>

      <div className="changes-rail">
        {CHANGES_CARDS.map(c => (
          <a key={c.id} href={c.href}>
            <span className="n">{c.num}</span>
            <span className="t">{c.title}{c.titleEm ? ` ${c.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">52°22′N · 4°54′E · AMSTERDAM SCHIPHOL</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 112</div>
  </section>
);

const ChangeCard = ({ card }) => (
  <a href={card.href} className={`ccard ${card.size}${card.zoe ? " zoe-card" : ""}`}>
    <div className="img" style={{ backgroundImage: `url(${card.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{card.num}</span>
    {card.badge && (
      <span className={`corner-tag${card.zoe ? " zoe-tag" : ""}`}>{card.badge}</span>
    )}
    <div className="body">
      <div className="topic"><span className="dot"></span>{card.topic}</div>
      <h3>{card.title}{card.titleEm && <em> {card.titleEm}</em>}</h3>
      <p className="desc">{card.desc}</p>
      <div className="meta">
        <span>{card.count}</span>
        <span>·</span>
        <span>{card.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

const ChangesGrid = () => (
  <section className="changes-grid-section" id="guides">
    <div className="container">
      <div className="changes-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Twelve guides. <em>Every scenario covered.</em></h2>
          <p>Airline rules, hotel policies, European law, credit card protection, insurance. The full map of what to do when plans change.</p>
        </div>
        <div className="right">All guides <Icon name="arrow" size={12} /></div>
      </div>
      <div className="ccard-grid">
        {CHANGES_CARDS.map(c => <ChangeCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const ChangesEssay = () => (
  <section className="changes-essay">
    <div className="container">
      <div className="changes-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>The rights <em>airlines don't advertise.</em></h2>
          <p>From the booking desk, after three years of watching travelers leave money on the table.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"The airline will offer you a credit. <em>You are often entitled to cash.</em> Knowing the difference is worth hundreds of dollars."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Iris Mendoza</div>
              <div className="role">Senior Editor · Book Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>Three years of booking-desk correspondence have taught one thing above all: travelers are routinely shortchanged — not because airlines are always acting in bad faith, but because the rules are complicated, the stakes feel small in the moment, and the airline is counting on you to accept the first offer.</p>
          <p>The DOT 24-hour rule is the cleanest example. Every U.S. airline is legally required to offer a full cash refund if you cancel within 24 hours of booking and the flight is at least 7 days out. No fees. No travel credits. Cash. Most passengers don't know this rule exists. Airlines don't put it in the confirmation email.</p>
          <p>EU261 is even more under-claimed. If your flight is delayed 3+ hours on arrival, cancelled with less than 14 days' notice, or you're denied boarding due to overbooking — on a qualifying European route — you may be owed €250 to €600 per passenger. The airline has to pay it. You have to file. Most people never do.</p>
          <p>The pattern repeats at hotels. Free-cancellation windows exist for a reason. Non-refundable rates save you $30. The risk of a $300 forfeit sits entirely with you. Read the policy before you click confirm — not the summary, the actual cancellation policy. It takes 90 seconds and it has saved travelers thousands.</p>
          <p>When all else fails, the credit card dispute is your legally-backed last resort. Your card issuer has leverage the airline cares about. Use it when an airline owes you a refund and won't pay it inside 7 business days.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">€600</div><div className="l">Max EU261<br />compensation/person</div></div>
        <div className="item"><div className="n">24 hrs</div><div className="l">DOT refund<br />window, all U.S. flights</div></div>
        <div className="item"><div className="n">7 days</div><div className="l">Max wait for<br />airline cash refund</div></div>
        <div className="item"><div className="n">75%</div><div className="l">CFAR reimbursement<br />rate, typical policy</div></div>
      </div>
    </div>
  </section>
);

const ChangesChecklist = () => (
  <section className="changes-checklist-section" id="checklist">
    <div className="container">
      <div className="changes-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Before you book. <em>The six rules.</em></h2>
          <p>Do these before you need them. The time to understand cancellation policy is not when you're trying to cancel.</p>
        </div>
        <div className="right">Print it <Icon name="arrow" size={12} /></div>
      </div>
      <div className="checklist-grid">
        {CHANGES_CHECKLIST.map((item, i) => (
          <div key={i} className="cl-item">
            <div className="cl-num">{String(i + 1).padStart(2, "0")}</div>
            <div className="cl-body">
              <div className="cl-step">{item.step}</div>
              <div className="cl-detail">{item.detail}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ChangesReading = () => (
  <section className="changes-reading" id="reading">
    <div className="container">
      <div className="changes-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list, <em>before your next trip.</em></h2>
          <p>Six deep dives from the booking desk. The essentials, before something goes wrong.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {CHANGES_READING.map((r, i) => (
          <a key={i} href={`/journal/`} className="reading-row-c">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const ChangesFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="changes-faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · AND URGENTLY · ASKED</div>
            <h3>What people ask<em>when plans fall apart.</em></h3>
            <p>Real questions from the booking desk. These are the ones that arrive after the airline has already said no.</p>
          </div>
          <div className="faq-list">
            {CHANGES_FAQS.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q">
                  <span>{f.q}</span>
                  <span className="toggle">{open === i ? "−" : "+"}</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const ChangesCTA = () => (
  <section className="changes-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">BOOK DESK · CHANGES &amp; CANCELLATIONS</div>
      <h2>Know the rules<em>before you need them.</em></h2>
      <p>Plans change. Flights get cancelled. Hotels enforce their policies. The travelers who know their rights recover faster, lose less money, and waste less time on hold.</p>
      <div className="actions">
        <a href="/en/book/insurance/" className="btn-p">Travel Insurance →</a>
        <a href="/en/book/" className="btn-g">Back to Book</a>
      </div>
    </div>
  </section>
);

const ChangesApp = () => (
  <>
    <ChangesHero />
    <ChangesGrid />
    <ChangesEssay />
    <ChangesChecklist />
    <ChangesReading />
    <ChangesFAQ />
    <ChangesCTA />
    <Footer />
  </>
);

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