import React from 'react';
import Image from 'next/image';

const ResellerHero: React.FC = () => {
  return (
    <section className="relative pt-[120px] md:pt-[150px] pb-10 md:pb-20 bg-[#FDF4FF] font-sans overflow-hidden px-4 sm:px-6 lg:px-[150px]">
      <div className="container mx-auto max-w-[1280px]">
        
        {/* Top Content Header */}
        <div className="max-w-[1000px] mb-16">
          <span className="text-[#1E1B4B] font-bold text-lg md:text-xl block mb-6">
            Up To <span className="text-[#7F00FF]">70%</span> Off Reseller Hosting
          </span>
          <h1 className="text-3xl md:text-6xl lg:text-[80px] font-bold text-[#1E1B4B] leading-[1.1] mb-10 tracking-tight">
            Reseller Hosting In <br />
            Pakistan Powerful <br />
            And Affordable <br />
            (With WHMCS)
          </h1>
          <p className="text-gray-500 text-sm md:text-base font-medium max-w-[600px] leading-relaxed">
            ZtHosting offers Best Reseller hosting in Pakistan with Cpanel / WHM powered by high-performance Control Panel with Softaculous, Jetbackup & CloudLinux.
          </p>
        </div>
      </div>

      <div className="w-full">

        {/* Hero Banner Card */}
        <div className="relative rounded-[24px] md:rounded-[40px] p-6 md:p-12 lg:p-20 overflow-hidden min-h-[300px] md:min-h-[450px] flex items-center w-full bg-white md:bg-transparent">
          {/* Background Image */}
          <div className="absolute inset-0 w-full h-full pointer-events-none hidden md:block">
            <Image
              src="/Frame 561.png"
              alt="Cheap Reseller Hosting"
              fill
              className="object-cover object-right lg:object-center"
              priority
            />
          </div>

          <div className="relative z-10 w-full max-w-[600px]">
            <h2 className="text-2xl md:text-[44px] font-black text-[#1E1B4B] mb-4 md:mb-6 tracking-tight leading-tight">
              Cheap Reseller Hosting <br className="hidden md:block" />
              In Pakistan – High-Value Low Price
            </h2>
            <p className="text-gray-600 font-medium text-[15px] leading-relaxed opacity-90 max-w-[550px]">
              No One can offer Discounts and Services like Zthosting. Cheap Reseller Hosting in Pakistan with 100% Uptime, Weekly Incremental Backups on the remote location, Whitelabel DNS, Discounted Billing System (WHMCS), Multi-Location Datacenter, Unlimited Storage and Bandwidth with Overselling feature.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ResellerHero;