import React from "react";
const clients = [
  { src: "/img/Client-1.png", alt: "Client 1" },
  { src: "/img/Client-2.png", alt: "Client 2" },
  { src: "/img/Client-3.png", alt: "Client 3" },
];

export default function Hero() {
  return (
    <section className="relative w-full overflow-hidden">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#add0ff] via-white to-[#add0ff]" />

      {/* Main content */}
      <div className="relative max-w-7xl mx-auto px-8 sm:px-6 md:px-10 lg:px-8 flex flex-col lg:flex-row items-start lg:items-center justify-between pt-25  sm:pt-30 md:pt-35 sm:py-12 md:py-16 lg:py-32">
        {/* Left content */}
        <div className="w-full lg:w-1/2 text-left lg:pr-8 mb-12 lg:mb-0">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-4 lg:mb-8 text-blue-900">
            Digital Solutions that Drive Growth
          </h1>
          <p className="text-base md:text-lg lg:text-xl mb-6 lg:mb-10 text-black max-w-2xl md:leading-relaxed">
            At Digitro Solution, we help businesses establish a powerful online
            presence through modern websites, impactful graphics, mobile apps,
            and ROI-focused digital marketing. Let’s build your brand and grow
            your business in the digital world.
          </p>

          {/* buttons */}
          <div className="flex flex-row sm:flex-row gap-4 md:gap-6">
            <a href="#about">
            <button className="px-3 py-2 sm:px-6 sm:py-3 bg-blue-900 text-[#ECECEC] font-medium rounded-lg hover:bg-blue-500 transition duration-300 shadow-lg">
              Get Started
            </button>
            </a>
            <a href="#services">
            <button className="px-3 py-2 sm:px-6 sm:py-3 border border-blue-900 text-black font-medium rounded-lg hover:bg-blue-500 hover:text-[#ECECEC] transition duration-300 shadow-lg">
              View Our Services
            </button>
            </a>
          </div>

          {/* Client */}
          <div className="mt-5 lg:mt-10">
            <p className="text-sm text-[#545454] mb-3 lg:mb-5">
              Trusted by businesses across industries
            </p>
            <div className="flex flex-wrap gap-4 items-center">
              {clients.map(({ src, alt }) => (
                <img
                  key={alt}
                  src={src}
                  alt={alt}
                  className="h-8 md:h-10 object-contain"
                />
              ))}
            </div>
          </div>
        </div>

        {/* Right image */}
        <div className="hidden lg:flex w-full lg:w-3/5 justify-center lg:justify-end">
          <img
            src="/img/hero.png"
            alt="Hero"
            className="rounded-xl shadow-lg w-full max-w-lg md:max-w-xl lg:max-w-2xl object-cover"
          />
        </div>
      </div>

      {/* Decorative blurs */}
      <div className="absolute top-10 right-10 w-24 md:w-32 lg:w-40 h-24 md:h-32 lg:h-40 bg-[#545454] rounded-full opacity-5 blur-3xl" />
      <div className="absolute bottom-10 left-10 w-32 md:w-48 lg:w-64 h-32 md:h-48 lg:h-64 bg-[#004aad] rounded-full opacity-5 blur-3xl" />
    </section>
  );
}
