// Footer — Kalatua-style 3-column layout on charcoal.
// Matches #footer / .footer-inner / .footer-col-brand / .footer-col-visit /
// .footer-col-reserve / .footer-bottom classes in index.html.
//
// Animation: entire footer fades in + slides up (opacity 0→1, y 40→0, 800ms
// power3.out) when its top crosses 90% viewport.

function Footer({ data }) {
  const sectionRef = React.useRef(null);
  const firedRef = React.useRef(false);

  React.useEffect(() => {
    if (!sectionRef.current) return;
    if (firedRef.current) return;
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    firedRef.current = true;

    gsap.set(sectionRef.current, { y: 40 });
    gsap.to(sectionRef.current, {
      opacity: 1, y: 0, duration: 0.8, ease: 'power3.out',
      scrollTrigger: {
        trigger: sectionRef.current,
        start: 'top 90%',
        once: true,
      },
    });
  }, [data]);

  if (!data) return null;

  const site = data.site || {};
  const footer = data.footer || {};
  const contact = data.contact || {};
  const socialKV = data.social || {};
  const logoSrc = data.logo || './brand_assets/images/logo-final-trans.png';
  const brandName = site.name || 'Sunset Restaurant';
  const tagline = footer.tagline || (site.tagline ? `"${site.tagline}"` : '');
  const descriptor = footer.descriptor || 'Lifestyle Restaurant · Grand Baie, Mauritius';

  const cta = footer.cta || { label: 'Reserve a Table', href: contact.phoneHref || '#reserve' };
  const socialLinks = (footer.social && footer.social.length)
    ? footer.social
    : [
        socialKV.instagram && { label: 'Instagram', href: socialKV.instagram },
        socialKV.tiktok    && { label: 'TikTok',    href: socialKV.tiktok    },
        socialKV.facebook  && { label: 'Facebook',  href: socialKV.facebook  },
      ].filter(Boolean);

  const renderSocialIcon = (label) => {
    const key = (label || '').toLowerCase();
    if (key === 'instagram') {
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <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="1" fill="currentColor" stroke="none" />
        </svg>
      );
    }
    if (key === 'tiktok') {
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
          <path d="M19.3 7.2a5.7 5.7 0 0 1-3.6-1.3 5.7 5.7 0 0 1-2-3.9h-3.1v12.3a2.6 2.6 0 1 1-2.6-2.6c.27 0 .53.04.78.12V8.5a5.7 5.7 0 1 0 5 5.66V10.3a8.8 8.8 0 0 0 5.5 1.9V9a5.6 5.6 0 0 1 0-1.8z" />
        </svg>
      );
    }
    if (key === 'facebook') {
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
          <path d="M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.92.26-1.55 1.58-1.55H17V4.4A22.8 22.8 0 0 0 14.55 4.3c-2.43 0-4.1 1.48-4.1 4.2v2.3H7.7V14h2.75v8h3.05z" />
        </svg>
      );
    }
    return null;
  };

  // Build hours multi-line text (used in "Visit Us" column to match Kalatua)
  const hours = contact.hours || [];

  const addressLines = contact.address
    ? contact.address.split(',').map((s) => s.trim()).filter(Boolean)
    : [];

  const copyright = footer.copyright || `© ${new Date().getFullYear()} ${brandName}. All rights reserved.`;

  return (
    <footer id="footer" ref={sectionRef}>
      <div className="footer-inner">
        {/* Column 1 — Brand */}
        <div className="footer-col-brand">
          <img src={logoSrc} alt={`${brandName} logo`} className="footer-logo" loading="lazy" decoding="async" />
          {tagline && <p className="footer-tagline">{tagline}</p>}
          {descriptor && <p className="footer-descriptor">{descriptor}</p>}
          <div className="footer-social-row">
            {socialLinks.map((s, i) => (
              <a
                key={i}
                href={s.href}
                target="_blank"
                rel="noopener noreferrer"
                className="footer-social-link"
                aria-label={s.label}
              >
                {renderSocialIcon(s.label)}
              </a>
            ))}
          </div>
        </div>

        {/* Column 2 — Visit */}
        <div className="footer-col-visit">
          <p className="footer-col-label">Visit Us</p>
          <p className="footer-address">
            {addressLines.length > 0
              ? addressLines.map((line, i) => (
                  <React.Fragment key={i}>
                    {line}{i < addressLines.length - 1 ? <React.Fragment>, <br /></React.Fragment> : ''}
                  </React.Fragment>
                ))
              : contact.address}
          </p>
          {contact.phone && (
            <a
              href={contact.phoneHref || `tel:${contact.phone}`}
              className="footer-phone"
            >
              {contact.phone}
            </a>
          )}
          {contact.email && (
            <a
              href={contact.emailHref || `mailto:${contact.email}`}
              className="footer-email"
            >
              {contact.email}
            </a>
          )}
          {hours.length > 0 && (
            <p className="footer-hours">
              {hours.map((h, i) => (
                <React.Fragment key={i}>
                  {h.days}: {h.time}
                  {i < hours.length - 1 ? <br /> : null}
                </React.Fragment>
              ))}
            </p>
          )}
        </div>

        {/* Column 3 — Reserve */}
        <div className="footer-col-reserve">
          <p className="footer-col-label">Ready to Dine?</p>
          <p className="footer-reserve-line">
            {footer.reserveLine || 'Book your table directly with us.'}
          </p>
          <a
            href={cta.href}
            target={cta.href && cta.href.startsWith('http') ? '_blank' : undefined}
            rel={cta.href && cta.href.startsWith('http') ? 'noopener noreferrer' : undefined}
            className="footer-cta-btn"
          >
            <span>{cta.label}</span>
          </a>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="footer-bottom">
        <span className="footer-bottom-text">{copyright}</span>
        <span className="footer-bottom-text">{site.location || 'Grand Baie, Mauritius'}</span>
      </div>
    </footer>
  );
}