import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { MapPin, Phone } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import AnimatedHero from "@/components/animated-hero"
import ServiceDropdown from "@/components/service-dropdown"
import ClinicSenseButton from "@/components/clinicsense-button"

export default function HomePage() {
  const massageDropdownItems = [
    { title: "Scope of Practice", href: "/massage/scope" },
    { title: "Benefits of Massage Therapy", href: "/massage/benefits" },
    { title: "Conditions Treated", href: "/massage/conditions" },
    { title: "Techniques", href: "/massage/techniques" },
  ]

  const laserDropdownItems = [
    { title: "A note about Scope of Practice", href: "/laser/scope" },
    { title: "Benefits of Laser Therapy", href: "/laser/benefits" },
    { title: "Conditions Treated", href: "/laser/conditions" },
    { title: "The Science", href: "/laser/science" },
  ]

  return (
    <div className="min-h-screen bg-green-50">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-green-100 to-green-200 py-20 lg:py-32 min-h-screen flex items-center">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <AnimatedHero />
              <div
                className="flex flex-col sm:flex-row gap-4 opacity-0 animate-fade-in-up"
                style={{ animationDelay: "8s", animationFillMode: "forwards" }}
              >
                <ClinicSenseButton className="inline-block" size="medium" color="green" />
                <Button
                  variant="outline"
                  size="lg"
                  className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
                  asChild
                >
                  <Link href="/about">Learn More</Link>
                </Button>
              </div>
            </div>
            <div
              className="relative opacity-0 animate-fade-in lg:order-first"
              style={{ animationDelay: "0.5s", animationFillMode: "forwards" }}
            >
              <Image
                src="/images/reception-area.jpg"
                alt="Welcoming reception area at Ebb'nFlow Therapeutics"
                width={600}
                height={700}
                className="rounded-2xl shadow-2xl object-cover w-full h-[500px] lg:h-[600px]"
                priority
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></div>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center space-y-8">
            <h2 className="text-3xl lg:text-4xl font-light text-gray-800">A comfortable, home-based practice</h2>
            <p className="text-xl text-gray-600">in the heart of downtown St Catharines</p>
            <p className="text-lg text-nature-green font-medium">Owned and operated by Dahlia B. Steinberg RMT.</p>

            <div className="bg-green-100 p-8 rounded-2xl text-left max-w-3xl mx-auto border border-green-200">
              <p className="text-gray-700 leading-relaxed mb-4">
                A wholistic and comprehensive approach to wellness through a clinical practice in massage therapy that
                includes care for acute pain or injury and movement education that gets to the heart of the most common
                dysfunctions responsible for chronic pain.
              </p>
              <p className="text-gray-700 leading-relaxed">
                Whether you are looking for stress reduction, maintenance, injury prevention, assessment or treatment,
                pain reduction, accelerated healing, improved performance or greater awareness and enjoyment of
                movement, Ebb'nFlow Therapeutics can meet you wherever you are and help you to achieve your wellness
                goals.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-green-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-light text-gray-800 mb-4">Services</h2>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Massage Therapy */}
            <Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
              <CardHeader className="pb-4">
                <Image
                  src="/images/treatment-room.jpg"
                  alt="Professional massage therapy treatment room"
                  width={400}
                  height={250}
                  className="rounded-lg object-cover w-full h-48"
                />
              </CardHeader>
              <CardContent className="space-y-4">
                <CardTitle className="text-xl font-medium text-gray-800">Massage Therapy Treatment</CardTitle>
                <CardDescription className="text-gray-600 leading-relaxed">
                  General Swedish Massage combined with specialized techniques tailored to your specific needs.
                </CardDescription>
                <p className="text-sm text-gray-600 italic">(Click on the links below for more detailed info)</p>
                <ServiceDropdown items={massageDropdownItems} title="Learn More About Massage Therapy" />
                <div className="pt-2">
                  <ClinicSenseButton className="w-full" size="small" color="green" />
                </div>
              </CardContent>
            </Card>

            {/* Laser Therapy */}
            <Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
              <CardHeader className="pb-4">
                <Image
                  src="/images/clinic-entrance.jpg"
                  alt="Ebb'nFlow Therapeutics clinic entrance"
                  width={400}
                  height={250}
                  className="rounded-lg object-cover w-full h-48"
                />
              </CardHeader>
              <CardContent className="space-y-4">
                <CardTitle className="text-xl font-medium text-gray-800">Laser Therapy Treatment</CardTitle>
                <CardDescription className="text-gray-600 leading-relaxed">
                  Stand alone or combined with Massage Therapy. Laser Therapy utilizes the power of red and infrared
                  light...
                </CardDescription>
                <p className="text-sm text-gray-600 italic">(Click on the links below for more detailed info)</p>
                <ServiceDropdown items={laserDropdownItems} title="Learn More About Laser Therapy" />
                <div className="pt-2">
                  <ClinicSenseButton className="w-full" size="small" color="green" />
                </div>
              </CardContent>
            </Card>

            {/* Movement Education */}
            <Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
              <CardHeader className="pb-4">
                <Image
                  src="/images/reception-area.jpg"
                  alt="Comfortable space for movement education"
                  width={400}
                  height={250}
                  className="rounded-lg object-cover w-full h-48"
                />
              </CardHeader>
              <CardContent className="space-y-4">
                <CardTitle className="text-xl font-medium text-gray-800">Movement Education</CardTitle>
                <CardDescription className="text-gray-600 leading-relaxed">
                  Remedial exercise aka "Rem-Ex" instruction involves teaching targeted strength, stretch or mobility
                  exercises that further the benefits of massage therapy long term.
                </CardDescription>
                <Button
                  variant="outline"
                  className="w-full border-nature-green text-nature-green hover:bg-green-100 bg-transparent mb-2"
                  asChild
                >
                  <Link href="/movement">See Movement Workshops</Link>
                </Button>
                <ClinicSenseButton className="w-full" size="small" color="green" />
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl lg:text-4xl font-light text-gray-800 text-center mb-12">Prices</h2>

            <div className="grid md:grid-cols-2 gap-8">
              {/* Main Services */}
              <Card className="border-green-200">
                <CardHeader>
                  <CardTitle className="text-xl font-medium text-gray-800">Massage and/or Laser Therapy</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-700">30 Minute</span>
                      <span className="text-gray-800 font-medium">
                        $53.50 <span className="text-sm text-gray-600">(+$6.95 HST)</span>
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-700">45 Minute</span>
                      <span className="text-gray-800 font-medium">
                        $80.25 <span className="text-sm text-gray-600">(+$10.43 HST)</span>
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-700">60 Minute</span>
                      <span className="text-gray-800 font-medium">
                        $107.00 <span className="text-sm text-gray-600">(+$13.91 HST)</span>
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-700">75 Minute</span>
                      <span className="text-gray-800 font-medium">
                        $133.75 <span className="text-sm text-gray-600">(+$17.38 HST)</span>
                      </span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-700">90 Minute</span>
                      <span className="text-gray-800 font-medium">
                        $160.50 <span className="text-sm text-gray-600">(+$20.86 HST)</span>
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Add-on Services */}
              <Card className="border-green-200">
                <CardHeader>
                  <CardTitle className="text-xl font-medium text-gray-800">Add-on Laser Therapy</CardTitle>
                  <CardDescription className="text-gray-600">
                    If combined simultaneously with Massage Therapy for more than 15 minutes (Subject to therapist's
                    discretion)
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-center">
                    <span className="text-2xl font-medium text-nature-green">$1.00/minute</span>
                    <span className="text-sm text-gray-600 block">(+ HST)</span>
                  </div>
                  <p className="text-sm text-gray-600 text-center">Available in 15, 30, 45 and 60 minute intervals</p>
                </CardContent>
              </Card>
            </div>

            {/* Payment & Insurance Info */}
            <div className="mt-12 space-y-6">
              <Card className="border-green-200 bg-green-50">
                <CardContent className="p-6">
                  <h3 className="font-medium text-gray-800 mb-4">Payment & Insurance</h3>
                  <div className="space-y-3 text-gray-700">
                    <p>
                      <strong>Accepted:</strong> Cash, E-transfer, Debit, Credit Card (Visa, AmEx, Mastercard)
                    </p>
                    <p>
                      RMTs are regulated health care professionals recognized by insurance companies across Ontario.
                    </p>
                    <p>
                      It is recommended that clients check with their insurance provider about whether they are required
                      to have a doctor's note in order to submit a claim.
                    </p>
                    <p>
                      Your receipt will include the practitioner's registration number necessary for an insurance claim
                      submission. This number verifies that your therapist is registered with the College of Massage
                      Therapists of Ontario (CMTO).
                    </p>
                    <p className="text-gray-600 italic">
                      Direct billing is currently not available but coming soon. Stay tuned.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-green-100">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-8">
            <h2 className="text-2xl font-light text-gray-800">Ready to Begin Your Wellness Journey?</h2>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-8 text-gray-600 mb-6">
              <div className="flex items-center gap-2">
                <Phone className="h-5 w-5 text-nature-green" />
                <span>(289) 969-3219</span>
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="h-5 w-5 text-nature-green" />
                <span>Downtown St. Catharines</span>
              </div>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <ClinicSenseButton size="medium" color="green" />
              <Button
                variant="outline"
                size="lg"
                asChild
                className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
              >
                <Link href="/contact">Contact Dahlia</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}