// Footer
function Footer() {
  const { navigate, subscribeNewsletter } = useStore();
  const toast = window.useToast();

  return (
    <>
      <section className="footer-cta">
        <div className="container">
          <div className="eyebrow-gold" style={{ color: 'var(--color-accent)' }}>The Saancha Letter</div>
          <h2>A monthly note from our workshop floor</h2>
          <p>A monthly note from our workshop floor — new designs, the craftsmen behind them, and small invitations.</p>
          <form className="news-form" onSubmit={(e) => {
            e.preventDefault();
            const email = e.target.email.value;
            if (!/^[^@]+@[^@]+\.[^@]+$/.test(email)) return toast('Enter a valid email');
            subscribeNewsletter(email);
            e.target.reset();
            toast('Subscribed — check your inbox');
          }}>
            <input name="email" placeholder="your.email@example.com" />
            <button type="submit">Subscribe</button>
          </form>
        </div>
      </section>
      <footer className="site-footer">
        <div className="container">
          <div className="footer-grid">
            <div>
              <div className="brand-mark" style={{ color: 'var(--color-surface)' }}>
                <BrandSeal size={42} />
                <div>
                  <div className="word" style={{ color: 'var(--color-surface)' }}>SAANCHA</div>
                  <div className="sub" style={{ color: 'var(--color-accent)' }}>Handmade in Pakistan</div>
                </div>
              </div>
              <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, maxWidth: 360 }}>A workshop in Islamabad making ten leather shoes by hand. No more, no less — just the shapes worth keeping.</p>
            </div>
            <div>
              <h5>Shop</h5>
              <a onClick={() => navigate({ name: 'category', group: 'shoes', sub: 'buck' })}>Buck Shoes</a>
              <a onClick={() => navigate({ name: 'category', group: 'shoes', sub: 'dress' })}>Dress Shoes</a>
              <a onClick={() => navigate({ name: 'category', group: 'shoes', sub: 'loafer' })}>Loafers</a>
              <a onClick={() => navigate({ name: 'category', group: 'shoes', sub: 'slipon' })}>Slip-Ons</a>
              <a onClick={() => navigate({ name: 'category', group: 'shoes', sub: 'boat' })}>Boat Shoes</a>
            </div>
            <div>
              <h5>Help</h5>
              <a onClick={() => navigate({ name: 'page', slug: 'track' })}>Track Your Order</a>
              <a onClick={() => navigate({ name: 'page', slug: 'shipping' })}>Shipping Policy</a>
              <a onClick={() => navigate({ name: 'page', slug: 'returns' })}>Returns &amp; Refunds</a>
              <a onClick={() => navigate({ name: 'page', slug: 'sizing' })}>Size Guide</a>
              <a onClick={() => navigate({ name: 'page', slug: 'care' })}>Care Guide</a>
              <a onClick={() => navigate({ name: 'page', slug: 'faq' })}>FAQs</a>
              <a onClick={() => navigate({ name: 'page', slug: 'contact' })}>Contact Us</a>
            </div>
            <div>
              <h5>Saancha</h5>
              <a onClick={() => navigate({ name: 'page', slug: 'story' })}>Our Story</a>
              <a onClick={() => navigate({ name: 'page', slug: 'craft' })}>The Craft</a>
              
            </div>
          </div>
          <div className="footer-legal" style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 16, marginTop: 24, fontSize: 12, display: 'flex', flexWrap: 'wrap', gap: '8px 16px', color: 'rgba(255,255,255,0.5)' }}>
            <a onClick={() => navigate({ name: 'page', slug: 'privacy' })} style={{ color: 'inherit', cursor: 'pointer' }}>Privacy Policy</a>
            <span>·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'terms' })} style={{ color: 'inherit', cursor: 'pointer' }}>Terms &amp; Conditions</a>
            <span>·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'returns' })} style={{ color: 'inherit', cursor: 'pointer' }}>Returns</a>
            <span>·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'shipping' })} style={{ color: 'inherit', cursor: 'pointer' }}>Shipping</a>
            <span>·</span>
            <a onClick={() => navigate({ name: 'page', slug: 'cancellation' })} style={{ color: 'inherit', cursor: 'pointer' }}>Cancellation</a>
          </div>
          <div className="footer-bottom">
            <div>&copy; 2026 OCEANNET (SMC-PRIVATE) LIMITED &middot; Saancha Shoes is a brand of OCEANNET (SMC-PRIVATE) LIMITED &middot; SECP Registration &middot; Registered office: FA32, Crown Business Center, E11/2, Islamabad, Pakistan</div>
            <div className="pay">
              <span className="payment-pill">PayPak</span>
              <span className="payment-pill">Visa</span>
              <span className="payment-pill">Mastercard</span>
              <span className="payment-pill">COD</span>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

window.Footer = Footer;