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

export default function TumposWebsite(){
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-950 to-slate-900 text-white">

      {/* Navbar */}
      <div className="flex justify-between items-center px-8 py-5 border-b border-slate-800">
        <h1 className="text-2xl font-bold">Tumpos Bilişim</h1>
        <div className="flex gap-6 text-sm">
          <a href="#hizmetler">Hizmetler</a>
          <a href="#hakkimizda">Hakkımızda</a>
          <a href="#cozumler">Çözümler</a>
          <a href="#iletisim">İletişim</a>
        </div>
        <Button className="rounded-2xl">Teklif Al</Button>
      </div>

      {/* Hero */}
      <section className="text-center py-28 px-6">
        <motion.h1
          initial={{opacity:0,y:40}}
          animate={{opacity:1,y:0}}
          transition={{duration:0.6}}
          className="text-5xl md:text-6xl font-bold mb-6"
        >
          Profesyonel Bilişim Hizmetleri
        </motion.h1>

        <p className="text-slate-300 max-w-2xl mx-auto mb-10">
          Tumpos, işletmeler ve girişimler için modern yazılım geliştirme,
          bulut altyapısı ve siber güvenlik çözümleri sunan profesyonel
          bir bilişim hizmetleri platformudur.
        </p>

        <div className="flex justify-center gap-4">
          <Button className="rounded-2xl">Hizmetlerimiz</Button>
          <Button variant="outline" className="rounded-2xl">İletişime Geç</Button>
        </div>
      </section>

      {/* Hizmetler */}
      <section id="hizmetler" className="px-10 py-20 grid md:grid-cols-4 gap-6">

        <Card className="bg-slate-900 border-slate-800 rounded-2xl">
          <CardContent className="p-6">
            <Code2 className="mb-4"/>
            <h3 className="text-lg font-semibold mb-2">Yazılım Geliştirme</h3>
            <p className="text-slate-400 text-sm">Web siteleri, kurumsal yazılımlar ve özel projeler için modern yazılım geliştirme hizmetleri.</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900 border-slate-800 rounded-2xl">
          <CardContent className="p-6">
            <Cloud className="mb-4"/>
            <h3 className="text-lg font-semibold mb-2">Bulut Çözümleri</h3>
            <p className="text-slate-400 text-sm">Bulut altyapısı, sunucu yönetimi ve ölçeklenebilir sistem çözümleri.</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900 border-slate-800 rounded-2xl">
          <CardContent className="p-6">
            <Shield className="mb-4"/>
            <h3 className="text-lg font-semibold mb-2">Siber Güvenlik</h3>
            <p className="text-slate-400 text-sm">Kurumsal sistemler için güvenlik analizleri, koruma ve danışmanlık hizmetleri.</p>
          </CardContent>
        </Card>

        <Card className="bg-slate-900 border-slate-800 rounded-2xl">
          <CardContent className="p-6">
            <Server className="mb-4"/>
            <h3 className="text-lg font-semibold mb-2">IT Destek</h3>
            <p className="text-slate-400 text-sm">Sunucu kurulumu, teknik destek ve işletmeler için bilişim altyapısı yönetimi.</p>
          </CardContent>
        </Card>

      </section>

      {/* Hakkımızda */}
      <section id="hakkimizda" className="text-center px-6 py-24">
        <h2 className="text-3xl font-bold mb-6">Tumpos Hakkında</h2>
        <p className="text-slate-400 max-w-3xl mx-auto">
          Tumpos Bilişim, şirketlerin dijital dönüşümünü hızlandırmak için
          yazılım geliştirme, altyapı yönetimi ve güvenlik çözümleri sunar.
          Modern teknolojilerle işletmelerin daha hızlı, güvenli ve verimli
          çalışmasını sağlıyoruz.
        </p>
      </section>

      {/* Çözümler */}
      <section id="cozumler" className="px-10 py-20">
        <div className="bg-slate-900 rounded-2xl p-12 text-center border border-slate-800">
          <h2 className="text-3xl font-bold mb-4">İşletmeniz İçin Dijital Çözümler</h2>
          <p className="text-slate-400 mb-8">Web projeleri, otomasyon sistemleri ve kurumsal yazılımlar için bizimle çalışın.</p>
          <Button className="rounded-2xl">Proje Başlat</Button>
        </div>
      </section>

      {/* Footer */}
      <footer id="iletisim" className="border-t border-slate-800 py-10 text-center text-sm text-slate-400">
        <p>© 2026 Tumpos Bilişim Hizmetleri - tumpos.com</p>
        <p className="mt-2">info@tumpos.com</p>
      </footer>

    </div>
  );
}