"use client";

import { motion } from "framer-motion";

export default function Hero() {
  return (
    <section className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.45 }}
      >

        <h1 className="mt-3 text-5xl md:text-6xl font-semibold tracking-tight text-black/90 leading-[1.05]">
          Brian De Winne.
          <br />
          <span className="text-black/65">Clean systems, clean UI.</span>
        </h1>

        <p className="mt-6 text-base md:text-lg text-black/70 leading-relaxed max-w-xl">
          Portfolio + lab dashboard hosted on Unraid behind Cloudflare Tunnel and
          Nginx Proxy Manager. Minimal design, hardened routing, real visibility.
        </p>

        <div className="mt-8 flex flex-wrap gap-3">
          <a
            href="#projects"
            className="rounded-3xl bg-black text-white px-5 py-3 text-sm font-medium shadow-[0_10px_30px_rgba(0,0,0,0.15)] transition hover:translate-y-[-1px]"
          >
            View projects
          </a>

          <a
            href="/lab"
            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
          >
            Lab dashboard
          </a>

          <a
            href="mailto:website+dewinnebrian@gmail.com"
            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
          >
            Contact
          </a>
        </div>

        <div className="mt-8 flex flex-wrap items-center gap-3 text-xs text-black/55">
          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
            <span className="h-2 w-2 rounded-full bg-black/30" />
            Belgium
          </span>
          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
            <span className="h-2 w-2 rounded-full bg-black/30" />
            Unraid • Docker • CF Tunnel
          </span>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.55, delay: 0.05 }}
        className="relative"
      >
        <div className="rounded-3xl glass-strong specular overflow-hidden">
          <div className="px-5 py-4 border-b border-black/10 flex items-center justify-between">
            <div className="text-sm font-semibold text-black/85">
              System Snapshot
            </div>
            <div className="text-xs text-black/55">dewinnebrian.com</div>
          </div>

          <div className="p-5">
            <div className="grid grid-cols-3 gap-3">
              <MiniStat label="Containers" value="—" />
              <MiniStat label="Running" value="—" />
              <MiniStat label="Networks" value="—" />
            </div>

            <div className="mt-5 rounded-3xl border border-black/10 p-4 bg-white/60">
              <div className="text-xs text-black/55">Status</div>
              <div className="mt-2 text-sm font-medium text-black/85">
                Reverse-proxied through NPM, tunneled via Cloudflare.
              </div>
              <div className="mt-3 text-xs text-black/60 leading-relaxed">
                The lab dashboard will surface container inventory, networks, and
                exposure—while hiding IP/ports by default.
              </div>
            </div>

            <div className="mt-5 grid grid-cols-2 gap-3">
              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
                <div className="text-xs text-black/55">Design</div>
                <div className="mt-2 text-sm font-medium text-black/85">
                  Liquid glass
                </div>
              </div>
              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
                <div className="text-xs text-black/55">Deploy</div>
                <div className="mt-2 text-sm font-medium text-black/85">
                  Next.js container
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="pointer-events-none absolute -z-10 inset-0 blur-3xl opacity-40">
          <div className="absolute right-10 top-10 h-48 w-48 rounded-full bg-black/10" />
          <div className="absolute left-10 bottom-10 h-56 w-56 rounded-full bg-black/10" />
        </div>
      </motion.div>
    </section>
  );
}

function MiniStat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-3xl border border-black/10 bg-white/70 p-4">
      <div className="text-xs text-black/55">{label}</div>
      <div className="mt-1 text-2xl font-semibold tracking-tight text-black/90">
        {value}
      </div>
    </div>
  );
}