import Image from "next/image"
import Link from "next/link"

export default function HeroSection() {
  const imageUrl = "https://uploads.vulai.co.za/vula-uploads/e691b2f9-937a-45fd-a18f-c5b9cf1193f2/library/563a1f743e9209847727c3b488dd685b87ce828c1c3a1bff0fd9ba9712a9e189.jpg"

  return (
    <section data-vula-section="hero" id="hero" className="relative flex flex-col md:flex-row min-h-[82vh]">
      <div className="relative w-full md:w-1/2 h-72 md:h-auto min-h-[320px] overflow-hidden">
        {imageUrl ? (
          <Image src={imageUrl} alt="The Bay Chiro" fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" priority />
        ) : (
          <div className="absolute inset-0 bg-gradient-to-br from-primary to-secondary" />
        )}
      </div>
      <div className="w-full md:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-14" style={{ backgroundColor: "#f2f4f5", color: "#1f2a33" }}>
        <h1 className="text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl">{"The Bay "}<span className="text-accent">{"Chiro"}</span></h1>
        <p className="text-base lg:text-lg mb-8 max-w-lg" style={{ color: "#535d65" }}>{"A specialised chiropractic practice led by Dr. K.P. Khumalo (M.TECH.CHIRO.S.A) offering tailored, evidence-based treatment plans for the whole family — from 6-week-old babies to pregnant mothers and athletes — addressing the root cause of musculoskeletal and nervous system disorders, not just symptoms."}</p>
        <div className="w-fit"><Link href="#contact" className="inline-block bg-primary text-primary-foreground px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200">Book an appointment</Link></div>
      </div>
    </section>
  )
}