import Image from "next/image";
import { Check } from "lucide-react";

export default function ProductSection() {
  const features = [
    "Content Creation: Producing creative and engaging content such as posts, images, videos, and stories that align with the brand and attract audience attention.",
    "Social Media Account Management: Managing business social media accounts, including scheduling posts, monitoring interactions, and engaging with followers.",
    "Paid Advertising Campaigns: Designing, executing, and managing paid advertising campaigns on various social media platforms to reach a more specific target audience and improve ROI (Return on Investment).",
  ];
  return (
    <section className="bg-white py-32">
      <div className="container mx-auto px-6">
        {/* TITLE */}
        <div className="mb-20 text-center">
          <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
            Our Product
          </p>

          <h2 className="mx-auto max-w-3xl text-4xl font-extrabold leading-tight md:text-5xl">
            The product we offer is{" "}
            <span className="relative inline-block">
              <span className="absolute bottom-2 left-0 h-3 w-full bg-[#f5d28a]"></span>
              <span className="relative italic text-[#966314]">designed</span>
            </span>{" "}
            to meet your business needs.
          </h2>
        </div>

        {/* CONTENT */}
        <div className="grid grid-cols-1 items-center gap-16 md:grid-cols-2">
          {/* LEFT IMAGE */}
          <div className="flex justify-center">
            <Image
              src="/image/p1.png"
              alt="Product Illustration"
              width={520}
              height={420}
              className="object-contain"
            />
          </div>

          {/* RIGHT CONTENT */}
          <div className="max-w-xl">
            {/* ICON */}
            <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fdecc8]">
              <Image
                src="/image/product-icon.png"
                alt="Product Icon"
                width={22}
                height={22}
              />
            </div>

            <h3 className="mb-4 text-2xl font-bold text-gray-900">
              MediaHUB Content Aggregator
            </h3>

            <p className="mb-8 text-sm leading-relaxed text-gray-600">
              Social media marketing services are provided by companies or
              individuals who specialize in marketing strategies through social
              media platforms.
            </p>

            {/* FEATURES */}
            <ul className="mb-6 space-y-4">
              {features.map((item) => (
                <li key={item} className="flex gap-3 text-sm text-gray-600">
                  <span className="mt-1 flex h-8 w-16 items-center justify-center rounded-full bg-[#fdecc8]">
                    <Check size={12} className="text-[#966314]" />
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            {/* CTA */}
            <button className="text-sm font-semibold text-[#966314] hover:underline">
              Learn More →
            </button>
          </div>
        </div>
        <div className="grid grid-cols-1 items-center gap-16 md:grid-cols-2 mt-10">
          {/* LEFT IMAGE */}

          {/* RIGHT CONTENT */}
          <div className="max-w-xl ml-10">
            {/* ICON */}
            <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fdecc8]">
              <Image
                src="/image/product-icon.png"
                alt="Product Icon"
                width={22}
                height={22}
              />
            </div>

            <h3 className="mb-4 text-2xl font-bold text-gray-900">
              Multipool Reputation Management
            </h3>

            <p className="mb-8 text-sm leading-relaxed text-gray-600">
              Social media marketing services are provided by companies or
              individuals who specialize in marketing strategies through social
              media platforms.
            </p>

            {/* FEATURES */}
            <ul className="mb-6 space-y-4">
              {features.map((item) => (
                <li key={item} className="flex gap-3 text-sm text-gray-600">
                  <span className="mt-1 flex h-8 w-16 items-center justify-center rounded-full bg-[#fdecc8]">
                    <Check size={12} className="text-[#966314]" />
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            {/* CTA */}
            <button className="text-sm font-semibold text-[#966314] hover:underline">
              Learn More →
            </button>
          </div>
          <div className="flex justify-center">
            <Image
              src="/image/p2.png"
              alt="Product Illustration"
              width={520}
              height={420}
              className="object-contain"
            />
          </div>
        </div>
        <div className="grid grid-cols-1 items-center gap-16 md:grid-cols-2 mt-10">
          {/* LEFT IMAGE */}
          <div className="flex justify-center">
            <Image
              src="/image/p3.png"
              alt="Product Illustration"
              width={520}
              height={420}
              className="object-contain"
            />
          </div>

          {/* RIGHT CONTENT */}
          <div className="max-w-xl">
            {/* ICON */}
            <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fdecc8]">
              <Image
                src="/image/product-icon.png"
                alt="Product Icon"
                width={22}
                height={22}
              />
            </div>

            <h3 className="mb-4 text-2xl font-bold text-gray-900">
              PR Room Opinion Management
            </h3>

            <p className="mb-8 text-sm leading-relaxed text-gray-600">
              Social media marketing services are provided by companies or
              individuals who specialize in marketing strategies through social
              media platforms.
            </p>

            {/* FEATURES */}
            <ul className="mb-6 space-y-4">
              {features.map((item) => (
                <li key={item} className="flex gap-3 text-sm text-gray-600">
                  <span className="mt-1 flex h-8 w-16 items-center justify-center rounded-full bg-[#fdecc8]">
                    <Check size={12} className="text-[#966314]" />
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            {/* CTA */}
            <button className="text-sm font-semibold text-[#966314] hover:underline">
              Learn More →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}