import React from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Mail, Phone, MapPin, ArrowRight, Briefcase, LayoutGrid, BarChart3, Bot, Database, MonitorSmartphone, CheckCircle2 } from "lucide-react";

const highlights = [
  "Marketing Strategy",
  "Business Intelligence",
  "System Development",
  "UI/UX Thinking",
  "Automation Workflow",
  "Dashboard & Reporting",
];

const projects = [
  {
    title: "Daily Sales Monitoring System",
    desc: "Dashboard sales harian dengan kunjungan, foto, alamat otomatis, monitoring tim, dan rekap untuk manajemen.",
    icon: BarChart3,
  },
  {
    title: "WhatsApp Automation Ecosystem",
    desc: "Sistem bot WhatsApp multi-role untuk admin, sales, dan management dengan reminder, approval, form, dan broadcast.",
    icon: Bot,
  },
  {
    title: "ERP & Internal Tools Planning",
    desc: "Perencanaan modul ERP, HRIS, warehouse, sales, dan tools internal yang rapi, jelas, dan mudah dipakai.",
    icon: Database,
  },
  {
    title: "Company Website & Landing Page",
    desc: "Website profesional dengan struktur modern, branding kuat, dan fokus pada tampilan yang clean serta meyakinkan.",
    icon: MonitorSmartphone,
  },
];

const strengths = [
  "Menggabungkan kebutuhan bisnis dengan solusi digital yang realistis",
  "Terbiasa membangun sistem, dashboard, dan alur kerja yang terstruktur",
  "Fokus pada tampilan profesional, kemudahan penggunaan, dan hasil yang siap dipakai",
];

