import { Hero } from "@/components/hero";
import { Features } from "@/components/features";
import { Footer } from "@/components/footer";
import { MiamiGallery } from "@/components/miami-gallery";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { KleapForm } from "@/components/kleap-form";

export default function Home() {
  const contactFields = [
    { name: "name", label: "Full Name", type: "text" as const, required: true },
    { name: "email", label: "Email Address", type: "email" as const, required: true },
    { name: "phone", label: "Phone Number", type: "tel" as const, required: true },
    { 
      name: "service", 
      label: "Interested Service", 
      type: "select" as const, 
      options: ["Personal Training", "Performance Coaching", "Group Sessions"],
      required: true 
    },
    { name: "message", label: "Tell us about your goals", type: "textarea" as const, required: true },
  ];

  return (
    <main className="min-h-screen bg-white">
      <Hero />
      <Features />
      <MiamiGallery />
      
      <section className="py-24 relative overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-cyan-50/50 -z-10" />
        <Container>
          <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <Heading className="text-4xl md:text-6xl font-black mb-6 leading-tight">
                READY TO <br />
                <span className="text-cyan-500">LEVEL UP?</span>
              </Heading>
              <p className="text-neutral-600 text-xl mb-8">
                Don't wait for Monday. Start your transformation today in the heart of Miami.
              </p>
              <div className="space-y-4">
                {["Custom Nutrition Plans", "Elite Performance Tracking", "Beach & Gym Access"].map((item, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center text-white text-xs">✓</div>
                    <span className="font-bold text-neutral-800">{item}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-white p-10 rounded-[2rem] border shadow-2xl relative">
              <div className="absolute -top-6 -right-6 w-24 h-24 bg-pink-500 rounded-full flex items-center justify-center text-white font-black text-center leading-tight -rotate-12 shadow-xl">
                FREE <br /> TRIAL
              </div>
              <KleapForm 
                formId="contact-coaching" 
                title="Coaching Inquiry" 
                fields={contactFields} 
              />
            </div>
          </div>
        </Container>
      </section>

      <Footer />
    </main>
  );
}