footer-4

"use client";

import { Button } from "@/components/ui/button";
import {
	FacebookIcon,
	InstagramIcon,
	LinkedinIcon,
	TwitterIcon,
} from "lucide-react";

const footerLinks = [
	{
		title: "Company",
		links: [
			{ href: "#", label: "The Linomore Blog" },
			{ href: "#", label: "Engineering Blog" },
			{ href: "#", label: "Marketplace" },
			{ href: "#", label: "What’s New" },
			{ href: "#", label: "About" },
			{ href: "#", label: "Press" },
			{ href: "#", label: "Careers" },
			{ href: "#", label: "Link in Bio" },
			{ href: "#", label: "Social Good" },
		],
	},
	{
		title: "Community",
		links: [
			{ href: "#", label: "Linktree for Enterprise" },
			{ href: "#", label: "2023 Creator Report" },
			{ href: "#", label: "2022 Creator Report" },
			{ href: "#", label: "Charities" },
			{ href: "#", label: "What’s Trending" },
			{ href: "#", label: "Creator Profile Directory" },
			{ href: "#", label: "Explore Templates" },
		],
	},
	{
		title: "Support",
		links: [
			{ href: "#", label: "Help Topics" },
			{ href: "#", label: "Getting Started" },
			{ href: "#", label: "Linoree Pro" },
			{ href: "#", label: "Features & How-tos" },
			{ href: "#", label: "FAQs" },
			{ href: "#", label: "Report a Violation" },
		],
	},
	{
		title: "Legal",
		links: [
			{ href: "#", label: "Terms & Conditions" },
			{ href: "#", label: "Privacy Notice" },
			{ href: "#", label: "Cookie Notice" },
			{ href: "#", label: "Trust Center" },
			{ href: "#", label: "Cookie Preferences" },
			{ href: "#", label: "Transparency Report" },
			{ href: "#", label: "Law Enforcement Access Policy" },
		],
	},
];

const socialLinks = [
	{ icon: FacebookIcon, href: "#" },
	{ icon: InstagramIcon, href: "#" },
	{ icon: LinkedinIcon, href: "#" },
	{ icon: TwitterIcon, href: "#" },
];

export function Footer() {
	return (
		<footer className="border-t">
			<div className="mx-auto max-w-6xl px-4 lg:px-6">
				{/* Grid container with headings and links */}
				<div className="grid grid-cols-2 gap-8 py-8 md:grid-cols-4">
					{footerLinks.map((item) => (
						<div key={item.title}>
							<h3 className="mb-4 text-xs">{item.title}</h3>
							<ul className="space-y-2 text-muted-foreground text-sm">
								{item.links.map((link) => (
									<li key={link.label}>
										<a className="hover:text-foreground" href={link.href}>
											{link.label}
										</a>
									</li>
								))}
							</ul>
						</div>
					))}
				</div>
				<div className="h-px bg-border" />
				{/* Social Buttons + App Links */}
				<div className="flex flex-wrap items-center justify-between gap-4 py-5">
					<div className="flex items-center gap-2">
						{socialLinks.map(({ icon: Icon, href }, index) => (
							<Button
								asChild
								key={`social-${href}-${index}`} // More descriptive prefix
								size="icon-sm"
								variant="outline"
							>
								<a href={href}>
									<Icon />
								</a>
							</Button>
						))}
					</div>

					<div className="flex gap-4">
						<Button asChild className="h-11">
							<a href="#">
								<PlayStoreIcon className="size-5" />
								<div className="flex flex-col items-start justify-center pr-2 text-left">
									<span className="font-light text-[10px] leading-none tracking-tighter">
										GET IT ON
									</span>
									<p className="font-bold text-base leading-none">
										Google Play
									</p>
								</div>
							</a>
						</Button>

						<Button asChild className="h-11">
							<a href="#">
								<AppleIcon className="size-5" />
								<div className="flex flex-col items-start justify-center pr-2 text-left">
									<span className="text-[10px] leading-none tracking-tighter">
										Download on the
									</span>
									<p className="font-bold text-base leading-none">App Store</p>
								</div>
							</a>
						</Button>
					</div>
				</div>
				<div className="h-px bg-border" />
				<div className="py-4 text-center text-muted-foreground text-xs">
					<p>&copy; {new Date().getFullYear()} efferd, All rights reserved</p>
				</div>
			</div>
		</footer>
	);
}

function PlayStoreIcon({
	fill = "currentColor",
	...props
}: React.ComponentProps<"svg">) {
	return (
		<svg fill={fill} viewBox="0 0 24 24" {...props}>
			<path d="m21.762,9.942L4.67.378c-.721-.466-1.635-.504-2.393-.099-.768.411-1.246,1.208-1.246,2.08v19.282c0,.872.477,1.668,1.246,2.079.755.404,1.668.37,2.393-.098l17.092-9.564c.756-.423,1.207-1.192,1.207-2.058s-.451-1.635-1.207-2.058Zm-5.746-1.413l-2.36,2.36L5.302,2.534l10.714,5.995ZM2.604,21.906V2.094l9.941,9.906L2.604,21.906Zm2.698-.439l8.355-8.355,2.36,2.36-10.714,5.995Zm15.692-8.78l-3.552,1.987-2.674-2.674,2.674-2.674,3.552,1.987c.363.203.402.548.402.686s-.039.483-.402.686Z" />
		</svg>
	);
}

function AppleIcon({
	fill = "currentColor",
	...props
}: React.ComponentProps<"svg">) {
	return (
		<svg fill={fill} viewBox="0 0 24 24" {...props}>
			<g id="_Group_2">
				<g id="_Group_3">
					<path
						d="M18.546,12.763c0.024-1.87,1.004-3.597,2.597-4.576c-1.009-1.442-2.64-2.323-4.399-2.378    c-1.851-0.194-3.645,1.107-4.588,1.107c-0.961,0-2.413-1.088-3.977-1.056C6.122,5.927,4.25,7.068,3.249,8.867    c-2.131,3.69-0.542,9.114,1.5,12.097c1.022,1.461,2.215,3.092,3.778,3.035c1.529-0.063,2.1-0.975,3.945-0.975    c1.828,0,2.364,0.975,3.958,0.938c1.64-0.027,2.674-1.467,3.66-2.942c0.734-1.041,1.299-2.191,1.673-3.408    C19.815,16.788,18.548,14.879,18.546,12.763z"
						id="_Path_"
					/>
					<path
						d="M15.535,3.847C16.429,2.773,16.87,1.393,16.763,0c-1.366,0.144-2.629,0.797-3.535,1.829    c-0.895,1.019-1.349,2.351-1.261,3.705C13.352,5.548,14.667,4.926,15.535,3.847z"
						id="_Path_2"
					/>
				</g>
			</g>
		</svg>
	);
}