import React from "react";
import { motion } from "framer-motion";
import { Mail, Phone, Globe, Github, Linkedin, ArrowRight } from "lucide-react";

// Single-file personal website for Petr Přikryl
// TailwindCSS styling, modern, clean, responsive
// Tip: In a real project, split into components and add routing as needed.

const Section = ({ id, title, children }) => (
  <section id={id} className="py-16 sm:py-20" aria-labelledby={`${id}-title`}>
    <div className="max-w-6xl mx-auto px-4">
      <motion.h2
        id={`${id}-title`}
        className="text-2xl sm:text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-100"
        initial={{ opacity: 0, y: 12 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.5 }}
      >
        {title}
      </motion.h2>
      <div className="mt-6">{children}</div>
    </div>
  </section>
);

const Card = ({ children }) => (
  <motion.div
    className="rounded-2xl p-6 shadow-sm border border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-900/60 backdrop-blur"
    initial={{ opacity: 0, y: 16 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, amount: 0.2 }}
    transition={{ duration: 0.45 }}
  >
    {children}
  </motion.div>
);

const Pill = ({ children }) => (
  <span className="inline-flex items-center rounded-full border border-slate-200 dark:border-slate-700 px-3 py-1 text-sm text-slate-600 dark:text-slate-300">
    {children}
  </span>
);

