import Image from "next/image";
import Link from "next/link";
import utmsProduk from "@/app/utms_produk.png";

export const metadata = {
  title: "Unified TMS | IPTEK EDC Merchant Onboarding",
  description:
    "Deploy your merchant terminals in hours, not days, with the IPTEK Unified Transaction Management System.",
};

const features = [
  {
    icon: "edit_document",
    title: "Simplified Application",
    desc: "Intelligent forms that adapt based on business type, reducing friction and incomplete submissions by 60%.",
  },
  {
    icon: "cloud_upload",
    title: "Document Management",
    desc: "Cloud-native repository with automated indexing and OCR for rapid extraction of KYB data.",
  },
  {
    icon: "verified_user",
    title: "Compliance Automation",
    desc: "Embedded AML/Sanction screening and fraud checks that run instantly in the background.",
  },
  {
    icon: "monitoring",
    title: "Real-time Tracking",
    desc: "A transparent dashboard for merchants and banks to view the precise stage of every application.",
  },
  {
    icon: "hub",
    title: "Integration Hub",
    desc: "Direct API hooks to leading payment gateways and central banking systems for immediate provisioning.",
  },
];

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

      {/* Hero */}
      <section className="relative px-6 md:px-12 py-24 overflow-hidden">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="relative z-10">
            <span className="inline-block px-4 py-1.5 mb-6 text-sm font-bold tracking-widest text-primary uppercase bg-primary/10 rounded-full">
              EDC Onboarding
            </span>
            <h1 className="font-headline text-6xl md:text-7xl font-extrabold text-on-surface leading-tight mb-8" style={{ letterSpacing: "-0.02em" }}>
              EDC Onboarding,{" "}
              <br />
              <span className="text-primary italic">Redefined.</span>
            </h1>
            <p className="text-xl text-on-surface-variant max-w-lg mb-10 leading-relaxed">
              Say goodbye to weeks of paperwork. Deploy your merchant terminals in hours,
              not days, with the IPTEK Unified Transaction Management System.
            </p>
            <div className="flex flex-wrap 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-lg shadow-xl shadow-primary/20 hover:scale-[1.02] transition-transform text-center"
              >
                Start Streamlining
              </Link>
              <Link
                href="/contact"
                className="bg-surface-container-highest text-on-surface px-8 py-4 rounded-lg font-bold text-lg hover:bg-surface-container-high transition-colors text-center"
              >
                Request Demo
              </Link>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
            <div className="relative bg-surface-container-lowest rounded-2xl shadow-2xl overflow-hidden border border-outline-variant/20 rotate-2">
              <Image
                src={utmsProduk}
                alt="Unified TMS"
                className="w-full h-[500px] object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-8">
                <div className="text-white">
                  <div className="text-3xl font-bold">98% Faster</div>
                  <div className="text-sm opacity-80 uppercase tracking-widest">Onboarding Speed</div>
                </div>
              </div>
            </div>
            {/* Floating card */}
            <div className="absolute -bottom-8 -left-8 bg-surface-container-lowest p-6 rounded-xl shadow-2xl border border-outline-variant/20 max-w-xs -rotate-3">
              <div className="flex items-center gap-4 mb-4">
                <span className="material-symbols-outlined text-primary bg-primary/10 p-2 rounded-lg">speed</span>
                <span className="font-bold text-on-surface">Real-time Approval</span>
              </div>
              <div className="h-2 bg-surface-container rounded-full overflow-hidden">
                <div className="h-full bg-primary w-4/5" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problem / Solution */}
      <section className="px-6 md:px-12 py-24 bg-surface-container-low">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">
              Complexity is the Enemy.
            </h2>
            <p className="text-on-surface-variant max-w-2xl mx-auto text-lg">
              Traditional merchant onboarding is fragmented, slow, and prone to human
              error. IPTEK provides the clarity you need.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Problem card */}
            <div className="md:col-span-1 bg-surface-container-lowest p-10 rounded-xl border border-outline-variant/15">
              <div className="mb-6 h-12 w-12 bg-error/10 rounded-lg flex items-center justify-center">
                <span className="material-symbols-outlined text-error">dangerous</span>
              </div>
              <h3 className="font-headline text-xl font-bold mb-4">The Complexity Gap</h3>
              <p className="text-on-surface-variant leading-relaxed mb-6">
                Siloed document verification and manual data entry create bottlenecks that
                frustrate merchants and delay revenue.
              </p>
              <ul className="space-y-3">
                {["Manual KYB/KYC loops", "Fragmented email chains", "Unclear status updates"].map((item) => (
                  <li key={item} className="flex items-center gap-2 text-sm text-on-surface-variant">
                    <span className="material-symbols-outlined text-xs text-error">close</span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            {/* Solution card */}
            <div className="md:col-span-2 bg-primary p-10 rounded-xl relative overflow-hidden flex flex-col justify-between">
              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
                <Image
                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5jUuxS4Pmo9fcwVoULcKkDrvHd9FZM664kcB33AUnCC9qgwcc3kYTge6TjK-97n6gihX-GlOfOL5APINdKkapjXIHsfimwkScUJ27QUXawDNwtrruel1Yc7MpMZPrvngEEdjHxRLEEWb9aKNzimMfao9LUEOj7VILBYyvvALkGKSvB0D_PEejW5j4QcxikzXcuZ3izqYJ4Ji3yxEEPHgbp_vQ0mzBLv3q9CgRnuNLgV0pvnbHrdTxsXfuvzwrTOeYMoF4PcP-BUM"
                  alt="Network"
                  fill
                  className="object-cover"
                  unoptimized
                />
              </div>
              <div className="relative z-10 mb-8">
                <div className="mb-6 h-12 w-12 bg-white/20 rounded-lg flex items-center justify-center">
                  <span className="material-symbols-outlined text-white">bolt</span>
                </div>
                <h3 className="font-headline text-3xl font-bold text-white mb-4">
                  Streamlined Unified TMS
                </h3>
                <p className="text-white/80 text-xl max-w-lg">
                  One platform to manage the entire lifecycle of a merchant's EDC
                  terminal, from application to active transactions.
                </p>
              </div>
              <div className="grid grid-cols-2 gap-8 relative z-10">
                <div>
                  <div className="text-4xl font-bold text-white mb-2">40%</div>
                  <div className="text-white/60 text-sm uppercase tracking-widest">OpEx Reduction</div>
                </div>
                <div>
                  <div className="text-4xl font-bold text-white mb-2">24h</div>
                  <div className="text-white/60 text-sm uppercase tracking-widest">Average Onboarding</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="px-6 md:px-12 py-32">
        <div className="max-w-7xl mx-auto">
          <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-4xl font-extrabold text-on-surface mb-6">
                Integrated Intelligence for Seamless Operations.
              </h2>
              <p className="text-on-surface-variant text-lg">
                Our features aren't just tools — they are the architectural pillars of
                your merchant acquisition strategy.
              </p>
            </div>
            <Link href="/contact" className="group flex items-center gap-2 text-primary font-bold whitespace-nowrap">
              Learn about our architecture
              <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-2 lg:grid-cols-3 gap-8">
            {features.map((f) => (
              <div key={f.title} className="group p-8 rounded-xl bg-surface hover:bg-surface-container-lowest transition-all hover:shadow-2xl hover:shadow-blue-900/5 border border-outline-variant/15">
                <span className="material-symbols-outlined text-3xl text-primary mb-6 block">{f.icon}</span>
                <h4 className="font-headline text-xl font-bold mb-4">{f.title}</h4>
                <p className="text-on-surface-variant">{f.desc}</p>
              </div>
            ))}
            {/* Custom modules card */}
            <div className="group p-8 rounded-xl bg-primary/5 hover:bg-primary/10 transition-all border border-outline-variant/15 flex flex-col justify-center items-center text-center">
              <div className="p-4 bg-primary rounded-full mb-4">
                <span className="material-symbols-outlined text-white">add</span>
              </div>
              <h4 className="font-headline text-xl font-bold text-primary mb-2">Custom Modules</h4>
              <p className="text-on-surface-variant">Built for scale. Talk to us about bespoke integrations.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Compliance & Security */}
      <section className="px-6 md:px-12 py-24 bg-surface-dim/30">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-6">
                Bank-Grade Security.
                <br />
                Regulatory Precision.
              </h2>
              <p className="text-on-surface-variant text-lg mb-8 leading-relaxed">
                IPTEK handles the world's most sensitive financial data. Our Unified TMS
                is built on a foundation of zero-trust architecture and rigorous
                compliance protocols.
              </p>
              <div className="space-y-6">
                {[
                  {
                    icon: "security",
                    title: "PCI-DSS Level 1",
                    desc: "The highest standard in payment security, maintained and audited annually.",
                  },
                  {
                    icon: "lock_person",
                    title: "AES-256 Encryption",
                    desc: "End-to-end encryption for all merchant documents and transaction logs.",
                  },
                ].map((item) => (
                  <div key={item.title} className="flex items-start gap-4">
                    <span
                      className="material-symbols-outlined text-primary p-2 bg-primary/10 rounded-lg"
                      style={{ fontVariationSettings: "'FILL' 1" }}
                    >
                      {item.icon}
                    </span>
                    <div>
                      <h5 className="font-bold">{item.title}</h5>
                      <p className="text-sm text-on-surface-variant">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-white/40 border border-white/50 p-2 rounded-2xl shadow-2xl overflow-hidden">
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyw9MpbakjrjM3eRtROhOGgzCfVkd-Sxke5oLoGbVj9EnBHK41QRqeQ6Tq-9NlJk6rl8l2AwFBWu2osowj0IGLqpe4e4MxrtDQjoHPKxImFAFL2WKh07-DQctyEFu8dcf2zJCTAHGe915mmUoOu4d5sQNXHScSGEeoqKLWP9PKsuKWCXLAupLV3AbmrTlCgcp9jQ9VpJHsihDhrVpV3kubJpuurjVo4Cb6wHS5vz3mMx79NPphAA0pYmbpAqlpLvXetdgz2l73A-0"
                alt="Server security"
                width={600}
                height={320}
                className="w-full h-80 object-cover rounded-xl grayscale opacity-80"
                unoptimized
              />
              <div className="p-8">
                <div className="flex gap-4">
                  {[
                    { icon: "verified", label: "ISO 27001" },
                    { icon: "gpp_maybe", label: "GDPR Compliant" },
                  ].map((badge) => (
                    <div key={badge.label} className="bg-surface-container p-3 rounded-lg flex items-center justify-center gap-2">
                      <span className="material-symbols-outlined text-on-surface-variant">{badge.icon}</span>
                      <span className="font-bold text-xs">{badge.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="px-6 md:px-12 py-32 text-center">
        <div className="max-w-3xl mx-auto">
          <h2 className="font-headline text-5xl font-extrabold mb-8">Ready to Scale?</h2>
          <p className="text-xl text-on-surface-variant mb-12">
            Join hundreds of financial institutions modernizing their payment architecture
            with IPTEK.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link
              href="/contact"
              className="bg-primary text-white px-10 py-5 rounded-lg font-bold text-xl shadow-2xl shadow-primary/30 hover:-translate-y-1 transition-transform text-center"
            >
              Request a Personalized Demo
            </Link>
            <Link
              href="/contact"
              className="bg-surface-container-highest text-on-surface px-10 py-5 rounded-lg font-bold text-xl text-center hover:bg-surface-container-high transition-colors"
            >
              Contact Sales
            </Link>
          </div>
        </div>
      </section>

    </div>
  );
}