const NS = window.TwinCitiesLivingAssistanceDesignSystem_f22824;
const { Button, IconBadge, HeartDivider, Badge, Card, FeatureItem, Stat, Input } = NS;

const PHONE = "612-688-2079";
const PHONE2 = "612-524-7946";
const EMAIL = "info@twincitieslivingassistance.com";
const ADDRESS = "12920 Highclere Dr, Burnsville, MN 55337";

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 74, behavior: "smooth" });
}

function Container({ children, width = "var(--container-lg)", style = {} }) {
  return <div style={{ maxWidth: width, margin: "0 auto", padding: "0 28px", ...style }}>{children}</div>;
}

function Section({ id, children, bg = "transparent", style = {} }) {
  return (
    <section id={id} style={{ background: bg, padding: "var(--section-y) 0", ...style }}>
      {children}
    </section>
  );
}

function Eyebrow({ children, onDark = false }) {
  return <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.82rem", letterSpacing: "0.16em", textTransform: "uppercase", color: onDark ? "var(--gold-400)" : "var(--green-600)", marginBottom: 12 }}>{children}</div>;
}

function SectionHead({ eyebrow, title, sub, center = true, onDark = false, maxWidth = 720 }) {
  return (
    <div style={{ textAlign: center ? "center" : "left", maxWidth: center ? maxWidth : "none", margin: center ? "0 auto" : 0 }}>
      {eyebrow && <Eyebrow onDark={onDark}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2rem, 4vw, 2.9rem)", lineHeight: 1.08, letterSpacing: "-0.01em", color: onDark ? "#fff" : "var(--navy-700)", margin: "0 0 18px" }}>{title}</h2>
      <HeartDivider width={70} style={{ margin: center ? "0 auto" : 0, justifyContent: center ? "center" : "flex-start" }} lineColor={onDark ? "rgba(255,255,255,.4)" : "var(--green-600)"} color={onDark ? "var(--green-400)" : "var(--green-600)"} />
      {sub && <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--fs-lead)", lineHeight: 1.6, color: onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)", margin: "20px auto 0", maxWidth: 640, textWrap: "pretty" }}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { NS, PHONE, PHONE2, EMAIL, ADDRESS, scrollToId, Container, Section, Eyebrow, SectionHead });
