/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/SocialFollow.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Lucide icons — lightweight SVG icon components
import { Facebook, Instagram, MessageCircle } from 'lucide-react';
// Import external package or local module
import {
  // Property or array item — trailing comma allowed in TypeScript
  FACEBOOK_URL,
  // Property or array item — trailing comma allowed in TypeScript
  INSTAGRAM_URL,
  // Property or array item — trailing comma allowed in TypeScript
  WHATSAPP_URL,
// Closing brace — end of block (function, if, object, JSX)
} from '@/lib/constants';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// Line 11: const socialLinks = [
const socialLinks = [
  // Line 12: {
  {
    // Property or array item — trailing comma allowed in TypeScript
    key: 'facebook',
    // Property or array item — trailing comma allowed in TypeScript
    href: FACEBOOK_URL,
    // Property or array item — trailing comma allowed in TypeScript
    icon: Facebook,
    // Line 16: className:
    className:
      // Property or array item — trailing comma allowed in TypeScript
      'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
  // Closing brace — end of block (function, if, object, JSX)
  },
  // Line 19: {
  {
    // Property or array item — trailing comma allowed in TypeScript
    key: 'instagram',
    // Property or array item — trailing comma allowed in TypeScript
    href: INSTAGRAM_URL,
    // Property or array item — trailing comma allowed in TypeScript
    icon: Instagram,
    // Line 23: className:
    className:
      // Property or array item — trailing comma allowed in TypeScript
      'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
  // Closing brace — end of block (function, if, object, JSX)
  },
  // Line 26: {
  {
    // Property or array item — trailing comma allowed in TypeScript
    key: 'whatsapp',
    // Property or array item — trailing comma allowed in TypeScript
    href: WHATSAPP_URL,
    // Property or array item — trailing comma allowed in TypeScript
    icon: MessageCircle,
    // Line 30: className:
    className:
      // Property or array item — trailing comma allowed in TypeScript
      'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
  // Closing brace — end of block (function, if, object, JSX)
  },
// End of array literal
] as const;
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function SocialFollow() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <section className="py-20">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
          // JSX element — HTML-like tag becomes React component in browser
          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
            // Line 43: {t('social.label')}
            {t('social.label')}
          // JSX element — HTML-like tag becomes React component in browser
          </span>
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-3">{t('social.title')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            // Array.map — transform each item (often render a list of components)
            {socialLinks.map(({ key, href, icon: Icon, className }) => (
              // JSX element — HTML-like tag becomes React component in browser
              <a
                // Line 51: key={key}
                key={key}
                // Link target URL — internal route or external https://
                href={href}
                // Line 53: target="_blank"
                target="_blank"
                // Line 54: rel="noopener noreferrer"
                rel="noopener noreferrer"
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
              // Line 56: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <Icon className="h-5 w-5" />
                // Line 58: {t(`social.${key}`)}
                {t(`social.${key}`)}
              // JSX element — HTML-like tag becomes React component in browser
              </a>
            // Line 60: ))}
            ))}
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </section>
  // Line 65: );
  );
// Closing brace — end of block (function, if, object, JSX)
}