"use client";

import Link from "next/link";
import React from "react";
import { MdArrowOutward } from "react-icons/md";
import { GiFlowerPot } from "react-icons/gi";
import { FaLeaf } from "react-icons/fa";
import { BsStars } from "react-icons/bs";

const FeaturesSect = () => {
  return (
    <section className="py-24 bg-gradient-to-b from-[#fff7f9] to-[#f3f3f3]">
      <div className="max-w-[1300px] mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">

        {/* LEFT CONTENT */}
        <div>

          {/* Badge */}
          <div className="flex items-center gap-3 mb-5">
            <div className="bg-pink-100 text-pink-600 p-2 rounded-lg">
              <GiFlowerPot size={22} />
            </div>
            <span className="uppercase text-sm tracking-widest text-gray-500 font-semibold">
              Nilkanth Flower Factory Private Limited
            </span>
          </div>

          {/* Heading */}
          <p className="text-xl lg:text-3xl font-bold text-gray-900 leading-tight mb-4">
           Elegance That Never Fades
          </p>

          {/* Description */}
          <p className="text-gray-600 text-sm leading-relaxed mb-6 max-w-xl">
            Our products maintain their freshness and beauty without any maintenance, making them a perfect choice for modern décor.
          </p>

          {/* Features */}
          <div className="grid md:grid-cols-3 gap-6">

            <div className="bg-white p-6 rounded-xl border hover:shadow-md transition shadow-lg shadow-gray-700">
              <FaLeaf className="text-green-500 mb-3" size={24} />
              <p className="font-semibold text-gray-800">
                Realistic Design
              </p>
              <p className="text-sm text-gray-500 mt-1">
                Natural look with premium finishing
              </p>
            </div>

            <div className="bg-white p-6 rounded-xl shadow-lg shadow-gray-700 border hover:shadow-md transition">
              <BsStars className="text-yellow-500 mb-3" size={24} />
              <p className="font-semibold text-gray-800">
                Premium Quality
              </p>
              <p className="text-sm text-gray-500 mt-1">
                Crafted using durable materials
              </p>
            </div>

            <div className="bg-white p-6 rounded-xl shadow-lg shadow-gray-700 border hover:shadow-md transition">
              <GiFlowerPot className="text-pink-500 mb-3" size={24} />
              <p className="font-semibold text-gray-800">
                Wide Collection
              </p>
              <p className="text-sm text-gray-500 mt-1">
                Flowers for décor, events & gifting
              </p>
            </div>

          </div>

        </div>

        {/* RIGHT VIDEO */}
        <div className="relative">

          {/* Decorative Glow */}
          <div className="absolute -inset-6 bg-pink-200 blur-3xl opacity-30 rounded-full"></div>

          {/* Video Card */}
          <div className="relative bg-white p-3 rounded-2xl shadow-xl">
        
            <iframe
              className="w-full rounded-xl lg:h-[321px] h-[200px] object-cover"
              // height="321"
              src="https://www.youtube.com/embed/VdKYbElro5w?autoplay=1&mute=1&loop=1&playlist=VdKYbElro5w&rel=0&modestbranding=1&controls=0&showinfo=0"
              title="Artificial Flower Manufacturing Video"
              frameBorder="0"
              allow="autoplay; encrypted-media; accelerometer; gyroscope; picture-in-picture"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
            ></iframe>
         
          </div>

        </div>

      </div>
    </section>
  );
};

export default FeaturesSect;