"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

// components/blocks/about/about-interactive-tabs.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.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."
    }
  }
];
function AboutInteractiveTabs({
  title = "Discover Our Story",
  subtitle = "Learn more about who we are and what we do",
  tabs = defaultTabs,
  tabsSlot,
  className,
  containerClassName,
  headerClassName,
  titleClassName,
  subtitleClassName,
  tabsContainerClassName,
  tabButtonClassName,
  activeTabClassName,
  tabContentClassName,
  tabContentTitleClassName,
  tabContentDescriptionClassName,
  tabContentImageClassName,
  optixFlowConfig
}) {
  const [activeTab, setActiveTab] = React__namespace.useState(tabs?.[0]?.id ?? "");
  const activeContent = tabs?.find((tab) => tab.id === activeTab)?.content;
  const renderTabs = () => {
    if (tabsSlot) return tabsSlot;
    if (!tabs || tabs.length === 0) return null;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-16", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-2 border-b", tabsContainerClassName), children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          onClick: () => setActiveTab(tab.id),
          className: cn(
            "px-6 py-3 text-sm font-medium transition-colors",
            activeTab === tab.id ? cn("border-b-2 border-primary text-primary", activeTabClassName) : "text-muted-foreground hover:text-foreground",
            tabButtonClassName
          ),
          children: tab.label
        },
        tab.id
      )) }),
      activeContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 grid gap-12 lg:grid-cols-2 lg:items-center", tabContentClassName), children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
          typeof activeContent.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold", tabContentTitleClassName), children: activeContent.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabContentTitleClassName, children: activeContent.title }),
          typeof activeContent.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", tabContentDescriptionClassName), children: activeContent.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
        ] }),
        activeContent.image && /* @__PURE__ */ jsxRuntime.jsx(
          img.Img,
          {
            src: activeContent.image.src,
            alt: activeContent.image.alt,
            className: cn("rounded-2xl object-cover", tabContentImageClassName),
            optixFlowConfig
          }
        )
      ] })
    ] });
  };
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
      title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
      subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
    ] }),
    (tabsSlot || tabs && tabs.length > 0) && renderTabs()
  ] }) });
}

exports.AboutInteractiveTabs = AboutInteractiveTabs;
//# sourceMappingURL=about-interactive-tabs.cjs.map
//# sourceMappingURL=about-interactive-tabs.cjs.map