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

function AboutPage() {
  const { Section, PageHero, DataTable, ProcessRow, CtaBand, DiagImage, PageFooter, FeatureCard } = window;
  return (
    <>
      <PageHero eyebrow="About Us" title="Insurance should feel"
        accent="built for you."
        lead="Simple, honest, and built for you. That idea has guided us since day one — and it still shapes every conversation we have." center />

      {/* Mission */}
      <Section bg="page">
        <div style={{ maxWidth: 820, marginInline: "auto", textAlign: "center" }}>
          <span style={{ ...window.eyebrowStyle, display: "block", textAlign: "center" }}>Our Mission</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.6rem 0 1rem", letterSpacing: "-0.02em" }}>Make insurance simple for anyone.</h2>
          <p style={{ fontSize: "var(--fs-lead)", color: "var(--text-body)", lineHeight: "var(--lh-snug)" }}>Whether you're comparing Medicare options, exploring ACA plans, or just trying to avoid costly surprises, we translate industry jargon into plain English so you can make confident, informed decisions.</p>
        </div>
      </Section>

      {/* Who we are */}
      <Section bg="tint">
        <SectionHeading eyebrow="Who We Are" title="Expertise, independence, and human connection" />
        <div className="mip-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
          <FeatureCard icon="bar-chart-3" title="100+ years of combined expertise">Our advisors have lived through every market shift and regulation change the industry could throw at them. That depth becomes your shortcut to clarity.</FeatureCard>
          <FeatureCard icon="hand-heart" title="Client-first, carrier-agnostic">We're not tied to a single insurer, so our only loyalty is to you. If a plan doesn't fit your life, we won't recommend it — period.</FeatureCard>
          <FeatureCard icon="phone" title="Neighbors, not call-centers">We pick up the phone. We remember your name. And we stay with you long after enrollment season.</FeatureCard>
        </div>
      </Section>

      {/* Why we're different */}
      <Section bg="page">
        <SectionHeading eyebrow="Why We're Different" title="What we promise" />
        <div style={{ marginTop: "var(--space-8)" }}>
          <DataTable columns={["We promise", "What that means for you"]} highlight={0}
            rows={[
              ["Plain-Language Conversations", "No acronyms, no legalese — just straight talk."],
              ["Personalized Plan Matching", "Every recommendation starts with your doctors, prescriptions, and budget."],
              ["Ongoing Advocacy", "Need to change coverage mid-year? New prescription? Call us first — we'll handle it."],
              ["Zero-Pressure Guidance", "You'll never feel rushed or upsold. Explore at your pace, with real answers."],
            ]} />
        </div>
      </Section>

      {/* Our story */}
      <Section bg="tint">
        <div className="mip-hero-grid" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "var(--space-8)", alignItems: "center" }}>
          <DiagImage src={window.PHOTOS.aboutStory} alt="The Mission Insurance Partners team" clip={window.DIAGONAL_L} minHeight={400} />
          <div>
            <span style={window.eyebrowStyle}>Our Story</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.6rem 0 1rem", letterSpacing: "-0.02em" }}>People over policies</h2>
            <p style={{ fontSize: "1.08rem", color: "var(--text-body)", lineHeight: 1.65 }}>Mission Insurance Partners began as a small, family-run agency helping retirees navigate Medicare's fine print. Word spread, referrals poured in, and before long we'd built a statewide network of independent advisors — all united by a simple principle: people over policies.</p>
            <p style={{ fontSize: "1.08rem", color: "var(--text-body)", lineHeight: 1.65, margin: "1rem 0 1.5rem" }}>Today we serve clients in multiple states, but our goal remains the same: treat every conversation like we're advising our own family.</p>
            <Button intent="cta" size="lg" onClick={window.goConsult}>Start Your Free Consultation</Button>
          </div>
        </div>
      </Section>

      {/* How we work */}
      <Section bg="page">
        <SectionHeading eyebrow="How We Work" title="From first call to confident choice" />
        <div style={{ marginTop: "var(--space-8)" }}>
          <ProcessRow steps={[
            { title: "Listen First", body: "We start with a quick conversation about your health needs, favorite doctors, and monthly budget." },
            { title: "Map Out Options", body: "Using industry-leading tools and old-fashioned know-how, we shortlist plans that check every box." },
            { title: "Make It Crystal Clear", body: "Side-by-side comparisons, cost breakdowns, and Q&A until you feel confident." },
            { title: "Handle the Paperwork", body: "Applications, follow-ups, and annual reviews — so you can get back to living life." },
          ]} />
        </div>
      </Section>

      {/* Community */}
      <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}>Community Matters</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", color: "var(--navy-900)", margin: "0.6rem 0 1rem", letterSpacing: "-0.02em" }}>Education is the best policy</h2>
            <p style={{ fontSize: "1.08rem", color: "var(--text-body)", lineHeight: 1.65 }}>From hosting free Medicare workshops at local libraries to sponsoring senior fitness events, we believe education is the best policy. Our advisors span former nurses, financial planners, and lifelong insurance pros — all obsessed with keeping things human.</p>
            <p style={{ fontSize: "1.08rem", color: "var(--text-body)", lineHeight: 1.65, margin: "1rem 0 0" }}>Keep an eye on our events page for the next session near you. (And yes — someone here has run the Boston Marathon twice.)</p>
          </div>
          <DiagImage src={window.PHOTOS.aboutCommunity} alt="A community Medicare workshop" clip={window.DIAGONAL} minHeight={380} />
        </div>
      </Section>

      <CtaBand title="Ready for clarity?" lead="Insurance shouldn't feel like a maze. Let's make it simple — together." chips={["Medicare", "ACA", "LTC", "Final Expense", "Real Support"]} />
      <PageFooter />
    </>
  );
}
window.AboutPage = AboutPage;