la-huasca-ts/src/components/Footer.tsx

'use client';

import { useEffect, useState } from 'react';
import { FacebookIcon, InstagramIcon, WhatsAppIcon } from './icons';

interface Config {
  facebook_url?: string;
  instagram_url?: string;
  whatsapp_url?: string;
  address?: string;
  phone?: string;
  email?: string;
}

const gold = '#E8A849';
const navy = '#010D1E';
const cream = '#f5f0e8';

export default function Footer() {
  const [config, setConfig] = useState<Config>({});

  useEffect(() => {
    fetch('/api/site-assets')
      .then((res) => res.json())
      .then((json) => setConfig(json.data || {}))
      .catch(() => {});
  }, []);

  return (
    <footer
      style={{
        background: navy,
        color: cream,
        padding: '3rem 2rem 2rem',
        borderTop: '1px solid rgba(232,168,73,0.25)',
      }}
    >
      <div
        style={{
          maxWidth: '72rem',
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: '2rem',
        }}
      >
        <div>
          <h3 style={{ color: gold, fontSize: '18px', margin: '0 0 1rem', fontStyle: 'italic' }}>La Huasca</h3>
          <p style={{ color: 'rgba(245,240,232,0.75)', lineHeight: 1.55, margin: 0 }}>
            A quiet corner of the Ecuadorian Andes.
          </p>
        </div>

        <div>
          <h4 style={{ color: gold, fontSize: '14px', letterSpacing: '0.08em', textTransform: 'uppercase', margin: '0 0 1rem' }}>Contact</h4>
          {config.address && <p style={{ margin: '0 0 0.5rem', color: 'rgba(245,240,232,0.8)' }}>{config.address}</p>}
          {config.phone && <p style={{ margin: '0 0 0.5rem' }}><a href={`tel:${config.phone}`} style={{ color: cream, textDecoration: 'none' }}>{config.phone}</a></p>}
          {config.email && <p style={{ margin: 0 }}><a href={`mailto:${config.email}`} style={{ color: cream, textDecoration: 'none' }}>{config.email}</a></p>}
        </div>

        <div>
          <h4 style={{ color: gold, fontSize: '14px', letterSpacing: '0.08em', textTransform: 'uppercase', margin: '0 0 1rem' }}>Atmosphere</h4>
          <p style={{ color: 'rgba(245,240,232,0.75)', lineHeight: 1.55, margin: 0 }}>
            Hotel · Restaurant · Andean Highlands
          </p>
        </div>

        <div>
          <h4 style={{ color: gold, fontSize: '14px', letterSpacing: '0.08em', textTransform: 'uppercase', margin: '0 0 1rem' }}>Follow us</h4>
          <div style={{ display: 'flex', gap: '1rem' }}>
            {config.facebook_url && (
              <a
                href={config.facebook_url}
                target="_blank"
                rel="noreferrer"
                style={{ color: cream, transition: 'color 0.2s, transform 0.2s' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = gold; e.currentTarget.style.transform = 'scale(1.12)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = cream; e.currentTarget.style.transform = 'scale(1)'; }}
              >
                <FacebookIcon size={22} />
              </a>
            )}
            {config.instagram_url && (
              <a
                href={config.instagram_url}
                target="_blank"
                rel="noreferrer"
                style={{ color: cream, transition: 'color 0.2s, transform 0.2s' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = gold; e.currentTarget.style.transform = 'scale(1.12)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = cream; e.currentTarget.style.transform = 'scale(1)'; }}
              >
                <InstagramIcon size={22} />
              </a>
            )}
            {config.whatsapp_url && (
              <a
                href={config.whatsapp_url}
                target="_blank"
                rel="noreferrer"
                style={{ color: cream, transition: 'color 0.2s, transform 0.2s' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = gold; e.currentTarget.style.transform = 'scale(1.12)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = cream; e.currentTarget.style.transform = 'scale(1)'; }}
              >
                <WhatsAppIcon size={22} />
              </a>
            )}
          </div>
        </div>
      </div>

      <div
        style={{
          maxWidth: '72rem',
          margin: '2rem auto 0',
          paddingTop: '1.5rem',
          borderTop: '1px solid rgba(245,240,232,0.12)',
          textAlign: 'center',
          fontSize: '13px',
          color: 'rgba(245,240,232,0.55)',
        }}
      >
        © {new Date().getFullYear()} La Huasca. All rights reserved. Powered by{' '}
        <a href="https://hmike.com" target="_blank" rel="noopener noreferrer" style={{ color: gold, textDecoration: 'none' }}>
          hmike.com
        </a>

      </div>
    </footer>
  );
}