import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { motion } from "motion/react";
import { Briefcase } from "lucide-react";
import { E as EXPERIENCE } from "./router-CCW7InyN.js";
import { P as PageHero } from "./PageHero-CnZoXXfm.js";
import "@tanstack/react-query";
import "@tanstack/react-router";
import "react";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "sonner";
function ExperiencePage() {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(PageHero, { eyebrow: "Experience", title: "My professional journey", subtitle: "From front-end developer to team lead — the path that shaped how I build and lead today." }),
    /* @__PURE__ */ jsx("section", { className: "py-20", children: /* @__PURE__ */ jsx("div", { className: "container-px mx-auto max-w-4xl", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-2 bottom-2 w-px bg-gradient-to-b from-primary via-accent to-transparent md:left-1/2" }),
      /* @__PURE__ */ jsx("div", { className: "space-y-12", children: EXPERIENCE.map((e, i) => /* @__PURE__ */ jsxs(motion.div, { initial: {
        opacity: 0,
        y: 30
      }, whileInView: {
        opacity: 1,
        y: 0
      }, viewport: {
        once: true,
        margin: "-50px"
      }, transition: {
        delay: i * 0.08
      }, className: `relative md:grid md:grid-cols-2 md:gap-12 ${i % 2 === 1 ? "md:[&>div]:col-start-2" : ""}`, children: [
        /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-3 grid h-3 w-3 -translate-x-1/2 place-items-center rounded-full bg-gradient-hero shadow-glow md:left-1/2" }),
        /* @__PURE__ */ jsx("div", { className: "ml-10 md:ml-0 md:pr-8 md:text-right", style: {
          gridColumn: i % 2 === 0 ? "1" : "2"
        }, children: /* @__PURE__ */ jsxs("div", { className: `rounded-2xl border border-border bg-card p-6 shadow-card ${i % 2 === 1 ? "md:ml-8 md:text-left" : "md:mr-8"}`, children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-primary", children: [
            /* @__PURE__ */ jsx(Briefcase, { className: "h-4 w-4" }),
            " ",
            e.period
          ] }),
          /* @__PURE__ */ jsx("h3", { className: "mt-2 text-xl font-semibold", children: e.role }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: e.company }),
          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: e.desc })
        ] }) })
      ] }, e.role)) })
    ] }) }) })
  ] });
}
export {
  ExperiencePage as component
};
