"use client";

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

const stats = [
  { value: "92%", label: "reported improved hair shine in 2 weeks" },
  { value: "87%", label: "saw visible reduction in dry skin" },
  { value: "95%", label: "noticed smoother, healthier hair texture" },
  { value: "89%", label: "experienced softer, more nourished skin" },
];

export default function StatsSection() {
  return (
    <section className="relative z-20 py-24 lg:py-32 bg-[#E8F4F8]">
      <div className="max-w-[1400px] mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          {/* Left Content */}
          <div>
            <motion.span
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block"
            >
              Our Philosophy
            </motion.span>

            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
            >
              Transformation
              <br />
              starts here
            </motion.h2>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-[#4A4A4A] leading-relaxed mb-10"
            >
              Every ManoonOils product is built on a simple promise: only
              ingredients that serve a purpose. Our cold-pressed oils deliver
              real nourishment for hair and skin, without the noise.
            </motion.p>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 gap-6">
              {stats.map((stat, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
                  className="relative"
                >
                  <span className="font-serif text-[72px] leading-none text-[#1A1A1A]/[0.07] select-none absolute top-0 -left-2">
                    {stat.value.replace("%", "")}
                  </span>
                  <div className="relative pt-6">
                    <span className="text-3xl font-medium text-[#1A1A1A]">
                      {stat.value}
                    </span>
                    <p className="text-sm text-[#4A4A4A]/80 mt-1 leading-snug">
                      {stat.label}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Right Image */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-[4/5] rounded-[4px] overflow-hidden bg-[#F0F7FA]"
          >
            <Image
              src="https://minio-api.nodecrew.me/manoon-media/2024/10/manoon3-resized-1.jpg"
              alt="ManoonOils Luksuzni Set"
              fill
              className="object-cover"
            />
          </motion.div>
        </div>
      </div>
    </section>
  );
}