import React from "react";
import { motion } from "framer-motion";
import { Cloud, Code2, Rocket, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default function AweCloudWebpage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
      {/* Hero Section */}
      <section className="max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <h1 className="text-5xl md:text-6xl font-bold leading-tight mb-6">
            Build Beyond Limits with <span className="text-cyan-400">AweCloud</span>
          </h1>
          <p className="text-lg text-slate-300 mb-8 max-w-xl">
            AweCloud is a modern web development agency crafting lightning-fast,
            scalable, and beautifully designed digital experiences for startups
            and enterprises.
          </p>
          <div className="flex gap-4">
            <Button className="rounded-2xl px-6 py-6 text-base">
              Start Your Project
            </Button>
            <Button variant="outline" className="rounded-2xl px-6 py-6 text-base">
              View Portfolio
            </Button>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8 }}
          className="relative"
        >
          <div className="absolute -inset-4 bg-cyan-500/20 blur-3xl rounded-full"></div>
          <div className="relative bg-slate-800 rounded-2xl p-8 shadow-2xl">
            <Cloud className="w-16 h-16 text-cyan-400 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Cloud-Native Solutions</h3>
            <p className="text-slate-400">
              Deploy scalable apps with modern infrastructure and seamless CI/CD pipelines.
            </p>
          </div>
        </motion.div>
      </section>

      {/* Services Section */}
      <section className="max-w-7xl mx-auto px-6 py-20">
        <h2 className="text-4xl font-bold text-center mb-16">Our Expertise</h2>
        <div className="grid md:grid-cols-3 gap-8">
          <Card className="bg-slate-800 rounded-2xl shadow-xl">
            <CardContent className="p-8">
              <Code2 className="w-10 h-10 text-cyan-400 mb-4" />
              <h3 className="text-xl font-semibold mb-2">Custom Web Development</h3>
              <p className="text-slate-400">
                Tailored websites and web apps built with cutting-edge frameworks and best practices.
              </p>
            </CardContent>
          </Card>

          <Card className="bg-slate-800 rounded-2xl shadow-xl">
            <CardContent className="p-8">
              <Rocket className="w-10 h-10 text-cyan-400 mb-4" />
              <h3 className="text-xl font-semibold mb-2">Performance Optimization</h3>
              <p className="text-slate-400">
                Speed-focused architecture ensuring blazing-fast load times and smooth UX.
              </p>
            </CardContent>
          </Card>

          <Card className="bg-slate-800 rounded-2xl shadow-xl">
            <CardContent className="p-8">
              <Shi