import React, { useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Github,
  Linkedin,
  Mail,
  Sparkles,
  Briefcase,
  Layers3,
  Search,
  Workflow,
  Blocks,
  MoveRight,
  CheckCircle2,
  Target,
  FileText,
  Hammer,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const navItems = ["Services", "Work", "About", "Contact"];

const services = [
  {
    title: "Product strategy & prioritization",
    category: "Strategy",
    description:
      "Helping teams turn scattered ideas, stakeholder pressure, and operational complexity into clearer direction, smarter priorities, and a roadmap that actually means something.",
    outcomes: ["Roadmap clarity", "Better trade-offs", "More aligned teams"],
    accent: "from-cyan-300/35 via-sky-500/10 to-transparent",
  },
  {
    title: "Workflow & UX redesign",
    category: "Experience",
    description:
      "Improving complex product flows, setup experiences, dashboards, and internal tools so users can understand the system faster and move through it with less friction.",
    outcomes: ["Less friction", "Cleaner IA", "More usable flows"],
    accent: "from-violet-300/35 via-fuchsia-500/10 to-transparent",
  },
  {
    title: "Discovery, specs & execution",
    category: "Delivery",
    description:
      "Turning ambiguous product problems into documented decisions, scoped initiatives, and development-ready outputs that reduce back-and-forth and increase delivery confidence.",
    outcomes: ["Sharper briefs", "Cleaner handoff", "Faster execution"],
    accent: "from-amber-300/35 via-rose-500/10 to-transparent",
  },
];

const proofPoints = [
  {
    label: "Focus areas",
    value: "B2B SaaS, workflow-heavy products, operational software",
    icon: <Target className="h-4 w-4" />,
  },
  {
    label: "What I improve",
    value: "Strategy, information architecture, UX flows, product clarity",
    icon: <Workflow className="h-4 w-4" />,
  },
  {
    label: "Typical context",
    value: "Construction tech, enterprise setup complexity, admin-heavy tools",
    icon: <Hammer className="h-4 w-4" />,
  },
];

const processSteps = [
  {
    title: "Understand the business and user reality",
    text: "I start by making the actual problem visible: who is blocked, where the complexity lives, and what the business is really trying to improve.",
    icon: <Search className="h-5 w-5" />,
  },
  {
    title: "Structure the product problem clearly",
    text: "Then I translate ambiguity into a product shape: priorities, flows, dependencies, trade-offs, and what success should actually look like.",
    icon: <Blocks className="h-5 w-5" />,
  },
  {
    title: "Turn ideas into execution-ready outputs",
    text: "Finally, I convert that clarity into practical artifacts: PRDs, task framing, acceptance criteria, workflow proposals, and roadmap-ready initiatives.",
    icon: <FileText className="h-5 w-5" />,
  },
];

const workHighlights = [
  {
    title: "Operational workflow simplification",
    description:
      "Restructuring dense multi-step product experiences so users can navigate, configure, and complete work with less confusion.",
    tag: "Workflow design",
    size: "large",
  },
  {
    title: "Information architecture cleanup",
    description:
      "Reframing scattered settings, duplicate modules, and unclear navigation into a more coherent product structure.",
    tag: "IA / UX",
    size: "small",
  },
  {
    title: "Execution-ready product documentation",
    description:
      "Transforming product decisions into developer-friendly scope, acceptance criteria, and clearer implementation framing.",
    tag: "Specs / delivery",
    size: "small",
  },
];

const fadeUp = {
  hidden: { opacity: 0, y: 28 },
  show: (i = 0) => ({
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] },
  }),
};

const sectionTitle = "text-3xl md:text-5xl font-semibold tracking-tight text-white";
const sectionText = "text-sm md:text-base leading-7 text-white/68";

