import { useTranslations } from 'next-intl';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import Image from 'next/image';

export default function AboutPage() {
  const t = useTranslations('About');

  return (
    <main className="min-h-screen bg-bone">
      <Navbar />

      {/* Hero Section */}
      <section className="pt-40 pb-20 px-6 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
            Salmakis Villas
          </span>
          <h1 className="text-5xl md:text-7xl font-serif text-aegean-dark mb-8">
            {t('title')}
          </h1>
          <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto" />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8 text-aegean-dark/80 text-lg leading-relaxed font-sans">
            <p className="font-bold text-aegean-dark">
              {t('paragraph1')}
            </p>
            <p>
              {t('paragraph2')}
            </p>
            <p>
              {t('paragraph3')}
            </p>
            <p className="bg-sand/10 p-6 rounded-2xl border border-sand/30 italic text-aegean-dark">
              {t('paragraph4')}
            </p>
          </div>
          
          <div className="relative aspect-square rounded-3xl overflow-hidden shadow-2xl">
            <Image
              src="https://images.unsplash.com/photo-1542718610-a1d656d1884c?q=80&w=2070&auto=format&fit=crop"
              alt="Dereköy Villas"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </section>

      {/* Location Details Section */}
      <section className="py-20 bg-aegean-dark text-bone">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
          <div className="space-y-4">
            <div className="text-4xl font-serif text-sand">01</div>
            <h3 className="text-xl font-serif">{t('location_title')}</h3>
            <p className="text-sm opacity-60 leading-relaxed font-sans">
              Ortakent, Turgutreis ve Gümüşlük üçgeninin tam merkezinde huzurlu bir konum.
            </p>
          </div>
          <div className="space-y-4">
            <div className="text-4xl font-serif text-sand">02</div>
            <h3 className="text-xl font-serif">{t('tradition_title')}</h3>
            <p className="text-sm opacity-60 leading-relaxed font-sans">
              Geleneksel Bodrum mimarisi ile modern konforun buluştuğu taş yapılar.
            </p>
          </div>
          <div className="space-y-4">
            <div className="text-4xl font-serif text-sand">03</div>
            <h3 className="text-xl font-serif">{t('service_title')}</h3>
            <p className="text-sm opacity-60 leading-relaxed font-sans">
              Aynı arazide ikamet eden villa görevlisi ile 24 saat kesintisiz hizmet.
            </p>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}