const { Input, Select, Button } = window.NRTRDesignSystem_47db9c;

function CTAFooter({ onBook }) {
  const cols = {
    Explore: [
      ["Services", "services.html"],
      ["The Space", "experience.html"],
      ["The Science", "science.html"],
      ["Membership", "membership.html"],
      ["FAQ", "faq.html"],
    ],
    Practices: [
      ["Physical Therapy", "services.html#pt"],
      ["Contrast Therapy", "services.html#contrast"],
      ["Biometric Testing", "services.html#testing"],
    ],
    Company: [
      ["Our Story", "about.html"],
      ["The Team", "about.html#team"],
      ["Contact", "contact.html"],
      ["Privacy", "privacy.html"],
      ["Join the Founding List", "book"],
    ],
  };
  return (
    <>
      <section style={{ background: "var(--terracotta)", color: "var(--linen)", position: "relative", overflow: "hidden" }}>
        <img
          src="assets/icons/mark-inverted-ivory.svg"
          alt=""
          aria-hidden="true"
          style={{ position: "absolute", right: "-40px", top: "50%", transform: "translateY(-50%)", width: "360px", maxHeight: "100%", opacity: 0.08, pointerEvents: "none" }}
        />
        <div
          style={{
            position: "relative",
            maxWidth: "var(--container)",
            margin: "0 auto",
            padding: "clamp(56px,7vw,96px) var(--space-6)",
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            gap: "clamp(28px, 5vw, 64px)",
            flexWrap: "wrap",
          }}
        >
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.08, margin: 0, color: "var(--linen)", maxWidth: "16ch" }}>
              Come in. Do the work. Feel the difference.
            </h2>
          </div>
          <Button variant="dark" size="lg" onClick={onBook}>Join the Founding List</Button>
        </div>
      </section>

      <footer style={{ background: "var(--espresso)", color: "var(--text-on-dark-muted)" }}>
        <div
          style={{
            maxWidth: "var(--container)",
            margin: "0 auto",
            padding: "clamp(48px,6vw,80px) var(--space-6) 40px",
            display: "grid",
            gridTemplateColumns: "1.4fr repeat(3, 1fr)",
            gap: "40px",
          }}
          className="nrtr-footer-grid"
        >
          <div>
            <img src="assets/logos/tagline-logo-ivory.svg" alt="NRTR — Nature's Road to Recovery" style={{ height: 54, marginBottom: "18px" }} />
            <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, maxWidth: "34ch", margin: 0 }}>
              A premium physical therapy and contrast therapy wellness center in
              northern New Jersey.
            </p>
          </div>
          {Object.entries(cols).map(([head, items]) => (
            <div key={head}>
              <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--camel)", marginBottom: "16px" }}>{head}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "11px" }}>
                {items.map(([label, href]) => (
                  <li key={label}>
                    {href === "book" ? (
                      <button type="button" onClick={() => onBook && onBook()} style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--text-on-dark-muted)", textDecoration: "none", background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left" }}>{label}</button>
                    ) : (
                      <a href={href} style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--text-on-dark-muted)", textDecoration: "none" }}>{label}</a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid var(--line-on-dark)" }}>
          <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "20px var(--space-6)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "12px", fontFamily: "var(--font-label)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            <span>© 2026 NRTR</span>
            <a href="https://www.instagram.com/nrtr.life/" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", letterSpacing: "0.1em" }}>Instagram · @nrtr.life</a>
            <span>Nature's Road to Recovery</span>
          </div>
          <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--space-6) 22px" }}>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "12px", lineHeight: 1.5, color: "var(--text-on-dark-muted)", opacity: 0.7, margin: 0, maxWidth: "80ch" }}>
              NRTR opens spring 2027. Photography on this site is AI-rendered visualization of the intended space — see our <a href="privacy.html" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>privacy policy</a>. We'll replace it with real photography once the space is finished.
            </p>
          </div>
        </div>
      </footer>
    </>
  );
}

window.CTAFooter = CTAFooter;
