/* global React */
const { SectionHeading, Button, Icon, Badge } = window.MissionInsurancePartnersDesignSystem_445ed5;

function MedicarePage() {
  const { Section, PageHero, DataTable, Accordion, ProcessRow, CheckList, CtaBand, DiagImage, PageFooter, FeatureCard } = window;
  return (
    <>
      <PageHero eyebrow="Medicare Made Clear" title="Medicare, finally"
        accent="made clear."
        lead="You deserve coverage you understand — and a partner who puts your needs first. Below is a plain-language guide to today's Medicare landscape. If any part still feels foggy, book a free one-on-one call and we'll walk you through your options."
        ctaLabel="Schedule Your Free Call" image={window.PHOTOS.medigap} />

      {/* What is Medicare */}
      <Section bg="tint">
        <SectionHeading eyebrow="The Basics" title="What exactly is Medicare?" lead="Medicare is federal health insurance that comes in pieces. Here's what each part covers — and the 2025 national standards." />
        <div style={{ marginTop: "var(--space-8)" }}>
          <DataTable columns={["Part", "What it covers", "2025 cost"]}
            rows={[
              ["Part A — Hospital", "Inpatient hospital, skilled nursing, hospice", "Usually <strong>$0 premium</strong> if you worked 10+ years"],
              ["Part B — Medical", "Outpatient care, doctors, labs, preventive services", "Standard premium <strong>$185/mo</strong>; deductible <strong>$257</strong>"],
              ["Part D — Drugs", "Retail prescriptions", "Premium varies by plan; out-of-pocket capped at <strong>$2,000</strong>"],
            ]}
            note="Figures shown are the 2025 national standards; income-related adjustments or state programs can change what you actually pay." />
        </div>
      </Section>

      {/* Two paths */}
      <Section bg="page">
        <SectionHeading eyebrow="Original vs. Advantage" title="Two ways to build full coverage" lead="You have two main paths. Here's how they stack up side by side." />
        <div style={{ marginTop: "var(--space-8)" }}>
          <DataTable columns={["", "Path 1 — Original Medicare + Medigap + Part D", "Path 2 — Medicare Advantage (Part C)"]} highlight={1}
            rows={[
              ["How it works", "Keep Parts A &amp; B, add a Medigap plan to cover gaps, plus a standalone Part D drug plan.", "All-in-one private plan that replaces A &amp; B, usually including drugs + extras."],
              ["Doctor choice", "Any provider nationwide who accepts Medicare.", "Network-based (HMO/PPO). Out-of-network may cost more or be uncovered."],
              ["Monthly cost", "Part B premium + Medigap + Part D premium (predictable).", "Part B premium + plan premium (many are $0)."],
              ["Annual OOP limit", "No cap without Medigap; Plan G/N cover most after deductible.", "Capped at $9,350 or less in 2025 (some plans lower)."],
              ["Extras (dental, vision, fitness)", "Buy separately.", "Often built in at no extra cost."],
              ["Best for", "Travelers, freedom-seekers, or those avoiding surprise bills.", "Budget-conscious adults who prefer bundled care."],
            ]} />
        </div>
      </Section>

      {/* Diving deeper: Medigap */}
      <Section bg="tint">
        <div className="mip-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "var(--space-8)", alignItems: "center" }}>
          <div>
            <span style={window.eyebrowStyle}>Diving Deeper</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.6rem 0 1.25rem", letterSpacing: "-0.02em" }}>Medicare Supplement (Medigap)</h2>
            <CheckList items={[
              "<strong>Standardized plans (A, B, D, G, K, L, M, N).</strong> Benefits are identical nationwide — price is the only difference.",
              "<strong>Plans C &amp; F</strong> are closed to new enrollees who turned 65 after Jan 1, 2020.",
              "<strong>Six-month Medigap Open Enrollment</strong> starts the month your Part B begins — no health questions asked. After that, underwriting may apply.",
              "<strong>Popular choice: Plan G</strong> covers nearly every Part A &amp; B cost except the Part B deductible.",
            ]} />
          </div>
          <DiagImage src={window.PHOTOS.medMyth} alt="Advisor explaining Medigap options" clip={window.DIAGONAL} minHeight={400} />
        </div>
      </Section>

      {/* Advantage + Part D feature cards */}
      <Section bg="page">
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)" }}>
          <FeatureCard icon="layers" title="Medicare Advantage (Part C)">Must cover everything Original Medicare does, plus a cap on out-of-pocket costs. Most plans include drug, dental, vision, hearing &amp; fitness — even grocery or utility cards. Benefits vary by ZIP code.</FeatureCard>
          <FeatureCard icon="calendar-check" title="Enrollment windows">Initial Coverage Election when you first join Medicare · Annual Enrollment Oct 15–Dec 7 (switch any plan) · MA Open Enrollment Jan 1–Mar 31 (one switch if already enrolled).</FeatureCard>
          <FeatureCard icon="wallet" title="Part D drug plans">In 2025 the Inflation Reduction Act sets a hard $2,000 annual cap on covered prescriptions. Plans still differ in premiums and formularies — the cheapest premium isn't always the lowest total cost.</FeatureCard>
        </div>
      </Section>

      {/* Myths */}
      <Section bg="tint">
        <SectionHeading eyebrow="Common Myths — Busted" title="Don't let a myth cost you" lead="A few of the misunderstandings that trip people up most." />
        <div style={{ marginTop: "var(--space-8)", maxWidth: 860, marginInline: "auto" }}>
          <Accordion items={[
            { q: "\u201CMedicare Advantage is always cheaper.\u201D", a: "Not if you see out-of-network doctors or need expensive inpatient care that pushes you to the maximum out-of-pocket (MOOP)." },
            { q: "\u201CI can add Medigap later if I get sick.\u201D", a: "Outside your open-enrollment window, insurers can deny you or raise your price in most states." },
            { q: "\u201CSupplements cover dental and vision.\u201D", a: "They don't. You'd add standalone policies for dental and vision coverage." },
          ]} />
        </div>
      </Section>

      {/* How we help */}
      <Section bg="page">
        <SectionHeading eyebrow="How We Help (at Zero Cost to You)" title="From confused to covered" />
        <div style={{ marginTop: "var(--space-8)" }}>
          <ProcessRow steps={[
            { title: "Quick Call (30 min)", body: "You tell us your doctors, drugs, and budget." },
            { title: "Side-by-Side Breakdown", body: "We run every carrier in your county, showing real costs over 12 months — not teaser premiums." },
            { title: "Enroll & Relax", body: "We submit the application, confirm drug lists, and stay on call year-round." },
          ]} />
        </div>
      </Section>

      <CtaBand title="Ready for answers you can trust?" lead="No pressure. No sales quota. Just clarity from advisors with 100+ years of combined experience who work for you, not the carrier." />

      <window.Disclaimer>
        <span>Mission Insurance Partners is not affiliated with or endorsed by the U.S. government or the federal Medicare program.</span>
        <span>We do not offer every plan available in your area. Any information we provide is limited to those plans we do offer in your area. Please contact Medicare.gov or 1-800-MEDICARE to get information on all your options.</span>
      </window.Disclaimer>
      <PageFooter />
    </>
  );
}
window.MedicarePage = MedicarePage;