/* eslint-disable */

// ─── Hero ────────────────────────────────────────────────────────────────────
const InsuranceHero = () => (
  <section className="ins-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=2400&q=80)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="ins-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/book/">Book</a>
        <span className="sep">/</span>
        <span className="here">Travel Insurance</span>
      </div>
      <div className="ins-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE COVERAGE DESK · 10 TOPICS</span>
          </div>
          <h1>Travel Insurance<em>bought correctly.</em></h1>
        </div>
        <p className="lede">
          The right policy costs $40 and protects $40,000. The wrong one costs $200 and pays nothing.
          The difference is <em>which boxes you tick</em> before you click buy — and how early you click.
        </p>
      </div>

      <div className="ins-rail">
        {INSURANCE_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">40°51′N · 14°15′E · NAPLES</div>
    <div className="hero-credit">PHOTO — COVERAGE DESK Nº 012</div>
  </section>
);

// ─── Coverage card ────────────────────────────────────────────────────────────
const CoverageCard = ({ card }) => (
  <a href={card.href} className={`ins-card ${card.size}`}>
    <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.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 className="cost">{card.cost}</span>
        <span>·</span>
        <span>{card.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

// ─── Coverage grid ────────────────────────────────────────────────────────────
const CoverageGrid = () => (
  <section className="ins-grid-section" id="coverage">
    <div className="container">
      <div className="ins-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Ten coverage types. <em>One clear guide.</em></h2>
          <p>From a $30 trip cancellation add-on to a $200 full-flexibility CFAR policy — every product category, explained without the fine-print fog.</p>
        </div>
        <div className="right">All topics <Icon name="arrow" size={12} /></div>
      </div>
      <div className="ins-lane-grid">
        {INSURANCE_CARDS.map(c => <CoverageCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

// ─── Essay ────────────────────────────────────────────────────────────────────
const InsuranceEssay = () => (
  <section className="ins-essay" id="essay">
    <div className="container">
      <div className="ins-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>on coverage decisions.</em></h2>
          <p>From the desk that has read 1,400 policy documents so you don't have to. Some truths hold across every plan.</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 right policy is not the cheapest one. It's the one that <em>matches the actual risk</em> of your specific trip."</p>
          <div className="byline-neutral">
            <div className="who">
              <div className="name">Coverage Desk</div>
              <div className="role">Book Lane · Travel Insurance</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>Most people buy travel insurance the same way they buy a bottle of water at the airport: they want it done, they resent the cost, and they grab the first thing they see. The result is a policy that's technically in force but practically useless — wrong coverage caps, wrong covered reasons, and a pre-existing condition waiver they forfeited by buying two months after they booked.</p>
          <p>The thing that actually matters isn't the premium. It's timing. Buy within 14–21 days of your first nonrefundable booking and you unlock the two most valuable riders: the CFAR upgrade and the pre-existing condition waiver. Buy six weeks later and neither is available to you, at any price.</p>
          <p>The second thing that matters is what you already have. A Chase Sapphire Reserve card covers trip interruption and rental car CDW at levels that would cost $60–$80 standalone. The gap it leaves — medical evacuation abroad, emergency hospital bills in a country where your insurance is useless, CFAR — is what you're actually shopping for.</p>
          <p>The test: add up your nonrefundable, prepaid trip costs. Multiply by 7%. If the resulting number makes you uncomfortable as a potential loss, buy the policy. If the trip is mostly refundable and your card is solid, the calculation often doesn't clear.</p>
        </div>
      </div>
      <div className="essay-stats">
        {INSURANCE_STATS.map((s, i) => (
          <div key={i} className="item">
            <div className="n">{s.n}</div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Zoe card ─────────────────────────────────────────────────────────────────
const ZoeStory = () => (
  <section className="zoe-story-section" id="zoe">
    <div className="container">
      <div className="ins-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>First person. <em>Claim paid.</em></h2>
          <p>A contributor account of what actually happens when you file — from the ER to the reimbursement wire.</p>
        </div>
        <div className="right">Read the story <Icon name="arrow" size={12} /></div>
      </div>
      <a href={ZOE_CARD.href} className="zoe-card">
        <div className="zoe-img" style={{ backgroundImage: `url(${ZOE_CARD.img})` }}></div>
        <div className="zoe-scrim"></div>
        <div className="zoe-body">
          <div className="zoe-header">
            <span className="zoe-badge">✦ {ZOE_CARD.badge}</span>
            <span className="zoe-tag">{ZOE_CARD.tag}</span>
          </div>
          <h3>{ZOE_CARD.title}</h3>
          <p>{ZOE_CARD.desc}</p>
          <div className="zoe-cta">Read the claim story <Icon name="arrow" size={14} /></div>
        </div>
      </a>
    </div>
  </section>
);

// ─── Decision calculator ──────────────────────────────────────────────────────
const DecisionCalc = () => {
  const [tripCost, setTripCost] = React.useState(3000);
  const [isInternational, setIsInternational] = React.useState(true);
  const [hasComplexHealth, setHasComplexHealth] = React.useState(false);
  const [isCfar, setIsCfar] = React.useState(false);

  const rec = React.useMemo(() => {
    const base = Math.round(tripCost * (isInternational ? 0.08 : 0.05));
    const cfar = isCfar ? Math.round(tripCost * 0.04) : 0;
    const tier = tripCost > 5000 || isCfar
      ? "Premium — Trip Cancellation + Medical + CFAR"
      : isInternational
      ? "Essential — Trip Cancellation + Medical & Evacuation"
      : "Standard — Trip Cancellation";
    const note = hasComplexHealth
      ? "Buy within 14 days of your first deposit to lock in the pre-existing condition waiver."
      : isCfar
      ? "Buy within 14–21 days of first deposit — CFAR closes after that window."
      : "Buy within 72 hours of your first nonrefundable booking.";
    return { est: base + cfar, tier, note };
  }, [tripCost, isInternational, hasComplexHealth, isCfar]);

  return (
    <section className="ins-calc" id="calculator">
      <div className="container">
        <div className="ins-section-head">
          <div className="num">IV</div>
          <div className="titles">
            <h2>What tier <em>do you actually need?</em></h2>
            <p>Three inputs. An honest estimate. No email required.</p>
          </div>
          <div className="right">Adjust and read <Icon name="arrow" size={12} /></div>
        </div>

        <div className="calc-grid">
          <div className="calc-inputs">
            <div className="calc-row">
              <label>Total nonrefundable trip cost</label>
              <div className="range-wrap">
                <input
                  type="range" min={500} max={15000} step={500}
                  value={tripCost}
                  onChange={e => setTripCost(Number(e.target.value))}
                />
                <span className="range-val">${tripCost.toLocaleString()}</span>
              </div>
            </div>
            <div className="calc-row">
              <label>International trip?</label>
              <div className="toggle-row">
                <button className={isInternational ? "tog active" : "tog"} onClick={() => setIsInternational(true)}>Yes</button>
                <button className={!isInternational ? "tog active" : "tog"} onClick={() => setIsInternational(false)}>Domestic only</button>
              </div>
            </div>
            <div className="calc-row">
              <label>Pre-existing health conditions?</label>
              <div className="toggle-row">
                <button className={hasComplexHealth ? "tog active" : "tog"} onClick={() => setHasComplexHealth(true)}>Yes</button>
                <button className={!hasComplexHealth ? "tog active" : "tog"} onClick={() => setHasComplexHealth(false)}>No</button>
              </div>
            </div>
            <div className="calc-row">
              <label>Want Cancel For Any Reason?</label>
              <div className="toggle-row">
                <button className={isCfar ? "tog active" : "tog"} onClick={() => setIsCfar(true)}>Yes</button>
                <button className={!isCfar ? "tog active" : "tog"} onClick={() => setIsCfar(false)}>No</button>
              </div>
            </div>
          </div>

          <div className="calc-result">
            <div className="result-est">
              <span className="label">Estimated policy cost</span>
              <span className="amount">${rec.est.toLocaleString()}</span>
            </div>
            <div className="result-tier">
              <span className="label">Recommended tier</span>
              <span className="value">{rec.tier}</span>
            </div>
            <div className="result-note">
              <Icon name="info" size={14} />
              <span>{rec.note}</span>
            </div>
            <a href="/en/book/insurance/trip-cancellation/" className="calc-cta">
              See the full buying guide <Icon name="arrow" size={13} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Reading list ─────────────────────────────────────────────────────────────
const ReadingList = () => (
  <section className="ins-reading" id="reading">
    <div className="container">
      <div className="ins-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>If you only read <em>five things</em> before buying.</h2>
          <p>From the coverage desk — the essays that close the most costly gaps.</p>
        </div>
        <div className="right">Full journal <Icon name="arrow" size={12} /></div>
      </div>
      <ol className="reading-list">
        {INSURANCE_READING.map((r, i) => (
          <li key={i} className="reading-item">
            <a href="/journal/">
              <span className="reading-num">{String(i + 1).padStart(2, "0")}</span>
              <div className="reading-body">
                <div className="reading-meta">
                  <span className="reading-tag">{r.tag}</span>
                  <span className="reading-time">{r.duration} read</span>
                </div>
                <h4>{r.title}</h4>
              </div>
              <span className="reading-arrow"><Icon name="arrow" size={16} /></span>
            </a>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const FaqAccordion = () => {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="ins-faq" id="faq">
      <div className="container">
        <div className="ins-section-head">
          <div className="num">VI</div>
          <div className="titles">
            <h2>Frequently — but <em>quietly</em> — asked.</h2>
            <p>Six coverage questions the policy document buries. Clear answers, no upsell.</p>
          </div>
        </div>
        <dl className="faq-list">
          {INSURANCE_FAQS.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <dt>
                <button onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
                  {item.q}
                  <Icon name={open === i ? "x" : "chevron"} size={16} />
                </button>
              </dt>
              {open === i && <dd>{item.a}</dd>}
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
};

// ─── CTA strip ────────────────────────────────────────────────────────────────
const CtaStrip = () => (
  <section className="ins-cta-strip">
    <div className="container">
      <h2>Buy within 14 days of booking.<em>Everything else is fine print.</em></h2>
      <p>The timing window is the only thing that can't be fixed after you book. Policies exist the day before departure. CFAR and waivers do not.</p>
      <div className="cta-actions">
        <a href="/en/book/insurance/trip-cancellation/" className="btn-primary">Start with Trip Cancellation <Icon name="arrow" size={14} /></a>
        <a href="/en/book/" className="btn-ghost">Back to Book</a>
      </div>
    </div>
  </section>
);

// ─── App shell ────────────────────────────────────────────────────────────────
const InsuranceApp = () => (
  <>
    <InsuranceHero />
    <CoverageGrid />
    <InsuranceEssay />
    <ZoeStory />
    <DecisionCalc />
    <ReadingList />
    <FaqAccordion />
    <CtaStrip />
    <Footer />
  </>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<InsuranceApp />);
