import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { useState } from "react";

export default function HomePage() {
  const [contactVisible, setContactVisible] = useState(false);

  return (
    <main className="p-6 md:p-10 bg-gradient-to-br from-white to-slate-100 min-h-screen text-gray-800">
      <section className="max-w-4xl mx-auto text-center mb-16">
        <motion.h1
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-5xl font-bold mb-4"
        >
          Twój Nowy Wizerunek z Profesjonalnym Stylistą
        </motion.h1>
        <p className="text-lg md:text-xl text-gray-600">
          Pomagam Ci odkryć i podkreślić Twoje naturalne piękno poprzez modę i styl.
        </p>
        <div className="mt-6">
          <Button onClick={() => setContactVisible(true)}>Umów Konsultację</Button>
        </div>
      </section>

      <section className="max-w-5xl mx-auto mb-20">
        <div className="flex flex-col md:flex-row items-center gap-6">
          <div className="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
            {/* Miejsce na zdjęcie stylisty */}
            <span className="text-gray-400">Tutaj dodaj swoje zdjęcie</span>
          </div>
          <div className="w-full md:w-1/2">
            <h2 className="text-3xl font-semibold mb-4">O mnie</h2>
            <p className="text-gray-700 text-base">
              Nazywam się [Twoje Imię] i jestem certyfikowaną stylistką personalną z kilkuletnim doświadczeniem w pracy z klientkami indywidualnymi. 
              Moją pasją jest pomaganie kobietom w odkrywaniu ich indywidualnego stylu i budowaniu pewności siebie poprzez modę. 
              W swojej pracy stawiam na autentyczność, indywidualne podejście oraz praktyczne porady, które realnie ułatwiają codzienne wybory modowe.
            </p>
          </div>
        </div>
      </section>

      <section className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mb-20">
        {[{
            title: "Analiza Stylu",
            desc: "Spotkanie, podczas którego określamy Twój typ sylwetki, kolory najbardziej Ci pasujące oraz preferowany styl. 
            Na podstawie Twoich potrzeb i osobowości tworzę rekomendacje stylizacyjne, które będą Cię wspierać na co dzień."
          },
          {
            title: "Przegląd Szafy",
            desc: "Wizyta w Twoim domu, podczas której wspólnie przeglądamy Twoją garderobę. 
            Określamy, które ubrania warto zostawić, co można ze sobą łączyć oraz co ewentualnie dokupić, by uzupełnić stylowe zestawy."
          },
          {
            title: "Zakupy ze Stylistą",
            desc: "Zabieram Cię na wspólne zakupy, które są przemyślane i dopasowane do Twoich potrzeb oraz budżetu. 
            Pomagam wybierać rzeczy, które tworzą spójną garderobę i sprawiają, że czujesz się sobą."
          }
        ].map((item, i) => (
          <Card key={i} className="rounded-2xl shadow-md">
            <CardContent className="p-6">
              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
              <p className="text-gray-600 text-sm whitespace-pre-line">{item.desc}</p>
            </CardContent>
          </Card>
        ))}
      </section>

      {contactVisible && (
        <section className="max-w-xl mx-auto p-6 bg-white rounded-2xl shadow-md">
          <h2 className="text-2xl font-semibold mb-4">Formularz Kontaktowy</h2>
          <form className="grid gap-4">
            <input
              type="text"
              placeholder="Imię i nazwisko"
              className="border p-2 rounded-md"
            />
            <input
              type="email"
              placeholder="Adres e-mail"
              className="border p-2 rounded-md"
            />
            <textarea
              placeholder="Twoja wiadomość"
              className="border p-2 rounded-md"
              rows={4}
            />
            <Button type="submit">Wyślij</Button>
          </form>
        </section>
      )}
    </main>
  );
}