'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';

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

  const features = [
    {
      icon: (
        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
      ),
      title: t('why.technology.title'),
      desc: t('why.technology.desc'),
    },
    {
      icon: (
        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 14s1.5 2 4 2 4-2 4-2" /></svg>
      ),
      title: t('why.friendly.title'),
      desc: t('why.friendly.desc'),
    },
    {
      icon: (
        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
      ),
      title: t('why.doctor.title'),
      desc: t('why.doctor.desc'),
    },
  ];

  return (
    <section className="py-16 md:py-20 bg-ivory">
      <div className="container-custom">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left: Content */}
          <div>
            <h5 className="text-xs uppercase tracking-widest text-gold font-semibold mb-2">{t('why.subtitle')}</h5>
            <h2 className="font-cormorant text-3xl md:text-5xl font-bold text-espresso mb-6">{t('why.tagline')}</h2>
            <p className="text-grey-dark leading-relaxed mb-8">
              {t('about.kisah.p1')}
            </p>

            {/* Feature Items */}
            <div className="space-y-6 mb-8">
              {features.map((feature, idx) => (
                <div key={idx} className="flex gap-4 group">
                  <div className="w-14 h-14 flex-shrink-0 bg-white rounded-lg flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-white transition-all duration-300 shadow-sm">
                    {feature.icon}
                  </div>
                  <div>
                    <h3 className="font-semibold text-espresso mb-1">{feature.title}</h3>
                    <p className="text-sm text-grey-dark leading-relaxed">{feature.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <Link href="/about" className="inline-block px-8 py-3 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded-lg hover:bg-gold-dark hover:text-white transition">
              {t('why.more-about')}
            </Link>
          </div>

          {/* Right: Images */}
          <div className="grid grid-cols-2 gap-4">
            {/* Top - left image (small) */}
            <div className="relative rounded-lg overflow-hidden bg-blush min-h-[250px] bg-cover bg-center"
              style={{ backgroundImage: `url('/images/Top-Left-Image-About.jpeg')` }}
            >
              <div className="elementor-spacer h-full min-h-[250px]"></div>
            </div>

            {/* Top - right image (portrait doctor) */}
            <div className="relative rounded-lg overflow-hidden bg-blush">
              <Image
                src="/images/Top-Right-Image-About.jpeg"
                alt="Carla Skin Clinic"
                width={400}
                height={500}
                className="w-full h-auto object-cover"
              />
            </div>

            {/* Bottom - full width */}
            <div className="col-span-2 relative rounded-lg overflow-hidden bg-blush min-h-[200px] bg-cover bg-center"
              style={{ backgroundImage: `url('/images/Bottom-Image-About.jpeg')` }}
            >
              <div className="elementor-spacer h-full min-h-[200px]"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
