import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Sparkles, Server, Globe } from "lucide-react";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-100 to-white p-6">
      <header className="text-center mb-10">
        <h1 className="text-5xl font-extrabold text-purple-700 drop-shadow-md">
          HostMeDaddy.ca
        </h1>
        <p className="text-lg mt-2 text-gray-600">
          Web hosting that gets the job done—because Daddy knows best.
        </p>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
        <Card className="rounded-2xl shadow-xl">
          <CardContent className="p-6 text-center">
            <Server className="mx-auto mb-4 text-purple-500" size={40} />
            <h2 className="text-xl font-semibold mb-2">Reliable Servers</h2>
            <p className="text-gray-500">
              Our servers are hotter than GoDaddy’s commercials—minus the awkward.
            </p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow-xl">
          <CardContent className="p-6 text-center">
            <Globe className="mx-auto mb-4 text-purple-500" size={40} />
            <h2 className="text-xl font-semibold mb-2">Global Reach</h2>
            <p className="text-gray-500">
              Host anywhere, anytime. Papa ain't the only one who travels.
            </p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow-xl">
          <CardContent className="p-6 text-center">
            <Sparkles className="mx-auto mb-4 text-purple-500" size={40} />
            <h2 className="text-xl font-semibold mb-2">Slick Interfaces</h2>
            <p className="text-gray-500">
              We keep it sleek, sexy, and server-ready.
            </p>
          </CardContent>
        </Card>
      </section>

      <div className="text-center mt-12">
        <Button className="bg-purple-700 text-white px-6 py-3 rounded-full text-lg hover:bg-purple-800 transition">
          Sign Up – Let Daddy Handle It
        </Button>
      </div>
    </div>
  );
}