export default function KevinPortfolioWebsite() {
  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <div className="mx-auto max-w-7xl px-6 py-10 md:px-10 lg:px-12">
        <section className="grid gap-8 lg:grid-cols-2 lg:items-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="space-y-6"
          >
            <Badge className="rounded-full border border-sky-400/20 bg-sky-400/10 px-4 py-1 text-sky-300 hover:bg-sky-400/10">
              Portfolio Profesional
            </Badge>

            <div className="space-y-4">
              <h1 className="text-4xl font-bold leading-tight text-white md:text-5xl xl:text-6xl">
                Kevin Putra Ananta
              </h1>
              <p className="max-w-2xl text-lg leading-8 text-slate-300 md:text-xl">
                Marketing, Business Intelligence, dan Technology Builder yang fokus membangun sistem digital, dashboard, automation, dan website profesional yang rapi serta mudah digunakan.
              </p>
            </div>

            <div className="flex flex-wrap gap-3">
              {highlights.map((item) => (
                <span
                  key={item}
                  className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200"
                >
                  {item}
                </span>
              ))}
            </div>

            <div className="flex flex-wrap gap-4 pt-2">
              <Button className="rounded-2xl bg-sky-500 px-6 py-6 text-slate-950 hover:bg-sky-400">
                Lihat Project <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              <Button variant="outline" className="rounded-2xl border-white/15 bg-white/5 px-6 py-6 text-white hover:bg-white/10">
                Hubungi Saya
              </Button>
            </div>

            <div className="grid gap-3 pt-2 text-sm text-slate-300 sm:grid-cols-2">
              <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                <MapPin className="h-4 w-4 text-sky-300" /> Indonesia
              </div>
              <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                <Briefcase className="h-4 w-4 text-sky-300" /> Marketing • BI • Tech
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <Card className="rounded-[28px] border border-white/10 bg-gradient-to-br from-slate-900 to-slate-950 shadow-2xl">
              <CardContent className="p-8 md:p-10">
                <div className="mb-6 flex items-center gap-3">
                  <div className="rounded-2xl bg-sky-400/10 p-3 text-sky-300">
                    <LayoutGrid className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-400">Professional Summary</p>
                    <h2 className="text-2xl font-semibold text-white">Tentang Saya</h2>
                  </div>
                </div>

                <div className="space-y-4">
                  {strengths.map((item) => (
                    <div
                      key={item}
                      className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4"
                    >
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-sky-300" />
                      <p className="leading-7 text-slate-300">{item}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </section>

        <section className="pt-20">
          <div className="mb-8 max-w-2xl space-y-3">
            <p className="text-sm font-medium uppercase tracking-[0.2em] text-sky-300">About</p>
            <h2 className="text-3xl font-bold text-white md:text-4xl">Builder yang fokus pada hasil nyata</h2>
            <p className="leading-8 text-slate-300">
              Saya terbiasa mengubah kebutuhan bisnis menjadi sistem yang lebih terstruktur, tampilan yang lebih profesional, dan alur kerja yang lebih efisien. Fokus saya ada pada solusi yang rapi, mudah dipakai, dan bisa membantu operasional maupun manajemen mengambil keputusan.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            <Card className="rounded-[24px] border border-white/10 bg-white/5">
              <CardContent className="p-6">
                <p className="text-sm text-slate-400">Fokus Utama</p>
                <h3 className="mt-2 text-xl font-semibold">Marketing, BI, Tech</h3>
              </CardContent>
            </Card>
            <Card className="rounded-[24px] border border-white/10 bg-white/5">
              <CardContent className="p-6">
                <p className="text-sm text-slate-400">Kekuatan</p>
                <h3 className="mt-2 text-xl font-semibold">System & Workflow Thinking</h3>
              </CardContent>
            </Card>
            <Card className="rounded-[24px] border border-white/10 bg-white/5">
              <CardContent className="p-6">
                <p className="text-sm text-slate-400">Gaya Kerja</p>
                <h3 className="mt-2 text-xl font-semibold">Cepat, Hands-on, Terstruktur</h3>
              </CardContent>
            </Card>
          </div>
        </section>

        <section className="pt-20">
          <div className="mb-8 max-w-2xl space-y-3">
            <p className="text-sm font-medium uppercase tracking-[0.2em] text-sky-300">Projects</p>
            <h2 className="text-3xl font-bold text-white md:text-4xl">Project & solusi yang saya kerjakan</h2>
            <p className="leading-8 text-slate-300">
              Beberapa jenis project yang paling sering saya bangun untuk kebutuhan bisnis, operasional, dan branding digital.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            {projects.map((project) => {
              const Icon = project.icon;
              return (
                <Card key={project.title} className="rounded-[24px] border border-white/10 bg-white/5 transition-all hover:-translate-y-1 hover:border-sky-400/30">
                  <CardContent className="p-6">
                    <div className="mb-4 inline-flex rounded-2xl bg-sky-400/10 p-3 text-sky-300">
                      <Icon className="h-5 w-5" />
                    </div>
                    <h3 className="text-xl font-semibold text-white">{project.title}</h3>
                    <p className="mt-3 leading-7 text-slate-300">{project.desc}</p>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </section>

        <section className="pt-20">
          <Card className="rounded-[32px] border border-sky-400/20 bg-gradient-to-r from-sky-500/10 to-blue-500/10">
            <CardContent className="grid gap-8 p-8 md:p-10 lg:grid-cols-2">
              <div className="space-y-4">
                <p className="text-sm font-medium uppercase tracking-[0.2em] text-sky-300">Contact</p>
                <h2 className="text-3xl font-bold text-white md:text-4xl">Mari bangun sesuatu yang lebih profesional</h2>
                <p className="leading-8 text-slate-300">
                  Saya terbuka untuk project website, dashboard, internal tools, automation, dan kebutuhan digital lain yang membutuhkan tampilan profesional serta alur kerja yang rapi.
                </p>
              </div>

              <div className="grid gap-4">
                <div className="rounded-2xl border border-white/10 bg-slate-950/40 px-5 py-4 text-slate-200">
                  <div className="flex items-center gap-3">
                    <Mail className="h-4 w-4 text-sky-300" /> emailkamu@domain.com
                  </div>
                </div>
                <div className="rounded-2xl border border-white/10 bg-slate-950/40 px-5 py-4 text-slate-200">
                  <div className="flex items-center gap-3">
                    <Phone className="h-4 w-4 text-sky-300" /> +62 xxx xxxx xxxx
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </section>
      </div>
    </div>
  );
}