"use client";

import { motion } from "framer-motion";
import { Droplet, Shield, Clock, Heart } from "lucide-react";

const features = [
  {
    icon: Droplet,
    title: "Deep Hydration & Nourishment",
    description:
      "Our cold-pressed oils penetrate deep into hair and skin, delivering essential fatty acids and vitamins for lasting moisture without greasiness.",
  },
  {
    icon: Shield,
    title: "Natural Protection",
    description:
      "Rich in antioxidants, our oils shield your hair and skin from environmental stressors, UV damage, and pollution.",
  },
  {
    icon: Clock,
    title: "Anti-Ageing Benefits",
    description:
      "Packed with vitamin E and essential nutrients that promote collagen production and cellular renewal for youthful skin and healthy hair.",
  },
  {
    icon: Heart,
    title: "Gentle for All Types",
    description:
      "100% natural, cruelty-free formulas suitable for sensitive skin and all hair types. No synthetic fragrances or harsh chemicals.",
  },
];

export default function FeaturesSection() {
  return (
    <section className="py-24 lg:py-32 bg-white">
      <div className="max-w-[1400px] mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
          {/* Left Content */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
              The Science
            </span>
            <h2 className="font-serif italic text-4xl lg:text-5xl xl:text-6xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6">
              You have needs,
              <br />
              we have answers
            </h2>
          </motion.div>

          {/* Right Features List */}
          <div className="space-y-0">
            {features.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="border-b border-dashed border-[#1A1A1A]/10 py-6 first:pt-0 last:border-b-0"
              >
                <div className="flex items-start gap-5">
                  <div className="shrink-0 text-[#1A1A1A]/70 mt-0.5">
                    <feature.icon className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="text-[#1A1A1A] font-medium text-base tracking-wide mb-1.5">
                      {feature.title}
                    </h3>
                    <p className="text-[#4A4A4A] text-sm leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}