'use client';

import { useState } from 'react';
import { ArrowRight, Check } from 'lucide-react';
import { Container } from '@/components/ui/Container';
import { Logo } from '@/components/ui/Logo';
import { useMessages } from '@/i18n/client';
import { PAYMENTS_ENABLED } from '@/lib/features';


const SOCIALS: { label: string; href: string; path: React.ReactNode }[] = [
  {
    label: 'Instagram',
    href: 'https://instagram.com',
    path: (
      <g fill="none" stroke="currentColor" strokeWidth="1.8">
        <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="0.6" fill="currentColor" />
      </g>
    ),
  },
  {
    label: 'TikTok',
    href: 'https://tiktok.com',
    path: (
      <path
        fill="currentColor"
        d="M19.6 6.7a4.8 4.8 0 0 1-3.8-4.2V2h-3.4v13.7a2.9 2.9 0 1 1-2.9-2.9c.3 0 .6 0 .9.1V9.4a6.3 6.3 0 1 0 5.4 6.3V8.8a8.2 8.2 0 0 0 5 1.6V7a4.8 4.8 0 0 1-1.2-.3z"
      />
    ),
  },
  {
    label: 'YouTube',
    href: 'https://youtube.com',
    path: (
      <path
        fill="currentColor"
        d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"
      />
    ),
  },
  {
    label: 'Discord',
    href: 'https://discord.com',
    path: (
      <path
        fill="currentColor"
        d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.7.1 18.2a19.9 19.9 0 0 0 6 3l1.3-2a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2a19.8 19.8 0 0 0 6-3c.5-5.2-.9-9.8-3.6-13.8zM8 15.4c-1.2 0-2.2-1.1-2.2-2.4S6.8 10.6 8 10.6s2.2 1.1 2.2 2.4-1 2.4-2.2 2.4zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4z"
      />
    ),
  },
];

export function Footer() {
  const t = useMessages().layout;
  const f = t.footer;
  const COLUMNS = [
    {
      title: f.product,
      links: [
        { label: 'Aura + Chakra', href: '/#features' },
        { label: 'BaZi', href: '/#features' },
        { label: f.numerology, href: '/#features' },
        ...(PAYMENTS_ENABLED ? [{ label: t.nav.pricing, href: '/#pricing' }] : []),
      ],
    },
    {
      title: f.company,
      links: [
        { label: t.nav.about, href: '/#about' },
        { label: f.blog, href: '#' },
        { label: f.privacy, href: '#' },
        { label: f.terms, href: '#' },
      ],
    },
  ];
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(false);

  return (
    <footer id="about" className="border-t border-white/[0.06] bg-night-950 text-white">
      <Container className="grid gap-12 pt-16 pb-14 md:grid-cols-12 md:gap-8">
        <div className="md:col-span-4">
          <Logo />
          <p className="mt-3 text-[13px] text-white/50">{f.tagline}</p>
        </div>

        {COLUMNS.map((col) => (
          <nav key={col.title} aria-label={col.title} className="md:col-span-2">
            <h3 className="text-[13px] font-semibold">{col.title}</h3>
            <ul className="mt-4 space-y-3">
              {col.links.map((l) => (
                <li key={l.label}>
                  <a href={l.href} className="text-[13px] text-white/50 transition-colors hover:text-white">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        ))}

        <div className="md:col-span-4">
          <h3 className="text-[13px] font-semibold">{f.stayConnected}</h3>
          <p className="mt-4 text-[13px] text-white/50">{f.stayConnectedText}</p>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (!email) return;
              setSubscribed(true);
              setEmail('');
            }}
            className="mt-5 flex h-12 max-w-[340px] items-center rounded-full border border-white/15 bg-white/[0.03] pr-1.5 pl-5 transition-colors focus-within:border-white/40"
          >
            <label htmlFor="footer-email" className="sr-only">
              Email
            </label>
            <input
              id="footer-email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={f.emailPlaceholder}
              className="min-w-0 flex-1 bg-transparent text-[13px] text-white placeholder:text-white/40 focus:outline-none"
            />
            <button
              type="submit"
              aria-label={f.subscribe}
              className="inline-flex size-9 shrink-0 items-center justify-center rounded-full border border-white/25 transition-colors hover:bg-white hover:text-ink"
            >
              {subscribed ? <Check className="size-4" /> : <ArrowRight className="size-4" />}
            </button>
          </form>
          <p aria-live="polite" className="mt-2 h-4 text-xs text-white/50">
            {subscribed && f.subscribed}
          </p>

          <ul className="mt-3 flex items-center gap-5">
            {SOCIALS.map((s) => (
              <li key={s.label}>
                <a
                  href={s.href}
                  target="_blank"
                  rel="noreferrer"
                  aria-label={s.label}
                  className="block text-white/60 transition-colors hover:text-white"
                >
                  <svg viewBox="0 0 24 24" className="size-[18px]" aria-hidden>
                    {s.path}
                  </svg>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </Container>

      <div className="border-t border-white/[0.06]">
        <Container className="flex flex-col gap-2 py-6 text-[12px] text-white/40 sm:flex-row sm:items-center sm:justify-between">
          <p>{f.rights}</p>
          <p>{f.slogan}</p>
        </Container>
      </div>
    </footer>
  );
}