import Image from "next/image";
import Link from "next/link";
import zappcareProduk from "@/app/zappcare_produk.png";

export const metadata = {
  title: "ZappCare | IPTEK Unified Communication",
  description:
    "Transform customer interactions with a custom-engineered WhatsApp Business layer designed for enterprise scale and operational clarity.",
};

const features = [
  {
    icon: "dashboard_customize",
    title: "User/Admin Panels",
    desc: "Distinct interfaces for frontline staff and managers to ensure focused productivity and oversight.",
  },
  {
    icon: "smart_toy",
    title: "Automated Messaging",
    desc: "Smart triggers and scheduled responses to handle routine queries without human intervention.",
  },
  {
    icon: "groups",
    title: "Multi-user Support",
    desc: "One number, infinite agents. Assign chats to specific teams or individual specialists instantly.",
  },
  {
    icon: "query_stats",
    title: "Analytics Dashboard",
    desc: "Real-time heatmaps of engagement, response times, and conversion attribution.",
  },
  {
    icon: "api",
    title: "Deep Integration",
    desc: "Seamlessly connect with your existing tech stack via our robust enterprise API.",
  },
  {
    icon: "security",
    title: "End-to-End Governance",
    desc: "Enterprise-grade security ensuring all communications comply with your industry standards.",
  },
];

