'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';

const CHECKLIST = [
  'GARAM BERIODIUM YANG MENGGUNAKAN BAHAN BAKU LOKAL INDONESIA.',
  'GARAM BERIODIUM YANG PERTAMA YANG TERJAMIN KUALITAS PRODUKNYA.',
  'GARAM BERIODIUM YANG TIDAK MENGANDUNG ANTI CAKING (ANTI MENGGUMPAL).',
  'GARAM BERIODIUM YANG BERSTANDAR ISO, SNI, BPOM & HALAL MUI.',
];

export default function WhyUsSection() {
  return (
    <section className="relative w-full pt-16 md:pt-20 pb-12 md:pb-16 overflow-hidden">
      {/* Decorative wavy lines — sit behind card, only peeking out on the sides */}
      <div className="absolute bottom-16 md:bottom-52 left-0 w-full z-0 flex flex-col gap-3 md:gap-4 pointer-events-none">
        <Image
          src="/images/home/whyus/bottom-wave.svg"
          alt="Wavy Line"
          className="w-full h-auto object-cover"
          width={1920}
          height={20}
        />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="flex flex-col items-center">
          {/* Title */}
          <div className="w-full text-center lg:text-left mb-4">
            <h1 className="relative mb-6 select-none flex flex-col font-title uppercase items-center lg:items-start tracking-wide">
              {/* Line 1: KENAPA HARUS */}
              <div className="relative w-fit text-[20px] min-[375px]:text-[26px] min-[414px]:text-[30px] sm:text-[44px] md:text-[56px] lg:text-[60px] xl:text-[60px]">
                {/* Back solid text */}
                <span
                  className="absolute top-[3px] left-[3px] text-[#6E5904] leading-[1.1] whitespace-nowrap"
                  aria-hidden="true"
                >
                  KENAPA HARUS
                </span>
                {/* Front hollow text */}
                <span
                  className="relative leading-[1.1] block whitespace-nowrap"
                  style={{
                    WebkitTextStroke: '2px #1C1D1F',
                    color: 'transparent',
                  }}
                >
                  KENAPA HARUS
                </span>
              </div>
              {/* Line 2: GARAM CAPKAPAL ? */}
              <div className="relative w-fit mt-[-5px] sm:mt-[-8px] text-[24px] min-[375px]:text-[28px] min-[414px]:text-[32px] sm:text-[52px] md:text-[64px] lg:text-[68px] xl:text-[68px]">
                {/* Back solid text */}
                <span
                  className="absolute top-[3px] left-[3px] text-[#FFD738] leading-[1.1] whitespace-nowrap"
                  aria-hidden="true"
                >
                  GARAM CAPKAPAL ?
                </span>
                {/* Front hollow text */}
                <span
                  className="relative leading-[1.1] block whitespace-nowrap"
                  style={{
                    WebkitTextStroke: '2px #1C1D1F',
                    color: 'transparent',
                  }}
                >
                  GARAM CAPKAPAL ?
                </span>
              </div>
            </h1>
          </div>

          {/* Content wrapper */}
          <div className="flex flex-col lg:flex-row items-center lg:items-end justify-center lg:justify-start w-full mx-auto relative">
            {/* Left Mascots */}
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="hidden md:relative w-[150px] min-[375px]:w-[180px] sm:w-[200px] md:w-[250px] lg:w-[280px] xl:w-[320px] shrink-0 z-20 mb-8 lg:mb-0 lg:-mr-16"
            >
              <Image
                src="/images/home/whyus/stacking-mascots.avif"
                alt="Mascots"
                width={320}
                height={600}
                className="w-full h-auto drop-shadow-2xl"
              />
            </motion.div>

            {/* Center Content */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="relative w-full lg:flex-1 max-w-[900px] z-10"
            >
              <div className="relative w-full h-full rounded-[32px] md:rounded-[40px]">
                {/* The barcode border SVG */}
                <svg
                  className="absolute inset-0 w-full h-full pointer-events-none z-0 hidden md:block"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    x="6"
                    y="6"
                    style={{
                      width: 'calc(100% - 12px)',
                      height: 'calc(100% - 12px)',
                    }}
                    fill="white"
                    rx="40"
                    ry="40"
                    stroke="#1C1D1F"
                    strokeWidth="12"
                    strokeDasharray="1.5, 6"
                  />
                </svg>
                {/* For mobile, a slightly smaller radius */}
                <svg
                  className="absolute inset-0 w-full h-full pointer-events-none z-0 md:hidden"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    x="5"
                    y="5"
                    style={{
                      width: 'calc(100% - 10px)',
                      height: 'calc(100% - 10px)',
                    }}
                    fill="white"
                    rx="32"
                    ry="32"
                    stroke="#1C1D1F"
                    strokeWidth="10"
                    strokeDasharray="1.5, 6"
                  />
                </svg>

                <div className="relative z-10 p-7 md:p-10 xl:px-[60px] xl:py-[50px]">
                  <div className="flex flex-col md:flex-row items-start md:items-center gap-10 md:gap-8 xl:gap-[40px] mb-10 xl:mb-14">
                    {/* 5x Pencucian */}
                    <div className="flex items-center gap-4 xl:gap-[19px]">
                      <Image
                        src="/images/home/whyus/icon-5x.svg"
                        alt="5x Pencucian"
                        width={128}
                        height={128}
                        className="w-[80px] md:w-[100px] xl:w-[128px] h-auto"
                      />
                      <div className="flex flex-col justify-center">
                        <span className="font-sans font-bold text-[14px] md:text-[16px] xl:text-[20px] uppercase text-black leading-none mb-1 xl:mb-2">
                          Melalui Proses
                        </span>
                        <span className="font-title text-[32px] md:text-[56px] xl:text-[64px] leading-none text-black">
                          5X
                        </span>
                        <span className="font-sans font-bold text-[14px] md:text-[16px] xl:text-[20px] uppercase text-black leading-none mt-1 xl:mt-2">
                          Pencucian
                        </span>
                      </div>
                    </div>
                    {/* 200C Pengeringan */}
                    <div className="flex items-center gap-4 xl:gap-[19px]">
                      <Image
                        src="/images/home/whyus/icon-200c.svg"
                        alt="200C Pengeringan"
                        width={128}
                        height={128}
                        className="w-[80px] md:w-[100px] xl:w-[128px] h-auto"
                      />
                      <div className="flex flex-col justify-center">
                        <span className="font-sans font-bold text-[14px] md:text-[16px] xl:text-[20px] uppercase text-black leading-none mb-2">
                          Pengeringan Hingga
                        </span>
                        <div className="flex items-start font-title text-black">
                          <span className="text-[32px] md:text-[56px] xl:text-[64px] leading-none">
                            200
                          </span>
                          <span className="text-[16px] md:text-[28px] xl:text-[32px] mt-1">
                            °
                          </span>
                          <span className="text-[32px] md:text-[56px] xl:text-[64px] leading-none">
                            C
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Checklist */}
                  <div className="flex flex-col gap-[16px] xl:gap-[20px]">
                    {CHECKLIST.map((text, idx) => (
                      <motion.div
                        key={idx}
                        initial={{ opacity: 0, x: -20 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        transition={{ delay: 0.2 + idx * 0.1 }}
                        className="flex items-start gap-4 xl:gap-[26px]"
                      >
                        <div className="shrink-0 w-[28px] h-[28px] xl:w-[37px] xl:h-[37px]">
                          <Image
                            src="/images/home/whyus/icon-check.svg"
                            alt="Check"
                            width={37}
                            height={37}
                            className="w-full h-full"
                          />
                        </div>
                        <p className="font-sans font-bold text-[14px] md:text-[16px] xl:text-[20px] leading-snug text-black uppercase mt-[2px]">
                          {text}
                        </p>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Right Mascot */}
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="relative w-[80px] min-[375px]:w-[100px] sm:w-[120px] md:w-[260px] xl:w-[500px] shrink-0 z-20 mt-8 lg:mt-0 lg:-ml-16"
            >
              <Image
                src="/images/home/whyus/capt-yodi-say-hi.avif"
                alt="Captain Yodi"
                width={500}
                height={1000}
                className="w-full h-auto drop-shadow-2xl"
              />
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StarIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" />
    </svg>
  );
}