/* global React */
const { SectionHeading, PlanCard, BenefitCard, TestimonialCard, ComparisonTable, StepRail, Button, Icon } = window.MissionInsurancePartnersDesignSystem_445ed5;

function HomeHero() {
  return (
    <section style={{ background: "var(--surface-lavender)", position: "relative", overflow: "hidden" }}>
      <div className="mip-hero-grid" style={{ position: "relative", maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "clamp(4.5rem, 3rem + 6vw, 8rem)", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "var(--space-9)", alignItems: "center" }}>
        <div>
          <span style={window.eyebrowStyle}>Mission Insurance Partners</span>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-display)", color: "var(--navy-900)", margin: "0.75rem 0 1rem", lineHeight: 1.04, letterSpacing: "-0.02em" }}>You deserve coverage you <span style={{ color: "var(--brand-accent)" }}>understand.</span></h1>
          <p style={{ fontSize: "var(--fs-lead)", lineHeight: "var(--lh-snug)", color: "var(--text-body)", maxWidth: "46ch", margin: "0 0 1rem" }}>Medicare and ACA shouldn't feel like a maze. We help adults 50+ find coverage that fits your life, your health, and your budget — instead of someone else's sales quota.</p>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem", color: "var(--navy-900)", margin: "0 0 1.6rem" }}>Book a 100% free consultation to get started.</p>
          <div style={{ display: "flex", gap: "var(--space-4)", flexWrap: "wrap", alignItems: "center" }}>
            <Button intent="cta" size="lg" onClick={window.goConsult} iconRight={<Icon name="arrow-right" size={20} color="var(--ink-900)" />}>Start Your Free Consultation</Button>
            <span style={{ display: "flex", alignItems: "center", gap: "0.5rem", color: "var(--navy-900)", fontWeight: 700 }}><Icon name="phone" size={18} color="var(--brand-accent)" />{window.PHONE}</span>
          </div>
        </div>
        <div style={{ position: "relative", minHeight: 460 }}>
          <div style={{ position: "absolute", inset: "0 0 0 auto", width: "108%", right: "-4%", background: "var(--gradient-accent)", clipPath: window.DIAGONAL, borderRadius: "var(--radius-xl)" }} />
          <img src={window.ANTHONY} alt="Anthony Hendrickson, Founder & Licensed Advisor" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", clipPath: window.DIAGONAL, borderRadius: "var(--radius-xl)" }} />
          <div style={{ position: "absolute", left: "-4%", bottom: "6%", background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: "var(--space-4) var(--space-5)", maxWidth: 280 }}>
            <div style={{ display: "flex", gap: "0.1rem", marginBottom: "0.4rem" }}>{Array.from({ length: 5 }).map((_, i) => <Icon key={i} name="star" size={18} color="var(--gold-500)" fill="var(--gold-500)" />)}</div>
            <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-body-lg)", color: "var(--navy-900)", margin: "0 0 0.35rem", lineHeight: 1.25 }}>"I finally understand my Medicare options."</p>
            <span style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)", fontWeight: 600 }}>— Mark R.</span>
          </div>
          <div style={{ position: "absolute", right: "2%", top: "6%", background: "rgba(13,22,61,0.72)", backdropFilter: "blur(6px)", borderRadius: "var(--radius-md)", padding: "0.7rem 1rem", color: "#fff" }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.05rem", lineHeight: 1.1 }}>Anthony Hendrickson</div>
            <div style={{ fontSize: "var(--fs-sm)", color: "var(--gold-300)" }}>Founder &amp; Licensed Advisor</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  const { Section, DiagImage, CtaBand, CheckList, PageFooter } = window;
  return (
    <>
      <HomeHero />

      {/* Right plan changes everything */}
      <Section bg="page">
        <div className="mip-hero-grid" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "var(--space-8)", alignItems: "center" }}>
          <DiagImage src={window.PHOTOS.heroA} alt="A couple reviewing their Medicare options" clip={window.DIAGONAL_L} minHeight={420} />
          <div>
            <span style={window.eyebrowStyle}>The Right Plan</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.6rem 0 1rem", lineHeight: 1.08, letterSpacing: "-0.02em" }}>The right Medicare plan changes everything.</h2>
            <p style={{ fontSize: "var(--fs-lead)", color: "var(--text-body)", lineHeight: "var(--lh-snug)", margin: "0 0 1rem" }}>The right plan means you can go to the doctor you trust, get the prescriptions you need, and know exactly what it's going to cost — month after month, year after year, with no surprises.</p>
            <p style={{ color: "var(--text-body)", lineHeight: 1.6, margin: "0 0 1.25rem" }}>We've helped thousands of 50+ Americans find Medicare coverage that actually makes sense for their lives. Whether you're comparing Supplement vs. Advantage, need help with drug coverage, or want to avoid expensive mistakes, our advisors are here to guide you — starting with a free one-on-one consultation.</p>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.2rem", color: "var(--brand-secondary)", margin: "0 0 1.5rem" }}>One call. No pressure. Just real answers.</p>
            <Button intent="cta" size="lg" onClick={window.goConsult}>Start Your Free Consultation</Button>
          </div>
        </div>
      </Section>

      {/* Plan cards */}
      <Section bg="tint">
        <SectionHeading eyebrow="Compare Coverage" title="Coverage built around your life" lead="Whether you're weighing Supplement vs. Advantage or need pre-65 coverage, here's where each plan shines." />
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
          <PlanCard icon="shield-check" name="Medicare Supplement" subtitle="Medigap" featured
            benefits={["Covers what Original Medicare doesn't, so no big bills later", "See any doctor who accepts Medicare", "Covers deductibles, copays & coinsurance", "Predictable monthly cost gives you peace of mind"]}
            bestForLabel="Perfect for" bestFor="People who want flexibility and fewer surprises." ctaLabel="Explore Medigap" onCta={() => window.go("medicare")} />
          <PlanCard icon="layers" name="Medicare Advantage" subtitle="Part C"
            benefits={["All-in-one alternative to Original Medicare", "May include dental, vision, hearing & drugs", "$0 premium plans available in many states", "Local HMO/PPO provider networks"]}
            bestForLabel="Best for" bestFor="Cost-conscious adults who want bundled care." ctaLabel="Explore Advantage" onCta={() => window.go("medicare")} />
          <PlanCard icon="heart-pulse" name="ACA Health Coverage" subtitle="Under 65"
            benefits={["Need insurance before Medicare? We've got you", "Marketplace plans with full essential benefits", "Premium help based on income", "Quick, easy enrollment when life changes"]}
            bestForLabel="Great for" bestFor="Adults 50–64, self-employed, or retiring early." ctaLabel="Explore ACA" onCta={() => window.go("aca")} />
        </div>
      </Section>

      {/* Why Mission Insurance */}
      <Section bg="page">
        <SectionHeading eyebrow="Why Mission Insurance" title="A partner for the long term" />
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
          <BenefitCard icon="messages-square" title="We keep it simple">You don't need to be an expert — that's our job. We'll explain every option in plain, clear language.</BenefitCard>
          <BenefitCard icon="hand-heart" title="We work for you">We don't push plans. We recommend what's right — and we stick with you after enrollment.</BenefitCard>
          <BenefitCard icon="wallet" title="Plans that fit your life (and budget)">We help you find the right balance of cost and coverage. No confusing terms or surprise premiums.</BenefitCard>
        </div>
      </Section>

      {/* Testimonials */}
      <Section bg="tint">
        <SectionHeading eyebrow="Why Thousands Trust Us" title="Real answers, real support" />
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
          <TestimonialCard rating={5} author="Jane D." quote="Mission Insurance made the entire process so simple and stress-free. Highly recommend!" />
          <TestimonialCard rating={5} author="Mark R." quote="I finally understand my Medicare options thanks to their expert guidance." />
          <TestimonialCard rating={5} author="Susan P." quote="Professional, friendly, and always available when I need help." />
        </div>
      </Section>

      {/* Comparison */}
      <Section bg="page">
        <SectionHeading eyebrow="Compare Our Plans" title="What's the difference?" lead="A first-class comparison — not a spreadsheet." />
        <div style={{ marginTop: "var(--space-8)" }}>
          <ComparisonTable features="Feature" columns={["Medicare Supplement", "Medicare Advantage", "ACA Plan"]} highlightColumn={0}
            rows={[
              { label: "Who it's for", cells: ["65+ w/ Original Medicare", "65+ seeking bundled care", "Under 65 needing coverage"] },
              { label: "Freedom to choose doctors", cells: [{ value: "Any Medicare doc", status: "yes" }, { value: "Plan network", status: "maybe" }, { value: "Most PPO/HMO", status: "yes" }] },
              { label: "Includes drug coverage", cells: [{ value: "Add Part D", status: "no" }, { value: "Often", status: "yes" }, { value: "Always", status: "yes" }] },
              { label: "Includes dental / vision", cells: [{ status: "no" }, { value: "Often", status: "yes" }, { value: "Often", status: "yes" }] },
              { label: "Premiums", cells: [{ value: "Fixed & predictable", status: "yes" }, { value: "Often $0/mo", status: "yes" }, { value: "Income-based", status: "yes" }] },
              { label: "Best for", cells: ["Simplicity, peace of mind", "Budget + extra benefits", "Pre-65 adults needing care"] },
            ]} />
        </div>
        <div style={{ textAlign: "center", marginTop: "var(--space-7)" }}><Button intent="cta" size="lg" onClick={window.goConsult}>Ready to Get Started?</Button></div>
      </Section>

      {/* How it works */}
      <Section bg="tint">
        <SectionHeading eyebrow="How It Works" title="Coverage in four simple steps" lead="One call. No pressure. Just real answers." />
        <div className="mip-steprail" style={{ marginTop: "var(--space-8)", overflow: "hidden" }}>
          <StepRail steps={[
            { icon: "calendar-check", title: "Book a Free Consultation", description: "Takes 30 seconds. No obligation." },
            { icon: "hand-heart", title: "Get Personal Guidance", description: "We walk you through Medicare, ACA, or both." },
            { icon: "bar-chart-3", title: "Choose a Plan That Fits", description: "Compare costs and coverage with a licensed expert." },
            { icon: "shield-check", title: "Enroll With Confidence", description: "We handle the paperwork and stay with you every step." },
          ]} />
        </div>
      </Section>

      <CtaBand title="Your health coverage shouldn't be a mystery" lead="With Mission Insurance, you get clarity, care, and a partner for the long term — not just enrollment season." chips={["Medicare", "Supplements", "Advantage", "ACA", "Real Support"]} />
      <PageFooter />
    </>
  );
}
window.HomePage = HomePage;
