// newsletter-footer.jsx — newsletter, mid-CTA, footer

// ---------- Mid CTA (cinematic invitation) ----------
const MidCTA = ({ onClick }) => (
  <section className="quote-slab">
    <span className="quote-slab__candle quote-slab__candle--1"></span>
    <span className="quote-slab__candle quote-slab__candle--2"></span>
    <span className="quote-slab__candle quote-slab__candle--3"></span>
    <span className="quote-slab__candle quote-slab__candle--4"></span>

    <Reveal>
      <span className="label" style={{ color: "var(--gold-deep)" }}>Begin When You Are Ready</span>
      <Divider width={120} />
      <p className="quote-slab__text">
        My friend —<br/>
        you did not find this by accident.
      </p>
      <div style={{ height: 48 }}></div>
      <PrimaryButton onClick={onClick} size="lg">Begin Tonight →</PrimaryButton>
      <span className="quote-slab__attr" style={{ marginTop: 24 }}>
        One-Time Payment · Instant Access · Lifetime Practice
      </span>
    </Reveal>
  </section>
);

// ---------- Newsletter ----------
const Newsletter = () => {
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState("");
  const onSubmit = (e) => {
    e.preventDefault();
    if (email.trim()) setSubmitted(true);
  };
  return (
    <section className="newsletter" id="newsletter">
      <div className="newsletter__inner">
        <span className="label" style={{ color: "var(--gold-deep)" }}>Letters by Email</span>
        <h2 className="newsletter__title">A quiet letter, once a week.</h2>
        <p className="newsletter__lead">
          One practice. One paragraph. One small return.
          Sent only on Sunday evenings, when the world is already softer.
        </p>

        {submitted ? (
          <div style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontSize: 22,
            color: "var(--gold-light)",
            padding: "28px 0",
          }}>
            Thank you, my friend. Watch for the first letter on Sunday.
          </div>
        ) : (
          <form className="newsletter__form" onSubmit={onSubmit}>
            <input
              type="email"
              required
              placeholder="your quiet email"
              className="newsletter__input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button type="submit" className="newsletter__submit">Subscribe →</button>
          </form>
        )}
        <div className="newsletter__note">
          No spam · Unsubscribe in one click · We never share your name
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
const FOOTER_COLS = [
  { title: "Brand", links: [
    { label: "The Story",   href: "#about" },
    { label: "The Teacher", href: "#about" },
    { label: "Press Kit",   href: "#about" },
    { label: "Contact",     href: "contact.html" },
  ]},
  { title: "Practices", links: [
    { label: "7 Nights — The Reset",        href: "#books" },
    { label: "30 Days — Back to Yourself",  href: "#books" },
    { label: "Complete Bundle",             href: "#books" },
    { label: "Free Daily Practice",         href: "#newsletter" },
  ]},
  { title: "About", links: [
    { label: "Tradition Sources", href: "#about" },
    { label: "FAQ",               href: "#faq" },
    { label: "Refund Policy",     href: "#faq" },
    { label: "Terms",             href: "#faq" },
  ]},
  { title: "Follow", links: [
    { label: "Instagram",       href: "https://www.instagram.com/zenmunis/", external: true },
    { label: "TikTok",          href: "https://tiktok.com/@zenmunis",   external: true },
    { label: "Letters by Email",href: "#newsletter" },
    { label: "Gumroad",         href: "https://zenmunis.gumroad.com",   external: true },
  ]},
];

const Footer = () => {
  const isHome = window.location.pathname.endsWith("index.html") || window.location.pathname === "/" || window.location.pathname.endsWith("/");

  const resolveHref = (href) => {
    if (href.startsWith("#") && !isHome) return "index.html" + href;
    return href;
  };

  return (
  <footer className="zfooter">
    <div className="zfooter__grid">
      <div className="zfooter__brand">
        <a href={isHome ? "#top" : "index.html"} onClick={e => { e.preventDefault(); if (isHome) window.scrollTo({ top: 0, behavior: "smooth" }); else window.location.href = "index.html"; }} style={{ display: "inline-block" }}>
          <ZenmunisMark size={52} />
        </a>
        <div className="zfooter__name">Zenmunis</div>
        <div className="label zfooter__tag">Ancient Wisdom · Modern Healing</div>
        <p>
          A quiet teacher publishing one practice a day,
          drawn from Himalayan, Japanese, Ayurvedic and Taoist
          traditions — for tired modern lives that have forgotten how to rest.
        </p>
      </div>
      {FOOTER_COLS.map(col => (
        <div key={col.title} className="zfooter__col">
          <div className="label zfooter__coltitle">{col.title}</div>
          <ul>{col.links.map(l => (
            <li key={l.label}>
              <a href={resolveHref(l.href)} {...(l.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{l.label}</a>
            </li>
          ))}</ul>
        </div>
      ))}
    </div>
    <div className="zfooter__bottom">
      <div className="zfooter__quote">"Do not rush. Begin tonight."</div>
      <Divider width={80} />
      <div className="zfooter__copy">
        © {new Date().getFullYear()} Zenmunis · No medical claims · For quiet practice only
      </div>
    </div>
  </footer>
  );
};

Object.assign(window, { MidCTA, Newsletter, Footer, FOOTER_COLS });