// components/footer.jsx — footer + newsletter inline

function Footer() {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    const res = window.CustomerForms && window.CustomerForms.subscribeNewsletter
      ? window.CustomerForms.subscribeNewsletter(email, 'footer')
      : { ok: false, message: 'Newsletter unavailable' };
    if (!res.ok) {
      HAPStore.notify(res.message || 'Check your email');
      return;
    }
    HAPStore.notify(res.message || 'Subscribed — welcome to Ambady!');
    setDone(true);
  };

  const socials = [
    { name: 'instagram', href: 'https://www.instagram.com/' },
    { name: 'facebook',  href: 'https://www.facebook.com/' },
    { name: 'whatsapp',  href: 'https://wa.me/917559907176' }
  ];

  return (
    <footer style={{ background: 'var(--forest)', color: 'var(--paper)', paddingBlock: 'clamp(56px, 7vw, 96px) 0', marginTop: 'clamp(48px, 8vw, 120px)' }}>
      <div className="container">

        {/* Newsletter band */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,1fr)',
          gap: 'clamp(24px, 4vw, 64px)',
          alignItems: 'center',
          paddingBottom: 56,
          borderBottom: '1px solid rgba(255,255,255,0.12)'
        }} className="footer-news">
          <div>
            <span className="eyebrow" style={{ color: 'var(--sage)' }}>Newsletter</span>
            <h2 className="serif" style={{ fontSize: 'clamp(2rem, 4vw, 3.2rem)', lineHeight: 1.05, marginTop: 8, marginBottom: 8 }}>
              New colours & offers, first.
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 520 }}>
              A short email when new pebble colours land and when seasonal offers go live. Two or three a month — never more.
            </p>
          </div>
          {!done ? (
            <form onSubmit={submit} style={{ display: 'flex', gap: 8, background: 'rgba(255,255,255,0.08)', padding: 6, borderRadius: 999 }}>
              <label htmlFor="footer-newsletter-email" className="visually-hidden" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}>Email</label>
              <input
                id="footer-newsletter-email"
                className="input"
                type="email"
                placeholder="you@home.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoComplete="email"
                style={{
                  flex: 1, background: 'transparent', border: 0, color: 'var(--paper)',
                  paddingInline: 18
                }}
              />
              <button type="submit" className="btn btn--terra">Subscribe</button>
            </form>
          ) : (
            <div style={{ padding: '20px 24px', background: 'rgba(255,255,255,0.06)', borderRadius: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
              <Icon name="check" />
              <span>Done. You’re on the list — we store your email locally (no ESP send in this mode).</span>
            </div>
          )}
        </div>

        {/* Columns */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0,1.4fr) repeat(3, minmax(0, 1fr))',
          gap: 'clamp(28px, 4vw, 64px)',
          paddingBlock: 64
        }} className="footer-cols">
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '2rem', lineHeight: 1, marginBottom: 16 }}>
              <span style={{ fontFamily: 'var(--sans)', fontWeight: 700, letterSpacing: '0.12em', fontSize: '1.6rem' }}>AMBADY <span style={{ color: 'var(--rose)', fontWeight: 600, fontSize: '.7em', letterSpacing: '.2em' }}>PEBBLES GARDEN</span></span>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 360, marginBottom: 20 }}>
              Decorative pebbles, path stones, planters & garden decor — based in Mannuthy, Thrissur, and shipping across India.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {socials.map(s => (
                <a key={s.name} href={s.href} target="_blank" rel="noreferrer" className="icon-btn"
                   style={{ background: 'rgba(255,255,255,0.08)', color: 'var(--paper)' }}>
                  <Icon name={s.name} size={18} />
                </a>
              ))}
            </div>
          </div>

          <FooterCol heading="Shop" links={[
            ['Pebbles', '#/collections/pebbles'],
            ['Coloured Pebbles', '#/collections/coloured-pebbles'],
            ['Stones & Chips', '#/collections/stones-chips'],
            ['Path Stones', '#/collections/path-stones'],
            ['Pots & Planters', '#/collections/pots-planters'],
            ['Buddha & Decor', '#/collections/decor'],
            ['Lawn & Grass', '#/collections/lawn-grass']
          ]} />

          <FooterCol heading="Services" links={[
            ['Bulk & Wholesale', '#/services/bulk-supply'],
            ['Pot Styling', '#/services/pot-styling'],
            ['Pathway Design', '#/services/pathway-design'],
            ['Garden Decor Setup', '#/services/garden-decor']
          ]} />

          <FooterCol heading="Information" links={[
            ['About us', '#/pages/about'],
            ['Track order', '#/track'],
            ['Admin panel', '/Admin.html', 'nofollow'],
            ['Our team', '#/pages/our-team'],
            ['Clients & testimonials', '#/pages/our-clients'],
            ['Contact', '#/pages/contact'],
            ['Shipping policy', '#/pages/shipping'],
            ['Refunds & cancellation', '#/pages/refunds'],
            ['Privacy policy', '#/pages/privacy'],
            ['Terms & conditions', '#/pages/terms']
          ]} />
        </div>

        {/* Contact band */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 24,
          paddingBlock: 32,
          borderTop: '1px solid rgba(255,255,255,0.12)'
        }}>
          <Contact icon="phone" head="Call us" body="+91 7559 907 176 · +91 9447 526 862" />
          <Contact icon="mail" head="Email" body="ambadypebblesgarden@gmail.com" />
          <Contact icon="map" head="Store" body="Karikkanthra Building, Madakkathara P.O, Vellanikkara, Mannuthy, Thrissur 680 651, Kerala" />
          <Contact icon="truck" head="Shipping" body="Free above ₹999 · All India delivery" />
        </div>

        <div style={{
          paddingBlock: 24,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 16,
          color: 'rgba(255,255,255,0.5)', fontSize: '.78rem'
        }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12 }}>
            <span>© 2026 Ambady Pebbles Garden · Mannuthy, Thrissur, Kerala.</span>
            <a href="/Admin.html" rel="nofollow" style={{ color: 'rgba(255,255,255,0.55)', fontSize: '.78rem' }}>Admin panel · Landscape OS</a>
            <span style={{ color: 'rgba(255,255,255,0.4)' }}>Landscape OS powered by RINPO · RINADS TECHNOLOGIES</span>
          </div>
          <span>Payments: Visa · Mastercard · Maestro · Amex · UPI · Apple Pay</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ heading, links }) {
  return (
    <div>
      <h4 style={{ fontSize: '.75rem', letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--sage)', marginBottom: 18, fontWeight: 600 }}>{heading}</h4>
      <ul style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([t, h, rel]) => (
          <li key={h}><a href={h} rel={rel || undefined} style={{ color: 'rgba(255,255,255,0.78)', fontSize: '.92rem', transition: 'color 160ms' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--paper)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.78)'}>{t}</a></li>
        ))}
      </ul>
    </div>
  );
}

function Contact({ icon, head, body }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <div style={{ width: 38, height: 38, borderRadius: 999, background: 'rgba(255,255,255,0.08)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={18} />
      </div>
      <div>
        <div style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--sage)', marginBottom: 4 }}>{head}</div>
        <div style={{ color: 'rgba(255,255,255,0.85)', fontSize: '.9rem', lineHeight: 1.5 }}>{body}</div>
      </div>
    </div>
  );
}

window.Footer = Footer;