export default function PersonalSite() {
  const nav = [
    { href: "#about", label: "O mně" },
    { href: "#skills", label: "Dovednosti" },
    { href: "#projects", label: "Projekty" },
    { href: "#contact", label: "Kontakt" },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900 text-slate-700 dark:text-slate-200">
      {/* Header / Nav */}
      <header className="sticky top-0 z-40 border-b border-slate-200/70 dark:border-slate-800/60 bg-white/70 dark:bg-slate-950/60 backdrop-blur supports-[backdrop-filter]:bg-white/40 supports-[backdrop-filter]:dark:bg-slate-950/40">
        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
          <a href="#home" className="flex items-center gap-3 group">
            <div className="h-8 w-8 rounded-xl bg-gradient-to-tr from-blue-600 to-cyan-400 shadow-sm" />
            <span className="font-semibold tracking-tight text-slate-900 dark:text-white group-hover:opacity-90">
              Petr Přikryl
            </span>
          </a>
          <nav className="hidden sm:flex items-center gap-2">
            {nav.map((n) => (
              <a
                key={n.href}
                href={n.href}
                className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white rounded-lg hover:bg-slate-100/80 dark:hover:bg-slate-800/60"
              >
                {n.label}
              </a>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <a
              href="mailto:petr@prikryl.cc"
              className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-xl border border-slate-300/80 dark:border-slate-700 hover:bg-slate-100/80 dark:hover:bg-slate-800/60"
            >
              <Mail className="h-4 w-4" />
              Napsat
            </a>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section id="home" className="relative overflow-hidden">
        <div className="absolute inset-0 -z-10 opacity-20 bg-[radial-gradient(60rem_40rem_at_50%_-10%,theme(colors.blue.400/30),transparent)]" />
        <div className="max-w-6xl mx-auto px-4 py-20 sm:py-28">
          <div className="grid md:grid-cols-2 items-center gap-10">
            <div>
              <motion.h1
                className="text-4xl sm:text-5xl font-black tracking-tight text-slate-900 dark:text-white"
                initial={{ opacity: 0, y: 14 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-cyan-500 to-sky-400">Petr Přikryl</span>
              </motion.h1>
              <motion.p
                className="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-xl"
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
              >
                IT & Systems Management • DevOps-ish správce a tvůrce jednoduchých, stabilních řešení.
              </motion.p>
              <div className="mt-6 flex flex-wrap items-center gap-3">
                <a
                  href="mailto:petr@prikryl.cc"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-medium shadow hover:opacity-95"
                >
                  <Mail className="h-4 w-4" />
                  petr@prikryl.cc
                </a>
                <a
                  href="tel:+420773172676"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-slate-300/80 dark:border-slate-700 font-medium hover:bg-slate-100/70 dark:hover:bg-slate-800/60"
                >
                  <Phone className="h-4 w-4" />
                  +420 773 172 676
                </a>
                <a
                  href="https://prikryl.cc"
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-slate-300/80 dark:border-slate-700 font-medium hover:bg-slate-100/70 dark:hover:bg-slate-800/60"
                >
                  <Globe className="h-4 w-4" />
                  prikryl.cc
                </a>
              </div>
              <div className="mt-8 flex gap-2 text-sm text-slate-500 dark:text-slate-400">
                <Pill>Linux</Pill>
                <Pill>Docker</Pill>
                <Pill>GraphQL</Pill>
                <Pill>React</Pill>
                <Pill>PostgreSQL</Pill>
              </div>
            </div>
            <Card>
              <div className="prose prose-slate dark:prose-invert max-w-none">
                <h3 className="m-0">Co pro vás můžu udělat</h3>
                <ul className="mt-3">
                  <li>Návrh a správa infrastruktury (Docker, zálohy, monitoring).</li>
                  <li>Tvorba jednoduchých webů a interních nástrojů.</li>
                  <li>Automatizace procesů, skripty a integrace.</li>
                  <li>Bezpečné nasazení (CI/CD), verze a přístupy.</li>
                </ul>
              </div>
              <a href="#projects" className="mt-4 inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-300 font-medium">
                Projít projekty <ArrowRight className="h-4 w-4" />
              </a>
            </Card>
          </div>
        </div>
      </section>

      {/* About */}
      <Section id="about" title="Krátce o mně">
        <div className="grid md:grid-cols-3 gap-6">
          <Card>
            <p>
              Jsem praktik, co má rád stabilní a čitelné věci. Dávám přednost jednoduchému řešení před složitou magií. Umím se domluvit s lidmi i servery.
            </p>
          </Card>
          <Card>
            <p>
              Zkušenosti: nasazení a údržba aplikací, monitoring, zálohy, kontejnery, databáze, weby, interní nástroje. Linux jako domovská půda.
            </p>
          </Card>
          <Card>
            <p>
              Hledám spolupráce, kde dává smysl dlouhodobá spolehlivost a přehlednost. 
              Když něco nastavíme, chcete o tom jasný zápis a klidný spánek.
            </p>
          </Card>
        </div>
      </Section>

      {/* Skills */}
      <Section id="skills" title="Dovednosti a technologie">
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              name: "Infrastruktura",
              items: ["Docker", "Compose", "CI/CD", "NGINX", "Traefik"],
            },
            {
              name: "Aplikace a backend",
              items: ["Node.js", "GraphQL", "REST", "Auth (JWT, RBAC)", "Python"],
            },
            {
              name: "Data a monitoring",
              items: ["PostgreSQL", "SQLite", "Backups", "Prometheus/Grafana"],
            },
            {
              name: "Frontend",
              items: ["React", "Vite", "Tailwind", "MUI", "Shadcn"],
            },
            {
              name: "Ops a správa",
              items: ["Linux", "Bash", "Systemd", "Ansible (základy)", "Samba/SMB"],
            },
            {
              name: "Bezpečnost",
              items: ["TLS/HTTPS", "Zálohy a recovery", "Minimální oprávnění"],
            },
          ].map((g) => (
            <Card key={g.name}>
              <h3 className="font-semibold text-slate-800 dark:text-slate-100">{g.name}</h3>
              <div className="mt-3 flex flex-wrap gap-2">
                {g.items.map((i) => (
                  <Pill key={i}>{i}</Pill>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Projects */}
      <Section id="projects" title="Vybrané projekty">
        <div className="grid md:grid-cols-2 gap-6">
          <Card>
            <h3 className="text-lg font-semibold">Inventarizace zařízení</h3>
            <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
              Webový modul s vlastním inventářem, správou racků a validací pozic. GraphQL backend,
              React frontend, Docker nasazení.
            </p>
            <div className="mt-3 flex flex-wrap gap-2 text-sm">
              <Pill>React</Pill>
              <Pill>GraphQL</Pill>
              <Pill>PostgreSQL</Pill>
              <Pill>Docker</Pill>
            </div>
          </Card>

          <Card>
            <h3 className="text-lg font-semibold">Automatizované zálohování</h3>
            <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
              Jednoduché, ale robustní skripty pro snapshoty, rotaci a šifrovaný offsite. Monitoring chyb a reporty.
            </p>
            <div className="mt-3 flex flex-wrap gap-2 text-sm">
              <Pill>Linux</Pill>
              <Pill>Bash</Pill>
              <Pill>Systemd</Pill>
              <Pill>Prometheus</Pill>
            </div>
          </Card>
        </div>
      </Section>

      {/* Contact */}
      <Section id="contact" title="Kontakt">
        <div className="grid md:grid-cols-3 gap-6">
          <Card>
            <div className="flex items-center gap-3">
              <Mail className="h-5 w-5" />
              <a href="mailto:petr@prikryl.cc" className="font-medium hover:underline">petr@prikryl.cc</a>
            </div>
          </Card>
          <Card>
            <div className="flex items-center gap-3">
              <Phone className="h-5 w-5" />
              <a href="tel:+420773172676" className="font-medium hover:underline">+420 773 172 676</a>
            </div>
          </Card>
          <Card>
            <div className="flex items-center gap-3">
              <Globe className="h-5 w-5" />
              <a href="https://prikryl.cc" target="_blank" rel="noreferrer" className="font-medium hover:underline">prikryl.cc</a>
            </div>
          </Card>
        </div>
        <div className="mt-6 flex gap-3">
          <a
            href="#"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300/80 dark:border-slate-700 hover:bg-slate-100/70 dark:hover:bg-slate-800/60"
          >
            <Github className="h-4 w-4" />
            GitHub
          </a>
          <a
            href="#"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300/80 dark:border-slate-700 hover:bg-slate-100/70 dark:hover:bg-slate-800/60"
          >
            <Linkedin className="h-4 w-4" />
            LinkedIn
          </a>
        </div>
      </Section>

      {/* Footer */}
      <footer className="border-t border-slate-200/70 dark:border-slate-800/60 py-10 mt-10">
        <div className="max-w-6xl mx-auto px-4 text-sm text-slate-500 dark:text-slate-400 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
          <p>© {new Date().getFullYear()} Petr Přikryl. Všechna práva vyhrazena.</p>
          <p>
            Postaveno s <span aria-hidden>⚙️</span> a rozumem. <a href="#contact" className="hover:underline">Kontaktujte mě</a>.
          </p>
        </div>
      </footer>
    </div>
  );
}