"use client";

import Image from "next/image";
import { useEffect, useState } from "react";


export default function ActiveBrandShowcase() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const brandData = {
    title: "Active",
    documentId: "kljvt7958pfxnxc8iv4tulz9",
    image: {
      documentId: "klzro7ugdmmft1706ysh40vd",
      alternativeText: null,
      url: "https://storage.adhorizonintl.com/horizon/media/logo_1_200x130_convert_io_1_03100d49db.webp",
    },
    description:
      '<p>Active is a trusted name in the personal care and household products industry, offering a wide range of high-quality <strong data-start="164" data-end="178">detergents</strong>, <strong data-start="180" data-end="192">shampoos</strong>, and <strong data-start="198" data-end="220">hygiene essentials</strong>. Committed to cleanliness, health, and well-being, Active\'s products are designed to meet the diverse needs of families, ensuring they stay fresh and clean every day. Whether it\'s keeping your home spotless or maintaining personal hygiene, Active provides solutions that are not only effective but also gentle on skin and surfaces. Choose Active for a healthier, cleaner lifestyle!</p><p>&nbsp;</p>',
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center p-4 sm:p-6 md:p-8">
      <div
        className={`max-w-4xl w-full bg-white rounded-2xl shadow-2xl overflow-hidden transition-all duration-1000 transform ${
          isVisible ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
        }`}
      >
        <div className="flex flex-col md:flex-row">
          {/* Left side - Image and title */}
          <div className="md:w-2/5 bg-gradient-to-br from-cyan-500 to-blue-600 p-8 flex flex-col items-center justify-center text-white">
            <div className="w-full max-w-[200px] h-[130px] relative mb-6 bg-white rounded-lg p-4 shadow-lg transform transition-transform duration-500 hover:scale-105">
              <Image
                src={brandData.image.url || "/placeholder.svg"}
                alt={brandData.image.alternativeText || brandData.title}
                fill
                style={{ objectFit: "contain" }}
                className="p-2"
              />
            </div>
            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 text-center">
              {brandData.title}
            </h1>
            <div className="flex space-x-2 mt-2">
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                Detergents
              </span>
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                Shampoos
              </span>
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                Hygiene
              </span>
            </div>
          </div>

          {/* Right side - Description */}
          <div className="md:w-3/5 p-8 md:p-10">
            <div className="relative">
              <div className="absolute -top-6 -left-6 w-12 h-12 rounded-full bg-cyan-100 opacity-70"></div>
              <div className="absolute -bottom-6 -right-6 w-16 h-16 rounded-full bg-blue-100 opacity-70"></div>

              <h2 className="text-2xl font-semibold text-gray-800 mb-6 relative">
                About the Brand
              </h2>

              <div
                className="prose prose-lg max-w-none text-gray-600 relative z-10"
                dangerouslySetInnerHTML={{ __html: brandData.description }}
              />

              <div className="mt-8 flex flex-wrap gap-4">
                <button className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                  Explore Products
                </button>
                <button className="px-6 py-3 border-2 border-cyan-500 text-cyan-600 font-medium rounded-lg hover:bg-cyan-50 transition-all duration-300">
                  Learn More
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom section - Features */}
        <div className="bg-gray-50 p-8 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
            <div className="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 text-cyan-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              High Quality
            </h3>
            <p className="text-gray-600">
              Premium products designed to meet the highest standards of
              cleanliness and care.
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 text-blue-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              Family Friendly
            </h3>
            <p className="text-gray-600">
              Gentle formulations that are safe for the whole family, including
              sensitive skin.
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
            <div className="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 text-cyan-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              Eco-Conscious
            </h3>
            <p className="text-gray-600">
              Committed to sustainable practices and environmentally friendly
              formulations.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
