import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";

export default function HomePage() {
  const [email, setEmail] = useState("");

  const handleSignUp = () => {
    console.log("VIP Sign-up Email:", email);
    alert("Thanks for signing up! We'll be in touch soon.");
  };

  return (
    <div className="min-h-screen bg-black text-white p-6">
      <header className="text-center mb-12">
        <h1 className="text-4xl font-bold mb-2">Fitness Goals • TRT • Peptides</h1>
        <p className="text-lg text-gray-400">
          Learn. Transform. Dominate.
        </p>
      </header>

      <section className="grid gap-6 mb-12">
        <Card className="bg-zinc-900 border-zinc-700">
          <CardContent className="p-6">
            <h2 className="text-2xl font-semibold mb-4">My Transformation Journey</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <img src="/mnt/data/WhatsApp Image 2025-06-24 at 4.26.46 PM.jpeg" alt="Before transformation" className="rounded-xl" />
              <img src="/mnt/data/WhatsApp Image 2025-06-24 at 4.27.29 PM.jpeg" alt="After transformation" className="rounded-xl" />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-zinc-900 border-zinc-700">
          <CardContent className="p-6">
            <h2 className="text-2xl font-semibold mb-4">What You'll Learn</h2>
            <ul className="list-disc list-inside text-gray-300 space-y-2">
              <li>TRT protocols for optimal performance</li>
              <li>Peptide benefits and safe use education</li>
              <li>Customized fitness and diet plans</li>
              <li>Weekly tips and updates from my own journey</li>
            </ul>
          </CardContent>
        </Card>

        <Card className="bg-zinc-900 border-zinc-700">
          <CardContent className="p-6">
            <h2 className="text-2xl font-semibold mb-4">Pricing & Plans</h2>
            <div className="space-y-6 text-gray-300">
              <div>
                <h3 className="text-xl font-bold text-white">Basic TRT Protocol - $150/month</h3>
                <p>Includes weekly check-ins, dosage guidance, and access to VIP support group.</p>
                <a href="/pdfs/basic-trt-protocol.pdf" download className="underline text-blue-400">Download PDF</a>
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">Advanced Peptide Stack - $220/month</h3>
                <p>Stack recommendations based on goals: fat loss, muscle growth, healing. Full education and calendar access included.</p>
                <a href="/pdfs/advanced-peptide-stack.pdf" download className="underline text-blue-400">Download PDF</a>
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">Full Body Recomp Plan - $299/month</h3>
                <p>Includes TRT + Peptides + Custom Workout Plan + Nutrition Protocol. VIP access to exclusive webinars and Q&A.</p>
                <a href="/pdfs/full-body-recomp-plan.pdf" download className="underline text-blue-400">Download PDF</a>
              </div>
            </div>
          </CardContent>
        </Card>
      </section>

      <section className="bg-zinc-800 p-6 rounded-2xl max-w-xl mx-auto text-center">
        <h3 className="text-2xl font-bold mb-4">Join the VIP Club</h3>
        <p className="text-gray-400 mb-6">
          Get exclusive access to customized weight loss and workout plans.
        </p>
        <div className="flex gap-2">
          <Input
            type="email"
            placeholder="Enter your email"
            className="flex-1"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Button onClick={handleSignUp}>Join</Button>
        </div>
      </section>
    </div>
  );
}