"use client";

import Image from "next/image";
import Link from "next/link";
import zappcareProduk from "@/app/zappcare_produk.png";
import { useLang } from "@/context/LanguageContext";
import { t } from "@/lib/translations";

export default function ProductsPage() {
  const { lang } = useLang();
  const tr = t[lang].products;

  return (
    <div className="pb-24 px-6 md:px-12 max-w-7xl mx-auto pt-12">
      {/* Hero */}
      <header className="mb-20 max-w-3xl">
        <h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tight text-on-surface mb-6 leading-tight">
          {tr.heroTitle}
        </h1>
        <p className="text-lg text-on-surface-variant leading-relaxed">{tr.heroSub}</p>
      </header>

      {/* Bento Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

        {/* ZappCare — large card */}
        <div id="zappcare" className="lg:col-span-8 group relative overflow-hidden rounded-xl bg-surface-container-lowest transition-all hover:shadow-2xl hover:shadow-primary/10">
          <div className="flex flex-col md:flex-row h-full">
            <div className="p-10 md:w-1/2 flex flex-col justify-between">
              <div>
                <div className="flex items-center gap-2 mb-6">
                  <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">chat_bubble</span>
                  <span className="font-bold tracking-widest text-xs uppercase text-outline">Communication</span>
                </div>
                <h2 className="font-headline text-4xl font-bold mb-4">ZappCare</h2>
                <p className="text-on-surface-variant mb-6 leading-relaxed">{tr.zappDesc}</p>
                <div className="flex flex-wrap gap-2 mb-8">
                  {["CRM Sync", "Multi-Agent", "Admin Panel"].map((tag) => (
                    <span key={tag} className="px-3 py-1 bg-surface-variant text-on-surface-variant text-xs rounded-full font-medium">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
              <Link href="/products/zappcare" className="flex items-center gap-2 text-primary font-bold group/btn w-fit">
                {tr.detailBtn}
                <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
              </Link>
            </div>
            <div className="md:w-1/2 min-h-[300px] relative">
              <Image
                src={zappcareProduk}
                alt="ZappCare"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>

        {/* Unified TMS */}
        <div id="utms" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
          <div className="flex items-center gap-2 mb-6">
            <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">point_of_sale</span>
            <span className="font-bold tracking-widest text-xs uppercase text-outline">Fintech</span>
          </div>
          <h2 className="font-headline text-3xl font-bold mb-4">Unified TMS</h2>
          <p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.utmsDesc}</p>
          <ul className="space-y-3 mb-8 flex-grow">
            {["Simplified Onboarding", "Real-time Tracking"].map((item) => (
              <li key={item} className="flex items-center gap-2 text-sm text-on-surface-variant">
                <span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
                {item}
              </li>
            ))}
          </ul>
          <Link href="/products/utms" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
            {tr.detailBtn}
            <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
          </Link>
        </div>

        {/* EMR Clinic */}
        <div id="emrclinic" className="lg:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-lowest p-8 flex flex-col transition-all hover:shadow-2xl hover:shadow-primary/10">
          <div className="flex items-center gap-2 mb-6">
            <span className="material-symbols-outlined text-primary bg-primary-fixed p-2 rounded-lg">medical_services</span>
            <span className="font-bold tracking-widest text-xs uppercase text-outline">Health Tech</span>
          </div>
          <h2 className="font-headline text-3xl font-bold mb-4">EMR Clinic</h2>
          <p className="text-on-surface-variant mb-6 text-sm leading-relaxed">{tr.emrDesc}</p>
          <div className="grid grid-cols-2 gap-2 mb-8 flex-grow">
            {["HIPAA Ready", "GDPR Compliant"].map((badge) => (
              <div key={badge} className="p-3 bg-surface-container-low rounded-lg text-xs font-semibold text-center">
                {badge}
              </div>
            ))}
          </div>
          <Link href="/products/emrclinic" className="flex items-center gap-2 text-primary font-bold group/btn w-fit mt-auto">
            {tr.detailBtn}
            <span className="material-symbols-outlined transition-transform group-hover/btn:translate-x-1">arrow_forward</span>
          </Link>
        </div>

        {/* Why Integrated Systems */}
        <div className="lg:col-span-8 bg-primary rounded-xl p-10 text-white relative overflow-hidden">
          <div className="relative z-10 max-w-lg">
            <h2 className="font-headline text-4xl font-bold mb-6">{tr.whyTitle}</h2>
            <p className="text-primary-fixed-dim mb-8 leading-relaxed">{tr.whyDesc}</p>
            <div className="grid grid-cols-2 gap-6">
              <div>
                <div className="text-3xl font-black mb-1">99.9%</div>
                <div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat1}</div>
              </div>
              <div>
                <div className="text-3xl font-black mb-1">10x</div>
                <div className="text-xs uppercase font-bold tracking-widest opacity-70">{tr.stat2}</div>
              </div>
            </div>
          </div>
          <div className="absolute right-0 bottom-0 opacity-10 translate-x-1/4 translate-y-1/4 pointer-events-none">
            <span className="material-symbols-outlined text-[300px]" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
          </div>
        </div>
      </div>

      {/* Technical Foundations */}
      <section className="mt-32">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
          <div className="max-w-2xl">
            <h2 className="font-headline text-3xl font-bold mb-4">{tr.techTitle}</h2>
            <p className="text-on-surface-variant">{tr.techSub}</p>
          </div>
          <div className="flex gap-4">
            <div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge1}</div>
            <div className="px-6 py-3 bg-surface-container-high rounded-full font-semibold text-sm">{tr.badge2}</div>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
          {tr.tech.map((item) => (
            <div key={item.title} className="bg-surface-container-low p-12 transition-colors hover:bg-surface-container">
              <span className="material-symbols-outlined text-primary mb-6 text-4xl block">{item.icon}</span>
              <h3 className="font-headline text-xl font-bold mb-4">{item.title}</h3>
              <p className="text-sm text-on-surface-variant leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}