'use client';

import { Button } from '@/components/ui/button';
import Pricing from '@/components/landing/Pricing';
import { useLanguage } from '@/lib/language-context';
import {
  ArrowRight,
  CalendarDays,
  CheckCircle2,
  MessageSquareMore,
  ShieldCheck,
  Sparkles,
  Stethoscope,
  Users,
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import Loyal from './assets/homepage/loyality.png';
import PatientManagement from './assets/homepage/patient-management.png';
import SpecialistSupport from './assets/homepage/specialist-support.png';

const capabilityCards = [
  {
    icon: CalendarDays,
    titleKey: 'home.patientManagement.features.calendar',
    description: 'Keep the day flowing with a schedule that is easy for staff and patients to understand.',
  },
  {
    icon: Stethoscope,
    titleKey: 'home.patientManagement.features.clinicalSheet',
    description: 'Centralize records, evolutions, and documents in one clinical workspace.',
  },
  {
    icon: MessageSquareMore,
    titleKey: 'home.loyalty.features.automate',
    description: 'Automate reminders and follow-up so patients stay engaged after every visit.',
  },
  {
    icon: ShieldCheck,
    titleKey: 'home.support.titleHighlight',
    description: 'A support team and clear onboarding path keep clinics moving with confidence.',
  },
];

const metrics = [
  { value: '+1,000', labelKey: 'home.stats.customers' },
  { value: '+5,000', labelKey: 'home.stats.users' },
  { value: '+100,000', labelKey: 'home.stats.appointments' },
  { value: '+10', labelKey: 'home.stats.countries' },
];

export default function Home() {
  const router = useRouter();
  const { t } = useLanguage();

  const supportPhone = '(809) 842-2595';
  const supportPhoneDigits = '18098422595';
  const socialLinks = {
    whatsapp: `https://wa.me/${supportPhoneDigits}`,
    facebook: 'https://www.facebook.com/medklinixrd',
    instagram: 'https://www.instagram.com/medklinix',
  };

  useEffect(() => {
    if (window.location.hash === '#pricing') {
      const element = document.getElementById('pricing');
      element?.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <main className="min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top,_rgba(45,170,225,0.18),_transparent_34%),linear-gradient(180deg,#f8fcff_0%,#ffffff_38%,#f7fbff_100%)]">
      <section className="relative overflow-hidden">
        <div className="absolute inset-x-0 top-0 -z-10 h-[38rem] bg-gradient-to-br from-cyan-500 via-sky-600 to-blue-700" />
        <div className="absolute left-0 top-24 -z-10 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
        <div className="absolute right-0 top-32 -z-10 h-96 w-96 rounded-full bg-yellow-300/20 blur-3xl" />

        <div className="mx-auto grid max-w-7xl gap-16 px-6 pb-20 pt-20 lg:grid-cols-[1.05fr_0.95fr] lg:px-8 lg:pb-28 lg:pt-24">
          <div className="flex flex-col justify-center text-white">
            <div className="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium backdrop-blur">
              <Sparkles className="h-4 w-4 text-yellow-300" />
              <span>Next.js + Tailwind CSS rebuild</span>
            </div>

            <h1 className="max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
              {t('home.hero.title')}
            </h1>

            <p className="mt-6 max-w-2xl text-lg leading-8 text-white/90 sm:text-xl">
              {t('home.hero.description')}
            </p>

            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
              <Button
                size="lg"
                onClick={() => router.push('/register')}
                className="rounded-full bg-yellow-400 px-8 text-base font-semibold text-slate-950 hover:bg-yellow-300"
              >
                {t('home.hero.discover')}
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => router.push('/login')}
                className="rounded-full border-white/30 bg-white/10 px-8 text-base font-semibold text-white backdrop-blur hover:bg-white/20 hover:text-white"
              >
                {t('auth.login')}
              </Button>
            </div>

            <div className="mt-12 grid grid-cols-1 gap-3 text-sm text-white/90 sm:grid-cols-3">
              <div className="rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur">
                <div className="font-semibold text-white">24/7</div>
                <div>Secure clinic operations</div>
              </div>
              <div className="rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur">
                <div className="font-semibold text-white">Bilingual</div>
                <div>Spanish and English support</div>
              </div>
              <div className="rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur">
                <div className="font-semibold text-white">Cloud-ready</div>
                <div>Built for modern teams</div>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="absolute inset-0 rounded-[2rem] bg-white/10 blur-2xl" />
            <div className="relative grid gap-4">
              <div className="overflow-hidden rounded-[2rem] border border-white/20 bg-white/95 p-3 shadow-2xl shadow-cyan-950/20">
                <Image
                  src={PatientManagement}
                  alt={t('home.altText.patientManagement')}
                  className="h-auto w-full rounded-[1.5rem] object-cover"
                  priority
                />
              </div>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="rounded-3xl border border-white/20 bg-slate-950/90 p-5 text-white shadow-xl shadow-cyan-950/25">
                  <div className="mb-3 inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-500/20">
                    <Users className="h-5 w-5 text-cyan-300" />
                  </div>
                  <h2 className="text-lg font-semibold">{t('home.loyalty.title')}</h2>
                  <p className="mt-2 text-sm leading-6 text-slate-300">{t('home.loyalty.description')}</p>
                </div>
                <div className="overflow-hidden rounded-3xl border border-white/20 bg-white/95 shadow-xl shadow-cyan-950/15">
                  <Image
                    src={SpecialistSupport}
                    alt={t('home.altText.specialistSupport')}
                    className="h-full w-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="features" className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
        <div className="grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
          <div className="rounded-[2rem] bg-white p-8 shadow-[0_30px_80px_-40px_rgba(15,23,42,0.3)] ring-1 ring-slate-200/70">
            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-600">Clinical workflow</p>
            <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
              {t('home.patientManagement.title')} <span className="text-cyan-600">{t('home.patientManagement.titleHighlight')}</span>
            </h2>
            <p className="mt-4 text-base leading-7 text-slate-600">{t('home.patientManagement.description')}</p>

            <div className="mt-8 space-y-4">
              {[t('home.patientManagement.features.calendar'), t('home.patientManagement.features.clinicalSheet'), t('home.patientManagement.features.prescriptions')].map((item) => (
                <div key={item} className="flex items-start gap-3 rounded-2xl bg-slate-50 px-4 py-4">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-cyan-600" />
                  <span className="text-sm font-medium text-slate-700">{item}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            {capabilityCards.map((card) => {
              const Icon = card.icon;
              return (
                <div key={card.titleKey} className="rounded-[1.75rem] bg-white p-6 shadow-[0_24px_60px_-36px_rgba(15,23,42,0.35)] ring-1 ring-slate-200/70">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-50 text-cyan-600">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="text-lg font-semibold text-slate-950">{t(card.titleKey)}</h3>
                  <p className="mt-2 text-sm leading-6 text-slate-600">{card.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-10 lg:px-8">
        <div className="grid gap-8 rounded-[2.25rem] bg-gradient-to-br from-cyan-50 via-white to-blue-50 p-8 ring-1 ring-cyan-100 lg:grid-cols-[0.9fr_1.1fr] lg:p-10">
          <div className="overflow-hidden rounded-[1.75rem] shadow-[0_24px_70px_-35px_rgba(14,116,144,0.5)]">
            <Image
              src={Loyal}
              alt={t('home.altText.loyalty')}
              className="h-full w-full object-cover"
            />
          </div>

          <div className="flex flex-col justify-center">
            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-600">Retention</p>
            <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
              {t('home.loyalty.title')} <span className="text-cyan-600">{t('home.loyalty.titleHighlight')}</span>
            </h2>
            <p className="mt-4 max-w-2xl text-base leading-7 text-slate-600">{t('home.loyalty.description')}</p>

            <div className="mt-8 space-y-4">
              {[t('home.loyalty.features.optimize'), t('home.loyalty.features.automate'), t('home.loyalty.features.surveys')].map((item) => (
                <div key={item} className="flex items-start gap-3">
                  <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-cyan-600 text-white">
                    <CheckCircle2 className="h-4 w-4" />
                  </div>
                  <span className="text-sm font-medium text-slate-700">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="about-us" className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-600">Results</p>
          <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-950 sm:text-5xl">
            {t('home.stats.title')} <span className="text-cyan-600">{t('home.stats.titleHighlight')}</span> {t('home.stats.titleEnd')}
          </h2>
          <p className="mt-4 text-base leading-7 text-slate-600 sm:text-lg">{t('home.stats.description')}</p>
        </div>

        <div className="mt-12 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {metrics.map((metric) => (
            <div key={metric.labelKey} className="rounded-[1.75rem] bg-white p-8 text-center shadow-[0_22px_65px_-38px_rgba(15,23,42,0.38)] ring-1 ring-slate-200/70">
              <div className="text-4xl font-bold tracking-tight text-cyan-600">{metric.value}</div>
              <div className="mt-3 text-sm font-medium text-slate-600">{t(metric.labelKey)}</div>
            </div>
          ))}
        </div>
      </section>

      <section id="pricing">
        <Pricing />
      </section>

      <section id="contact" className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
        <div className="overflow-hidden rounded-[2.25rem] bg-slate-950 px-8 py-12 text-white shadow-[0_30px_80px_-40px_rgba(15,23,42,0.7)] lg:px-12 lg:py-16">
          <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-300">Support</p>
              <h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
                {t('home.support.title')} <span className="text-cyan-300">{t('home.support.titleHighlight')}</span>
              </h2>
              <p className="mt-4 max-w-2xl text-base leading-7 text-slate-300 sm:text-lg">
                {t('home.support.description')}
              </p>

              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <Button
                  size="lg"
                  onClick={() => router.push('/register')}
                  className="rounded-full bg-yellow-400 px-8 text-base font-semibold text-slate-950 hover:bg-yellow-300"
                >
                  {t('home.support.requestDemo')}
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  onClick={() => router.push('/support-center')}
                  className="rounded-full border-white/20 bg-white/5 px-8 text-base font-semibold text-white hover:bg-white/10 hover:text-white"
                >
                  {t('home.footer.company.support')}
                </Button>
              </div>
            </div>

            <div className="rounded-[1.75rem] bg-white/5 p-6 ring-1 ring-white/10">
              <div className="grid gap-4">
                <div className="rounded-2xl bg-white/10 px-5 py-4">
                  <div className="text-sm text-cyan-200">Email</div>
                  <div className="mt-1 text-lg font-semibold">info.medklinix@gmail.com</div>
                </div>
                <div className="rounded-2xl bg-white/10 px-5 py-4">
                  <div className="text-sm text-cyan-200">Phone</div>
                  <div className="mt-1 text-lg font-semibold">{supportPhone}</div>
                </div>
                <div className="rounded-2xl bg-white/10 px-5 py-4">
                  <div className="text-sm text-cyan-200">WhatsApp</div>
                  <a href={socialLinks.whatsapp} target="_blank" rel="noreferrer" className="mt-1 inline-flex items-center gap-2 text-lg font-semibold text-white hover:text-cyan-200">
                    Chat with us
                    <ArrowRight className="h-4 w-4" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-200 bg-white/80">
        <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
          <div className="grid gap-10 md:grid-cols-4">
            <div className="md:col-span-1">
              <div className="flex items-center gap-3">
                <div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl bg-slate-950">
                  <Image
                    src="/assets/logo-v4-fixed.png"
                    alt="Medklinix"
                    width={56}
                    height={56}
                    className="h-full w-full object-cover"
                  />
                </div>
                <div>
                  <div className="text-lg font-bold text-slate-950">Medklinix</div>
                  <div className="text-sm text-slate-500">Healthcare SaaS</div>
                </div>
              </div>
              <p className="mt-4 text-sm leading-6 text-slate-600">{t('home.footer.description')}</p>
            </div>

            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.25em] text-slate-950">{t('home.footer.product.title')}</h3>
              <ul className="mt-4 space-y-3 text-sm text-slate-600">
                <li><a href="#features" className="transition-colors hover:text-cyan-600">{t('home.footer.product.features')}</a></li>
                <li><a href="#pricing" className="transition-colors hover:text-cyan-600">{t('home.footer.product.pricing')}</a></li>
                <li><Link href="/security" className="transition-colors hover:text-cyan-600">{t('home.footer.product.security')}</Link></li>
              </ul>
            </div>

            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.25em] text-slate-950">{t('home.footer.company.title')}</h3>
              <ul className="mt-4 space-y-3 text-sm text-slate-600">
                <li><a href="#about-us" className="transition-colors hover:text-cyan-600">{t('home.footer.company.about')}</a></li>
                <li><Link href="/blog" className="transition-colors hover:text-cyan-600">{t('home.footer.company.blog')}</Link></li>
                <li><a href="#contact" className="transition-colors hover:text-cyan-600">{t('home.footer.company.contact')}</a></li>
                <li><Link href="/support-center" className="transition-colors hover:text-cyan-600">{t('home.footer.company.support')}</Link></li>
              </ul>
            </div>

            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.25em] text-slate-950">{t('home.footer.legal.title')}</h3>
              <ul className="mt-4 space-y-3 text-sm text-slate-600">
                <li><Link href="/privacy-policy" className="transition-colors hover:text-cyan-600">{t('home.footer.legal.privacy')}</Link></li>
                <li><Link href="/terms-of-service" className="transition-colors hover:text-cyan-600">{t('home.footer.legal.terms')}</Link></li>
                <li><Link href="/cookie-policy" className="transition-colors hover:text-cyan-600">{t('home.footer.legal.cookies')}</Link></li>
              </ul>
            </div>
          </div>

          <div className="mt-10 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
            <p>{t('home.footer.copyright')}</p>
            <div className="flex items-center gap-5">
              <a href={socialLinks.whatsapp} target="_blank" rel="noreferrer" className="transition-colors hover:text-cyan-600">
                {t('home.footer.socialMedia.whatsapp')}
              </a>
              <a href={socialLinks.facebook} target="_blank" rel="noreferrer" className="transition-colors hover:text-cyan-600">
                {t('home.footer.socialMedia.facebook')}
              </a>
              <a href={socialLinks.instagram} target="_blank" rel="noreferrer" className="transition-colors hover:text-cyan-600">
                {t('home.footer.socialMedia.instagram')}
              </a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  );
}
