/* global React */
function Footer({ onNavigate, onQuote }) {
  const col = { display: 'flex', flexDirection: 'column', gap: '10px' };
  const head = { fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)', letterSpacing: 'var(--ls-mono)', textTransform: 'uppercase', color: 'var(--teal)', marginBottom: '4px' };
  const linkStyle = { fontFamily: 'var(--font-body)', fontSize: '0.9375rem', color: 'var(--text-inv-dim)', textDecoration: 'none', background: 'none', border: 0, padding: 0, textAlign: 'left', cursor: 'pointer' };

  const quick = ['Home', 'Services', 'Gallery', 'About', 'Contact'];
  const services = ['Shower Doors', 'Custom Mirrors', 'Glass Walls & Partitions', 'Glass Table Tops', 'Window Glass Repair'];

  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--text-inv)' }}>
      {/* mountain-ridge hairline across the top */}
      <img src="assets/mountain-ridge.svg" alt="" aria-hidden="true" style={{ width: '100%', height: '34px', display: 'block', opacity: 0.7 }} />

      <div style={{
        maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-8) var(--gutter) var(--space-6)',
        display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.4fr', gap: '40px',
      }} className="vlx-footer-grid">
        <div style={col}>
          <img src="assets/logo-vailuxury.png" alt="Vailuxury Glass & Mirror" style={{ width: '190px', height: 'auto', display: 'block' }} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9375rem', lineHeight: 1.6, color: 'var(--text-inv-dim)', margin: '8px 0 0', maxWidth: '34ch' }}>
            Premium glass & mirror installation in Colorado.
          </p>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)', letterSpacing: 'var(--ls-mono)', color: 'var(--teal)', margin: '6px 0 0' }}>¡Hablamos Español!</p>
        </div>

        <div style={col}>
          <span style={head}>Quick Links</span>
          {quick.map((l) => <button key={l} style={linkStyle} onClick={() => onNavigate(l)}>{l}</button>)}
          <button style={linkStyle} onClick={onQuote}>Free Quote</button>
        </div>

        <div style={col}>
          <span style={head}>Services</span>
          {services.map((s) => <button key={s} style={linkStyle} onClick={() => onNavigate('Services')}>{s}</button>)}
        </div>

        <div style={col}>
          <span style={head}>Get in Touch</span>
          <a href="tel:+19709792022" style={linkStyle}>(970) 979-2022</a>
          <a href="mailto:info@vailuxuryglassandmirror.com" style={linkStyle}>info@vailuxuryglassandmirror.com</a>
          <span style={{ ...linkStyle, cursor: 'default' }}>34510 US-6, Unit A7,<br />Edwards Business Center, Edwards, CO</span>
          <a href="https://www.instagram.com/vailuxuryglass/" style={linkStyle}>@vailuxuryglass</a>
          <span style={{ ...linkStyle, cursor: 'default', marginTop: '6px' }}>Mon–Fri 8:00 AM – 4:30 PM · Sat Closed · Sun Closed</span>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div className="lit-edge" style={{ opacity: 0.4 }} />
      </div>
      <div style={{
        maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-5) var(--gutter)',
        fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.08em', color: 'var(--text-inv-dim)',
      }}>© 2026 Vailuxury Glass & Mirror. All rights reserved. Made by Trofyx</div>
    </footer>
  );
}
window.Footer = Footer;