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

const LOGO = "assets/logo-mark.webp";
const ANTHONY = "assets/anthony-hendrickson.jpg";
const PHONE = "(304) 685-2510";
const DIAGONAL = "polygon(12% 0, 100% 0, 100% 100%, 0% 100%)";
const DIAGONAL_L = "polygon(0 0, 88% 0, 100% 100%, 0% 100%)";

const CDN = "https://images.leadconnectorhq.com/image/f_webp/q_80/r_1200/u_https://assets.cdn.filesafe.space/5UUo5DYJHO4vutmzr10K/media/";
const IMG = (id) => CDN + id;
const PHOTOS = {
  heroA: IMG("687f78a4023a3894b693e431.jpeg"),
  heroB: IMG("687f7e599a702e8fe6042116.jpeg"),
  medigap: IMG("68935c9804810abc1b746b46.jpeg"),
  medMyth: IMG("689362915b9f87c8c5918637.jpeg"),
  acaMarket: IMG("689372987ec10e7f1088fc32.jpeg"),
  acaSubs: IMG("68937390d69f9941ffd520f8.jpeg"),
  ltcHero: IMG("6891d1ba4f8b90cbc1d726ac.jpeg"),
  ltcWhy: IMG("6891dbbc7b1adb2d24092f88.jpeg"),
  finalExpense: IMG("68946775dab355e48416668e.jpeg"),
  aboutStory: IMG("68921cff4c79b756e826a93e.jpeg"),
  aboutCommunity: IMG("6893189fd2c0b72e0ef98b4d.jpeg"),
};

const ROUTES = [
  { id: "home", label: "Home", path: "#/home" },
  { id: "ltc", label: "LTC", path: "#/ltc" },
  { id: "about", label: "About Us", path: "#/about" },
  { id: "medicare", label: "Medicare", path: "#/medicare" },
  { id: "aca", label: "ACA", path: "#/aca" },
  { id: "life", label: "Life Insurance", path: "#/life" },
  { id: "final-expense", label: "Final Expense", path: "#/final-expense" },
];

function go(route) {
  window.location.hash = "#/" + route;
  window.scrollTo(0, 0);
}
const goConsult = () => go("consult");

