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

function FinalExpensePage() {
  const { Section, PageHero, DataTable, Accordion, CheckList, CtaBand, DiagImage, PageFooter, FeatureCard } = window;
  return (
    <>
      <PageHero eyebrow="Final Expense" title="Peace of mind for the"
        accent="people you love."
        lead={"Your family deserves comfort — not confusion — when it's time to say goodbye. Final-expense (sometimes called \u201Cburial\u201D) insurance sets aside a small, dedicated pool of money so loved ones aren't scrambling for cash while they grieve."}
        ctaLabel="Schedule Your Free Call" image={window.PHOTOS.finalExpense} />

      {/* Qualification quiz */}
      <section style={{ background: "linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: "0 auto 0 0", width: "40%", background: "var(--gradient-accent)", clipPath: "polygon(0 0, 72% 0, 100% 100%, 0 100%)", opacity: 0.5 }} />
        <div className="mip-hero-grid" style={{ position: "relative", maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "clamp(2.75rem, 2rem + 3vw, 4.5rem)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center" }}>
          <div>
            <span style={{ fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: "var(--fs-eyebrow)", color: "var(--gold-300)" }}>Free 30-Second Quiz</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "#fff", margin: "0.75rem 0 1rem", lineHeight: 1.06, letterSpacing: "-0.02em" }}>See what you qualify for &mdash; <span style={{ color: "var(--gold-300)" }}>no exam required.</span></h2>
            <p style={{ fontSize: "var(--fs-lead)", color: "rgba(255,255,255,0.9)", lineHeight: "var(--lh-snug)", margin: "0 0 1.75rem", maxWidth: "44ch" }}>Answer a few quick questions and a licensed advisor will show you real final-expense options that fit your budget. No pressure, no obligation.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: "0.9rem", marginBottom: "1.75rem" }}>
              {[["shield-check", "No-medical-exam options available"], ["hand-heart", "No pressure, no sales quotas"], ["wallet", "Plans that fit your monthly budget"]].map(([ic, t]) => (
                <span key={t} style={{ display: "flex", alignItems: "center", gap: "0.75rem", fontWeight: 600 }}><Icon name={ic} size={22} color="var(--gold-300)" />{t}</span>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "0.6rem", flexWrap: "wrap" }}>
              <span style={{ display: "flex", gap: 2 }}>{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={18} color="var(--gold-300)" fill="var(--gold-300)" />)}</span>
              <span style={{ fontSize: "var(--fs-sm)", color: "rgba(255,255,255,0.85)" }}>Trusted by thousands of families across the US</span>
            </div>
          </div>
          <div><window.LifeQuiz /></div>
        </div>
      </section>

      {/* Why a plan matters */}
      <Section bg="tint">
        <SectionHeading eyebrow="Why a Plan Matters" title="A small policy closes a big gap" />
        <div style={{ marginTop: "var(--space-8)", maxWidth: 900, marginInline: "auto" }}>
          <CheckList items={[
            "The <strong>national median cost of a funeral</strong> with viewing + burial is <strong>$8,300</strong>; with cremation it's <strong>$6,280</strong> — and prices climb every year.",
            "Social Security's one-time death benefit is <strong>just $255</strong>, leaving a big gap for most families.",
            "Six in ten Americans couldn't cover <strong>a $1,000</strong> surprise expense from savings, let alone a multi-thousand-dollar funeral.",
            "Final-expense coverage guarantees cash is ready when it's needed most — <strong>no loans, no crowdfunding, no family stress.</strong>",
          ]} />
        </div>
      </Section>

      {/* Plain English table */}
      <Section bg="page">
        <SectionHeading eyebrow="In Plain English" title="Final-expense insurance, decoded" lead="A 60-year-old non-smoker might pay about $50–$100 per month for $10K of coverage; exact rates vary by age and health." />
        <div style={{ marginTop: "var(--space-8)" }}>
          <DataTable columns={["At a glance", "What that means for you"]} highlight={0}
            rows={[
              ["Small Whole-Life Policy", "Coverage amounts typically <strong>$5,000 – $50,000</strong> — enough for funeral costs, small debts, or a legacy gift."],
              ["Fixed Premiums", "Payments never increase as you age."],
              ["Simple Approval", "Most plans use \u201Cyes/no\u201D health questions — <strong>no medical exam</strong> for many applicants."],
              ["Quick, Tax-Free Payout", "Beneficiaries usually receive funds in days, not weeks."],
              ["Affordable", "Rates stay manageable when you lock them in early."],
            ]} />
        </div>
      </Section>

      {/* Who uses it */}
      <Section bg="tint">
        <SectionHeading eyebrow="Who Uses Final-Expense Coverage?" title="Built for peace of mind" />
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
          <FeatureCard icon="shield-check" title="Adults aged 50–85">Who want to lock in a modest policy while premiums are still manageable.</FeatureCard>
          <FeatureCard icon="hand-heart" title="Caretakers & adult children">Who don't want funeral bills landing on siblings' credit cards.</FeatureCard>
          <FeatureCard icon="wallet" title="People without large savings">Who value certainty and simplicity over complexity.</FeatureCard>
        </div>
      </Section>

      {/* Myths */}
      <Section bg="page">
        <SectionHeading eyebrow="Common Myths — Cleared Up" title="Straight answers, no pressure" />
        <div style={{ marginTop: "var(--space-8)", maxWidth: 860, marginInline: "auto" }}>
          <Accordion items={[
            { q: "\u201CMy savings will handle it.\u201D", a: "Great — if they're liquid, protected from market swings, and won't derail other goals. A dedicated policy keeps funeral money separate and guaranteed." },
            { q: "\u201CI'm too old or not healthy enough.\u201D", a: "Simplified-issue plans accept many applicants who were declined for traditional life insurance." },
            { q: "\u201CIt's complicated.\u201D", a: "Final-expense policies are among the easiest forms of coverage to understand and own — no confusing riders, no annual re-qualification." },
          ]} />
        </div>
      </Section>

      {/* How MIP makes it easy */}
      <Section bg="tint">
        <SectionHeading eyebrow="How We Make It Easy" title="Four steps to certainty" lead="Our advice is completely carrier-agnostic and backed by 100+ years of combined experience guiding families just like yours." />
        <div style={{ marginTop: "var(--space-8)" }}>
          <DataTable columns={["Step", "What we do", "Your result"]}
            rows={[
              ["1. 20-Minute Discovery Call", "We ask about your goals, budget, and any health concerns.", "Clear picture of how much coverage makes sense."],
              ["2. Instant Quote Scan", "We compare multiple carriers side-by-side (we work for you, not them).", "See real premiums — no teaser rates."],
              ["3. Fast Application", "Most forms completed in one sitting; many approvals within 48 hours.", "Coverage locked in, premiums fixed for life."],
              ["4. Ongoing Support", "Beneficiary changes, policy reviews, claim assistance — just call us.", "A lifelong partner instead of a one-time sale."],
            ]} />
        </div>
      </Section>

      <CtaBand title="Ready for real peace of mind?" lead="Skip the guesswork — schedule a free, no-pressure consultation and get answers in minutes." />

      <window.Disclaimer>
        <span>Mission Insurance Partners is not affiliated with or endorsed by any government agency. Cost figures are national medians; local prices vary.</span>
        <span>We represent multiple carriers but not every product in the marketplace. Contact us for personalized quotes and eligibility.</span>
      </window.Disclaimer>
      <PageFooter />
    </>
  );
}
window.FinalExpensePage = FinalExpensePage;