// FOOTER — pre-launch: App coming soon, socials coming soon, partner CTA
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div className="footer__brand">
          <div className="logo-row">
            <img src="assets/MM_AppIcon_180.png" alt="Mahjong Matchmaker" />
            <span className="wordmark">Mahjong Matchmaker</span>
          </div>
          <div className="tag">Find your 4th.<br />Find your next American Mahjong game.</div>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#A6B3CC", marginTop: 10, lineHeight: 1.55 }}>
            Coming soon on the Apple App Store.<br />
            <a href="mailto:info@mahjongmatchmaker.com" style={{ color: "#fff", borderBottom: "1px solid rgba(255,255,255,0.3)", textDecoration: "none" }}>info@mahjongmatchmaker.com</a>
          </div>
        </div>

        <div className="footer__col">
          <h4>The app</h4>
          <ul>
            <li><a href="#how-it-works">How it works</a></li>
            <li><a href="#features">What's inside</a></li>
            <li><a href="#founding">Beta rewards</a></li>
            <li><a href="#coming-soon">Apple App Store <span style={{ opacity: 0.55, fontSize: 10, marginLeft: 4, letterSpacing: "0.08em", textTransform: "uppercase" }}>soon</span></a></li>
          </ul>
        </div>

        <div className="footer__col">
          <h4>Partner</h4>
          <ul>
            <li><a href="mailto:info@mahjongmatchmaker.com?subject=Group%20inquiry">For mahjong groups</a></li>
            <li><a href="mailto:info@mahjongmatchmaker.com?subject=Teacher%20inquiry">For teachers</a></li>
            <li><a href="mailto:info@mahjongmatchmaker.com?subject=Venue%20inquiry">For venues & clubs</a></li>
            <li><a href="mailto:info@mahjongmatchmaker.com?subject=Charity%20inquiry">For charities</a></li>
          </ul>
        </div>

        <div className="footer__col">
          <h4>Company</h4>
          <ul>
            <li><a href="#about">Our story</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
            <li><a href="mailto:info@mahjongmatchmaker.com">Contact</a></li>
          </ul>
        </div>

        <div className="footer__col footer__newsletter">
          <h4>Letters from the table</h4>
          <p>A short note twice a month. Launch waves, new cities, and notes from the build. No marketing.</p>
          <form onSubmit={(e) => { e.preventDefault(); e.currentTarget.querySelector('input').value = ''; }}>
            <input type="email" placeholder="you@example.com" aria-label="Email address" />
            <button type="submit">Subscribe</button>
          </form>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 11, color: "#A6B3CC", marginTop: 14, lineHeight: 1.5 }}>
            Social links coming soon: Instagram · TikTok · Threads · Facebook
          </div>
        </div>
      </div>

      <div className="footer__bottom">
        <div>© 2026 Mahjong Matchmaker. Made warmly in Rhode Island.</div>
        <div className="footer__social">
          <a href="#coming-soon" aria-label="Instagram (coming soon)" title="Coming soon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><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="0.7" fill="currentColor" /></svg></a>
          <a href="#coming-soon" aria-label="TikTok (coming soon)" title="Coming soon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 8v9a3 3 0 1 1-3-3" /><path d="M15 3v10a5 5 0 0 0 5 5" /><path d="M15 3c0 2.5 2 4.5 4.5 4.5" /></svg></a>
          <a href="#coming-soon" aria-label="Threads (coming soon)" title="Coming soon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3c5 0 8 3.5 8 9s-3 9-8 9-8-3.5-8-9" /><path d="M8 13c0-3 2-5 5-5s4 2 4 4-1.5 4-4 4c-1.5 0-3-1-3-2.5S11 11 13 11.5" /></svg></a>
          <a href="#coming-soon" aria-label="Facebook (coming soon)" title="Coming soon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg></a>
        </div>
        <div className="footer__legal">
          <a href="#privacy">Privacy</a>
          <a href="#terms">Terms</a>
          <a href="#coming-soon">Accessibility</a>
          <a href="mailto:info@mahjongmatchmaker.com">Contact</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });