import { Twitter } from "@repo/ui/components/icons";
import { GlareCard } from "./CardPatterns/Glare";
import React from "react";
import { MessageCircle, Search } from "lucide-react";

export default function FUIFeatureSectionWithCards() {
	const features = [
		{
			icon: <Twitter className="w-5 h-5" />,
			title: "Twitter Bookmarks",
			desc: "Use all the knowledge you've saved on Twitter to train your own supermemory..",
		},
		{
			icon: <Search className="w-5 h-5" />,
			title: "Powerful search",
			desc: "Look up anything you've saved in your supermemory, and get the information you need in seconds.",
		},
		{
			icon: <MessageCircle className="w-5 h-5" />,
			title: "Chat with collections",
			desc: "Use collections to talk to specific knowledgebases like 'My twitter bookmarks', or 'Learning web development'",
		},
		{
			icon: (
				<svg
					fill="currentColor"
					xmlns="http://www.w3.org/2000/svg"
					width="14"
					height="16"
				>
					<path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z" />
				</svg>
			),
			title: "Knowledge canvas",
			desc: " Arrange your saved information in a way that makes sense to youin a 2d canvas.",
		},
		{
			icon: (
				<svg
					fill="currentColor"
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
				>
					<path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z" />
				</svg>
			),
			title: "Just... bookmarks",
			desc: "AI is cool, but sometimes you just need a place to save your stuff. Supermemory is that place.",
		},
		{
			icon: (
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					className="w-5 h-"
				>
					<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
				</svg>
			),
			title: "Writing assistant",
			desc: " Use our markdown editor to write content based on your saved data, with the help of AI.",
		},
	];

	return (
		<section className="relative z-20 pb-14">
			<div className="px-4 mx-auto max-w-screen-xl text-gray-400 md:px-8 lg:px-0">
				<div className="relative mx-auto max-w-2xl sm:text-center">
					<div className="relative z-10">
						<h3 className="mt-4 text-3xl font-normal tracking-tighter text-gray-200 sm:text-4xl md:text-5xl font-geist"></h3>
					</div>
					<div
						className="absolute inset-0 mx-auto max-w-xs h-44 blur-[118px]"
						style={{
							background:
								"linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)",
						}}
					></div>
				</div>
				<div className="relative z-20 mt-[4rem]">
					<ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
						{features.map((item, idx) => (
							<GlareCard key={`l-${idx}`}>
								<li
									key={idx}
									className="z-20 transform-gpu space-y-3 rounded-xl border  border-white/10 bg-transparent/20 p-4 [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
								>
									<div className="w-fit transform-gpu rounded-full p-4 text-purple-600 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
										{item.icon}
									</div>
									<h4 className="text-lg font-bold tracking-tighter text-gray-300 font-geist">
										{item.title}
									</h4>
									<p className="text-gray-500">{item.desc}</p>
								</li>
							</GlareCard>
						))}
					</ul>
				</div>
			</div>
		</section>
	);
}