/* Section 14, premium footer. */

const { Button: FootButton, Input: FootInput } = window.CalmingSpotDesignSystem_cdab4b;
const { Wordmark: FootWordmark } = window;

const FOOTER_COLS = [
  { title: "Experience", links: [["Schedule", "schedule.html"], ["Pricing", "pricing.html"], ["Experiences", "index.html#experiences"], ["Private Events", "private-events.html"]] },
  { title: "Learn", links: [["Sound Training", "sound-training.html"], ["Reiki Training", "reiki.html"], ["FAQs", "faqs.html"], ["Our Story", "about.html"]] },
  { title: "Visit", links: [["Location", "location.html"], ["Candlelight Studio", "location.html"], ["Santa Monica Beach", "location.html"], ["Team", "team.html"], ["Contact", "mailto:hello@calmingspot.com"]] },
];

function Footer() {
  const [joined, setJoined] = React.useState(false);

  const handleJoin = (e) => {
    e.preventDefault();
    const email = (e.target.elements.email?.value || "").trim();
    if (!email) return;
    // Send the signup to the studio inbox (Momence newsletter list managed from hello@calmingspot.com)
    window.location.href =
      "mailto:hello@calmingspot.com" +
      "?subject=" + encodeURIComponent("Newsletter signup") +
      "&body=" + encodeURIComponent("Please add me to the Calming Spot list: " + email);
    setJoined(true);
  };

  return (
    <footer className="cs-footer">
      <div className="cs-container cs-footer__inner">
        <div className="cs-footer__brand">
          <FootWordmark tone="light" />
          <p className="cs-footer__statement">
            Immersive sound, candlelight, and guided stillness, created to help you slow down,
            reconnect, and feel fully present.
          </p>
          <a className="cs-footer__ig" href="https://instagram.com/thecalmingspot" aria-label="Calming Spot on Instagram">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
              <rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
            </svg>
            @thecalmingspot
          </a>
        </div>

        <div className="cs-footer__cols">
          {FOOTER_COLS.map((col) => (
            <nav key={col.title} className="cs-footer__col" aria-label={col.title}>
              <h4 className="cs-footer__col-title">{col.title}</h4>
              {col.links.map(([label, href]) => (
                <a key={label} href={href} className="cs-footer__link">{label}</a>
              ))}
            </nav>
          ))}
        </div>

        <div className="cs-footer__news">
          <h4 className="cs-footer__col-title">Stay in the loop</h4>
          <p className="cs-footer__news-copy">Moon gatherings, new sessions, and the occasional moment of calm.</p>
          {joined ? (
            <p className="cs-footer__news-copy" style={{ color: "var(--text-on-dark, #fff)", opacity: 0.95 }}>
              Thank you — check your email to confirm. We'll be in touch from hello@calmingspot.com.
            </p>
          ) : (
            <form className="cs-footer__form" onSubmit={handleJoin}>
              <FootInput type="email" name="email" placeholder="you@email.com" aria-label="Email address" required />
              <FootButton variant="light" size="sm" type="submit">Join</FootButton>
            </form>
          )}
        </div>
      </div>

      <div className="cs-container cs-footer__bottom">
        <p className="cs-footer__tag">Sound, stillness, and connection in Santa Monica.</p>
        <div className="cs-footer__meta">
          <span>1540 6th Street, Santa Monica · hello@calmingspot.com</span>
          <span className="cs-footer__legal">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms</a>
            <span>© {new Date().getFullYear()} Calming Spot</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });