import Image from "next/image";
import Link from "next/link";
import emrProduk from "@/app/emr_produk.png";

export const metadata = {
  title: "EMR Clinic | IPTEK - Precision Medical Integration",
  description:
    "EMR Clinic integrates clinical precision with operational excellence, transforming patient care into a seamless digital journey.",
};

const specialties = [
  {
    icon: "medical_services",
    title: "General Practice",
    desc: "Comprehensive tools for primary care providers including family health history and chronic care tracking.",
  },
  {
    icon: "dentistry",
    title: "Dental Care",
    desc: "Charting, imaging integration, and treatment planning specifically for dental practitioners.",
  },
  {
    icon: "psychology",
    title: "Mental Health",
    desc: "Highly private intake forms, session notes, and specialized telemedicine tools for therapists.",
  },
  {
    icon: "ophthalmology",
    title: "Ophthalmology",
    desc: "Integrated diagnostic imaging and vision-specific patient records for eyecare clinics.",
  },
];

const steps = [
  {
    num: "01",
    color: "bg-primary",
    title: "Discovery & Migration",
    desc: "We audit your existing data and orchestrate a secure migration to the IPTEK cloud.",
  },
  {
    num: "02",
    color: "bg-primary-container",
    title: "Workflow Tailoring",
    desc: "Our architects configure the EMR system to match your clinic's unique operational DNA.",
  },
  {
    num: "03",
    color: "bg-secondary",
    title: "Staff Calibration",
    desc: "Hands-on training and simulation sessions to ensure 100% team readiness.",
  },
];

export default function EMRClinicPage() {
  return (
    <div className="pt-4 overflow-x-hidden">

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32 flex flex-col items-start min-h-[90vh] justify-center">
          <div className="z-10 max-w-4xl">
            <span className="bg-primary-container text-on-primary-container px-4 py-1.5 rounded-full text-xs font-bold tracking-widest mb-6 inline-block uppercase">
              Enterprise Medical Solutions
            </span>
            <h1 className="font-headline font-extrabold text-7xl md:text-8xl text-on-surface leading-[1.05] tracking-tighter mb-8">
              The Future of{" "}
              <span className="text-primary italic">Clinic</span> Management.
            </h1>
            <p className="text-xl text-on-surface-variant max-w-2xl leading-relaxed mb-10">
              Precision engineering for modern healthcare. EMR Clinic integrates clinical
              precision with operational excellence, transforming patient care into a
              seamless digital journey.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link
                href="/contact"
                className="bg-primary text-white px-8 py-4 rounded-xl font-bold flex items-center gap-2 group"
              >
                Get Started Today
                <span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
              </Link>
              <Link
                href="/contact"
                className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-bold border border-outline-variant/20"
              >
                View Product Tour
              </Link>
            </div>
          </div>
        </div>
        {/* Asymmetric background image */}
        <div className="absolute top-1/2 -right-1/4 -translate-y-1/2 w-3/4 h-full hidden lg:block opacity-40 pointer-events-none">
          <div className="relative w-full h-full">
            <div className="absolute inset-0 bg-gradient-to-l from-primary-fixed-dim to-transparent rounded-full blur-[120px]" />
            <Image
              src={emrProduk}
              alt="EMR Clinic"
              fill
              className="object-cover rounded-3xl mix-blend-overlay"
            />
          </div>
        </div>
      </section>

      {/* Problem & Solution */}
      <section className="bg-surface-container-low">
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32 grid md:grid-cols-2 gap-24 items-center">
          <div className="space-y-8">
            <h2 className="font-headline font-bold text-4xl tracking-tight">
              Breaking the Cycle of Manual Inefficiency.
            </h2>
            <p className="text-lg text-on-surface-variant leading-relaxed">
              Traditional clinic management is plagued by fragmented data, manual entry
              errors, and disconnected workflows. Inefficient patient processing doesn't
              just waste time — it impacts the quality of care.
            </p>
            <div className="grid grid-cols-1 gap-6">
              {[
                {
                  icon: "warning",
                  title: "Data Fragmentation",
                  desc: "Patient records scattered across paper and legacy digital silos.",
                },
                {
                  icon: "timer_off",
                  title: "Resource Leakage",
                  desc: "Overlapping appointments and manual billing creating financial gaps.",
                },
              ].map((item) => (
                <div key={item.title} className="flex items-start gap-4 p-6 bg-surface-container-lowest rounded-2xl shadow-xl shadow-slate-900/5">
                  <div className="p-3 bg-error-container text-error rounded-xl shrink-0">
                    <span className="material-symbols-outlined">{item.icon}</span>
                  </div>
                  <div>
                    <h4 className="font-bold text-on-surface">{item.title}</h4>
                    <p className="text-sm text-on-surface-variant">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="relative">
            <div className="absolute -inset-4 bg-primary/10 rounded-[2rem] blur-3xl pointer-events-none" />
            <div className="relative bg-surface-container-lowest p-12 rounded-[2rem] shadow-2xl">
              <div className="mb-8">
                <span className="text-primary font-bold tracking-widest uppercase text-xs">The IPTEK Solution</span>
                <h3 className="font-headline font-bold text-3xl mt-2">Comprehensive EMR Integration.</h3>
              </div>
              <p className="text-on-surface-variant mb-8">
                We replace chaos with a crystalline architecture of information. One
                platform to unify every medical touchpoint.
              </p>
              <ul className="space-y-4">
                {["Real-time Data Synchronization", "Automated Workflow Orchestration", "Predictive Patient Analytics"].map((item) => (
                  <li key={item} className="flex items-center gap-3 font-semibold text-primary">
                    <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Features Bento Grid */}
      <section>
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-32">
          <div className="flex flex-col items-center text-center mb-20">
            <h2 className="font-headline font-bold text-5xl tracking-tighter mb-4">Core Capabilities.</h2>
            <div className="w-24 h-1 bg-primary rounded-full" />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:h-[800px]">
            {/* Patient Records */}
            <div className="md:col-span-8 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between group hover:bg-surface-container transition-all duration-300">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-headline font-bold text-3xl mb-3">Unified Patient Records</h3>
                  <p className="text-on-surface-variant max-w-md">
                    360-degree view of patient history, diagnostics, and longitudinal health
                    data in a single encrypted dashboard.
                  </p>
                </div>
                <span className="material-symbols-outlined text-4xl text-primary p-4 bg-white rounded-full shrink-0">folder_shared</span>
              </div>
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-QZysw01XkY4jAb1fHK9rbcmq_HfqrKnUN5jX0AVw6m8aAuzNAVCpZ7zTCYUVTyPocXlL5-nYr1CpXCmlNJGNezygXdFHojd4R3Lv-9_omSdtlQT2WlEa7smizFdueztHUSUqPOSYFihjppudE2HxhZvm-khHl3TSswy60zfdxF8OJamxnSGmiS9Ut-9JwS9v2m3i2G0T43RT_QBNvBPIx4SozSWzKHTPRkVhPxFytz5GfUQg52X1pTDaytSO14s97apsaqq7OZ0"
                alt="Patient Records"
                width={800}
                height={192}
                className="mt-8 h-48 w-full object-cover rounded-2xl grayscale group-hover:grayscale-0 transition-all"
                unoptimized
              />
            </div>
            {/* Smart Scheduling */}
            <div className="md:col-span-4 bg-primary p-8 rounded-[2.5rem] text-on-primary flex flex-col justify-between">
              <span className="material-symbols-outlined text-5xl">event_available</span>
              <div>
                <h3 className="font-headline font-bold text-2xl mb-2">Smart Scheduling</h3>
                <p className="opacity-80 text-sm">
                  AI-driven appointment optimization to reduce wait times and maximize clinical efficiency.
                </p>
              </div>
            </div>
            {/* Billing */}
            <div className="md:col-span-4 bg-surface-container-lowest p-8 rounded-[2.5rem] border border-outline-variant/10 shadow-lg flex flex-col justify-between">
              <div className="p-4 bg-secondary-container/30 w-fit rounded-2xl mb-6">
                <span className="material-symbols-outlined text-primary">receipt_long</span>
              </div>
              <div>
                <h3 className="font-headline font-bold text-2xl mb-2">Automated Billing</h3>
                <p className="text-on-surface-variant text-sm">
                  Seamless invoicing and insurance integration to accelerate revenue cycles.
                </p>
              </div>
            </div>
            {/* Remote Care */}
            <div className="md:col-span-5 bg-surface-container-low p-8 rounded-[2.5rem] flex flex-col justify-between relative overflow-hidden">
              <div>
                <h3 className="font-headline font-bold text-2xl mb-2">Remote Care Hub</h3>
                <p className="text-on-surface-variant text-sm">
                  Integrated telemedicine and prescription management for modern, flexible healthcare delivery.
                </p>
              </div>
              <div className="flex gap-4 mt-8">
                {["TELEMEDICINE", "LAB INTEGRATION"].map((tag) => (
                  <span key={tag} className="bg-white/80 px-4 py-2 rounded-full text-xs font-bold">{tag}</span>
                ))}
              </div>
            </div>
            {/* Security */}
            <div className="md:col-span-3 bg-secondary p-8 rounded-[2.5rem] text-on-secondary flex flex-col items-center justify-center text-center">
              <span className="material-symbols-outlined text-6xl mb-4" style={{ fontVariationSettings: "'FILL' 1" }}>security</span>
              <h3 className="font-headline font-bold text-xl">HIPAA &amp; GDPR</h3>
              <p className="text-xs opacity-70 mt-2">Military-grade encryption for total data integrity.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Specialty Support */}
      <section className="py-32">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <h2 className="font-headline font-bold text-4xl mb-12">One System. Every Specialty.</h2>
          <div className="flex gap-8 overflow-x-auto pb-12 -mr-6 md:-mr-12" style={{ scrollbarWidth: "none" }}>
            {specialties.map((s) => (
              <div key={s.title} className="min-w-[320px] bg-white p-10 rounded-[2rem] shadow-xl shadow-slate-900/5 border border-outline-variant/5">
                <span className="material-symbols-outlined text-4xl text-primary mb-6 block">{s.icon}</span>
                <h4 className="font-bold text-2xl mb-2">{s.title}</h4>
                <p className="text-on-surface-variant text-sm">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Implementation Process */}
      <section className="bg-on-surface text-surface">
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-headline font-bold text-3xl leading-tight mb-4">Rapid, Guided Implementation.</h2>
              <p className="text-surface-variant leading-relaxed mb-8">Our deployment architecture is designed for zero-downtime integration. We don't just provide software; we manage the transition.</p>
              <Link href="/contact" className="flex items-center gap-2 text-primary font-bold group w-fit">
                Read the Onboarding Whitepaper
                <span className="material-symbols-outlined transition-transform group-hover:translate-x-2">arrow_right_alt</span>
              </Link>
            </div>
            <div className="space-y-8 relative">
              <div className="absolute left-5 top-3 bottom-3 w-px bg-surface-variant/20" />
              {steps.map((step) => (
                <div key={step.num} className="relative pl-14">
                  <div className={`absolute left-0 top-0 w-10 h-10 ${step.color} rounded-full flex items-center justify-center font-bold text-white text-sm z-10`}>{step.num}</div>
                  <h4 className="font-bold text-base mb-1">{step.title}</h4>
                  <p className="text-surface-variant text-sm">{step.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section>
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
          <div className="bg-primary-container rounded-2xl p-10 md:p-14 text-center text-on-primary-container relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-primary via-primary-container to-blue-400 opacity-20 pointer-events-none" />
            <div className="relative z-10">
              <h2 className="font-headline font-extrabold text-4xl tracking-tighter mb-4">Ready to evolve your clinic?</h2>
              <p className="max-w-xl mx-auto mb-8 opacity-90">Join 500+ clinics worldwide who have unified their operations with IPTEK EMR Clinic.</p>
              <div className="flex flex-col sm:flex-row gap-3 justify-center">
                <Link href="/contact" className="bg-white text-primary px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Book a Live Demo</Link>
                <Link href="/contact" className="bg-primary/20 border border-white/20 text-on-primary-container px-8 py-3 rounded-xl font-black transition-transform hover:scale-105 text-center">Speak to an Architect</Link>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}