"use client";

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

const products = [
  {
    slug: "zappcare",
    name: "ZappCare",
    tag: "Communication",
    features: ["User & Admin Panel", "Automated Messaging", "CRM Integration & Analytics"],
    image: zappcareProduk,
  },
  {
    slug: "utms",
    name: "Unified TMS for EDC Onboarding",
    tag: "Fintech Solution",
    features: ["Simplified Application", "Document & Compliance", "Real-time Tracking"],
    image: utmsProduk,
  },
  {
    slug: "emrclinic",
    name: "EMR Clinic",
    tag: "Healthcare IT",
    features: ["Patient Records & Scheduling", "Billing & Prescription", "Lab Integration"],
    image: emrProduk,
  },
];

const contacts = [
  { icon: "language", title: "Website", value: "www.iptek.co" },
  { icon: "chat", title: "WhatsApp", value: "+62 817 221 121" },
  { icon: "mail", title: "Email", value: "support@iptek.co" },
];

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

  return (
    <>
      {/* Hero */}
      <section className="relative min-h-[92vh] flex items-center overflow-hidden bg-surface-dim">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent z-10" />
          <Image
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2yLmz-MHti4ExPVSy2BlsZGnZ7jP9yqgDsdpIyR3BdmW5NyVcqXIUgrkc9EuVFgF-P3bL7b4NLLbpmSgMr8vyWZxtsUDi9rWqDNeRwiVz3TCqbCPZcMM_6eu5WvUs4V45ZEiOWP5CwGvoIcHsmA0dyFErj2ffxiAX3AUQCpHUbuqAu1cMqCm7UpxogS7vVF8efyZm-2bDIiMPBcPIfRoxm002b9V1yEJaS7JX9PgSG9v1vnSLt9ilkovFIaEv1Pu5rmNOhCJy5W4"
            alt="Digital connectivity"
            fill
            className="object-cover"
            priority
            unoptimized
          />
        </div>
        <div className="relative z-20 max-w-7xl mx-auto px-6 w-full py-20 lg:py-0">
          <div className="max-w-2xl">
            <h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-[1.1] tracking-tight mb-6">
              {tr.heroTitle}{" "}
              <span className="text-primary">{tr.heroHighlight}</span>
            </h1>
            <p className="text-on-surface-variant mb-10 leading-relaxed text-lg max-w-xl">
              {tr.heroSub}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-4 rounded-lg font-bold text-base shadow-xl hover:opacity-90 transition-all text-center">
                {tr.heroBtn1}
              </Link>
              <Link href="/products" className="bg-surface-container-highest text-on-surface px-8 py-4 rounded-lg font-bold text-base hover:bg-surface-container-high transition-all text-center">
                {tr.heroBtn2}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* About Preview */}
      <section className="py-24 bg-surface">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="order-2 lg:order-1">
            <div className="aspect-square rounded-2xl overflow-hidden shadow-2xl relative">
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLhC7YbrOjSOGDGykeub9Gv0rqDRi0hsNMmSzAoG3tzjUzncwKtV5K2b-JucjJmrRd0rspULAI38-t0UOTxm7u5e6Uz8mzil4O21TBJXMxZrSUH-h_BULKkAvi4YCmuYo-oGdB9vSNIxKTi5Kc72Rs9P9UeKcCTiFGah96K5s0reCKu6rypkeW5jfkMBK_xqyvcnqiXORWcDlkTE4iYyhYD6kXTmH5wC5k-8is7FHrgCsD2o_NDFF7oCJ_VfnLF3WiW21KNgszLOo"
                alt="Collaboration"
                fill
                className="object-cover"
                unoptimized
              />
              <div className="absolute inset-0 bg-primary/10 mix-blend-overlay" />
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface leading-tight mb-8">
              {tr.aboutTitle}
            </h2>
            <div className="space-y-6 text-on-surface-variant leading-relaxed text-lg">
              <p>{tr.aboutP1}</p>
              <p>{tr.aboutP2}</p>
            </div>
            <div className="mt-10 flex gap-12">
              <div>
                <div className="text-3xl font-black text-primary mb-1">10+</div>
                <div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat1}</div>
              </div>
              <div>
                <div className="text-3xl font-black text-primary mb-1">99%</div>
                <div className="text-sm font-medium text-slate-500 uppercase tracking-widest">{tr.aboutStat2}</div>
              </div>
            </div>
            <div className="mt-10">
              <Link href="/about" className="text-primary font-bold inline-flex items-center gap-2 group">
                {tr.aboutLink}
                <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-24 bg-surface-container-low">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.whyTitle}</h2>
            <p className="text-on-surface-variant max-w-2xl mx-auto">{tr.whySub}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {tr.pillars.map((p) => (
              <div key={p.title} className="bg-surface-container-lowest p-8 rounded-xl transition-all hover:shadow-[0_20px_50px_rgba(0,0,0,0.05)] hover:-translate-y-1">
                <div className="w-12 h-12 bg-primary/10 text-primary flex items-center justify-center rounded-lg mb-6">
                  <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>{p.icon}</span>
                </div>
                <h3 className="font-headline text-xl font-bold text-on-surface mb-3">{p.title}</h3>
                <p className="text-sm text-on-surface-variant leading-relaxed">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Products Preview */}
      <section className="py-24 bg-surface">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
            <div className="max-w-2xl">
              <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.productsTitle}</h2>
              <p className="text-on-surface-variant text-lg">{tr.productsSub}</p>
            </div>
            <Link href="/products" className="text-primary font-bold inline-flex items-center gap-2 group">
              {tr.productsLink}
              <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {products.map((product, i) => (
              <div key={product.slug} className="group bg-surface-container-lowest rounded-2xl overflow-hidden border border-outline-variant/30 flex flex-col hover:shadow-xl transition-shadow">
                <div className="aspect-video relative overflow-hidden">
                  <Image src={product.image} alt={product.name} fill className="object-cover transition-transform duration-500 group-hover:scale-110" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
                  <div className="absolute bottom-4 left-4">
                    <span className="bg-primary text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">{product.tag}</span>
                  </div>
                </div>
                <div className="p-8 flex flex-col flex-grow">
                  <h3 className="font-headline text-2xl font-bold mb-3 leading-tight">{product.name}</h3>
                  <p className="text-on-surface-variant text-sm mb-6 leading-relaxed">{tr.productDescs[i]}</p>
                  <ul className="space-y-3 mb-8 flex-grow">
                    {product.features.map((f) => (
                      <li key={f} className="flex items-center gap-2 text-xs font-medium text-slate-600">
                        <span className="material-symbols-outlined text-primary text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <Link href={`/products/${product.slug}`} className="w-full py-3 px-6 rounded-lg border-2 border-primary text-primary font-bold text-sm hover:bg-primary hover:text-white transition-all text-center block">
                    {tr.productsBtn}
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Target Market */}
      <section className="py-24 bg-inverse-surface text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
            <div>
              <h2 className="font-headline text-4xl font-extrabold mb-8 leading-tight">{tr.sectorsTitle}</h2>
              <div className="space-y-8">
                {tr.sectors.map((item) => (
                  <div key={item.title} className="flex gap-6">
                    <div className="text-blue-300 shrink-0">
                      <span className="material-symbols-outlined text-4xl">{item.icon}</span>
                    </div>
                    <div>
                      <h4 className="text-xl font-bold mb-2">{item.title}</h4>
                      <p className="text-slate-400">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <div className="bg-primary/20 absolute -inset-4 rounded-3xl blur-3xl" />
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6A82v9LQWaGRaB0fuN817AH7QCAxoqIx7KcYxBUX35MwNH_bmW7YWFtjVKVqEr227abIBryBVKyDXhSVzLNQjgTLUiwD4FDp0EyAYoftxNPCjpKPvGY71g-iT5iabf_3NkX_q75nZQcOtAs9IIiM8wzgTJrWxq3SsbAx6h1fzTh2XYd6ldOL2vqA0L_vAvxsr1jHdSfLJKvBYvWqZgupCPvkyg8qXeqzQdqFIsvJ3eYxkpSOHsUYd5LimiAHk17d4XJ9TPzYP83c"
                alt="Industry Sectors"
                width={600}
                height={340}
                className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
                unoptimized
              />
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-surface overflow-hidden">
        <div className="max-w-5xl mx-auto px-6 text-center relative">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl -z-10" />
          <h2 className="font-headline text-5xl font-extrabold text-on-surface mb-8 leading-tight">
            {tr.ctaTitle}
          </h2>
          <p className="text-on-surface-variant text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
            {tr.ctaSub}
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-6">
            <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-on-primary px-10 py-5 rounded-lg font-bold text-lg shadow-2xl hover:scale-105 transition-transform text-center">
              {tr.ctaBtn1}
            </Link>
            <Link href="/contact" className="border-2 border-primary text-primary px-10 py-5 rounded-lg font-bold text-lg hover:bg-primary/5 transition-all text-center">
              {tr.ctaBtn2}
            </Link>
          </div>
        </div>
      </section>

      {/* Contact Info */}
      <section className="py-24 bg-surface-container-low">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {contacts.map((item) => (
              <div key={item.title} className="flex flex-col items-center text-center p-8 bg-surface-container-lowest rounded-2xl shadow-sm">
                <div className="w-16 h-16 bg-primary text-on-primary rounded-full flex items-center justify-center mb-6">
                  <span className="material-symbols-outlined text-3xl">{item.icon}</span>
                </div>
                <h4 className="font-headline text-xl font-bold mb-2">{item.title}</h4>
                <p className="text-on-surface-variant">{item.value}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}