'use client';

import { use } from "react";
import { yachts } from "../../data/yachts";
import { Link } from "@/i18n/routing";
import { useTranslations, useLocale } from "next-intl";
import { CldImage } from "next-cloudinary";

interface PageProps {
  params: Promise<{ locale: string }>;
}

export default function FleetPage({ params }: PageProps) {
  const { locale: _locale } = use(params);
  const t = useTranslations('FleetList');
  const locale = useLocale();
  return (
    <div className="pt-40 pb-24 px-6 md:px-24 min-h-screen bg-surface">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row items-end gap-16 mb-24">
          <div className="w-full md:w-1/2">
            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4 block">{t('collection')}</span>
            <h1 className="font-headline text-5xl md:text-7xl text-primary leading-tight mb-8">
              {t('title1')} <br />
              <span className="text-secondary italic">{t('title2')}</span>
            </h1>
            <div className="h-px w-24 bg-secondary mb-8"></div>
            <p className="font-body text-on-surface-variant text-lg leading-relaxed font-light">
              {t('description')}
            </p>
          </div>
          <div className="w-full md:w-1/2 flex justify-end">
            <div className="text-right">
              <span className="font-label text-6xl md:text-8xl text-outline-variant/30 font-bold leading-none uppercase">{t('bg_text')}</span>
            </div>
          </div>
        </div>

        <div className="space-y-40">
          {yachts.map((yacht, index) => (
            <div key={yacht.slug} className={`grid grid-cols-1 md:grid-cols-12 gap-0 group ${index % 2 !== 0 ? 'md:flex-row-reverse' : ''}`}>
              <div className={`md:col-span-7 relative h-[500px] md:h-[700px] overflow-hidden ${index % 2 !== 0 ? 'md:order-2' : ''}`}>
                <CldImage
                  src={yacht.heroImage}
                  alt={yacht.name}
                  fill
                  crop="fill"
                  gravity="auto"
                  className="w-full h-full object-cover transition-all duration-1000 scale-100 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-primary/20 group-hover:bg-transparent transition-colors duration-700" />
              </div>
              <div className={`md:col-span-5 flex flex-col justify-center py-12 md:py-0 ${index % 2 !== 0 ? 'md:order-1 md:pr-20 md:text-right md:items-end' : 'md:pl-20'}`}>
                <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4">{t('masterpiece')}{index + 1}</span>
                <h3 className="font-headline text-4xl md:text-5xl text-primary mb-8 tracking-wide uppercase">{yacht.name}</h3>
                <p className="text-on-surface-variant font-light leading-relaxed mb-12 max-w-sm">
                  {locale === 'tr' && yacht.description_tr ? yacht.description_tr : yacht.description}
                </p>
                <div className="grid grid-cols-3 border-t border-outline-variant/20 pt-8 w-full text-left">
                  <div className="flex flex-col gap-1">
                    <span className="material-symbols-outlined text-secondary text-xl">straighten</span>
                    <span className="font-label text-[10px] tracking-widest text-outline uppercase mt-2">{t('length')}</span>
                    <span className="font-body text-sm text-primary font-semibold">{yacht.length}</span>
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className="material-symbols-outlined text-secondary text-xl">groups</span>
                    <span className="font-label text-[10px] tracking-widest text-outline uppercase mt-2">{t('guests')}</span>
                    <span className="font-body text-sm text-primary font-semibold">{yacht.guests} {t('guests_suffix')}</span>
                  </div>
                  <div className="flex flex-col gap-1">
                    <Link href={`/fleet/${yacht.slug}`} className="mt-auto">
                      <span className="font-label text-[10px] tracking-widest text-secondary border-b border-secondary pb-1 uppercase hover:opacity-70 smooth-transition">{t('discover')}</span>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}