craft-and-harvest/src/components/footer/index.tsx

"use client";

import Link from "next/link";
import ThemeToggleSwitch from "@/components/theme-toggle-switch";

export default function Footer() {
	return (
		<footer
			className="w-full border-t mt-auto"
			style={{ borderColor: "var(--tan-30)" }}
		>
			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
					{/* Company Info */}
					<div>
						<h3
							className="text-lg font-semibold mb-4"
							style={{ color: "var(--teal)" }}
						>
							Craft & Harvest
						</h3>
						<p className="text-sm mb-4" style={{ color: "var(--foreground)" }}>
							Your local source for premium candle making supplies in Colorado.
						</p>
						<p className="text-sm mb-2" style={{ color: "var(--foreground)" }}>
							📍 Greater Denver Area, CO
						</p>
						<p className="text-sm mb-2" style={{ color: "var(--foreground)" }}>
							📧 info@craftandharvest.com
						</p>
						<p className="text-sm" style={{ color: "var(--foreground)" }}>
							📞 720-443-1720
						</p>
					</div>

					{/* Shop */}
					<div>
						<h4
							className="text-sm font-semibold mb-4"
							style={{ color: "var(--teal)" }}
						>
							Shop
						</h4>
						<ul className="space-y-2">
							<li>
								<Link
									href="/products"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									All Products
								</Link>
							</li>
							<li>
								<Link
									href="/products/wax"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Wax
								</Link>
							</li>
							<li>
								<Link
									href="/products/jars"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Jars
								</Link>
							</li>
							<li>
								<Link
									href="/products/wicks"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Wicks
								</Link>
							</li>
						</ul>
					</div>

					{/* Company */}
					<div>
						<h4
							className="text-sm font-semibold mb-4"
							style={{ color: "var(--teal)" }}
						>
							Company
						</h4>
						<ul className="space-y-2">
							<li>
								<Link
									href="/about"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									About Us
								</Link>
							</li>
							<li>
								<Link
									href="/contact"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Contact
								</Link>
							</li>
							<li>
								<Link
									href="/delivery"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Delivery & Pickup
								</Link>
							</li>
							<li>
								<Link
									href="/faq"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									FAQ
								</Link>
							</li>
						</ul>
					</div>

					{/* Account */}
					<div>
						<h4
							className="text-sm font-semibold mb-4"
							style={{ color: "var(--teal)" }}
						>
							Account
						</h4>
						<ul className="space-y-2">
							<li>
								<Link
									href="/login"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Sign In
								</Link>
							</li>
							<li>
								<Link
									href="/sign-up"
									className="text-sm hover:opacity-80 transition-opacity"
									style={{ color: "var(--foreground)" }}
								>
									Sign Up
								</Link>
							</li>
							<li>
								<ThemeToggleSwitch showLabel={true} />
							</li>
						</ul>
					</div>
				</div>

				{/* Bottom Bar */}
				<div
					className="mt-12 pt-8 border-t"
					style={{ borderColor: "var(--tan-30)" }}
				>
					<div className="flex flex-col md:flex-row justify-between items-center gap-4">
						<p className="text-sm" style={{ color: "var(--foreground)" }}>
							© {new Date().getFullYear()} Craft & Harvest LLC. All rights
							reserved.
						</p>
						<div className="flex gap-6">
							<Link
								href="/privacy"
								className="text-sm hover:opacity-80 transition-opacity"
								style={{ color: "var(--foreground)" }}
							>
								Privacy Policy
							</Link>
							<Link
								href="/terms"
								className="text-sm hover:opacity-80 transition-opacity"
								style={{ color: "var(--foreground)" }}
							>
								Terms of Service
							</Link>
						</div>
					</div>
				</div>
			</div>
		</footer>
	);
}