export default function ZappCarePage() {
  return (
    <div className="pt-4">

      {/* Hero */}
      <section className="relative overflow-hidden bg-surface py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
          <div className="z-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-secondary-container text-on-secondary-fixed rounded-full text-xs font-bold tracking-widest uppercase mb-6">
              <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
              Advanced WhatsApp Solutions
            </div>
            <h1 className="font-headline text-5xl md:text-7xl font-extrabold text-on-surface leading-tight tracking-tighter mb-8">
              Elevate Your Business{" "}
              <span className="text-primary">Conversation</span>
            </h1>
            <p className="text-lg md:text-xl text-on-surface-variant leading-relaxed mb-10 max-w-lg">
              Transform customer interactions with a custom-engineered WhatsApp Business
              layer designed for enterprise scale and operational clarity.
            </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-xl font-headline font-bold text-lg shadow-2xl shadow-primary/30 transition-transform hover:-translate-y-1 text-center"
              >
                Get Started Now
              </Link>
              <Link
                href="/contact"
                className="bg-surface-container-high text-on-surface px-8 py-4 rounded-xl font-headline font-bold text-lg hover:bg-surface-container-highest 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 rounded-2xl overflow-hidden shadow-2xl border-8 border-surface-container-lowest">
              <Image
                src={zappcareProduk}
                alt="ZappCare Dashboard"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Problem Statement */}
      <section className="bg-surface-container-low py-24">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
            <div className="md:col-span-1">
              <h2 className="font-headline text-3xl font-bold text-on-surface mb-6">
                The Fragmentation Crisis
              </h2>
              <p className="text-on-surface-variant">
                Untethered communication leads to lost leads and invisible data.
              </p>
            </div>
            <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8">
              <div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
                <span className="material-symbols-outlined text-error text-4xl mb-4 block">leak_remove</span>
                <h3 className="font-headline font-bold text-xl mb-2">Communication Silos</h3>
                <p className="text-on-surface-variant text-sm">
                  Teams working on personal WhatsApp accounts leave no trail for enterprise oversight.
                </p>
              </div>
              <div className="p-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10">
                <span className="material-symbols-outlined text-error text-4xl mb-4 block">cloud_off</span>
                <h3 className="font-headline font-bold text-xl mb-2">Data Blindness</h3>
                <p className="text-on-surface-variant text-sm">
                  Vital customer insights disappear once a chat window is closed, never reaching your CRM.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Solution Bento Grid */}
      <section className="py-24 bg-surface">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="text-center mb-16">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">
              ZappCare: The Unified Core
            </h2>
            <p className="text-on-surface-variant max-w-2xl mx-auto">
              We wrap the WhatsApp Business API in a custom-built infrastructure tailored
              to your organizational hierarchy.
            </p>
          </div>
          <div className="grid grid-cols-12 gap-6 md:h-[600px]">
            {/* Large card */}
            <div className="col-span-12 md:col-span-8 bg-primary-container rounded-2xl p-10 flex flex-col justify-end relative overflow-hidden group">
              <div className="absolute top-0 right-0 p-8 opacity-20 group-hover:scale-110 transition-transform pointer-events-none">
                <span className="material-symbols-outlined text-[160px] text-on-primary" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
              </div>
              <div className="relative z-10">
                <h3 className="font-headline text-3xl font-bold text-on-primary mb-4">
                  Custom Enterprise Enclosure
                </h3>
                <p className="text-on-primary-container max-w-md">
                  Your WhatsApp Business isn't just an app; it's an integrated platform
                  governed by your security protocols and administrative needs.
                </p>
              </div>
            </div>
            {/* Admin card */}
            <div className="col-span-12 md:col-span-4 bg-secondary-container rounded-2xl p-10 flex flex-col justify-between">
              <span className="material-symbols-outlined text-4xl text-on-secondary-container block">shield_with_heart</span>
              <div>
                <h3 className="font-headline text-2xl font-bold text-on-secondary-container mb-2">
                  Admin Governance
                </h3>
                <p className="text-on-secondary-container/80 text-sm">
                  Full visibility into team conversations with role-based access controls.
                </p>
              </div>
            </div>
            {/* CRM card */}
            <div className="col-span-12 md:col-span-4 bg-surface-container-high rounded-2xl p-10">
              <h3 className="font-headline text-xl font-bold text-on-surface mb-4">CRM Synergy</h3>
              <p className="text-on-surface-variant text-sm mb-6">
                Real-time sync between your messaging and your customer database.
              </p>
              <div className="flex gap-2">
                {["Salesforce", "Hubspot"].map((crm) => (
                  <span key={crm} className="px-3 py-1 bg-surface-container-lowest rounded-full text-xs font-bold">
                    {crm}
                  </span>
                ))}
              </div>
            </div>
            {/* Analytics visual card */}
            <div className="col-span-12 md:col-span-8 bg-surface-container-low rounded-2xl overflow-hidden relative min-h-[200px]">
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNQSCjTSYT_VDktiWU4ECxwGCsgpJoRZUu1FwPtj__fIyeyylyDCfCBfAMMFBNe7hvqCNhvVPzlaHAJqoqjtT6liraXmm7u1pp1mTm8-3mrTtWvnzCaaUwJjI5EkmgHZxfTSgh-KOzvaEX7w8WBpYBlgjsCGAevYSxIC8wZEmbOFVJ5CYLnH49e3bcHZ_XJERsNi_SgwoMzfHFnpw8i5g2ExFk1EU3t6Nlieqaf9rVnX4_A7LScgliaPbUuo62G2JdSgMNcgMz2QY"
                alt="Visual Intelligence"
                fill
                className="object-cover"
                unoptimized
              />
              <div className="absolute inset-0 bg-gradient-to-t from-on-surface/80 to-transparent p-10 flex items-end">
                <h3 className="font-headline text-2xl font-bold text-white">Visual Intelligence</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Key Features */}
      <section className="py-24 bg-surface-container-lowest">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
            {features.map((f) => (
              <div key={f.title} className="flex flex-col gap-4">
                <div className="w-12 h-12 bg-primary/5 rounded-lg flex items-center justify-center text-primary">
                  <span className="material-symbols-outlined">{f.icon}</span>
                </div>
                <h4 className="font-headline text-xl font-bold">{f.title}</h4>
                <p className="text-on-surface-variant text-sm leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <section className="py-24 bg-surface overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="mb-20">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-2">Built for Impact</h2>
            <p className="text-on-surface-variant">Industries where ZappCare makes the difference.</p>
          </div>
          <div className="space-y-32">
            {/* Healthcare */}
            <div className="flex flex-col md:flex-row items-center gap-16">
              <div className="w-full md:w-1/2">
                <div className="relative">
                  <div className="absolute inset-0 bg-tertiary-container/10 -rotate-3 rounded-2xl" />
                  <Image
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUyFs_J_yTV5ldfA72IITGB-NHhL26YHi1O8LbayA3sgTRpbel9uU3H2buNr2hVpPy9Pn9zzv25lxfMuls19O5HSXrw8mvlHiqByncfRZo10uxw7Titkn8WeRf-vjOl25EfLkOyezQ4BlCNCL8HVRItcWQ3k8Ze1iBgsdh2YtjvmSycGbQrBF52RebQgrpBIgCo3eQEWjYxh8RV3SiPad8OI873_VtADN4WN3BudQrOzQlEmsHCgj_DJMs9LpTDg2ouWDLYrX7fvI"
                    alt="Healthcare"
                    width={600}
                    height={400}
                    className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
                    unoptimized
                  />
                </div>
              </div>
              <div className="w-full md:w-1/2">
                <span className="text-tertiary font-bold tracking-widest text-xs uppercase mb-4 block">Healthcare</span>
                <h3 className="font-headline text-3xl font-bold mb-6">Patient Coordination Redefined</h3>
                <p className="text-on-surface-variant mb-8">
                  Schedule appointments, share post-op instructions, and manage follow-ups
                  through a secure, familiar channel that patients actually use.
                </p>
                <ul className="space-y-4">
                  {["80% Reduction in No-shows", "Secure Document Transfer"].map((item) => (
                    <li key={item} className="flex items-center gap-3 text-on-surface">
                      <span className="material-symbols-outlined text-tertiary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            {/* Retail */}
            <div className="flex flex-col md:flex-row-reverse items-center gap-16">
              <div className="w-full md:w-1/2">
                <div className="relative">
                  <div className="absolute inset-0 bg-primary/10 rotate-3 rounded-2xl" />
                  <Image
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNyxBykIrbpZ05p8zLcIvQbPv75wjSLssBDMp_zN4EhMKZ4UuQ7YVpcnGntfM16u8KPrEkmFh-a3Y1aRqP7Q8TTf25r7OOlvCOOt4NM3IXwikobkJVHxddsxuNpsz1B7xBlftljvgGMSCD82eO6VzBZkP5TJALi_gJIduQp-v3M_Xklz1oLrY68BJqsr64NOuhB6Qy2l6aiqUAiFt9cLayzGpcZJCGM68BQUltWeREnPUi9u3ggyQyilXJSn_DkGyn7kJWv0MJsQU"
                    alt="Retail"
                    width={600}
                    height={400}
                    className="relative z-10 rounded-2xl shadow-2xl w-full object-cover"
                    unoptimized
                  />
                </div>
              </div>
              <div className="w-full md:w-1/2">
                <span className="text-primary font-bold tracking-widest text-xs uppercase mb-4 block">Retail</span>
                <h3 className="font-headline text-3xl font-bold mb-6">Personalized Commerce at Scale</h3>
                <p className="text-on-surface-variant mb-8">
                  Send personalized offers, handle order inquiries, and provide VIP
                  concierge service that turns shoppers into lifelong advocates.
                </p>
                <ul className="space-y-4">
                  {["Instant Order Updates", "Direct Checkout Links"].map((item) => (
                    <li key={item} className="flex items-center gap-3 text-on-surface">
                      <span className="material-symbols-outlined text-primary" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-surface-container-lowest relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
          <div className="bg-surface-container-high rounded-[40px] p-12 md:p-24 text-center">
            <h2 className="font-headline text-4xl md:text-5xl font-black text-on-surface mb-6">
              Ready to scale your reach?
            </h2>
            <p className="text-on-surface-variant text-lg mb-12 max-w-2xl mx-auto">
              Join the future of enterprise communication. Let's build a solution tailored
              to your specific workflow.
            </p>
            <div className="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
              <input
                className="flex-grow rounded-xl border-none bg-surface-container-lowest px-6 py-4 focus:ring-2 focus:ring-primary outline-none"
                placeholder="Enter your work email"
                type="email"
              />
              <Link
                href="/contact"
                className="bg-primary text-on-primary font-bold px-8 py-4 rounded-xl shadow-lg hover:shadow-primary/40 transition-all whitespace-nowrap text-center"
              >
                Request Custom Quote
              </Link>
            </div>
            <p className="text-xs text-on-surface-variant mt-6 opacity-60">
              No credit card required. Free consulting session included.
            </p>
          </div>
        </div>
      </section>

    </div>
  );
}