/* global React */
function Footer() {
  return (
    <footer style={{ background: '#FBF7F1', borderTop: '1px solid #8A9A7B', marginTop: 64 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '72px 24px 56px' }}>
        <div className="gfh-footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
        }}>
          <div>
            <img src="assets/logo-full.png" alt="Grace Filled Hair"
                 style={{ width: 360, height: 'auto', display: 'block', margin: '-44px 0 -44px -34px' }}/>
            <p style={{ fontFamily: "'Mulish',sans-serif", fontSize: 14, color: '#2E2A26', lineHeight: 1.65, margin: '20px 0 0', maxWidth: 320 }}>
              A faith-based hair stylist in a private salon suite. Sarasota, Florida. By appointment only.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8A9A7B', fontWeight: 500, marginBottom: 14 }}>Visit</div>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 14, color: '#2E2A26', lineHeight: 1.8 }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8A9A7B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 4, flexShrink: 0 }}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <div>Phenix Salon Suites &mdash; Fruitville Commons<br/>6405 Initiative Blvd<br/>Sarasota, FL 34240</div>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8A9A7B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 3, flexShrink: 0 }}><path d="M22 16.92V21a1 1 0 0 1-1.1 1 19.9 19.9 0 0 1-8.6-3.1 19.6 19.6 0 0 1-6-6A19.9 19.9 0 0 1 3.2 4.1 1 1 0 0 1 4.2 3h4.1a1 1 0 0 1 1 .8 11.4 11.4 0 0 0 .6 2.5 1 1 0 0 1-.2 1L7.9 9a16 16 0 0 0 6 6l1.7-1.8a1 1 0 0 1 1-.2 11.4 11.4 0 0 0 2.5.6 1 1 0 0 1 .8 1z"/></svg>
                <span>(941) 224-4149</span>
              </div>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8A9A7B', fontWeight: 500, marginBottom: 14 }}>Hours</div>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 14, color: '#2E2A26', lineHeight: 1.85 }}>
              <div>Tue to Fri · 9 to 5</div>
              <div>Sat · 9 to 1</div>
              <div style={{ color: 'rgba(46,42,38,0.55)' }}>Sun, Mon · closed</div>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "'Mulish',sans-serif", fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8A9A7B', fontWeight: 500, marginBottom: 14 }}>Stay close</div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <a href="#" aria-label="Instagram" style={{ color: '#8A9A7B', display: 'inline-flex' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/>
                </svg>
              </a>
              <a href="#" aria-label="Facebook" style={{ color: '#8A9A7B', display: 'inline-flex' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                </svg>
              </a>
              <a href="#" aria-label="Email" style={{ color: '#8A9A7B', display: 'inline-flex' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"/>
                  <path d="m3 7 9 6 9-6"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(138,154,123,0.5)', marginTop: 56, paddingTop: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
          fontFamily: "'Mulish',sans-serif", fontSize: 12, color: 'rgba(46,42,38,0.55)' }}>
          <div>© Grace Filled Hair · Sarasota, FL</div>
          <div style={{ fontFamily: "'Caveat',cursive", fontSize: 18, color: '#B5654A' }}>made with grace</div>
        </div>
      </div>
    </footer>
  );
}

window.GFH_Footer = Footer;