import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { PlayIcon, BookOpenIcon, LibraryIcon, UserIcon, FileTextIcon } from "lucide-react";

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

  return (
    <div className="min-h-screen bg-white text-black px-4 py-8 md:px-20">
      <header className="mb-12 text-center">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">Flamenco & Fingerstyle Guitar</h1>
        <p className="text-lg md:text-xl">Master the art of guitar with modern video lessons and tab downloads</p>
      </header>

      <section className="grid md:grid-cols-2 gap-8 mb-16">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4 mb-4">
              <PlayIcon className="w-6 h-6" />
              <h2 className="text-2xl font-semibold">Video Lessons</h2>
            </div>
            <p className="text-base text-gray-700">
              Step-by-step video tutorials to develop your flamenco and fingerstyle techniques. Suitable for all levels.
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4 mb-4">
              <BookOpenIcon className="w-6 h-6" />
              <h2 className="text-2xl font-semibold">TAB & Notation</h2>
            </div>
            <p className="text-base text-gray-700">
              Access accurate tablature and sheet music for every lesson. Downloadable and easy to follow.
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4 mb-4">
              <LibraryIcon className="w-6 h-6" />
              <h2 className="text-2xl font-semibold">Lesson Library</h2>
            </div>
            <p className="text-base text-gray-700">
              Browse through a categorized archive of lessons for beginner to advanced players, all in one place.
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4 mb-4">
              <UserIcon className="w-6 h-6" />
              <h2 className="text-2xl font-semibold">User Login</h2>
            </div>
            <p className="text-base text-gray-700">
              Create a profile to track your progress, bookmark lessons, and access exclusive content.
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4 mb-4">
              <FileTextIcon className="w-6 h-6" />
              <h2 className="text-2xl font-semibold">Guitar Blog</h2>
            </div>
            <p className="text-base text-gray-700">
              Read articles on technique, flamenco history, gear reviews, and tips to stay inspired.
            </p>
          </CardContent>
        </Card>
      </section>

      <section className="text-center mb-20">
        <h3 className="text-xl md:text-2xl font-medium mb-4">Get Early Access</h3>
        <p className="text-base mb-6">Sign up to be notified when new lessons drop</p>
        <div className="flex flex-col md:flex-row justify-center gap-4 max-w-xl mx-auto">
          <Input
            placeholder="Enter your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="flex-1"
          />
          <Button>Notify Me</Button>
        </div>
      </section>

      <footer className="text-center text-sm text-gray-500">
        © {new Date().getFullYear()} Flamenco & Fingerstyle Guitar. All rights reserved.
      </footer>
    </div>
  );
}