const { Button, IconBadge, HeartDivider, Badge, Card, FeatureItem, Stat, Input } = window.TwinCitiesLivingAssistanceDesignSystem_f22824;
const { PHONE, PHONE2, EMAIL, ADDRESS, scrollToId, Container, Section, Eyebrow, SectionHead } = window;

/* ---------------- Gallery + lightbox ---------------- */
const GALLERY = [
  ["assets/exterior.jpg", "Welcome home", "Our twilight exterior in a quiet Burnsville neighborhood", "wide"],
  ["assets/great-room.jpg", "Open living spaces", "Bright, connected rooms for gathering", "tall"],
  ["assets/kitchen.jpg", "Chef-style kitchen", "Home-cooked meals prepared fresh daily", "std"],
  ["assets/livingroom.jpg", "Cozy living room", "Comfortable spaces to relax and visit", "std"],
  ["assets/kitchen-bar.jpg", "Room to gather", "Shared meals and good company", "std"],
  ["assets/staircase.jpg", "Thoughtful details", "A warm, well-kept home throughout", "tall"],
  ["assets/bathroom.jpg", "Spa-like baths", "Clean, accessible and beautifully finished", "std"],
];
function Gallery() {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const on = (e) => { if (e.key === "Escape") setOpen(null); };
    window.addEventListener("keydown", on); return () => window.removeEventListener("keydown", on);
  }, []);
  const span = { wide: "span 2", tall: "span 1", std: "span 1" };
  const rowspan = { tall: "span 2", wide: "span 1", std: "span 1" };
  return (
    <Section id="home-tour" bg="var(--cream-50)">
      <Container width="var(--container-xl)">
        <SectionHead eyebrow="A place you can truly call home" title="Take a look inside" sub="Warm, comfortable, and immaculately kept — the kind of home you'd want for someone you love. Come see it in person." />
        <div className="tcla-gallery" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridAutoRows: "200px", gap: 16, marginTop: 46 }}>
          {GALLERY.map((g, i) => (
            <button key={g[0]} onClick={() => setOpen(i)} className="tcla-gcell" style={{ gridColumn: span[g[3]], gridRow: rowspan[g[3]], position: "relative", overflow: "hidden", borderRadius: "var(--radius-lg)", border: "none", padding: 0, cursor: "pointer", boxShadow: "var(--shadow-sm)" }}>
              <img src={g[0]} alt={g[1]} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div className="tcla-gcap" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(8,28,64,0) 45%, rgba(8,28,64,.82) 100%)", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: "16px 18px", textAlign: "left" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.05rem", color: "#fff" }}>{g[1]}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "0.82rem", color: "#d3ddf0" }}>{g[2]}</div>
              </div>
              <span className="tcla-gzoom" style={{ position: "absolute", top: 12, right: 12, width: 34, height: 34, borderRadius: "999px", background: "rgba(255,255,255,.9)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--navy-700)", opacity: 0, transition: "opacity var(--dur-base)" }}><i className="fa-solid fa-expand" aria-hidden="true"></i></span>
            </button>
          ))}
        </div>
      </Container>
      {open !== null && (
        <div onClick={() => setOpen(null)} style={{ position: "fixed", inset: 0, zIndex: 90, background: "rgba(8,20,45,.86)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 30 }}>
          <button onClick={() => setOpen(null)} aria-label="Close" style={{ position: "absolute", top: 22, right: 26, width: 46, height: 46, borderRadius: "999px", border: "none", background: "rgba(255,255,255,.14)", color: "#fff", fontSize: "1.2rem", cursor: "pointer" }}><i className="fa-solid fa-xmark" aria-hidden="true"></i></button>
          <button onClick={(e) => { e.stopPropagation(); setOpen((open - 1 + GALLERY.length) % GALLERY.length); }} aria-label="Previous" style={navBtn("left")}><i className="fa-solid fa-chevron-left" aria-hidden="true"></i></button>
          <figure onClick={(e) => e.stopPropagation()} style={{ margin: 0, maxWidth: 1000, width: "100%" }}>
            <img src={GALLERY[open][0]} alt={GALLERY[open][1]} style={{ width: "100%", maxHeight: "78vh", objectFit: "contain", borderRadius: "var(--radius-lg)" }} />
            <figcaption style={{ textAlign: "center", marginTop: 16, color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem" }}>{GALLERY[open][1]}<span style={{ display: "block", fontFamily: "var(--font-body)", fontWeight: 400, fontSize: "0.9rem", color: "#c3cbdc", marginTop: 4 }}>{GALLERY[open][2]}</span></figcaption>
          </figure>
          <button onClick={(e) => { e.stopPropagation(); setOpen((open + 1) % GALLERY.length); }} aria-label="Next" style={navBtn("right")}><i className="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
        </div>
      )}
    </Section>
  );
}
const navBtn = (side) => ({ position: "absolute", top: "50%", transform: "translateY(-50%)", [side]: 24, width: 50, height: 50, borderRadius: "999px", border: "none", background: "rgba(255,255,255,.14)", color: "#fff", fontSize: "1.2rem", cursor: "pointer" });

/* ---------------- Pricing & waivers ---------------- */
function Pricing() {
  const included = ["Private, homelike accommodations", "All meals, snacks & no grocery bills", "24-hour awake staff & supervision", "Medication management & nursing", "Housekeeping, laundry & transportation", "Activities, wellness & companionship"];
  return (
    <Section id="pricing" bg="var(--cream-50)">
      <Container>
        <SectionHead eyebrow="Pricing & waivers" title="Quality care that fits your budget" sub="We believe good care should be attainable. Rent is negotiable, and we accept the major Minnesota waiver programs and private pay." />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 26, marginTop: 48, alignItems: "stretch" }} className="tcla-pricing">
          <div style={{ background: "var(--navy-700)", borderRadius: "var(--radius-xl)", padding: "40px 38px", color: "#fff", display: "flex", flexDirection: "column" }}>
            <Badge tone="offer" style={{ alignSelf: "flex-start", marginBottom: 20 }}>Monthly Rent</Badge>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(3rem,6vw,4.4rem)", lineHeight: 1, color: "var(--gold-400)" }}>$300–$500</span>
            </div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", color: "#dbe3f0", margin: "12px 0 26px" }}>per month · negotiable to fit your situation</div>
            <div style={{ borderTop: "1px solid rgba(255,255,255,.16)", paddingTop: 22, marginTop: "auto" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.8rem", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--sky-300)", marginBottom: 14 }}>Waivers accepted</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                {["CADI Waiver", "EW Waiver", "BI Waiver"].map((w) => (
                  <span key={w} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.85rem", background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.2)", borderRadius: "var(--radius-pill)", padding: "8px 16px" }}>{w}</span>
                ))}
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "0.8rem", color: "#aab6d0", margin: "16px 0 0" }}>*Restrictions may apply. Contact us to review your coverage.</p>
            </div>
          </div>
          <Card style={{ padding: "40px 38px" }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.55rem", color: "var(--navy-700)", margin: "0 0 6px" }}>What's included</h3>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "0.98rem", color: "var(--ink-600)", margin: "0 0 24px" }}>One simple arrangement — everything your loved one needs to live comfortably.</p>
            <div style={{ display: "grid", gap: 15 }}>
              {included.map((t) => (
                <div key={t} style={{ display: "flex", alignItems: "flex-start", gap: 13 }}>
                  <span style={{ flexShrink: 0, width: 26, height: 26, borderRadius: "999px", background: "var(--green-050)", color: "var(--green-800)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.75rem", marginTop: 1 }}><i className="fa-solid fa-check" aria-hidden="true"></i></span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: "1.02rem", color: "var(--ink-700)", lineHeight: 1.4 }}>{t}</span>
                </div>
              ))}
            </div>
            <Button icon="fa-solid fa-calendar-check" onClick={() => scrollToId("tour")} style={{ marginTop: 28 }}>Schedule a Tour</Button>
          </Card>
        </div>
      </Container>
    </Section>
  );
}

