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

const WordPressService: React.FC = () => {
  return (
    <>
      <section className="pt-10 md:pt-24 pb-10 md:pb-16 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-[150px]">
        <div className="container mx-auto max-w-[1280px]">

          {/* Top Feature Cards Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-8">
          <div className="bg-[#7F00FF05] border border-purple-50 rounded-2xl md:rounded-[40px] p-4 md:p-14 flex flex-col gap-2 md:gap-6 hover:shadow-md transition-shadow">
            <h3 className="text-sm md:text-3xl font-black text-[#1E1B4B] tracking-tight leading-tight">Cheap WordPress Hosting Pakistan</h3>
            <p className="text-gray-500 font-medium text-[11px] md:text-base leading-snug md:leading-relaxed">
              We understand affordability is essential for web hosting, so we offer affordable Managed WordPress Hosting plans in Pakistan. Our plans are designed to be affordable for businesses of all sizes without compromising quality or performance.
            </p>
          </div>
          <div className="bg-[#7F00FF05] border border-purple-50 rounded-2xl md:rounded-[40px] p-4 md:p-14 flex flex-col gap-2 md:gap-6 hover:shadow-md transition-shadow">
            <h3 className="text-sm md:text-3xl font-black text-[#1E1B4B] tracking-tight leading-tight">Optimized for SEO</h3>
            <p className="text-gray-500 font-medium text-[11px] md:text-base leading-snug md:leading-relaxed">
              At ZtHosting, we understand the importance of SEO for your website's success. Our Managed WordPress Hosting plans are optimized for SEO, with relevant keywords in the headline, subheadings, and body text. We also use meta descriptions and alt text for images to help search engines understand what your page is about.
            </p>
          </div>
          </div>
        </div>
      </section>

      {/* Edge-to-Edge Typography Banner */}
      <section className="relative w-full overflow-hidden py-16 md:py-32 flex items-center min-h-[500px] md:min-h-[600px]">
        {/* Background Image */}
        <div className="absolute inset-0 w-full h-full pointer-events-none z-0">
          <Image 
            src="/Group 1000001597.png" 
            alt="Managed WordPress Background" 
            fill 
            className="object-cover object-center" 
            priority
          />
        </div>

        {/* Content Wrapper aligned with page layout */}
        <div className="w-full relative z-10 px-4 sm:px-6 lg:px-[150px]">
          <div className="container mx-auto max-w-[1280px]">
            
            {/* Left Aligned Content */}
            <div className="max-w-[750px] flex flex-col gap-8 text-left">
              <h2 className="text-3xl sm:text-[40px] md:text-6xl lg:text-[72px] leading-[1.1] tracking-tight text-white">
                Managed WordPress <br /> Hosting Service
              </h2>

              <div className="flex flex-col gap-6 text-[15px] md:text-base font-medium text-white/90 leading-[1.8] max-w-[700px]">
                <p>
                  We offer completely managed WordPress hosting services in Pakistan; themes, plugins technology of any kind is on us. WordPress with a cloud interface focuses on reusability, ease, and minimization of complexity that you may face traditionally.
                </p>
                <p>
                  Backup and restore complex techniques reduced to a single click. auto managerial traffic modules optimizing the site capability, built-in email modules reduce your time to fraction.
                </p>
                <p>
                  Migrating tools make sure of transmission of your valued data to a safer place. And no worries at all every tool are applied by default to free you from complexities of things you feel overtiring.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default WordPressService;