'use client';

import { Phone, MapPin, Clock, MessageCircle, Facebook, Instagram } from 'lucide-react';
import Button from '@/components/ui/Button';
import {
  SITE_ADDRESS,
  SITE_PHONE_DISPLAY,
  SITE_HOURS,
  WHATSAPP_URL,
  FACEBOOK_URL,
  INSTAGRAM_URL,
} from '@/lib/constants';
import { useTranslation } from '@/hooks/useTranslation';

export default function ContactPreview() {
  const { t } = useTranslation();
  const telHref = `tel:+46725855050`;

  return (
    <section className="relative overflow-hidden rounded-t-[2rem] bg-brand-950 pb-16 pt-14 text-white sm:rounded-t-[2.5rem] sm:pb-20 sm:pt-16">
      <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-gold-500/60 to-transparent" />
      <div className="pointer-events-none absolute -right-24 top-20 h-64 w-64 rounded-full bg-gold-500/5 blur-3xl" />
      <div className="pointer-events-none absolute -left-24 bottom-10 h-48 w-48 rounded-full bg-brand-700/30 blur-3xl" />

      <div className="relative mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
          {t('contact.label')}
        </span>
        <h2 className="mb-6 font-display text-3xl font-bold sm:mb-8 md:text-4xl">
          {t('contact.title')}
        </h2>

        <ul className="mb-8 space-y-5">
          <li className="flex gap-4">
            <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                {t('contact.addressLabel')}
              </p>
              <p className="text-brand-100">{SITE_ADDRESS}</p>
            </div>
          </li>
          <li className="flex gap-4">
            <Phone className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                {t('contact.phoneLabel')}
              </p>
              <a href={telHref} className="text-brand-100 hover:text-white">
                {SITE_PHONE_DISPLAY}
              </a>
            </div>
          </li>
          <li className="flex gap-4">
            <Clock className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                {t('contact.hoursLabel')}
              </p>
              <p className="text-brand-100">
                {t('contact.hoursValue', { hours: SITE_HOURS })}
              </p>
            </div>
          </li>
        </ul>

        <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
          <Button
            href="/about#contact"
            variant="secondary"
            size="lg"
            className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
          >
            {t('contact.learnMore')}
          </Button>
          <Button href={WHATSAPP_URL} external variant="gold" size="lg" className="w-full sm:w-auto">
            <MessageCircle className="h-4 w-4" />
            {t('contact.writeUs')}
          </Button>
          <Button
            href={telHref}
            variant="secondary"
            size="lg"
            className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
          >
            <Phone className="h-4 w-4" />
            {t('contact.callUs')}
          </Button>
        </div>

        <div className="mt-8 border-t border-white/10 pt-6">
          <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-gold-400">
            {t('social.label')}
          </p>
          <div className="flex flex-wrap gap-3">
            {[
              { href: FACEBOOK_URL, icon: Facebook, label: t('social.facebook') },
              { href: INSTAGRAM_URL, icon: Instagram, label: t('social.instagram') },
              { href: WHATSAPP_URL, icon: MessageCircle, label: t('social.whatsapp') },
            ].map(({ href, icon: Icon, label }) => (
              <a
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-medium text-brand-100 transition-colors hover:border-gold-500/40 hover:bg-white/10 hover:text-white"
              >
                <Icon className="h-4 w-4 text-gold-400" />
                {label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}