/* ---------------- About ---------------- */
function About() {
  return (
    <Section id="about" bg="var(--navy-050)">
      <Container width="var(--container-xl)">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="tcla-about">
          <div style={{ position: "relative" }}>
            <img src="assets/care-mobility.jpg" alt="Caregivers helping a resident" style={{ width: "100%", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", display: "block" }} />
            <div style={{ position: "absolute", bottom: -24, right: -8, background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: "18px 22px", display: "flex", alignItems: "center", gap: 14 }} className="tcla-about-badge">
              <IconBadge icon="fa-solid fa-heart" color="red" size="md" />
              <div><div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "1.15rem", color: "var(--navy-700)", lineHeight: 1.1 }}>Family-first care</div><div style={{ fontFamily: "var(--font-body)", fontSize: "0.85rem", color: "var(--ink-600)" }}>Every resident, treated like our own</div></div>
            </div>
          </div>
          <div>
            <Eyebrow>Our approach</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(1.9rem,3.5vw,2.7rem)", lineHeight: 1.1, color: "var(--navy-700)", margin: "0 0 18px" }}>A warm, homelike environment — personalized for life</h2>
            <HeartDivider width={70} style={{ justifyContent: "flex-start", marginBottom: 22 }} />
            <p style={{ fontFamily: "var(--font-body)", fontSize: "1.08rem", lineHeight: 1.65, color: "var(--ink-700)", margin: "0 0 16px", textWrap: "pretty" }}>Twin Cities Living Assistance is a small, licensed 55+ assisted living home dedicated to providing a warm, homelike environment where residents receive personalized care tailored to their unique needs.</p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "1.08rem", lineHeight: 1.65, color: "var(--ink-700)", margin: "0 0 26px", textWrap: "pretty" }}>Instead of long hallways and hundreds of residents, we offer an intimate setting where your loved one is known, comfortable, and never alone.</p>
            <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "1.5rem", color: "var(--green-800)", lineHeight: 1.3 }}>"Compassionate care. Personalized for life."</div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---------------- Testimonials ---------------- */
