/* Footer — calm cream footer with serif sign-off */

function Footer() {
  const NAV_COLS = {
    'Atlas':   ['Destinations', 'Packages', 'Seasons', 'The Journal'],
    'Studio':  ['About', 'Our planners', 'Press & writing', 'Careers'],
    'Quietly': ['Help & FAQ', 'Contact', 'Privacy', 'Terms'],
  };

  const SOCIALS = [
    { name: 'Instagram', d: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z' },
    { name: 'Twitter',   d: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' },
    { name: 'LinkedIn',  d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
  ];

  return (
    <footer style={{ background: 'var(--ink)', color: 'rgba(255,255,255,0.7)' }} className="pt-20 pb-10 px-6 lg:px-10">
      <div className="container">

        {/* Oversize wordmark */}
        <div className="mb-16 pb-16" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          <p className="section-label mb-6" style={{ color: 'rgba(255,255,255,0.5)' }}>
            <span className="inline-block w-1.5 h-1.5 rounded-full mr-2.5 align-middle" style={{ background: 'var(--sky)' }} />
            Be Happy · Travel Atelier
          </p>
          <h2 className="serif tracking-[-0.025em] leading-[0.9]"
            style={{ fontSize: 'clamp(3.5rem, 11vw, 11rem)', color: 'var(--white)' }}>
            be<span className="serif-it" style={{ color: 'var(--sky)' }}>happy</span>.
          </h2>
          <p className="text-[16px] mt-8 max-w-md" style={{ color: 'rgba(255,255,255,0.55)' }}>
            Quietly built journeys for people who would rather feel a place than tick it off a list.
            <span className="serif-it" style={{ color: 'rgba(255,255,255,0.85)' }}> Since 2009.</span>
          </p>
        </div>

        {/* Link grid */}
        <div className="grid md:grid-cols-12 gap-10 mb-16">
          <div className="md:col-span-5">
            <p className="text-[12px] tracking-[0.16em] uppercase mb-5" style={{ color: 'rgba(255,255,255,0.4)' }}>Stay in touch</p>
            <p className="text-[14px] leading-relaxed mb-6 max-w-sm" style={{ color: 'rgba(255,255,255,0.7)' }}>
              A short letter, eight times a year. New destinations, traveler stories, the occasional recipe.
            </p>
            <form className="flex gap-2 max-w-sm mb-7" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="your@email.com"
                className="flex-1 px-4 py-2.5 rounded-full bg-transparent border text-[14px] outline-none"
                style={{ borderColor: 'rgba(255,255,255,0.15)', color: 'var(--white)' }} />
              <button type="submit" className="px-5 py-2.5 rounded-full text-[13px]"
                style={{ background: 'var(--white)', color: 'var(--ink)' }}>
                Subscribe
              </button>
            </form>
            <div className="flex gap-2">
              {SOCIALS.map(s => (
                <a key={s.name} href="#" aria-label={s.name}
                  className="w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200"
                  style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.55)' }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d={s.d}/></svg>
                </a>
              ))}
            </div>
          </div>

          {Object.entries(NAV_COLS).map(([cat, links]) => (
            <div key={cat} className="md:col-span-2">
              <h4 className="text-[12px] tracking-[0.16em] uppercase mb-5" style={{ color: 'rgba(255,255,255,0.4)' }}>{cat}</h4>
              <ul className="space-y-3">
                {links.map(l => (
                  <li key={l}>
                    <a href="#" className="text-[14px] transition-colors duration-200"
                      style={{ color: 'rgba(255,255,255,0.72)' }}
                      onMouseEnter={(e) => e.currentTarget.style.color = 'var(--white)'}
                      onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.72)'}>
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div className="md:col-span-1 md:col-start-12">
            <h4 className="text-[12px] tracking-[0.16em] uppercase mb-5" style={{ color: 'rgba(255,255,255,0.4)' }}>Call</h4>
            <a href="tel:+1234567890" className="serif-it text-[18px] block" style={{ color: 'var(--white)' }}>
              +1 234<br/>567 890
            </a>
          </div>
        </div>

        {/* Bottom */}
        <div className="pt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
          style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <p className="text-[12px]" style={{ color: 'rgba(255,255,255,0.4)' }}>
            © 2026 Be Happy Travel Atelier. All rights reserved.
          </p>
          <div className="flex gap-6">
            {['Privacy', 'Terms', 'Cookies', 'Sitemap'].map(l => (
              <a key={l} href="#" className="text-[12px]" style={{ color: 'rgba(255,255,255,0.4)' }}>{l}</a>
            ))}
          </div>
          <p className="text-[11px]" style={{ color: 'rgba(255,255,255,0.3)' }}>
            ATOL · IATA · ABTA member
          </p>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;