/* Site footer */

const footerStyles = {
  outer: {
    background: 'var(--lagoon-deep)',
    color: 'var(--shallow-soft)',
    padding: '72px 0 40px',
    marginTop: 96,
  },
  inner: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '0 var(--gutter)',
    display: 'grid',
    gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr',
    gap: 48,
  },
  brand: {
    fontFamily: 'var(--font-display)',
    fontSize: 36, fontWeight: 800,
    letterSpacing: '-0.04em',
    color: 'var(--paper)',
    marginBottom: 12,
    fontVariationSettings: "'opsz' 144, 'SOFT' 0",
  },
  tag: {
    fontSize: 14, lineHeight: 1.55,
    color: 'var(--shallow-soft)',
    maxWidth: 320,
    marginBottom: 24,
    textWrap: 'pretty',
  },
  newsletter: { display: 'flex', gap: 8, maxWidth: 360 },
  nlInput: {
    flex: 1, height: 44, padding: '0 16px',
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(127, 183, 181, 0.25)',
    borderRadius: 8,
    color: 'var(--paper)',
    fontSize: 14,
    outline: 'none',
  },
  nlBtn: {
    height: 44, padding: '0 18px',
    background: 'var(--coral)',
    color: 'white',
    border: 'none', borderRadius: 8,
    fontWeight: 600, fontSize: 13,
    cursor: 'pointer',
  },
  colHead: {
    fontFamily: 'var(--font-ui)',
    fontSize: 11, letterSpacing: '0.16em',
    textTransform: 'uppercase', fontWeight: 600,
    color: 'var(--shallow)',
    margin: '0 0 16px',
  },
  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  link: { color: 'var(--shallow-soft)', fontSize: 14, textDecoration: 'none' },
  bottom: {
    maxWidth: 'var(--container)',
    margin: '64px auto 0',
    padding: '24px var(--gutter) 0',
    borderTop: '1px solid rgba(127, 183, 181, 0.18)',
    display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.06em',
    color: 'var(--shallow)',
    flexWrap: 'wrap', gap: 12,
  },
  payRow: { display: 'flex', alignItems: 'center', gap: 16, color: 'var(--shallow)' },
  payChip: {
    padding: '4px 10px',
    border: '1px solid rgba(127, 183, 181, 0.25)',
    borderRadius: 4,
    fontSize: 10,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
  },
};

function SiteFooter() {
  return (
    <footer style={footerStyles.outer} data-screen-label="Footer">
      <div style={footerStyles.inner}>
        <div>
          <div style={footerStyles.brand}>malzive<span style={{color:'var(--coral)'}}>.</span></div>
          <p style={footerStyles.tag}>
            An atlas of everything Maldives — stays, charters, hedhikaa, lacquerwork,
            home bakers, and the dhoni shipyards in between. Built in Malé.
          </p>
          <form style={footerStyles.newsletter} onSubmit={(e) => e.preventDefault()}>
            <input style={footerStyles.nlInput} type="email" placeholder="you@example.mv" aria-label="Email"/>
            <button style={footerStyles.nlBtn}>Subscribe</button>
          </form>
        </div>
        <div>
          <h4 style={footerStyles.colHead}>Discover</h4>
          <ul style={footerStyles.list}>
            <li><a href="prototype-browse.html?v=stay" style={footerStyles.link}>Resorts &amp; Guesthouses</a></li>
            <li><a href="prototype-browse.html?v=charter" style={footerStyles.link}>Dhoni &amp; Liveaboards</a></li>
            <li><a href="prototype-browse.html?v=experience" style={footerStyles.link}>Dives &amp; Excursions</a></li>
            <li><a href="prototype-browse.html?v=shop" style={footerStyles.link}>Local Shops</a></li>
            <li><a href="prototype-browse.html?v=eat" style={footerStyles.link}>Hedhikaa &amp; Bakers</a></li>
            <li><a href="#" style={footerStyles.link}>The Atoll Atlas</a></li>
          </ul>
        </div>
        <div>
          <h4 style={footerStyles.colHead}>For Vendors</h4>
          <ul style={footerStyles.list}>
            <li><a href="prototype-vendor.html" style={footerStyles.link}>Sell on Malzive</a></li>
            <li><a href="#" style={footerStyles.link}>Pricing &amp; Fees</a></li>
            <li><a href="#" style={footerStyles.link}>Vendor Stories</a></li>
            <li><a href="#" style={footerStyles.link}>Cargo Dhoni Schedules</a></li>
            <li><a href="#" style={footerStyles.link}>BML Gateway</a></li>
            <li><a href="#" style={footerStyles.link}>Help Centre</a></li>
          </ul>
        </div>
        <div>
          <h4 style={footerStyles.colHead}>Trip Tools</h4>
          <ul style={footerStyles.list}>
            <li><a href="#" style={footerStyles.link}>Build a 7-night trip</a></li>
            <li><a href="#" style={footerStyles.link}>Transfer cost calculator</a></li>
            <li><a href="#" style={footerStyles.link}>Iruvai vs Hulhangu guide</a></li>
            <li><a href="#" style={footerStyles.link}>Ramadan delivery times</a></li>
            <li><a href="#" style={footerStyles.link}>Customs &amp; Halal</a></li>
            <li><a href="#" style={footerStyles.link}>Dhivehi phrasebook</a></li>
          </ul>
        </div>
        <div>
          <h4 style={footerStyles.colHead}>Company</h4>
          <ul style={footerStyles.list}>
            <li><a href="#" style={footerStyles.link}>About</a></li>
            <li><a href="#" style={footerStyles.link}>Press</a></li>
            <li><a href="#" style={footerStyles.link}>Careers</a></li>
            <li><a href="#" style={footerStyles.link}>Privacy</a></li>
            <li><a href="#" style={footerStyles.link}>Terms</a></li>
            <li><a href="#" style={footerStyles.link}>Contact</a></li>
          </ul>
        </div>
      </div>
      <div style={footerStyles.bottom}>
        <span>© 2026 Malzive Pvt Ltd · Malé, Maldives · TRC-12-A0123</span>
        <div style={footerStyles.payRow}>
          <span style={footerStyles.payChip}>BML</span>
          <span style={footerStyles.payChip}>m-Faisaa</span>
          <span style={footerStyles.payChip}>Dhiraagu Pay</span>
          <span style={footerStyles.payChip}>FahiPay</span>
          <span style={footerStyles.payChip}>COD</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });