"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Img } from '@page-speed/img';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/about/about-interactive-tabs.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var defaultTabs = [
  {
    id: "work",
    label: "Our Work",
    content: {
      title: "Crafting Digital Experiences",
      description: "We create beautiful, functional digital products that help businesses grow. From web applications to mobile apps, our portfolio showcases our commitment to excellence and innovation."
    }
  },
  {
    id: "process",
    label: "Our Process",
    content: {
      title: "How We Build",
      description: "Our iterative approach combines design thinking with agile development. We start with discovery, move through design and development, and deliver products that exceed expectations."
    }
  },
  {
    id: "values",
    label: "Our Values",
    content: {
      title: "What Drives Us",
      description: "Quality, transparency, and collaboration are at the heart of everything we do. We believe in building lasting relationships with our clients through honest communication and exceptional work."
    }
  }
];
var defaultProps = {
  title: "Discover Our Story",
  subtitle: "Learn more about who we are and what we do",
  tabs: defaultTabs
};
function AboutInteractiveTabs({
  className,
  title = defaultProps.title,
  subtitle = defaultProps.subtitle,
  tabs = defaultProps.tabs,
  optixFlowConfig
}) {
  const [activeTab, setActiveTab] = React.useState(tabs?.[0]?.id ?? "");
  const activeContent = tabs?.find((tab) => tab.id === activeTab)?.content;
  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
    /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: title }),
      /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: subtitle })
    ] }),
    tabs && tabs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2 border-b", children: tabs.map((tab) => /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => setActiveTab(tab.id),
          className: cn(
            "px-6 py-3 text-sm font-medium transition-colors",
            activeTab === tab.id ? "border-b-2 border-primary text-primary" : "text-muted-foreground hover:text-foreground"
          ),
          children: tab.label
        },
        tab.id
      )) }),
      activeContent && /* @__PURE__ */ jsxs("div", { className: "mt-12 grid gap-12 lg:grid-cols-2 lg:items-center", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold", children: activeContent.title }),
          /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeContent.description })
        ] }),
        activeContent.image && /* @__PURE__ */ jsx(
          Img,
          {
            src: activeContent.image.src,
            alt: activeContent.image.alt,
            className: "rounded-2xl object-cover",
            optixFlowConfig
          }
        )
      ] })
    ] })
  ] }) });
}

export { AboutInteractiveTabs };
//# sourceMappingURL=about-interactive-tabs.js.map
//# sourceMappingURL=about-interactive-tabs.js.map