export default function PersonalWebsiteShowcase() {
  const [mouse, setMouse] = useState({ x: 50, y: 18 });

  useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth) * 100;
      const y = (e.clientY / window.innerHeight) * 100;
      setMouse({ x, y });
    };

    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  const spotlight = useMemo(
    () => ({
      background: `radial-gradient(circle at ${mouse.x}% ${mouse.y}%, rgba(255,255,255,0.08), rgba(125,211,252,0.05) 12%, rgba(168,85,247,0.04) 18%, transparent 34%)`,
    }),
    [mouse]
  );

  return (
    <div className="min-h-screen overflow-x-hidden bg-[#050816] text-white selection:bg-cyan-300/30">
      <BackgroundDecor />
      <div className="pointer-events-none fixed inset-0 z-10 mix-blend-screen" style={spotlight} />

      <header className="sticky top-0 z-50 border-b border-white/10 bg-[#050816]/45 backdrop-blur-2xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="flex items-center gap-3">
            <div className="relative flex h-11 w-11 items-center justify-center rounded-2xl border border-white/15 bg-white/10 shadow-[0_0_60px_rgba(59,130,246,0.14)]">
              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-cyan-300/20 via-blue-400/10 to-violet-400/20" />
              <Sparkles className="relative h-4 w-4 text-white" />
            </div>
            <div>
              <div className="text-sm font-medium tracking-wide text-white/92">Alperen Demirli</div>
              <div className="text-xs text-white/48">Product Manager · Strategy · Workflow Design</div>
            </div>
          </motion.div>

          <nav className="hidden items-center gap-8 text-sm text-white/60 md:flex">
            {navItems.map((item, i) => (
              <motion.a
                key={item}
                href={`#${item.toLowerCase()}`}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.04 * i }}
                className="transition hover:text-white"
              >
                {item}
              </motion.a>
            ))}
          </nav>

          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
            <Button className="rounded-full border border-white/15 bg-white/10 px-5 text-white shadow-[0_12px_60px_rgba(56,189,248,0.16)] backdrop-blur-xl hover:bg-white/15">
              Contact me
            </Button>
          </motion.div>
        </div>
      </header>

      <main>
        <section className="relative mx-auto max-w-7xl px-6 pb-20 pt-14 md:pb-28 md:pt-20">
          <div className="grid gap-14 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
            <div className="relative z-20">
              <motion.div
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={0}
                className="mb-6 flex flex-wrap gap-3"
              >
                <Badge className="rounded-full border border-cyan-300/20 bg-cyan-300/10 px-4 py-1.5 text-cyan-100 hover:bg-cyan-300/15">
                  Product strategy for complex software
                </Badge>
                <Badge className="rounded-full border border-violet-300/20 bg-violet-300/10 px-4 py-1.5 text-violet-100 hover:bg-violet-300/15">
                  B2B SaaS · Workflow-heavy products
                </Badge>
              </motion.div>

              <motion.p
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={1}
                className="mb-5 text-xs uppercase tracking-[0.32em] text-white/40"
              >
                Personal brand page / Product management
              </motion.p>

              <motion.h1
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={2}
                className="max-w-6xl text-[3.35rem] font-semibold leading-[0.92] tracking-[-0.06em] text-white sm:text-[4.5rem] md:text-[6.8rem]"
              >
                I help teams turn
                <span className="block bg-gradient-to-r from-cyan-200 via-blue-300 to-violet-300 bg-clip-text text-transparent">
                  product complexity
                </span>
                <span className="block">into clarity.</span>
              </motion.h1>

              <motion.p
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={3}
                className="mt-8 max-w-2xl text-base leading-8 text-white/70 md:text-lg"
              >
                I work at the intersection of product strategy, user experience, and execution. My focus is helping workflow-heavy B2B products become easier to understand, easier to deliver, and more valuable to the people who rely on them every day.
              </motion.p>

              <motion.div
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={4}
                className="mt-10 flex flex-wrap items-center gap-4"
              >
                <Button className="group rounded-full bg-white px-6 py-6 text-slate-950 shadow-[0_12px_70px_rgba(255,255,255,0.16)] hover:bg-white/95">
                  View services
                  <ArrowRight className="ml-2 h-4 w-4 transition group-hover:translate-x-1" />
                </Button>
                <Button
                  variant="outline"
                  className="rounded-full border-white/15 bg-white/5 px-6 py-6 text-white hover:bg-white/10 hover:text-white"
                >
                  Download résumé
                </Button>
              </motion.div>

              <motion.div
                variants={fadeUp}
                initial="hidden"
                animate="show"
                custom={5}
                className="mt-12 grid gap-4 sm:grid-cols-3"
              >
                {proofPoints.map((item) => (
                  <div key={item.label} className="rounded-[24px] border border-white/10 bg-white/[0.045] p-5 shadow-[0_10px_50px_rgba(0,0,0,0.16)]">
                    <div className="flex items-center justify-between text-white/48">
                      <span className="text-xs uppercase tracking-[0.2em]">{item.label}</span>
                      {item.icon}
                    </div>
                    <p className="mt-4 text-sm leading-7 text-white/82">{item.value}</p>
                  </div>
                ))}
              </motion.div>
            </div>

            <motion.div
              initial={{ opacity: 0, y: 28, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ duration: 0.8, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
              className="relative h-[620px]"
            >
              <div className="absolute inset-0 rounded-[40px] border border-white/10 bg-white/[0.03] backdrop-blur-sm" />

              <div className="absolute left-5 top-10 h-56 w-56 rounded-full bg-cyan-400/15 blur-3xl" />
              <div className="absolute bottom-12 right-6 h-56 w-56 rounded-full bg-violet-500/15 blur-3xl" />
              <div className="absolute right-20 top-6 h-36 w-36 rounded-full bg-amber-300/10 blur-3xl" />

              <motion.div
                animate={{ y: [0, -12, 0], rotate: [-5, -3, -5] }}
                transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
                className="absolute left-3 top-14 z-20 w-[74%] rounded-[34px] border border-white/15 bg-[linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.05))] p-[1px] shadow-[0_24px_100px_rgba(56,189,248,0.18)]"
              >
                <div className="overflow-hidden rounded-[33px] bg-[#0a1124]/92">
                  <div className="border-b border-white/10 px-5 py-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <div className="h-2.5 w-2.5 rounded-full bg-rose-300/80" />
                        <div className="h-2.5 w-2.5 rounded-full bg-amber-300/80" />
                        <div className="h-2.5 w-2.5 rounded-full bg-emerald-300/80" />
                      </div>
                      <span className="text-[10px] uppercase tracking-[0.28em] text-white/35">Product systems</span>
                    </div>
                  </div>

                  <div className="relative p-5 md:p-6">
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_12%_12%,rgba(64,222,255,0.24),transparent_28%),radial-gradient(circle_at_84%_18%,rgba(168,85,247,0.18),transparent_22%),radial-gradient(circle_at_64%_78%,rgba(252,211,77,0.10),transparent_24%)]" />
                    <div className="relative rounded-[28px] border border-white/10 bg-white/[0.05] p-5">
                      <div className="flex items-start justify-between gap-5">
                        <div>
                          <p className="text-xs uppercase tracking-[0.24em] text-white/38">What I do</p>
                          <h3 className="mt-2 text-2xl font-medium text-white">Make complex products easier to run</h3>
                        </div>
                        <div className="rounded-2xl border border-cyan-300/20 bg-cyan-300/10 p-3 text-cyan-100">
                          <Layers3 className="h-5 w-5" />
                        </div>
                      </div>
                      <div className="mt-5 grid gap-3">
                        {[
                          "Strategy and prioritization",
                          "Workflow and UX simplification",
                          "Execution-ready documentation",
                        ].map((item) => (
                          <div key={item} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white/78">
                            <CheckCircle2 className="h-4 w-4 text-cyan-200" />
                            {item}
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="mt-4 grid gap-4 sm:grid-cols-2">
                      <MetricCard label="Core strength" value="Clarity" icon={<Target className="h-4 w-4" />} tone="cyan" />
                      <MetricCard label="Style of work" value="Structured" icon={<Briefcase className="h-4 w-4" />} tone="violet" />
                    </div>
                  </div>
                </div>
              </motion.div>

              <motion.div
                animate={{ y: [0, -10, 0], rotate: [4, 6, 4] }}
                transition={{ duration: 9, repeat: Infinity, ease: "easeInOut", delay: 0.7 }}
                className="absolute bottom-16 right-0 z-30 w-[56%] rounded-[32px] border border-white/15 bg-white/[0.07] p-5 shadow-[0_24px_100px_rgba(139,92,246,0.16)] backdrop-blur-xl"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-xs uppercase tracking-[0.22em] text-white/38">Brand signal</p>
                    <h4 className="mt-2 text-lg font-medium text-white">Strategic, practical, product-minded</h4>
                  </div>
                  <div className="rounded-2xl border border-violet-300/20 bg-violet-300/10 p-3 text-violet-100">
                    <Sparkles className="h-4 w-4" />
                  </div>
                </div>
                <div className="mt-4 flex flex-wrap gap-2">
                  {[
                    "B2B SaaS",
                    "Workflows",
                    "Roadmaps",
                    "IA & UX",
                  ].map((item) => (
                    <span key={item} className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white/72">
                      {item}
                    </span>
                  ))}
                </div>
              </motion.div>
            </motion.div>
          </div>
        </section>

        <section id="services" className="mx-auto max-w-7xl px-6 py-20 md:py-28">
          <motion.div
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            variants={fadeUp}
            className="max-w-3xl"
          >
            <p className="mb-3 text-sm uppercase tracking-[0.24em] text-cyan-200/70">Services</p>
            <h2 className={sectionTitle}>What I can help with as a product manager.</h2>
            <p className={`mt-4 ${sectionText}`}>
              This page is positioned as a personal brand site, not just a résumé. The goal is to make the value clear: where I work best, what I improve, and what a team can expect from me.
            </p>
          </motion.div>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {services.map((service, i) => (
              <motion.div
                key={service.title}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true, amount: 0.15 }}
                variants={fadeUp}
                custom={i}
              >
                <Card className="group relative h-full overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.045] transition duration-300 hover:-translate-y-1.5 hover:border-white/20 hover:bg-white/[0.06] hover:shadow-[0_20px_90px_rgba(59,130,246,0.14)]">
                  <div className={`absolute inset-0 bg-gradient-to-br ${service.accent} opacity-80 blur-2xl`} />
                  <CardContent className="relative flex h-full flex-col p-6 md:p-7">
                    <div className="mb-5 flex items-center justify-between gap-4">
                      <Badge className="rounded-full border border-white/10 bg-white/8 text-white/75 hover:bg-white/10">
                        {service.category}
                      </Badge>
                      <MoveRight className="h-4 w-4 text-white/35 transition group-hover:translate-x-1 group-hover:text-white/80" />
                    </div>

                    <h3 className="text-2xl font-medium text-white">{service.title}</h3>
                    <p className="mt-4 text-sm leading-7 text-white/66">{service.description}</p>

                    <div className="mt-8 space-y-3 border-t border-white/10 pt-5">
                      {service.outcomes.map((item) => (
                        <div key={item} className="flex items-center gap-3 text-sm text-white/78">
                          <div className="h-1.5 w-1.5 rounded-full bg-cyan-200" />
                          {item}
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

        <section id="work" className="mx-auto max-w-7xl px-6 py-20 md:py-28">
          <div className="grid gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:items-start">
            <motion.div initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} variants={fadeUp}>
              <p className="mb-3 text-sm uppercase tracking-[0.24em] text-cyan-200/70">Work</p>
              <h2 className={sectionTitle}>The kind of problems I’m built to solve.</h2>
              <p className={`mt-4 max-w-md ${sectionText}`}>
                These are written as capability-led highlights rather than fake brand names. They communicate what I do well without pretending I’m a design agency.
              </p>
            </motion.div>

            <div className="grid gap-6 lg:grid-cols-12 lg:grid-rows-2">
              {workHighlights.map((item, i) => {
                const layout = item.size === "large" ? "lg:col-span-7 lg:row-span-2" : "lg:col-span-5";
                return (
                  <motion.div
                    key={item.title}
                    initial="hidden"
                    whileInView="show"
                    viewport={{ once: true, amount: 0.15 }}
                    variants={fadeUp}
                    custom={i}
                    className={layout}
                  >
                    <Card className={`group relative h-full overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.045] transition duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.06] ${item.size === "large" ? "min-h-[33rem]" : "min-h-[16rem]"}`}>
                      <div className={`absolute inset-0 ${item.size === "large" ? "bg-[radial-gradient(circle_at_15%_20%,rgba(34,211,238,0.18),transparent_18%),radial-gradient(circle_at_85%_18%,rgba(99,102,241,0.14),transparent_18%),radial-gradient(circle_at_72%_75%,rgba(245,158,11,0.10),transparent_18%)]" : "bg-[radial-gradient(circle_at_20%_20%,rgba(168,85,247,0.14),transparent_20%),radial-gradient(circle_at_85%_80%,rgba(34,211,238,0.10),transparent_18%)]"}`} />
                      <CardContent className="relative flex h-full flex-col justify-between p-6 md:p-8">
                        <div>
                          <div className="mb-5 flex items-center justify-between gap-4">
                            <Badge className="rounded-full border border-white/10 bg-white/8 text-white/75 hover:bg-white/10">
                              {item.tag}
                            </Badge>
                            <span className="text-xs uppercase tracking-[0.24em] text-white/45">Capability</span>
                          </div>

                          <div className={`rounded-[28px] border border-white/10 bg-white/[0.04] p-4 ${item.size === "large" ? "mb-8" : "mb-5"}`}>
                            <div className={`${item.size === "large" ? "h-60" : "h-28"} rounded-[22px] border border-white/10 bg-[radial-gradient(circle_at_18%_22%,rgba(76,221,255,0.32),transparent_16%),radial-gradient(circle_at_76%_66%,rgba(244,114,182,0.22),transparent_18%),radial-gradient(circle_at_85%_24%,rgba(252,211,77,0.16),transparent_18%),linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02))] shadow-inner shadow-white/5`} />
                          </div>

                          <h3 className={`${item.size === "large" ? "text-4xl md:text-5xl" : "text-2xl"} font-medium text-white`}>{item.title}</h3>
                          <p className={`${item.size === "large" ? "text-base leading-8" : "text-sm leading-7"} mt-4 max-w-xl text-white/66`}>
                            {item.description}
                          </p>
                        </div>

                        <div className="mt-8 flex items-center justify-between border-t border-white/10 pt-5 text-sm text-white/72">
                          <span className="flex items-center gap-2">
                            <CheckCircle2 className="h-4 w-4" />
                            Product management value
                          </span>
                          <MoveRight className="h-4 w-4 transition group-hover:translate-x-1" />
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </section>

        <section id="about" className="mx-auto max-w-7xl px-6 py-20 md:py-28">
          <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-start">
            <motion.div initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.15 }} variants={fadeUp}>
              <p className="mb-3 text-sm uppercase tracking-[0.24em] text-cyan-200/70">About</p>
              <h2 className={sectionTitle}>Product management, with structure and taste.</h2>
            </motion.div>

            <motion.div
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.15 }}
              variants={fadeUp}
              custom={1}
              className="space-y-6"
            >
              <p className="text-base leading-8 text-white/70 md:text-lg">
                I’m a product manager focused on B2B software, workflow-heavy systems, and operational products where clarity is not optional. My work usually sits between strategy, UX, information architecture, and delivery.
              </p>
              <p className="text-base leading-8 text-white/58 md:text-lg">
                I’m especially interested in products that are powerful but difficult to use — the kind where better structure, sharper prioritization, and clearer documentation can unlock a disproportionate improvement in user experience and delivery speed.
              </p>

              <div className="grid gap-4 sm:grid-cols-3">
                {[
                  "Product strategy",
                  "Workflow design",
                  "Execution clarity",
                ].map((item, index) => (
                  <div
                    key={item}
                    className={`rounded-[24px] border border-white/10 p-5 text-sm leading-7 text-white/78 ${
                      index === 0 ? "bg-cyan-400/10" : index === 1 ? "bg-violet-400/10" : "bg-amber-300/10"
                    }`}
                  >
                    {item}
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-20 md:py-28">
          <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
            <motion.div
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.15 }}
              variants={fadeUp}
              className="max-w-2xl"
            >
              <p className="mb-3 text-sm uppercase tracking-[0.24em] text-cyan-200/70">Process</p>
              <h2 className={sectionTitle}>How I usually work.</h2>
              <p className={`mt-4 ${sectionText}`}>
                The site now explains not just what I do, but how I think. That makes it feel more like a professional brand page and less like a visual exercise.
              </p>
            </motion.div>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            {processSteps.map((step, i) => (
              <motion.div
                key={step.title}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true, amount: 0.15 }}
                variants={fadeUp}
                custom={i}
              >
                <Card className="group relative h-full overflow-hidden rounded-[30px] border border-white/10 bg-white/[0.045] transition hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.06]">
                  <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-300 via-blue-400 to-violet-400 opacity-90" />
                  <CardContent className="relative p-6">
                    <div className="mb-10 flex items-center justify-between text-white/50">
                      {step.icon}
                      <span className="text-[10px] uppercase tracking-[0.26em]">0{i + 1}</span>
                    </div>
                    <h3 className="text-2xl font-medium text-white">{step.title}</h3>
                    <p className="mt-4 text-sm leading-7 text-white/64">{step.text}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

        <section id="contact" className="mx-auto max-w-7xl px-6 py-20 md:py-28">
          <motion.div
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.15 }}
            variants={fadeUp}
            className="relative overflow-hidden rounded-[42px] border border-white/10 bg-white/[0.05] p-8 md:p-12"
          >
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_15%_20%,rgba(64,222,255,0.16),transparent_20%),radial-gradient(circle_at_82%_22%,rgba(139,92,246,0.16),transparent_18%),radial-gradient(circle_at_70%_82%,rgba(250,204,21,0.10),transparent_20%)]" />
            <div className="relative z-10 grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
              <div>
                <p className="mb-3 text-sm uppercase tracking-[0.24em] text-cyan-200/70">Contact</p>
                <h2 className="max-w-3xl text-4xl font-semibold leading-tight tracking-tight text-white md:text-6xl">
                  Need product clarity, better workflows, or sharper execution?
                </h2>
                <p className="mt-5 max-w-xl text-base leading-8 text-white/66">
                  This section is intentionally direct. The page now reads like a credible personal brand site for a product manager who can contribute across strategy, UX, and delivery.
                </p>
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                {[
                  { label: "Email", value: "you@alperendemirli.com", icon: <Mail className="h-4 w-4" /> },
                  { label: "LinkedIn", value: "linkedin.com/in/alperendemirli", icon: <Linkedin className="h-4 w-4" /> },
                  { label: "GitHub", value: "github.com/yourusername", icon: <Github className="h-4 w-4" /> },
                  { label: "Focus", value: "Product strategy · UX · Workflow systems", icon: <Sparkles className="h-4 w-4" /> },
                ].map((item, index) => (
                  <div
                    key={item.label}
                    className={`rounded-[26px] border border-white/10 p-5 transition hover:-translate-y-1 hover:border-white/20 ${
                      index === 0 ? "bg-cyan-400/10" : index === 1 ? "bg-violet-400/10" : index === 2 ? "bg-blue-400/10" : "bg-amber-300/10"
                    }`}
                  >
                    <div className="flex items-center gap-3 text-white/50">
                      {item.icon}
                      <span className="text-xs uppercase tracking-[0.22em]">{item.label}</span>
                    </div>
                    <div className="mt-3 text-sm text-white/86">{item.value}</div>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        </section>
      </main>
    </div>
  );
}

function MetricCard({ label, value, icon, tone = "cyan" }) {
  const borderTone = tone === "violet" ? "shadow-[0_0_0_1px_rgba(167,139,250,0.16)]" : "shadow-[0_0_0_1px_rgba(103,232,249,0.16)]";

  return (
    <div className={`rounded-[24px] border border-white/10 bg-white/[0.04] p-5 ${borderTone}`}>
      <div className="flex items-center justify-between text-white/45">
        <span className="text-xs uppercase tracking-[0.2em]">{label}</span>
        {icon}
      </div>
      <div className="mt-4 text-3xl font-semibold tracking-tight text-white">{value}</div>
    </div>
  );
}

function BackgroundDecor() {
  return (
    <div aria-hidden className="pointer-events-none fixed inset-0 overflow-hidden">
      <div className="absolute inset-0 bg-[#050816]" />
      <motion.div
        animate={{ x: [0, 45, -18, 0], y: [0, -25, 10, 0] }}
        transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
        className="absolute left-[-12%] top-[-8%] h-[36rem] w-[36rem] rounded-full bg-cyan-400/16 blur-3xl"
      />
      <motion.div
        animate={{ x: [0, -45, 25, 0], y: [0, 20, -18, 0] }}
        transition={{ duration: 24, repeat: Infinity, ease: "easeInOut" }}
        className="absolute right-[-8%] top-[6%] h-[30rem] w-[30rem] rounded-full bg-violet-500/14 blur-3xl"
      />
      <motion.div
        animate={{ x: [0, 18, -18, 0], y: [0, -10, 15, 0] }}
        transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
        className="absolute bottom-[-10%] left-[22%] h-[28rem] w-[28rem] rounded-full bg-blue-500/12 blur-3xl"
      />
      <motion.div
        animate={{ x: [0, 14, -14, 0], y: [0, -18, 18, 0] }}
        transition={{ duration: 16, repeat: Infinity, ease: "easeInOut" }}
        className="absolute bottom-[4%] right-[18%] h-[18rem] w-[18rem] rounded-full bg-amber-300/10 blur-3xl"
      />
      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.035)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.035)_1px,transparent_1px)] bg-[size:72px_72px] [mask-image:radial-gradient(circle_at_center,black,transparent_78%)] opacity-25" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_34%)]" />
      <div className="absolute inset-0 opacity-[0.06] [background-image:radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] [background-size:24px_24px]" />
    </div>
  );
}