wise-hearted-decor/src/components/Footer.tsx

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

export default function Footer() {
  return (
    <footer style={{
      backgroundColor: '#050505',
      borderTop: '1px solid var(--border-gold)',
      padding: '70px 24px 40px',
      color: '#94A3B8',
      fontSize: '0.92rem',
    }}>
      <div className="container">
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: '40px',
          marginBottom: '50px',
        }}>
          
          {/* Brand Info */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '14px', marginBottom: '16px' }}>
              <div style={{ position: 'relative', width: '44px', height: '44px', borderRadius: '50%', overflow: 'hidden', border: '1.5px solid var(--color-gold)' }}>
                <Image src="/images/logo_seal.webp" alt="Wise Hearted Logo" fill style={{ objectFit: 'contain' }} />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-script)', fontSize: '1.8rem', color: 'var(--color-gold)', lineHeight: 1 }}>
                  Wise Hearted
                </div>
                <div style={{ fontSize: '0.65rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                  Event Decor
                </div>
              </div>
            </div>
            <p style={{ lineHeight: 1.7, color: '#CBD5E1', marginBottom: '16px' }}>
              Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.
            </p>
            <div style={{ fontSize: '0.82rem', color: 'var(--color-gold-light)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              CALLED TO CREATE. ENABLED BY GOD.
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
              Quick Navigation
            </h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <li><Link href="#about" style={{ color: '#94A3B8', textDecoration: 'none' }}>About Jackie & Our Heart</Link></li>
              <li><Link href="#pillars" style={{ color: '#94A3B8', textDecoration: 'none' }}>The 5 Brand Pillars</Link></li>
              <li><Link href="#portfolio" style={{ color: '#94A3B8', textDecoration: 'none' }}>Client Event Portfolio</Link></li>
              <li><Link href="#services" style={{ color: '#94A3B8', textDecoration: 'none' }}>Balloon & Backdrop Services</Link></li>
              <li><Link href="#contact" style={{ color: '#94A3B8', textDecoration: 'none' }}>Request a Custom Quote</Link></li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
              Event Specialties
            </h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <li>Weddings & Engagement Showers</li>
              <li>Milestone Birthday Installations</li>
              <li>Themed Baby Showers</li>
              <li>High School & College Graduations</li>
              <li>Holiday & Corporate Celebrations</li>
              <li>Mosaic Letter & Number Marquees</li>
            </ul>
          </div>

          {/* Connect */}
          <div>
            <h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
              Book & Inquire
            </h4>
            <p style={{ lineHeight: 1.6, marginBottom: '16px' }}>
              Ready to bring your dream event to life? Connect with us to reserve your event date.
            </p>
            <Link href="#contact" className="btn-gold" style={{ padding: '10px 24px', fontSize: '0.88rem', display: 'inline-flex' }}>
              <span>✨</span> Inquire Now
            </Link>
          </div>

        </div>

        {/* Bottom Bar */}
        <div style={{
          borderTop: '1px solid rgba(255, 255, 255, 0.08)',
          paddingTop: '28px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '16px',
          fontSize: '0.85rem',
        }}>
          <div>
            &copy; {new Date().getFullYear()} Wise Hearted Event Decor. All rights reserved.
          </div>
          <div style={{ fontStyle: 'italic', color: 'var(--color-gold-light)' }}>
            &ldquo;Creating memorable moments with God-given creativity.&rdquo;
          </div>
        </div>

      </div>
    </footer>
  );
}