import { LogoWithTextBelow } from "../Logo/LogoWithTextBelow.mjs";
import { SocialNetworks } from "../SocialNetworks/index.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Footer/index.tsx
/**
* Footer Component
*
* A comprehensive footer component that displays the Intlayer logo, copyright information,
* social networks, and organized groups of navigation links. Designed for responsive
* layouts and optimal user experience across all devices.
*
* @component
* @example
* Basic usage without links:
* ```tsx
* <Footer />
* ```
*
* @example
* With organized link groups:
* ```tsx
* const footerLinks = [
*   {
*     title: 'Product',
*     links: [
*       { href: '/features', text: 'Features', label: 'Product features' },
*       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },
*       { href: '/docs', text: 'Documentation', label: 'Product documentation' }
*     ]
*   },
*   {
*     title: 'Company',
*     links: [
*       { href: '/about', text: 'About Us', label: 'About the company' },
*       { href: '/careers', text: 'Careers', label: 'Job opportunities' },
*       { href: '/contact', text: 'Contact', label: 'Contact information' }
*     ]
*   }
* ];
*
* <Footer links={footerLinks} />
* ```
*
* @example
* With custom click handlers:
* ```tsx
* const footerLinks = [
*   {
*     title: 'Actions',
*     links: [
*       {
*         href: '#',
*         text: 'Newsletter',
*         label: 'Subscribe to newsletter',
*         onClick: () => openNewsletterModal()
*       }
*     ]
*   }
* ];
*
* <Footer links={footerLinks} />
* ```
*
* Features:
* - Responsive design that adapts to different screen sizes
* - Intlayer branding with logo and copyright notice
* - Integrated social network links
* - Flexible link organization with titled groups
* - Accessibility-compliant with proper ARIA labels
* - Support for custom click handlers alongside href navigation
* - Clean, modern design with proper spacing and typography
*
* Layout Structure:
* - Left side (or top on mobile): Logo, copyright, and social links
* - Right side (or bottom on mobile): Organized link groups
* - Responsive breakpoints for optimal mobile experience
*
* Accessibility:
* - Semantic HTML structure using <footer> tag
* - All links include required aria-label attributes
* - Proper heading hierarchy and keyboard navigation
* - Screen reader friendly content organization
* - Focus management for interactive elements
*
* @param props - Component properties
* @param props.links - Optional array of link groups to display
*
* @returns A rendered footer with branding, social links, and optional navigation links
*/
const Footer = ({ links }) => /* @__PURE__ */ jsxs("footer", {
	className: "flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6",
	children: [/* @__PURE__ */ jsxs("aside", {
		className: "flex flex-col items-center justify-between gap-3 md:w-1/4",
		children: [
			/* @__PURE__ */ jsx(LogoWithTextBelow, { className: "size-full max-w-[120px]" }),
			/* @__PURE__ */ jsx("span", {
				className: "text-center text-neutral text-xs",
				children: "© 2026 Intlayer, Inc."
			}),
			/* @__PURE__ */ jsx("div", {
				className: "flex flex-row gap-3",
				children: /* @__PURE__ */ jsx(SocialNetworks, {})
			})
		]
	}), /* @__PURE__ */ jsx("div", {
		className: "m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3",
		children: (links ?? []).map(({ title, links }) => /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-2",
			children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("div", {
				className: "flex flex-col gap-3 text-sm",
				children: links.map((link) => /* @__PURE__ */ jsx("a", {
					href: link.href,
					"aria-label": link.label,
					children: link.text
				}, link.href))
			})]
		}, links.map((link) => link.href).join(",")))
	})]
});

//#endregion
export { Footer };
//# sourceMappingURL=index.mjs.map