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

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* Hero Section */}
      <section className="text-center py-20 px-6">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-6xl font-bold mb-6"
        >
          Self Employed Association
        </motion.h1>
        <p className="text-lg md:text-xl max-w-2xl mx-auto mb-8">
          Empowering independent professionals with AI tools, business support,
          and affordable resources to grow smarter.
        </p>
        <div className="flex justify-center gap-4">
          <Button className="text-lg px-6 py-3">Start Free Trial</Button>
          <Button variant="outline" className="text-lg px-6 py-3">
            Learn More
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-600">
          Free for 1 month • Then just $5/month
        </p>
      </section>

      {/* Features */}
      <section className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 px-6 py-16 max-w-6xl mx-auto">
        {[
          {
            title: "AI Assistant / Receptionist",
            desc: "24/7 AI support to handle customer inquiries and scheduling.",
          },
          {
            title: "Website Development",
            desc: "Professional website creation and ongoing maintenance.",
          },
          {
            title: "Lead Generation",
            desc: "Tools and strategies to help you attract and convert clients.",
          },
          {
            title: "Educational AI Insights",
            desc: "AI-powered opinions on tax and investments (no guarantees).",
          },
        ].map((feature, i) => (
          <Card key={i} className="rounded-2xl shadow-sm">
            <CardContent className="p-6">
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.desc}</p>
            </CardContent>
          </Card>
        ))}
      </section>

      {/* Pricing */}
      <section className="text-center py-16 bg-white">
        <h2 className="text-3xl font-bold mb-6">Simple Pricing</h2>
        <Card className="max-w-md mx-auto rounded-2xl shadow-md">
          <CardContent className="p-8">
            <p className="text-lg mb-2">Membership</p>
            <p className="text-4xl font-bold mb-4">$5/month</p>
            <p className="text-gray-600 mb-6">
              First month free. Cancel anytime.
            </p>
            <Button className="w-full text-lg py-3">Join Now</Button>
          </CardContent>
        </Card>
      </section>

      {/* Disclaimer */}
      <section className="px-6 py-12 max-w-4xl mx-auto text-center text-sm text-gray-600">
        <p>
          Disclaimer: The association provides AI-based educational insights
          related to tax and investments. These are opinions only and do not
          constitute financial, legal, or tax advice. No guarantees are made
          regarding outcomes.
        </p>
      </section>

      {/* Footer */}
      <footer className="text-center py-8 border-t">
        <p className="text-gray-600">
          © {new Date().getFullYear()} Self-Employed-Association.org
        </p>
      </footer>
    </div>
  );
}