import { r as reactExports, T as jsxRuntimeExports } from "./server-u-5HXhMW.js";
import "node:async_hooks";
import "node:stream/web";
import "node:stream";
const p1 = "/assets/project-1-r05YXrQT.jpg";
const p2 = "/assets/project-2-BKhYzLzw.jpg";
const p3 = "/assets/project-3-Ck13WvgT.jpg";
const p4 = "/assets/project-4-7Vr4w1Lh.jpg";
const p5 = "/assets/project-5-BAPLTpci.jpg";
const p6 = "/assets/project-6-CSmv5AHf.jpg";
const projects = [
  { img: p1, name: "Wellfort", category: "Packaging — Identity", year: "2025", tag: "Wellness" },
  { img: p2, name: "Mes Patel", category: "Stationery — Print", year: "2025", tag: "Atelier" },
  { img: p3, name: "Larrene", category: "Cosmetic — Identity", year: "2024", tag: "Beauty" },
  { img: p4, name: "Davacliay", category: "Hospitality — Suite", year: "2024", tag: "Hotel" },
  { img: p5, name: "Lookbook 03", category: "Editorial — Fashion", year: "2024", tag: "Fashion" },
  { img: p6, name: "Calleecy", category: "Spirits — Label Design", year: "2023", tag: "Spirits" }
];
function HeroPortfolio() {
  const trackRef = reactExports.useRef(null);
  const [index, setIndex] = reactExports.useState(0);
  const [isDragging, setIsDragging] = reactExports.useState(false);
  const dragState = reactExports.useRef({ startX: 0, scrollLeft: 0, moved: 0 });
  const scrollToIndex = reactExports.useCallback((i, smooth = true) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.children[i];
    if (!card) return;
    el.scrollTo({ left: card.offsetLeft - 48, behavior: smooth ? "smooth" : "auto" });
  }, []);
  reactExports.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const center = el.scrollLeft + el.clientWidth / 2;
      let closest = 0, dist = Infinity;
      Array.from(el.children).forEach((c, i) => {
        const node = c;
        const cx = node.offsetLeft + node.offsetWidth / 2;
        const d = Math.abs(cx - center);
        if (d < dist) {
          dist = d;
          closest = i;
        }
      });
      setIndex(closest % projects.length);
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);
  reactExports.useEffect(() => {
    if (isDragging) return;
    const t = setInterval(() => {
      const el = trackRef.current;
      if (!el) return;
      const max = el.scrollWidth - el.clientWidth;
      if (el.scrollLeft >= max - 4) {
        el.scrollTo({ left: 0, behavior: "smooth" });
      } else {
        scrollToIndex((index + 1) % projects.length);
      }
    }, 4500);
    return () => clearInterval(t);
  }, [index, isDragging, scrollToIndex]);
  const onPointerDown = (e) => {
    const el = trackRef.current;
    setIsDragging(true);
    dragState.current = { startX: e.clientX, scrollLeft: el.scrollLeft, moved: 0 };
    el.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!isDragging) return;
    const el = trackRef.current;
    const dx = e.clientX - dragState.current.startX;
    dragState.current.moved = Math.abs(dx);
    el.scrollLeft = dragState.current.scrollLeft - dx;
  };
  const onPointerUp = (e) => {
    setIsDragging(false);
    try {
      trackRef.current?.releasePointerCapture(e.pointerId);
    } catch {
    }
  };
  const active = projects[index];
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative h-[100svh] min-h-[640px] w-full overflow-hidden bg-background", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute -top-1/3 left-1/2 -translate-x-1/2 w-[120vw] h-[80vh] rounded-full opacity-[0.06] blur-3xl bg-gold" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-6 md:px-12 py-6", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { href: "#", className: "text-sm tracking-[0.2em] uppercase", children: [
        "Mono",
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gold", children: "·" }),
        "book"
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hidden md:flex items-center gap-10 text-[11px] tracking-[0.3em] uppercase text-muted-foreground", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#about", className: "hover:text-gold transition-colors", children: "Studio" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/contact", className: "hover:text-gold transition-colors", children: "Contact" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "a",
        {
          href: "/contact",
          className: "text-[11px] tracking-[0.3em] uppercase border border-gold/40 hover:border-gold hover:bg-gold hover:text-background transition-all px-5 py-2.5",
          children: "Start a Project"
        }
      )
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-[58%] z-10 px-6 md:px-12 text-center", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] md:text-[11px] tracking-[0.5em] text-gold uppercase mb-4 reveal-up", children: "Brand Architects · Est. 2018" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "font-serif leading-[0.85] tracking-tighter text-[20vw] md:text-[14vw] reveal-up", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "italic text-gradient-gold", children: active.name }) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        ref: trackRef,
        onPointerDown,
        onPointerMove,
        onPointerUp,
        onPointerCancel: onPointerUp,
        className: `absolute inset-0 z-20 flex items-center gap-8 md:gap-12 px-12 md:px-24 overflow-x-auto overflow-y-hidden no-scrollbar snap-x snap-mandatory scroll-smooth ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
        style: { touchAction: "pan-y" },
        children: projects.map((p, i) => {
          const isActive = i === index;
          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
            "article",
            {
              className: `group relative shrink-0 snap-center h-[78vh] md:h-[82vh] w-[78vw] sm:w-[60vw] md:w-[44vw] lg:w-[34vw] overflow-hidden bg-card transition-all duration-700 ${isActive ? "scale-100 opacity-100 shadow-elegant" : "scale-[0.92] opacity-60"}`,
              children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx(
                  "img",
                  {
                    src: p.img,
                    alt: `${p.name} — ${p.category}`,
                    draggable: false,
                    loading: i < 2 ? "eager" : "lazy",
                    className: "absolute inset-0 h-full w-full object-cover transition-transform duration-[1500ms] ease-out group-hover:scale-110 select-none pointer-events-none"
                  }
                ),
                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-background/95 via-background/30 to-background/40" }),
                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-6 left-6 right-6 flex justify-between items-start text-[10px] tracking-[0.3em] uppercase", children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gold", children: [
                    String(i + 1).padStart(2, "0"),
                    " / ",
                    String(projects.length).padStart(2, "0")
                  ] }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-foreground/70", children: p.year })
                ] }),
                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 md:p-8", children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] tracking-[0.3em] text-gold uppercase mb-3", children: p.category }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-serif text-3xl md:text-4xl mb-2", children: p.name }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs tracking-[0.2em] uppercase text-muted-foreground mb-5", children: p.tag }),
                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
                    "a",
                    {
                      href: "/contact",
                      className: "inline-flex items-center gap-3 text-[11px] tracking-[0.3em] uppercase text-foreground/80 group-hover:text-gold transition-colors",
                      children: [
                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "View Case Study" }),
                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "h-px w-8 bg-current transition-all duration-500 group-hover:w-16" })
                      ]
                    }
                  )
                ] })
              ]
            },
            i
          );
        })
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 w-24 md:w-40 z-20 bg-gradient-to-r from-background to-transparent" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-24 md:w-40 z-20 bg-gradient-to-l from-background to-transparent" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-30 px-6 md:px-12 flex items-end justify-between text-[10px] tracking-[0.3em] uppercase text-muted-foreground", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden md:inline", children: "Drag · Scroll · Explore" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: projects.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          "aria-label": `Go to project ${i + 1}`,
          onClick: () => scrollToIndex(i),
          className: `h-px transition-all duration-500 ${i === index ? "w-10 bg-gold" : "w-5 bg-foreground/30 hover:bg-foreground/60"}`
        },
        i
      )) }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden md:inline", children: [
        String(index + 1).padStart(2, "0"),
        " — ",
        String(projects.length).padStart(2, "0")
      ] })
    ] })
  ] });
}
function About() {
  const services = [
    { n: "01", t: "Brand Strategy", d: "Positioning, naming, narrative architecture." },
    { n: "02", t: "Visual Identity", d: "Logos, typography systems, art direction." },
    { n: "03", t: "Packaging", d: "Structural design and luxury print finishing." },
    { n: "04", t: "Digital", d: "Editorial websites, motion, brand worlds." }
  ];
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { id: "about", className: "relative py-32 md:py-48 px-6 md:px-12", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto grid md:grid-cols-12 gap-12", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "md:col-span-4", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs tracking-[0.3em] text-gold uppercase mb-6", children: "The Studio" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs tracking-[0.2em] uppercase text-muted-foreground", children: "— 002 / Studio Note" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "md:col-span-8", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "font-serif text-4xl md:text-6xl leading-[1.05] mb-10", children: [
          "We are a small, devoted studio building ",
          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "italic text-gradient-gold", children: "timeless brand systems" }),
          " for founders who treat design as architecture, not decoration."
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid sm:grid-cols-2 gap-8 text-muted-foreground leading-relaxed", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Every Monobook engagement begins with strategy and ends with a complete identity — a logo, a voice, a typographic system, a packaging language and the digital surface that ties them together." }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "We work in long arcs, with a single client at a time, refining each surface until the brand feels inevitable. The work below is a living archive of that practice." })
        ] })
      ] })
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { id: "services", className: "border-t border-border px-6 md:px-12 py-24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-7xl mx-auto grid md:grid-cols-4 gap-px bg-border", children: services.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background p-8 md:p-10 group hover:bg-card transition-colors", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs tracking-[0.3em] text-gold uppercase mb-8", children: s.n }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-serif text-3xl mb-4 group-hover:text-gold transition-colors", children: s.t }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: s.d })
    ] }, s.n)) }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "overflow-hidden border-y border-border py-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ticker flex gap-16 whitespace-nowrap font-serif text-5xl md:text-7xl", children: Array.from({ length: 2 }).map((_, k) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-16 shrink-0 items-center", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Brand Architecture" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gold", children: "✦" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "italic text-muted-foreground", children: "Editorial Identity" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gold", children: "✦" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Luxury Packaging" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gold", children: "✦" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "italic text-muted-foreground", children: "Strategic Naming" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gold", children: "✦" })
    ] }, k)) }) })
  ] });
}
function Index() {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "bg-background text-foreground", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(HeroPortfolio, {}),
    /* @__PURE__ */ jsxRuntimeExports.jsx(About, {})
  ] });
}
export {
  Index as component
};
