'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';
import { doctors } from '@/data/doctors';

export default function AboutPage() {
  const { t } = useLanguage();

  const milestones = [
    { year: '2020', key: 'about.milestone.2020' },
    { year: '2021', key: 'about.milestone.2021' },
    { year: '2022', key: 'about.milestone.2022' },
    { year: '2023', key: 'about.milestone.2023' },
    { year: '2024', key: 'about.milestone.2024' },
    { year: '2025', key: 'about.milestone.2025' },
    { year: '2026', key: 'about.milestone.2026' },
  ];

  const values = [
    { icon: '🛡️', title: 'about.values.safety', desc: 'about.values.safety.desc' },
    { icon: '🔬', title: 'about.values.innovation', desc: 'about.values.innovation.desc' },
    { icon: '💝', title: 'about.values.care', desc: 'about.values.care.desc' },
    { icon: '⭐', title: 'about.values.excellence', desc: 'about.values.excellence.desc' },
  ];

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase text-white">{t('about.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('about.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase text-white">
            <Link href="/" className="hover:text-gold transition text-white">{t('breadcrumb.home')}</Link>
            <span className="mx-2 text-white">/</span>
            <span className="text-white/60">{t('breadcrumb.about')}</span>
          </nav>
        </div>
      </section>

      <section className="py-16 md:py-20">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
            <div className="rounded-lg overflow-hidden">
              <Image src="/images/about/About-Carla.jpeg" alt="About Carla Skin Clinic" width={609} height={406} className="w-full h-auto object-cover rounded-lg" />
            </div>
            <div>
              <h1 className="font-cormorant text-3xl md:text-4xl font-bold text-espresso mb-6"><strong>{t('about.history.title')}</strong></h1>
              <div className="space-y-4 text-grey-dark">
                <p>{t('about.history.p1')}</p>
                <p>{t('about.history.p2')}</p>
                <p><strong>{t('about.history.beda')}</strong></p>
                <p>{t('about.history.beda.desc')}</p>
                <p>{t('about.history.beda.desc2')}</p>
                <p>{t('about.history.beda.desc3')}</p>
                <p><strong>{t('about.history.inovasi')}</strong></p>
                <p>{t('about.history.inovasi.desc')}</p>
                <p>{t('about.history.inovasi.desc2')}</p>
                <p>{t('about.history.welcome')}</p>
                <p className="italic font-semibold text-espresso">Carla Skin Clinic &ldquo;Age Differently, Age Gracefully&rdquo;.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="font-cormorant text-3xl md:text-4xl font-bold text-espresso mb-4">{t('about.doctors.title')}</h2>
            <div className="w-12 h-0.5 bg-gold mx-auto"></div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            {doctors.map((doctor) => (
              <Link key={doctor.id} href={`/doctors/${doctor.slug}`} className="group block">
                <div className="overflow-hidden rounded-lg bg-blush">
                  <Image src={doctor.photo} alt={doctor.name} width={400} height={400} className="w-full aspect-[4/5] object-contain bg-blush group-hover:scale-105 transition-transform duration-500" />
                </div>
                <div className="bg-white shadow-[0_0_5px_0_#d2953f] rounded-lg p-4 -mt-12 relative z-10 mx-2 text-center min-h-[180px] flex flex-col">
                  <h3 className="font-bold text-sm text-espresso mb-2 leading-tight">{doctor.name}</h3>
                  <p className="text-xs text-grey-dark mb-3 line-clamp-3 flex-1 leading-relaxed">{doctor.shortBio}</p>
                  <div className="mt-auto">
                    <span className="inline-block text-xs text-white bg-gold px-4 py-1.5 rounded font-semibold hover:bg-gold-dark transition group-hover:translate-x-0.5 transition-all duration-300">
                      {t('about.doctors.read-more')}
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-gold text-white py-12 md:py-16">
        <div className="container-custom text-center">
          <h2 className="font-cormorant text-2xl md:text-3xl font-bold mb-4">{t('about.cta.title')}</h2>
          <p className="mb-8 max-w-2xl mx-auto">{t('about.cta.desc')}</p>
          <Link href="/contact" className="px-8 py-3 bg-white text-espresso text-xs uppercase tracking-widest font-semibold rounded hover:bg-ivory transition">{t('about.cta.btn')}</Link>
        </div>
      </section>
      <Footer />
    </main>
  );
}