function useRoute() {
  const parse = () => (window.location.hash.replace(/^#\/?/, "") || "home");
  const [route, setRoute] = React.useState(parse());
  React.useEffect(() => {
    const on = () => { setRoute(parse()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

/* Responsive header: DS look + mobile hamburger */
function Header({ active }) {
  const [open, setOpen] = React.useState(false);
  const linkStyle = (isActive) => ({
    fontFamily: "var(--font-ui)", fontSize: "var(--fs-ui)", fontWeight: 600,
    color: isActive ? "var(--brand-primary)" : "var(--text-heading)",
    textDecoration: "none", cursor: "pointer", paddingBottom: 3,
    borderBottom: isActive ? "2px solid var(--brand-accent)" : "2px solid transparent",
  });
  const nav = (e, id) => { e.preventDefault(); setOpen(false); go(id); };
  return (
    <header style={{ background: "var(--white)", borderBottom: "1px solid var(--border-subtle)", position: "sticky", top: 0, zIndex: 100 }}>
      <div style={{ maxWidth: "var(--container-max)", marginInline: "auto", padding: "0.7rem var(--container-pad)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-4)" }}>
        <a href="#/home" onClick={(e) => nav(e, "home")} style={{ display: "flex", alignItems: "center", gap: "0.7rem", textDecoration: "none" }}>
          <img src={LOGO} alt="Mission Insurance Partners" style={{ height: 44, width: "auto" }} />
        </a>
        <nav className="mip-desktop-nav" style={{ display: "flex", alignItems: "center", gap: "var(--space-6)", marginLeft: "auto" }}>
          {ROUTES.filter((r) => r.id !== "home" && r.id !== "final-expense").map((r) => {
            if (r.id === "life") {
              const feActive = active === "final-expense";
              return (
                <div key={r.id} className="mip-hasdrop" style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
                  <a href={r.path} onClick={(e) => nav(e, r.id)} style={linkStyle(active === r.id || feActive)}>{r.label}</a>
                  <Icon name="chevron-down" size={16} color="var(--text-muted)" />
                  <div className="mip-dropdown" style={{ position: "absolute", top: "100%", left: 0, paddingTop: "0.85rem" }}>
                    <div style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", padding: "0.4rem", minWidth: 190 }}>
                      <a href="#/final-expense" onClick={(e) => nav(e, "final-expense")} style={{ display: "block", padding: "0.6rem 0.85rem", borderRadius: "var(--radius-sm)", textDecoration: "none", fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: "var(--fs-ui)", color: feActive ? "var(--brand-primary)" : "var(--text-heading)", background: feActive ? "var(--blue-50)" : "transparent" }}>Final Expense</a>
                    </div>
                  </div>
                </div>
              );
            }
            return <a key={r.id} href={r.path} onClick={(e) => nav(e, r.id)} style={linkStyle(active === r.id)}>{r.label}</a>;
          })}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
          <button className="mip-burger" aria-label="Menu" onClick={() => setOpen(!open)} style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 6 }}>
            <Icon name={open ? "x" : "menu"} size={30} color="var(--navy-900)" />
          </button>
        </div>
      </div>
      {open && (
        <div className="mip-mobile-menu" style={{ borderTop: "1px solid var(--border-subtle)", padding: "var(--space-4) var(--container-pad)", display: "flex", flexDirection: "column", gap: "0.35rem", background: "var(--white)" }}>
          {ROUTES.filter((r) => r.id !== "home" && r.id !== "final-expense").map((r) => (
            <React.Fragment key={r.id}>
              <a href={r.path} onClick={(e) => nav(e, r.id)} style={{ ...linkStyle(active === r.id), padding: "0.7rem 0", fontSize: "1.1rem", borderBottom: "1px solid var(--border-subtle)" }}>{r.label}</a>
              {r.id === "life" && <a href="#/final-expense" onClick={(e) => nav(e, "final-expense")} style={{ ...linkStyle(active === "final-expense"), padding: "0.6rem 0 0.6rem 1.1rem", fontSize: "1rem", borderBottom: "1px solid var(--border-subtle)" }}>Final Expense</a>}
            </React.Fragment>
          ))}
        </div>
      )}
    </header>
  );
}
const ctaBtnStyle = { fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: "var(--fs-ui)", background: "var(--cta)", color: "var(--ink-900)", border: "none", padding: "0.7rem 1.4rem", borderRadius: "var(--radius-pill)", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "0.5rem", boxShadow: "var(--shadow-cta)" };

function TrustBar() {
  return (
    <div style={{ background: "var(--navy-900)", color: "#fff" }}>
      <div style={{ maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "0.6rem", display: "flex", alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: "0.5rem 0.75rem", textAlign: "center", fontFamily: "var(--font-ui)", fontSize: "var(--fs-sm)" }}>
        <strong style={{ fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "-0.01em" }}>Mission Insurance Partners</strong>
        <span aria-hidden="true" style={{ opacity: 0.5 }}>—</span>
        <span style={{ color: "rgba(255,255,255,0.85)" }}>Providing clarity to Americans across the US</span>
        <span aria-hidden="true" style={{ opacity: 0.5 }}>—</span>
        <a href="tel:+13046852510" style={{ display: "inline-flex", alignItems: "center", gap: "0.4rem", color: "var(--gold-300)", fontWeight: 700, textDecoration: "none" }}><Icon name="phone" size={15} color="var(--gold-300)" />{PHONE}</a>
      </div>
    </div>
  );
}

function PageFooter() {
  return (
    <>
      <ContactStrip items={[
        { icon: "phone", label: "Phone Number", value: PHONE },
        { icon: "map-pin", label: "Location", value: "9901 Brodie Lane STE 160-751, Austin TX 78748" },
        { icon: "mail", label: "E-mail Address", value: "hello@missioninsurancepartners.com" },
      ]} />
      <SiteFooter logoSrc={LOGO} links={ROUTES.map((r) => ({ label: r.label, href: r.path }))} socialBase="assets/social" />
    </>
  );
}

function Section({ bg = "page", children, style = {}, id }) {
  const bgs = { page: "var(--surface-page, #fff)", tint: "var(--surface-tint)", lavender: "var(--surface-lavender)", navy: "var(--surface-navy)", blue: "var(--surface-blue)" };
  return (
    <section id={id} style={{ background: bgs[bg] || bg, paddingBlock: "var(--section-y)", ...style }}>
      <div style={{ maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)" }}>{children}</div>
    </section>
  );
}

/* Diagonal image panel with graceful fallback to gradient */
function DiagImage({ src, alt, clip = DIAGONAL, minHeight = 440, radius = "var(--radius-xl)", style = {} }) {
  return (
    <div style={{ position: "relative", minHeight, ...style }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--gradient-accent)", clipPath: clip, borderRadius: radius }} />
      {src && <img src={src} alt={alt} loading="lazy" onError={(e) => { e.currentTarget.style.display = "none"; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", clipPath: clip, borderRadius: radius }} />}
    </div>
  );
}

/* Simple page hero (used by inner pages) */
function PageHero({ eyebrow, title, accent, lead, ctaLabel = "Start Your Free Consultation", image, center = false, bg = "lavender" }) {
  const bgs = { lavender: "var(--surface-lavender)", page: "var(--surface-page, #fff)", tint: "var(--surface-tint)" };
  return (
    <section style={{ background: bgs[bg] || bg, position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "clamp(4.5rem, 3rem + 5.5vw, 7.5rem)", display: "grid", gridTemplateColumns: image ? "1.05fr 0.95fr" : "1fr", gap: "var(--space-9)", alignItems: "center" }} className={image ? "mip-hero-grid" : ""}>
        <div style={center ? { maxWidth: "62ch", marginInline: "auto", textAlign: "center" } : {}}>
          {eyebrow && <span style={center ? { ...eyebrowStyle, display: "block" } : eyebrowStyle}>{eyebrow}</span>}
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-display)", color: "var(--navy-900)", margin: "0.9rem 0 1.15rem", lineHeight: 1.06, letterSpacing: "-0.02em" }}>{title}{accent && <> <span style={{ color: "var(--brand-accent)" }}>{accent}</span></>}</h1>
          <p style={{ fontSize: "var(--fs-lead)", lineHeight: "var(--lh-snug)", color: "var(--text-body)", maxWidth: "52ch", margin: center ? "0 auto 2rem" : "0 0 2rem" }}>{lead}</p>
          <div style={{ display: "flex", gap: "var(--space-4)", flexWrap: "wrap", alignItems: "center", justifyContent: center ? "center" : "flex-start" }}>
            <Button intent="cta" size="lg" onClick={goConsult} iconRight={<Icon name="arrow-right" size={20} color="var(--ink-900)" />}>{ctaLabel}</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)" />{PHONE}</span>
          </div>
        </div>
        {image && <DiagImage src={image} alt={title} />}
      </div>
    </section>
  );
}
const eyebrowStyle = { fontFamily: "var(--font-ui)", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: "var(--fs-eyebrow)", color: "var(--brand-secondary)" };

/* Navy CTA band */
function CtaBand({ title, lead, chips, ctaLabel = "Start Your Free Consultation" }) {
  return (
    <section style={{ background: "var(--surface-navy)", color: "#fff", paddingBlock: "var(--section-y)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: "0 auto 0 0", width: "38%", background: "var(--gradient-accent)", clipPath: "polygon(0 0, 100% 0, 62% 100%, 0 100%)", opacity: 0.55 }} />
      <div style={{ position: "relative", maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-display)", color: "#fff", fontSize: "var(--fs-h1)", margin: "0 0 0.75rem", letterSpacing: "-0.02em" }}>{title}</h2>
        {lead && <p style={{ fontSize: "var(--fs-lead)", color: "rgba(255,255,255,0.9)", maxWidth: "62ch", margin: "0 auto 2rem" }}>{lead}</p>}
        {chips && <div style={{ display: "flex", gap: "var(--space-3)", justifyContent: "center", flexWrap: "wrap", marginBottom: "2rem" }}>{chips.map((c) => <Chip key={c} tone="onBlue">{c}</Chip>)}</div>}
        <Button intent="cta" size="lg" onClick={goConsult}>{ctaLabel}</Button>
      </div>
    </section>
  );
}

/* Navy-header zebra data table (dense comparison content) */
function DataTable({ columns, rows, highlight, note }) {
  return (
    <div style={{ overflowX: "auto", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", border: "1px solid var(--gray-200)" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 640, background: "#fff", fontFamily: "var(--font-ui)" }}>
        <thead>
          <tr>{columns.map((c, i) => (
            <th key={i} style={{ textAlign: "left", padding: "1rem 1.15rem", background: i === highlight ? "var(--brand-accent)" : "var(--navy-900)", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1rem", borderRight: i < columns.length - 1 ? "1px solid rgba(255,255,255,0.14)" : "none" }}>{c}</th>
          ))}</tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri} style={{ background: ri % 2 ? "var(--surface-tint)" : "#fff" }}>
              {row.map((cell, ci) => (
                <td key={ci} style={{ padding: "0.9rem 1.15rem", verticalAlign: "top", fontSize: "0.95rem", lineHeight: 1.5, color: ci === 0 ? "var(--navy-900)" : "var(--text-body)", fontWeight: ci === 0 ? 700 : 400, borderTop: "1px solid var(--gray-200)", borderRight: ci < row.length - 1 ? "1px solid var(--gray-200)" : "none", background: ci === highlight ? "var(--blue-50)" : "transparent" }} dangerouslySetInnerHTML={{ __html: cell }} />
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      {note && <p style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)", margin: "0.75rem 0.25rem 0" }}>{note}</p>}
    </div>
  );
}

/* FAQ / myth accordion */
function Accordion({ items }) {
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ background: "#fff", border: "1px solid var(--gray-200)", borderRadius: "var(--radius-md)", boxShadow: isOpen ? "var(--shadow-sm)" : "none", overflow: "hidden" }}>
            <button onClick={() => setOpen(isOpen ? null : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "1rem", padding: "1.15rem 1.35rem", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.08rem", color: "var(--navy-900)" }}>{it.q}</span>
              <Icon name={isOpen ? "minus" : "plus"} size={22} color="var(--brand-secondary)" />
            </button>
            {isOpen && <div style={{ padding: "0 1.35rem 1.25rem", color: "var(--text-body)", fontSize: "1.02rem", lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: it.a }} />}
          </div>
        );
      })}
    </div>
  );
}

/* Icon feature card (soft) */
function FeatureCard({ icon, title, children, tone = "blue" }) {
  const tiles = { blue: "var(--blue-50)", gold: "var(--gold-50, #FBF3E0)" };
  const ink = { blue: "var(--brand-primary)", gold: "var(--gold-500)" };
  return (
    <div style={{ background: "#fff", border: "1px solid var(--gray-200)", borderRadius: "var(--radius-lg)", padding: "var(--space-6)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", gap: "0.85rem", height: "100%" }}>
      <div style={{ width: 56, height: 56, borderRadius: "var(--radius-md)", background: tiles[tone], display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={icon} size={28} color={ink[tone]} /></div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.25rem", color: "var(--navy-900)", margin: 0 }}>{title}</h3>
      <p style={{ margin: 0, color: "var(--text-body)", fontSize: "1.02rem", lineHeight: 1.6 }}>{children}</p>
    </div>
  );
}

/* Numbered process step (for "How we help") */
function ProcessRow({ steps }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: "var(--space-5)" }} className="mip-grid-auto">
      {steps.map((s, i) => (
        <div key={i} style={{ background: "#fff", border: "1px solid var(--gray-200)", borderRadius: "var(--radius-lg)", padding: "var(--space-6)", boxShadow: "var(--shadow-sm)", position: "relative" }}>
          <div style={{ width: 44, height: 44, borderRadius: "999px", background: "var(--navy-900)", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.15rem", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "0.9rem" }}>{i + 1}</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem", color: "var(--navy-900)", margin: "0 0 0.5rem" }}>{s.title}</h3>
          <p style={{ margin: 0, color: "var(--text-body)", fontSize: "0.98rem", lineHeight: 1.55 }}>{s.body}</p>
          {s.result && <p style={{ margin: "0.75rem 0 0", paddingTop: "0.75rem", borderTop: "1px solid var(--gray-200)", color: "var(--brand-secondary)", fontWeight: 600, fontSize: "0.95rem" }}><Icon name="check" size={16} color="var(--sky-400)" /> {s.result}</p>}
        </div>
      ))}
    </div>
  );
}

/* Checkmark benefit list */
function CheckList({ items, style = {} }) {
  return (
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "0.85rem", ...style }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start", color: "var(--text-body)", fontSize: "1.05rem", lineHeight: 1.55 }}>
          <span style={{ flexShrink: 0, marginTop: 3 }}><Icon name="check" size={20} strokeWidth={3} color="var(--sky-400)" /></span>
          <span dangerouslySetInnerHTML={{ __html: it }} />
        </li>
      ))}
    </ul>
  );
}

const Disclaimer = ({ children }) => (
  <div style={{ background: "var(--surface-tint)", borderTop: "1px solid var(--gray-200)" }}>
    <div style={{ maxWidth: "var(--container-max)", marginInline: "auto", paddingInline: "var(--container-pad)", paddingBlock: "var(--space-6)", color: "var(--text-muted)", fontSize: "var(--fs-sm)", lineHeight: 1.6, display: "flex", flexDirection: "column", gap: "0.5rem" }}>{children}</div>
  </div>
);

Object.assign(window, { DS, LOGO, ANTHONY, PHONE, PHOTOS, DIAGONAL, DIAGONAL_L, ROUTES, go, goConsult, useRoute, Header, TrustBar, PageFooter, Section, DiagImage, PageHero, CtaBand, DataTable, Accordion, FeatureCard, ProcessRow, CheckList, Disclaimer, eyebrowStyle });