'use client';

import { use } from 'react';
import { useTranslations } from 'next-intl';

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

export default function ContactPage({ params }: PageProps) {
  const { locale: _locale } = use(params);
  const t = useTranslations('Contact');
  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="grid grid-cols-1 md:grid-cols-12 gap-24">
          {/* Editorial Column */}
          <div className="md:col-span-12 lg:col-span-5">
            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase mb-4 block">{t('reservation_concierge')}</span>
            <h1 className="text-primary font-headline text-6xl md:text-8xl mb-8 leading-tight">
              {t('title1')} <br />
              <span className="text-secondary italic">{t('title2')}</span>
            </h1>
            <div className="h-px w-24 bg-secondary mb-12"></div>
            
            <div className="space-y-16 mt-24">
              <div>
                <h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('headquarters')}</h3>
                <p className="font-body text-xl text-primary font-light leading-relaxed">
                  {t('hq_address1')} <br />
                  {t('hq_address2')}
                </p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div>
                  <h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('direct_line')}</h3>
                  <p className="font-body text-xl text-primary font-light">+90 (252) 316 12 34</p>
                </div>
                <div>
                  <h3 className="font-label text-xs tracking-[0.2em] text-secondary mb-4 uppercase">{t('digital_mail')}</h3>
                  <p className="font-body text-xl text-primary font-light">atelier@salmakis.com</p>
                </div>
              </div>

              <div className="pt-8">
                <button className="flex items-center gap-4 bg-[#0a0a0a] text-white px-12 py-5 hover:bg-secondary transition-all">
                   <span className="font-headline text-xs tracking-[0.3em] uppercase">{t('whatsapp_btn')}</span>
                </button>
              </div>
            </div>
          </div>

          {/* Minimalist Form Column */}
          <div className="md:col-span-12 lg:col-span-7 bg-white p-12 md:p-20">
            <h2 className="font-headline text-3xl mb-12 text-primary uppercase tracking-widest border-b border-outline-variant/10 pb-6">{t('form_title')}</h2>
            <form className="space-y-12">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div className="flex flex-col group">
                  <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('first_name_label')}</label>
                  <input type="text" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('first_name_placeholder')} />
                </div>
                <div className="flex flex-col group">
                  <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('last_name_label')}</label>
                  <input type="text" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('last_name_placeholder')} />
                </div>
              </div>

              <div className="flex flex-col group">
                <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('email_label')}</label>
                <input type="email" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" placeholder={t('email_placeholder')} />
              </div>

              <div className="flex flex-col group">
                <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('yacht_label')}</label>
                <select className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light appearance-none">
                  <option>M/S MEIRA</option>
                  <option>M/Y PRINCESS MELDA</option>
                  <option>QUEEN OF SALMAKIS</option>
                  <option>DOLCE MARE</option>
                  <option>SUNWORLD-8</option>
                </select>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div className="flex flex-col group">
                  <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('charter_start')}</label>
                  <input type="date" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" />
                </div>
                <div className="flex flex-col group">
                  <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('charter_end')}</label>
                  <input type="date" className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light" />
                </div>
              </div>

              <div className="flex flex-col pt-4 group">
                <label className="font-label text-[10px] tracking-[0.2em] text-secondary uppercase mb-2 group-focus-within:text-primary transition-colors">{t('requirements_label')}</label>
                <textarea rows={4} className="border-b border-outline-variant py-3 focus:border-secondary transition-all outline-none bg-transparent font-body text-lg font-light resize-none" placeholder={t('requirements_placeholder')}></textarea>
              </div>

              <button className="w-full bg-secondary text-white py-6 font-headline tracking-[0.4em] uppercase hover:bg-primary transition-all">{t('submit_btn')}</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}