infoalloggi-monorepo/apps/infoalloggi/src/components/expand_guida.tsx

import { HelpCircle } from "lucide-react";
import Link from "next/link";
import {
	ExpandableScreen,
	ExpandableScreenContent,
	ExpandableScreenTrigger,
} from "./expandable_screen";
import { Button } from "./ui/button";
import { Separator } from "./ui/separator";

const texts: {
	title: string;
	parts: (string | { href: string; text: string })[];
}[] = [
	{
		title: "Costo del servizio",
		parts: [
			"Il costo del servizio è personalizzato in base alla tipologia e parametri della tua ricerca.",
			"Per contattare i proprietari ti chiederemo un acconto di 35€ sul totale.",
			"Potrai contattare tutti i proprietari degli immobili che desideri durante la durata del servizio.",
			{ href: "/prezzi", text: "Scopri i prezzi" },
		],
	},
	{
		title: "Come procedere",
		parts: [
			"Contattaci per un immobile, prepareremo per te degli annunci compatibili alle tue esigenze e ti invieremo un invito via email per accedere alla piattaforma.",
			"Una volta effettuato l'accesso, potrai acquistare il servizio e visualizzare i contatti dei proprietari degli immobili.",
			{
				href: "/annunci",
				text: "Vai agli annunci",
			},
		],
	},
	{
		title: "Nulla di fatto",
		parts: [
			"Se non trovi un immobile che soddisfi le tue esigenze, avrai 14 giorni di tempo per interrompere il servizio senza necessità di ulteriori pagamenti.",
		],
	},
];

export const ComeFunziona = () => {
	return (
		<ExpandableScreen
			contentRadius="14px"
			layoutId="cta-card"
			triggerRadius="100px"
		>
			<ExpandableScreenTrigger className="w-full">
				<Button className="w-full">
					<HelpCircle />
					<span>Scopri come funziona</span>
				</Button>
			</ExpandableScreenTrigger>

			<ExpandableScreenContent className="bg-primary text-primary-foreground">
				<div className="h-full space-y-6 p-6 py-12 sm:space-y-16 sm:px-10">
					{texts.map((text, index) => (
						// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
						<div className="space-y-6" key={index}>
							<div className="space-y-2">
								<h2 className="font-semibold text-4xl">{text.title}</h2>
								{text.parts.map((p, i) => {
									return typeof p === "object" ? (
										<Link
											className="text-2xl underline after:content-['_↗'] hover:text-secondary"
											href={p.href}
											// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
											key={`${index}-link-${i}`}
										>
											{p.text}
										</Link>
									) : (
										<p
											className="text-2xl"
											// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
											key={`${index}-${i}`}
										>
											{p}
										</p>
									);
								})}
							</div>
							<Separator />
						</div>
					))}
				</div>
			</ExpandableScreenContent>
		</ExpandableScreen>
	);
};