'use client';

import React from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {FaFacebookF, FaTwitter, FaInstagram, FaEnvelope, FaMapMarkerAlt} from 'react-icons/fa';

import TkLogoMark from '@/components/shared/TkLogoMark';
import AffichesAdherents from './AffichesAdherents';
import SoutiensLogos from './SoutiensLogos';

import './FooterV2.css';

/** Extranet des entrées de l'annuaire (artistes, groupes, associations…) */
const EXTRANET_URL = process.env.NEXT_PUBLIC_EXTRANET_URL || 'https://pro.tamm-kreiz.bzh';

interface FooterV2Props {
  locale?: string;
}

export default function FooterV2({locale = 'fr'}: FooterV2Props) {
  const t = useTranslations('HomePage');
  const tFooter = useTranslations('Footer');

  return (
    <footer className="footerv2">
      <div className="container">
        <AffichesAdherents locale={locale} />
        <div className="row g-4 footerv2__main">
          {/* Brand column */}
          <div className="col-12 col-md-6 col-lg-3">
            <div className="footerv2__brand">
              <span className="footerv2__logo">
                <TkLogoMark size={12} />
                <span className="footerv2__logo-text">
                  <span className="footerv2__logo-tamm">Tamm</span>
                  <span className="footerv2__logo-kreiz">Kreiz</span>
                </span>
              </span>
              <p className="footerv2__desc">{tFooter('text_footer_one')}</p>
            </div>
          </div>

          {/* Discover column */}
          <div className="col-12 col-md-6 col-lg-3">
            <h4 className="footerv2__heading footerv2__heading--orange">{t('footer_discover')}</h4>
            <nav className="footerv2__nav">
              <Link href={`/${locale}/evenements`} className="footerv2__link">{t('footer_discover_agenda')}</Link>
              <Link href={`/${locale}/groupes`} className="footerv2__link">{t('footer_discover_annuaire')}</Link>
              <Link href={`/${locale}/articles`} className="footerv2__link">{t('footer_discover_mag')}</Link>
              <Link href={`/${locale}/carte`} className="footerv2__link">{t('footer_discover_carte')}</Link>
              <Link href={`/${locale}/top`} className="footerv2__link">{t('footer_discover_top')}</Link>
              <Link href={`/${locale}/localisation/epci`} className="footerv2__link">{t('footer_discover_epci')}</Link>
              <Link href={`/${locale}/soutiens`} className="footerv2__link">{t('footer_discover_soutiens')}</Link>
            </nav>
          </div>

          {/* Community column */}
          <div className="col-12 col-md-6 col-lg-3">
            <h4 className="footerv2__heading footerv2__heading--blue">{t('footer_community')}</h4>
            <nav className="footerv2__nav">
              <Link href={`/${locale}/connexion`} className="footerv2__link">{t('footer_community_login')}</Link>
              <a href={EXTRANET_URL} className="footerv2__link" target="_blank" rel="noopener noreferrer">{t('footer_community_pro')}</a>
              <Link href={`/${locale}/proposition-evenement`} className="footerv2__link">{t('footer_community_propose')}</Link>
              <Link href={`/${locale}/petites-annonces`} className="footerv2__link">{t('footer_community_annonces')}</Link>
              <Link href={`/${locale}/covoiturage`} className="footerv2__link">{t('footer_community_covoiturage')}</Link>
              <Link href={`/${locale}/forum`} className="footerv2__link">{t('footer_community_forum')}</Link>
              <Link href={`/${locale}/benevole`} className="footerv2__link">{t('footer_community_benevole')}</Link>
              <Link href={`/${locale}/don`} className="footerv2__link">{t('footer_community_don')}</Link>
            </nav>
          </div>

          {/* Newsletter column */}
          <div className="col-12 col-md-6 col-lg-3">
            <h4 className="footerv2__heading footerv2__heading--green">{t('footer_newsletter_title')}</h4>
            <p className="footerv2__newsletter-subtitle">{t('footer_newsletter_subtitle')}</p>
            <form className="footerv2__newsletter" onSubmit={(e) => e.preventDefault()}>
              <div className="footerv2__newsletter-row">
                <input
                  type="email"
                  className="footerv2__newsletter-input"
                  placeholder={t('footer_newsletter_placeholder')}
                />
                <button type="submit" className="footerv2__newsletter-btn" aria-label={t('footer_newsletter_button')}>
                  <FaEnvelope />
                </button>
              </div>
            </form>
          </div>
        </div>

        <SoutiensLogos locale={locale} />

        {/* Tagline */}
        <div className="footerv2__tagline">
          <FaMapMarkerAlt className="footerv2__tagline-icon" />
          <span>{t('footer_tagline')}</span>
        </div>

        {/* Social icons */}
        <div className="footerv2__social">
          <a href="#" className="footerv2__social-icon" aria-label="Facebook"><FaFacebookF /></a>
          <a href="#" className="footerv2__social-icon" aria-label="Twitter"><FaTwitter /></a>
          <a href="#" className="footerv2__social-icon" aria-label="Instagram"><FaInstagram /></a>
        </div>

        {/* Bottom bar */}
        <div className="footerv2__bottom">
          <p className="footerv2__copyright">{t('footer_copyright')}</p>
          <div className="footerv2__legal">
            <Link href={`/${locale}/association`}>{t('footer_legal_about')}</Link>
            <Link href={`/${locale}/mentions-legales`}>{t('footer_legal_mentions')}</Link>
            <Link href={`/${locale}/conditions-utilisation`}>{t('footer_legal_terms')}</Link>
            <Link href={`/${locale}/confidentialite`}>{t('footer_legal_privacy')}</Link>
            <Link href={`/${locale}/contact`}>{t('footer_legal_contact')}</Link>
          </div>
          <span className="footerv2__code-with">{t('footer_code_with')}</span>
        </div>
      </div>
    </footer>
  );
}