'use client';

import Link from 'next/link';
import { ShieldCheck, Leaf, Award, Truck, Phone, Mail, MapPin } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import {
  SITE_ADDRESS,
  SITE_EMAIL,
  SITE_PHONE_DISPLAY,
  SITE_HOURS,
} from '@/lib/constants';

export default function AboutPage() {
  const { t } = useTranslation();
  const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`;

  return (
    <div>
      <div className="bg-gradient-to-br from-brand-900 to-brand-950 px-4 py-20 text-white sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <h1 className="mb-4 font-display text-4xl font-bold">
            {t('about.title', { name: t('site.name') })}
          </h1>
          <p className="text-lg text-brand-100">{t('about.subtitle')}</p>
        </div>
      </div>

      <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
        <section className="mb-16">
          <h2 className="section-heading mb-4">{t('about.ourStory')}</h2>
          <p className="mb-4 leading-relaxed text-gray-600">
            {t('about.storyP1', { name: t('site.name') })}
          </p>
          <p className="leading-relaxed text-gray-600">{t('about.storyP2')}</p>
        </section>

        <section id="halal" className="mb-16">
          <div className="mb-6 flex items-center gap-3">
            <ShieldCheck className="h-8 w-8 text-brand-700" />
            <h2 className="section-heading">{t('about.halalTitle')}</h2>
          </div>
          <p className="leading-relaxed text-gray-600">
            {t('about.halalDesc', { name: t('site.name') })}
          </p>
        </section>

        <section className="mb-16">
          <div className="grid gap-6 sm:grid-cols-3">
            {[
              { icon: Leaf, title: t('about.freshDaily'), desc: t('about.freshDailyDesc') },
              {
                icon: Award,
                title: t('about.premiumQuality'),
                desc: t('about.premiumQualityDesc'),
              },
              {
                icon: Truck,
                title: t('about.fastDelivery'),
                desc: t('about.fastDeliveryDesc'),
              },
            ].map((item) => (
              <div key={item.title} className="card-premium p-6 text-center">
                <item.icon className="mx-auto mb-3 h-8 w-8 text-brand-700" />
                <h3 className="mb-1 font-semibold text-brand-900">{item.title}</h3>
                <p className="text-sm text-gray-500">{item.desc}</p>
              </div>
            ))}
          </div>
        </section>

        <section id="delivery" className="mb-16">
          <h2 className="section-heading mb-4">{t('about.deliveryTitle')}</h2>
          <div className="space-y-3 text-gray-600">
            <p>{t('about.delivery1')}</p>
            <p>{t('about.delivery2')}</p>
            <p>{t('about.delivery3')}</p>
            <p>{t('about.delivery4')}</p>
          </div>
        </section>

        <section id="contact" className="card-premium mb-16 p-8">
          <h2 className="section-heading mb-6">{t('about.contactTitle')}</h2>
          <div className="space-y-4">
            <div className="flex items-center gap-3 text-gray-600">
              <Phone className="h-5 w-5 text-brand-700" />
              <a href={telHref} className="hover:text-brand-800">
                {SITE_PHONE_DISPLAY}
              </a>
            </div>
            <div className="flex items-center gap-3 text-gray-600">
              <Mail className="h-5 w-5 text-brand-700" />
              <a href={`mailto:${SITE_EMAIL}`} className="hover:text-brand-800">
                {SITE_EMAIL}
              </a>
            </div>
            <div className="flex items-start gap-3 text-gray-600">
              <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-brand-700" />
              <span>
                {SITE_ADDRESS}
                <br />
                {t('footer.hours', { hours: SITE_HOURS })}
              </span>
            </div>
          </div>
          <div className="mt-6">
            <Link
              href="/shop"
              className="text-sm font-semibold text-brand-700 hover:text-brand-900"
            >
              {t('cta.button')} →
            </Link>
          </div>
        </section>

        <section id="privacy" className="mb-16">
          <h2 className="section-heading mb-4">{t('about.privacyTitle')}</h2>
          <p className="leading-relaxed text-gray-600">{t('about.privacyText')}</p>
        </section>

        <section id="terms" className="mb-8">
          <h2 className="section-heading mb-4">{t('about.termsTitle')}</h2>
          <p className="leading-relaxed text-gray-600">{t('about.termsText')}</p>
        </section>
      </div>
    </div>
  );
}