'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';

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

  const brands = [
    { name: 'Skeyndor', logo: '/images/brands/logo_skeyndor.png' },
    { name: 'Mesoestetic', logo: '/images/brands/mesoestetic-logopng.png' },
  ];

  const stores = [
    {
      name: 'Carla Skin Clinic Taman Harapan Indah (Acne Expert Jakarta Barat)',
      address: 'Komplek Taman Harapan Indah Blok GG No.3-4, Jelambar Baru, Kec. Grogol Petamburan',
      city: 'Jakarta Barat',
      phone: '021-1234-5678',
      whatsapp: '0812-3456-7890',
      maps: 'https://maps.google.com/?q=-6.1452654,106.7878478',
    },
    {
      name: 'Carla Skin Clinic - Mall Taman Anggrek (Acne Expert Jakarta Barat)',
      address: 'Mall Taman Anggrek 2nd Floor - F11 North Wing, Jl. Letjen S. Parman Kav.21, Slipi',
      city: 'Jakarta Barat',
      phone: '021-1234-5679',
      whatsapp: '0812-3456-7891',
      maps: 'https://maps.google.com/?q=-6.1785831,106.7922128',
    },
    {
      name: 'Carla Skin Clinic Gading Serpong (Acne Expert Tangerang Selatan)',
      address: 'Jl. Scientia Boulevard Barat No.T-15, Medang, Kec. Pagedangan',
      city: 'Tangerang Selatan',
      phone: '021-1234-5680',
      whatsapp: '0812-3456-7892',
      maps: 'https://maps.google.com/?q=-6.2603134,106.6077499',
    },
    {
      name: 'Carla Skin Clinic - Pluit Village (Acne Expert Jakarta Utara)',
      address: 'Jl. Pluit Indah No.72, Ruko 73, Pluit, Kecamatan Penjaringan',
      city: 'Jakarta Utara',
      phone: '021-1234-5681',
      whatsapp: '0812-3456-7893',
      maps: 'https://maps.google.com/?q=-6.1159611,106.7883616',
    },
  ];

  const marketplaces = [
    {
      name: 'Tokopedia',
      url: 'https://www.tokopedia.com/carlaskinclinic',
      bgColor: '#4AB549',
    },
    {
      name: 'Shopee',
      url: 'https://shopee.co.id/carlaskinclinic',
      bgColor: '#EE4D2D',
    },
  ];

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

      {/* Page Hero & Breadcrumb */}
      <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('product.page.title')}
          </h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">
            {t('product.page.subtitle')}
          </p>
          <nav className="mt-4 text-xs tracking-widest uppercase text-white">
            <Link href="/" className="hover:text-gold transition text-white">
              Home
            </Link>
            <span className="mx-2 text-white">/</span>
            <span className="text-white/60">{t('product.breadcrumb')}</span>
          </nav>
        </div>
      </section>

      {/* Brands Section */}
      <section className="py-16 md:py-20">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="font-cormorant text-3xl md:text-5xl text-espresso font-bold mb-4">
              {t('product.brands.title')}
            </h2>
            <div className="w-12 h-0.5 bg-gold mx-auto mb-4"></div>
            <p className="text-grey-dark max-w-2xl mx-auto">
              {t('product.brands.subtitle')}
            </p>
          </div>

          <div className="flex justify-center gap-6">
            {brands.map((brand, index) => (
              <div
                key={index}
                className="card bg-white p-6 flex flex-col items-center justify-center hover:shadow-lg transition-all duration-300 group w-64"
              >
                <div className="w-full aspect-square relative mb-3 flex items-center justify-center bg-ivory rounded-lg p-4">
                  <Image
                    src={brand.logo}
                    alt={brand.name}
                    width={100}
                    height={100}
                    className="object-contain group-hover:scale-110 transition-transform duration-300"
                  />
                </div>
                <p className="text-sm font-semibold text-espresso text-center uppercase tracking-wider">
                  {brand.name}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Available At Section */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="font-cormorant text-3xl md:text-5xl text-espresso font-bold mb-4">
              {t('product.available.title')}
            </h2>
            <div className="w-12 h-0.5 bg-gold mx-auto mb-4"></div>
            <p className="text-grey-dark max-w-2xl mx-auto">
              {t('product.available.subtitle')}
            </p>
          </div>

          {/* Store Cards - 4 columns to match 4 outlets */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {stores.map((store, index) => (
              <div
                key={index}
                className="card bg-ivory p-6 hover:shadow-lg transition-all duration-300"
              >
                <div className="mb-4 flex justify-center">
                  <Image src="/images/Logo-Carla.png" alt="Carla Skin Clinic" width={120} height={40} className="h-8 w-auto object-contain" />
                </div>
                <h3 className="font-cormorant text-xl font-semibold text-espresso mb-2">
                  {store.name}
                </h3>
                <p className="text-sm text-grey-dark mb-1">
                  📍 {store.address}
                </p>
                <p className="text-xs text-gold font-medium mb-4">
                  {store.city}
                </p>
                <p className="text-sm text-grey-dark mb-4">
                  📞 {store.phone}
                </p>
                <div className="flex gap-2 mt-auto">
                  <a
                    href={`https://wa.me/62${store.whatsapp.replace(/[^0-9]/g, '')}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-1 px-4 py-2 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300 text-center"
                  >
                    {t('product.available.whatsapp')}
                  </a>
                  <a
                    href={store.maps}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-1 px-4 py-2 border border-gold text-gold text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold hover:text-white transition duration-300 text-center"
                  >
                    {t('product.available.maps')}
                  </a>
                </div>
              </div>
            ))}
          </div>

          {/* Marketplace Cards */}
          <h3 className="font-cormorant text-2xl font-bold text-espresso text-center mb-8">
            {t('product.available.marketplace')}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
            {marketplaces.map((mp, index) => (
              <a
                key={index}
                href={mp.url}
                target="_blank"
                rel="noopener noreferrer"
                className="card p-8 hover:shadow-lg transition-all duration-300 flex flex-col items-center justify-center text-center group"
                style={{ borderColor: mp.bgColor }}
              >
                <div className="text-4xl mb-3">
                  {mp.name === 'Tokopedia' ? '🛍️' : '🛒'}
                </div>
                <h3
                  className="font-cormorant text-2xl font-bold mb-2"
                  style={{ color: mp.bgColor }}
                >
                  {mp.name}
                </h3>
                <p className="text-sm text-grey-dark mb-4">
                  {t('product.available.subtitle')}
                </p>
                <span
                  className="px-6 py-2 text-white text-xs uppercase tracking-widest font-semibold rounded hover:opacity-90 transition duration-300"
                  style={{ backgroundColor: mp.bgColor }}
                >
                  {t('product.available.shop-now')}
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