function Testimonials() {
  const quotes = [
    ["Moving Mom here was the best decision our family made. The staff treat her like their own mother — we finally sleep at night.", "Karen M.", "Daughter of a resident"],
    ["After a big facility, this felt like coming home. Small, personal, and genuinely caring. Dad is happier than he's been in years.", "James T.", "Son of a resident"],
    ["They coordinated everything with his doctors and handled the waiver paperwork. The care and communication have been wonderful.", "Linda R.", "Family member"],
  ];
  return (
    <Section id="testimonials" bg="var(--cream-50)">
      <Container>
        <SectionHead eyebrow="From families like yours" title="Trusted by the people who matter most" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))", gap: 24, marginTop: 46 }}>
          {quotes.map(([q, name, role]) => (
            <Card key={name} style={{ padding: "32px 30px", display: "flex", flexDirection: "column" }}>
              <div style={{ color: "var(--gold-400)", fontSize: "0.95rem", letterSpacing: 3, marginBottom: 16 }}>{"★★★★★"}</div>
              <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "1.12rem", lineHeight: 1.55, color: "var(--ink-800,var(--ink-700))", margin: "0 0 22px", textWrap: "pretty" }}>"{q}"</p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: "999px", background: "var(--green-050)", color: "var(--green-800)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 800 }}>{name[0]}</span>
                <div><div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.98rem", color: "var(--navy-700)" }}>{name}</div><div style={{ fontFamily: "var(--font-body)", fontSize: "0.85rem", color: "var(--ink-500,var(--ink-600))" }}>{role}</div></div>
              </div>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 36, padding: "28px 20px", background: "var(--green-050)", borderRadius: 14 }}>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem", color: "var(--navy-700)", margin: "0 0 8px" }}>Ready to see the difference small-home care makes?</p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "0.95rem", color: "var(--ink-600)", margin: "0 0 16px", lineHeight: 1.5 }}>Schedule a private tour and meet our caring team in person. No pressure, just a warm welcome.</p>
          <Button variant="primary" icon="fa-solid fa-calendar" href="#tour">Book a Tour</Button>
        </div>
      </Container>
    </Section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQ() {
  const faqs = [
    ["What level of care do you provide?", "We provide assisted living care including 24-hour awake staff, medication management, professional nursing, and hands-on help with activities of daily living such as bathing, dressing, grooming and mobility. Each resident has a customized care plan that adapts as needs change."],
    ["What's included in the monthly rent?", "Rent covers private homelike accommodations, all meals and snacks (no grocery bills), housekeeping, laundry, transportation, activities, and around-the-clock care and supervision."],
    ["How much does it cost?", "Monthly rent ranges from $300 to $500 and is negotiable depending on your situation. We accept CADI, EW and BI waivers as well as private pay — contact us and we'll help review your coverage."],
    ["Which waivers do you accept?", "We accept the Community Access for Disability Inclusion (CADI), Elderly Waiver (EW), and Brain Injury (BI) waivers, as well as private pay. Restrictions may apply; we're happy to walk you through eligibility."],
    ["Can we visit before deciding?", "Absolutely — we encourage it. Schedule a private, no-obligation tour and meet our team. We'll answer every question and show you around the home."],
    ["Where are you located?", `We're located at ${ADDRESS}, in a quiet residential Burnsville neighborhood.`],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" bg="var(--cream-50)">
      <Container width="var(--container-md)">
        <SectionHead eyebrow="Questions & answers" title="Frequently asked questions" />
        <div style={{ marginTop: 42, display: "grid", gap: 12 }}>
          {faqs.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={q} style={{ background: "#fff", border: "1px solid var(--line-200)", borderRadius: "var(--radius-lg)", boxShadow: isOpen ? "var(--shadow-md)" : "var(--shadow-xs)", overflow: "hidden", transition: "box-shadow var(--dur-base)" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 16, padding: "20px 24px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
                  <span style={{ flex: 1, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.08rem", color: "var(--navy-700)" }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: "999px", background: isOpen ? "var(--green-600)" : "var(--green-050)", color: isOpen ? "#fff" : "var(--green-800)", display: "flex", alignItems: "center", justifyContent: "center", transition: "all var(--dur-base)", transform: isOpen ? "rotate(180deg)" : "none" }}><i className="fa-solid fa-chevron-down" aria-hidden="true"></i></span>
                </button>
                {isOpen && <div style={{ padding: "0 24px 22px", fontFamily: "var(--font-body)", fontSize: "1.02rem", lineHeight: 1.65, color: "var(--ink-700)", textWrap: "pretty" }}>{a}</div>}
              </div>
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

/* ---------------- Contact + map ---------------- */
function Contact() {
  const rows = [
    ["fa-solid fa-location-dot", "Visit us", ADDRESS],
    ["fa-solid fa-phone", "Call us", `${PHONE} · ${PHONE2}`],
    ["fa-solid fa-envelope", "Email", EMAIL],
    ["fa-solid fa-clock", "Availability", "24-hour care · tours by appointment"],
  ];
  return (
    <Section id="contact" bg="var(--navy-800)">
      <Container width="var(--container-xl)">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 46, alignItems: "center" }} className="tcla-contact">
          <div style={{ color: "#fff" }}>
            <Eyebrow onDark>Get in touch</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(1.9rem,3.6vw,2.7rem)", lineHeight: 1.1, margin: "0 0 18px" }}>Come see the home for yourself</h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "1.08rem", lineHeight: 1.6, color: "#dbe3f0", margin: "0 0 30px", maxWidth: 460 }}>Schedule a private tour or give us a call — we're happy to answer your questions any time, day or night.</p>
            <div style={{ display: "grid", gap: 18, marginBottom: 32 }}>
              {rows.map(([icon, label, val]) => (
                <div key={label} style={{ display: "flex", alignItems: "flex-start", gap: 15 }}>
                  <IconBadge icon={icon} color="sky" size="md" outline />
                  <div><div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.78rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--sky-300)" }}>{label}</div><div style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", color: "#fff", marginTop: 3 }}>{val}</div></div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 13 }}>
              <Button size="lg" icon="fa-solid fa-calendar-check" onClick={() => scrollToId("tour")}>Schedule a Tour</Button>
              <Button size="lg" variant="ghost" icon="fa-solid fa-phone" href={`tel:${PHONE.replace(/-/g, "")}`} style={{ color: "#fff", border: "1.5px solid rgba(255,255,255,.35)" }}>Call {PHONE}</Button>
            </div>
          </div>
          <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "0 24px 60px rgba(0,0,0,.4)", border: "1px solid rgba(255,255,255,.14)" }}>
            <iframe title="Map to Twin Cities Living Assistance" src="https://maps.google.com/maps?q=12920%20Highclere%20Dr%20Burnsville%20MN%2055337&z=14&output=embed" style={{ width: "100%", height: 420, border: 0, display: "block" }} loading="lazy"></iframe>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer style={{ background: "var(--navy-900)", color: "#c3cbdc", padding: "54px 0 30px" }}>
      <Container width="var(--container-xl)">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 40, paddingBottom: 34, borderBottom: "1px solid rgba(255,255,255,.1)" }} className="tcla-footer">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <img src="assets/logo-mark.png" alt="" style={{ height: 44 }} />
              <div style={{ lineHeight: 1.05 }}><div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 600, fontSize: "1.25rem", color: "#fff" }}>Twin Cities</div><div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.58rem", letterSpacing: "0.18em", color: "var(--sky-300)" }}>LIVING ASSISTANCE</div></div>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "0.95rem", lineHeight: 1.6, maxWidth: 320, margin: 0 }}>A licensed 55+ assisted living home providing compassionate, personalized care in a warm, homelike setting.</p>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.78rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 16 }}>Explore</div>
            <div style={{ display: "grid", gap: 10 }}>
              {[["services", "Services"], ["home-tour", "The Home"], ["pricing", "Pricing"], ["faq", "FAQ"]].map(([k, l]) => (
                <span key={k} onClick={() => scrollToId(k)} style={{ cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "0.95rem" }} className="tcla-flink">{l}</span>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "0.78rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 16 }}>Contact</div>
            <div style={{ display: "grid", gap: 11, fontFamily: "var(--font-body)", fontSize: "0.95rem" }}>
              <div style={{ display: "flex", gap: 10 }}><i className="fa-solid fa-location-dot" style={{ color: "var(--sky-300)", marginTop: 3 }} aria-hidden="true"></i><span>{ADDRESS}</span></div>
              <a href={`tel:${PHONE.replace(/-/g, "")}`} className="tcla-flink" style={{ display: "flex", gap: 10, textDecoration: "none", color: "inherit" }}><i className="fa-solid fa-phone" style={{ color: "var(--sky-300)" }} aria-hidden="true"></i>{PHONE}</a>
              <a href={`mailto:${EMAIL}`} className="tcla-flink" style={{ display: "flex", gap: 10, textDecoration: "none", color: "inherit" }}><i className="fa-solid fa-envelope" style={{ color: "var(--sky-300)" }} aria-hidden="true"></i>{EMAIL}</a>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 12, paddingTop: 22, fontFamily: "var(--font-body)", fontSize: "0.82rem", color: "#8794b0" }}>
          <span>© {new Date().getFullYear()} Twin Cities Living Assistance. All rights reserved.</span>
          <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--sky-300)" }}>Compassionate care. Personalized for life.</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Gallery, Pricing, About, Testimonials, FAQ, Contact, Footer });
