'use client';

import React from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';

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

  const technologies = [
    { name: 'Diode Laser 808nm', origin: 'Germany', function: 'Hair removal permanen — target melanin pada folikel rambut.', image: '🔬', benefits: ['FDA Approved', 'Aman untuk semua jenis kulit', 'Minim rasa sakit', 'Hasil permanen'], treatments: 'Hair Removal' },
    { name: 'IPL (Intense Pulsed Light)', origin: 'USA', function: 'Multi-fungsi: hair removal, photo rejuvenation.', image: '💡', benefits: ['Multi-fungsi', 'Non-invasif', 'Tanpa downtime', 'Cocok untuk semua kulit'], treatments: 'Hair Removal, Brightening' },
    { name: 'Q-Switch Nd:YAG Laser', origin: 'Korea', function: 'Menghilangkan pigmentasi (flek, melasma).', image: '🎯', benefits: ['Presisi tinggi', 'Efektif untuk flek', 'Aman & nyaman', 'Hasil cepat'], treatments: 'Brightening, Pigmentation' },
    { name: 'Fractional CO2 Laser', origin: 'Germany', function: 'Resurfacing kulit — menghilangkan acne scar, kerutan.', image: '✨', benefits: ['Hilangkan scar', 'Stimulasi kolagen', 'Kencangkan kulit', 'Hasil maksimal'], treatments: 'Acne Scar, Anti-Aging' },
    { name: 'HIFU', origin: 'Korea', function: 'Non-surgical face lifting.', image: '👑', benefits: ['Lifting tanpa operasi', '1-2 sesi/tahun', 'Tanpa downtime', 'Efek natural'], treatments: 'Anti-Aging, Lifting' },
    { name: 'Radiofrequency (RF)', origin: 'USA', function: 'Mengencangkan kulit & body contouring.', image: '⚡', benefits: ['Kencangkan kulit', 'Body contouring', 'Stimulasi kolagen', 'Non-invasif'], treatments: 'Anti-Aging, Body' },
    { name: 'Cryolipolysis', origin: 'USA', function: 'Fat freezing — menghancurkan sel lemak.', image: '❄️', benefits: ['Tanpa operasi', 'Tanpa downtime', 'Permanen', 'Tidak merusak jaringan'], treatments: 'Body Slimming' },
    { name: 'LED Light Therapy', origin: 'Korea', function: 'Photobiomodulation — Red/Blue/Near-IR.', image: '🌈', benefits: ['Non-invasif', 'Relaksasi', 'Cocok semua kulit', 'Tanpa rasa sakit'], treatments: 'Facial, Acne' },
  ];

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <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">{t('technology.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('technology.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase">
            <Link href="/" className="hover:text-gold transition">{t('breadcrumb.home')}</Link><span className="mx-2">/</span><span className="text-ivory/60">{t('breadcrumb.technology')}</span>
          </nav>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom text-center max-w-4xl">
          <h2 className="font-cormorant text-2xl md:text-3xl font-bold text-espresso mb-6">{t('technology.philosophy.title')}</h2>
          <p className="text-grey-dark mb-8">{t('technology.philosophy.desc')}</p>
          <div className="flex justify-center gap-6 flex-wrap">
            {['FDA', 'CE', 'Kemenkes', 'ISO'].map((s) => (
              <div key={s} className="bg-ivory px-6 py-3 rounded-lg"><span className="text-lg font-bold text-gold">{s}</span><p className="text-xs text-grey">Certified</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom space-y-8">
          {technologies.map((tech, i) => (
            <div key={i} className="card bg-white p-6 md:p-8 hover:shadow-lg transition">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-center">
                <div className="text-center"><div className="text-7xl mb-2">{tech.image}</div><p className="text-xs text-grey">{t('technology.origin').replace('{origin}', tech.origin)}</p></div>
                <div className="md:col-span-3">
                  <h3 className="font-cormorant text-2xl font-bold text-espresso mb-4">{tech.name}</h3>
                  <p className="text-grey-dark mb-4">{tech.function}</p>
                  <ul className="grid grid-cols-2 gap-1 mb-4">{tech.benefits.map((b, idx) => (<li key={idx} className="flex items-center gap-2 text-sm text-grey-dark"><span className="text-gold">✅</span>{b}</li>))}</ul>
                  <p className="text-sm text-espresso"><span className="font-semibold">{t('technology.treatments')}</span> <span className="text-gold">{tech.treatments}</span></p>
                  <Link href="/treatments" className="text-gold font-semibold text-sm hover:translate-x-1 transition inline-flex items-center mt-4">{t('cta.see-related')}</Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div><h2 className="font-cormorant text-3xl font-bold text-espresso mb-6">🤖 {t('technology.ai.title')}</h2>
              <p className="text-grey-dark mb-6">{t('technology.ai.desc')}</p>
              <p className="font-semibold text-espresso mb-3">{t('technology.analisis.hidrasi')}:</p>
              <ul className="grid grid-cols-2 gap-2 mb-6">
                {['hidrasi','pigmentasi','kerutan','pori','sensitivitas','minyak'].map((item) => (
                  <li key={item} className="flex items-center gap-2 text-sm text-grey-dark"><span className="text-gold">✅</span>{t(`technology.analisis.${item}`)}</li>
                ))}
              </ul>
              <Link href="/contact" className="btn-primary">{t('technology.ai.cta')}</Link>
            </div>
            <div className="bg-blush rounded-lg aspect-square flex items-center justify-center"><div className="text-center"><div className="text-6xl mb-4">📱</div><p className="text-espresso font-semibold">AI Skin Scanner</p><p className="text-sm text-grey-dark">Datang ke klinik terdekat untuk analisis kulit</p></div></div>
          </div>
        </div>
      </section>

      <section className="bg-espresso text-white py-16">
        <div className="container-custom text-center">
          <h2 className="font-cormorant text-3xl font-bold mb-8">🛡️ {t('technology.safety.title')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[1,2,3].map((n) => (
              <div key={n} className="p-6 bg-white bg-opacity-10 rounded-lg"><div className="text-4xl mb-4">{['🧤','🔄','🧪'][n-1]}</div><h3 className="font-semibold mb-2">{t(`technology.safety.${n}`)}</h3><p className="text-sm text-white/80">{t(`technology.safety.${n}.desc`)}</p></div>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </main>
  );
}
