import { useState, useEffect, useRef } from "react";
import { submitContactForm } from "./components/ui";
// ── Icone SVG inline semplici ─────────────────────────────────
function IcoInstagram() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" />
<circle cx="12" cy="12" r="5" />
<circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none" />
</svg>
);
}
function IcoWhatsapp() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
<path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.554 4.117 1.526 5.847L.057 23.485a.5.5 0 0 0 .612.612l5.638-1.469A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.885 0-3.655-.494-5.19-1.36l-.37-.214-3.857 1.005 1.029-3.752-.232-.376A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
</svg>
);
}
function IcoMail() {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<rect x="2" y="4" width="20" height="16" rx="2" />
<polyline points="2,4 12,13 22,4" />
</svg>
);
}
function IcoStar({ filled = true }: { filled?: boolean }) {
return (
<svg width="16" height="16" viewBox="0 0 24 24" fill={filled ? "hsl(45,100%,51%)" : "none"} stroke="hsl(45,100%,51%)" strokeWidth="2">
<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
</svg>
);
}
function IcoChevron({ dir = "down" }: { dir?: "down" | "up" }) {
return (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: dir === "up" ? "rotate(180deg)" : undefined }}>
<polyline points="6,9 12,15 18,9" />
</svg>
);
}
function IcoMapPin() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="hsl(45,100%,51%)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 10c0 6-9 13-9 13S3 16 3 10a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
);
}
function IcoClock() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="hsl(45,100%,51%)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" />
<polyline points="12,6 12,12 16,14" />
</svg>
);
}
// ── Reveal al scroll ──────────────────────────────────────────
function Reveal({ children, className = "", delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
const ref = useRef<HTMLDivElement>(null);
const [vis, setVis] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold: 0.12 });
obs.observe(el);
return () => obs.disconnect();
}, []);
return (
<div ref={ref} className={className} style={{ opacity: vis ? 1 : 0, transform: vis ? "translateY(0)" : "translateY(28px)", transition: `opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s` }}>
{children}
</div>
);
}
// ── Nav ───────────────────────────────────────────────────────
function Nav() {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 40);
window.addEventListener("scroll", fn);
return () => window.removeEventListener("scroll", fn);
}, []);
const links = [
{ label: "Chi siamo", href: "#chi-siamo" },
{ label: "Corsi", href: "#corsi" },
{ label: "Eventi", href: "#eventi" },
{ label: "Team", href: "#team" },
{ label: "Contatti", href: "#contatti" },
];
return (
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "bg-black/90 backdrop-blur-md shadow-lg" : "bg-transparent"}`}>
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between h-16">
{/* Logo */}
<a href="#" className="flex items-center gap-3 group">
<img src="https://www.tangourbano.it/wp-content/uploads/2026/05/logo.png" alt="Tango Urbano Roma" className="h-10 w-auto object-contain" />
</a>
{/* Desktop links */}
<div className="hidden md:flex items-center gap-8">
{links.map(l => (
<a key={l.href} href={l.href} className="text-sm font-medium text-white/70 hover:text-[hsl(45,100%,51%)] transition-colors uppercase tracking-widest">
{l.label}
</a>
))}
<a href="#contatti" className="ml-4 px-5 py-2 bg-[hsl(45,100%,51%)] text-black text-sm font-bold uppercase tracking-widest hover:bg-[hsl(45,100%,62%)] transition-colors rounded-sm">
Prima lezione gratis
</a>
</div>
{/* Mobile hamburger */}
<button className="md:hidden text-white" onClick={() => setOpen(o => !o)} aria-label="Menu">
<div className="space-y-1.5">
<span className={`block h-0.5 bg-white transition-all ${open ? "rotate-45 translate-y-2" : ""}`} style={{ width: 24 }} />
<span className={`block h-0.5 bg-white transition-all ${open ? "opacity-0" : ""}`} style={{ width: 24 }} />
<span className={`block h-0.5 bg-white transition-all ${open ? "-rotate-45 -translate-y-2" : ""}`} style={{ width: 24 }} />
</div>
</button>
</div>
{/* Mobile drawer */}
{open && (
<div className="md:hidden bg-black/95 backdrop-blur-md px-6 pb-6 pt-2 space-y-4">
{links.map(l => (
<a key={l.href} href={l.href} onClick={() => setOpen(false)} className="block text-white/80 font-medium uppercase tracking-widest text-sm py-2 border-b border-white/10">
{l.label}
</a>
))}
<a href="#contatti" onClick={() => setOpen(false)} className="block text-center px-5 py-3 bg-[hsl(45,100%,51%)] text-black font-bold uppercase tracking-widest text-sm rounded-sm">
Prima lezione gratis
</a>
</div>
)}
</nav>
);
}
// ── Hero ──────────────────────────────────────────────────────
function Hero() {
return (
<section className="relative min-h-screen flex items-center overflow-hidden grain">
{/* BG image */}
<div className="absolute inset-0">
<img
src="https://pub-a4d6ad10dc1a4e1da401961c64a9749e.r2.dev/ig/4faf0c94c7ac55bf.jpg"
alt="Tango Urbano Roma"
className="w-full h-full object-cover object-center"
/>
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-black/30" />
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20" />
</div>
{/* Decorative vertical line */}
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[hsl(45,100%,51%)]" />
{/* Content */}
<div className="relative z-10 max-w-6xl mx-auto px-6 py-32">
<div className="max-w-2xl">
<div className="animate-fade-up animate-delay-1 flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.3em]">Roma · Dal cuore dell'Argentina</span>
</div>
<h1 className="animate-fade-up animate-delay-2 font-display text-7xl md:text-9xl leading-none mb-4 text-white">
TANGO<br />
<span className="shimmer-text">URBANO</span>
</h1>
<p className="animate-fade-up animate-delay-3 font-serif italic text-xl md:text-2xl text-white/80 mb-10 leading-relaxed">
Scuola di Tango Argentino a Roma.
Un viaggio nei sensi che trasforma il modo in cui ti muovi, ascolti e connetti.
</p>
<div className="animate-fade-up animate-delay-3 flex flex-col sm:flex-row gap-4">
<a href="#contatti" className="px-8 py-4 bg-[hsl(45,100%,51%)] text-black font-bold uppercase tracking-widest text-sm hover:bg-[hsl(45,100%,62%)] transition-all hover:scale-105 inline-block text-center rounded-sm">
Prima Lezione Gratuita
</a>
<a href="#corsi" className="px-8 py-4 border border-white/30 text-white font-medium uppercase tracking-widest text-sm hover:border-[hsl(45,100%,51%)] hover:text-[hsl(45,100%,51%)] transition-all inline-block text-center rounded-sm">
Scopri i Corsi
</a>
</div>
{/* Stats inline */}
<div className="animate-fade-up animate-delay-3 mt-14 flex gap-10">
{[
{ n: "3+", l: "Sedi a Roma" },
{ n: "5", l: "Maestri esperti" },
{ n: "★5.0", l: "Recensioni Google" },
].map(s => (
<div key={s.l}>
<div className="font-display text-3xl text-[hsl(45,100%,51%)]">{s.n}</div>
<div className="text-xs text-white/50 uppercase tracking-widest mt-1">{s.l}</div>
</div>
))}
</div>
</div>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 text-white/30">
<span className="text-xs uppercase tracking-widest">Scorri</span>
<div className="w-px h-10 bg-white/20 relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-1/2 bg-[hsl(45,100%,51%)]" style={{ animation: "slideDown 1.5s ease infinite" }} />
</div>
</div>
<style>{`@keyframes slideDown { from{transform:translateY(-100%)} to{transform:translateY(300%)} }`}</style>
</section>
);
}
// ── Chi Siamo ─────────────────────────────────────────────────
function ChiSiamo() {
return (
<section id="chi-siamo" className="py-24 md:py-32">
<div className="max-w-6xl mx-auto px-6">
<div className="grid md:grid-cols-2 gap-16 items-center">
{/* Immagine */}
<Reveal>
<div className="relative">
<img
src="https://pub-a4d6ad10dc1a4e1da401961c64a9749e.r2.dev/ig/b01441727b24bb99.jpg"
alt="Comunità Tango Urbano Roma"
className="w-full aspect-[4/5] object-cover rounded-sm"
/>
{/* Citazione sovrapposta */}
<div className="absolute -bottom-8 -right-6 bg-[hsl(45,100%,51%)] text-black p-6 max-w-[240px] rounded-sm shadow-2xl">
<p className="font-serif italic text-base leading-snug font-semibold">
"Il centro del tango è nell'abbraccio. Da lì passa tutto."
</p>
<div className="mt-2 text-xs font-bold uppercase tracking-widest">— C. Gavito</div>
</div>
</div>
</Reveal>
{/* Testo */}
<Reveal delay={0.2} className="md:pl-4">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Chi siamo</span>
</div>
<h2 className="font-display text-5xl md:text-6xl text-white leading-none mb-6">
PASSIONE,<br />CONNESSIONE,<br />
<span className="text-[hsl(45,100%,51%)]">TANGO.</span>
</h2>
<div className="space-y-4 text-white/70 leading-relaxed">
<p>
<strong className="text-white">Tango Urbano Roma</strong> è una scuola di Tango Argentino guidata dal Maestro <strong className="text-white">Santiago Castro</strong> e dal suo team di insegnanti appassionati. Siamo nati dall'amore per questa danza straordinaria e dalla voglia di condividerla con Roma.
</p>
<p>
Offriamo corsi per tutti i livelli — dai primissimi passi agli avanzati — lezioni private, praticas e serate milonga. Il tango non è solo danza: è <em className="text-white/90">ascolto, dialogo, emozione</em>.
</p>
<p>
Il nostro ambiente è accogliente e inclusivo. Pensi di essere un "ciocco di legno" e di non avere coordinazione? Siamo qui proprio per te.
</p>
</div>
<div className="mt-10 grid grid-cols-2 gap-4">
{[
{ icon: "💃", label: "Ogni livello, nessun limite" },
{ icon: "🤝", label: "Comunità accogliente" },
{ icon: "🎵", label: "Musicalità autentica" },
{ icon: "🌟", label: "Maestri certificati" },
].map(f => (
<div key={f.label} className="flex items-center gap-3 bg-white/5 px-4 py-3 rounded-sm border border-white/10">
<span className="text-xl">{f.icon}</span>
<span className="text-sm text-white/80 font-medium">{f.label}</span>
</div>
))}
</div>
</Reveal>
</div>
</div>
</section>
);
}
// ── Corsi ─────────────────────────────────────────────────────
function Corsi() {
const corsi = [
{
tag: "Per tutti",
titolo: "Primi Passi",
desc: "Hai sempre voluto ballare il tango ma non sai da dove cominciare? Questo corso è la tua porta d'ingresso. Nessuna esperienza richiesta.",
colore: "hsl(45,100%,51%)",
bg: "bg-[hsl(45,100%,51%)]",
dark: false,
},
{
tag: "Livello 1",
titolo: "Principianti",
desc: "Consolida la camminata, impara l'abbraccio e scopri il cuore musicale del tango. Un percorso strutturato per costruire basi solide.",
colore: "hsl(45,100%,51%)",
bg: "bg-white/5",
dark: true,
},
{
tag: "Livello 2",
titolo: "Intermedi",
desc: "Approfondisci giros, ochos, variazioni e musicalità avanzata. La tua danza inizia a prendere forma e personalità.",
colore: "hsl(45,100%,51%)",
bg: "bg-white/5",
dark: true,
},
{
tag: "Livello 3",
titolo: "Avanzati",
desc: "Per chi vuole affinare stile, improvvisazione e connessione profonda. Il tango come arte e filosofia.",
colore: "hsl(45,100%,51%)",
bg: "bg-white/5",
dark: true,
},
{
tag: "Su misura",
titolo: "Lezioni Private",
desc: "Attenzione individuale con il Maestro Santiago o il suo team. Il percorso più rapido per migliorare secondo i tuoi obiettivi personali.",
colore: "hsl(350,72%,45%)",
bg: "bg-[hsl(350,72%,12%)]",
dark: true,
},
];
return (
<section id="corsi" className="py-24 md:py-32 bg-[hsl(0,0%,6%)]">
<div className="max-w-6xl mx-auto px-6">
<Reveal className="text-center mb-16">
<div className="flex items-center justify-center gap-3 mb-4">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">I nostri corsi</span>
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
</div>
<h2 className="font-display text-5xl md:text-7xl text-white leading-none mb-4">
IMPARA IL TANGO
</h2>
<p className="text-white/50 max-w-lg mx-auto text-base">
Dai primissimi passi all'arte avanzata. Un percorso chiaro, divertente, appassionante.
</p>
</Reveal>
<div className="grid md:grid-cols-3 gap-4">
{/* Primo corso in evidenza a tutta colonna */}
<Reveal delay={0.05} className="md:col-span-3">
<div className={`${corsi[0].bg} rounded-sm p-8 flex flex-col md:flex-row md:items-center justify-between gap-6`}>
<div>
<span className="text-xs font-bold uppercase tracking-widest text-black/60 block mb-2">{corsi[0].tag}</span>
<h3 className="font-display text-5xl text-black leading-none mb-3">{corsi[0].titolo}</h3>
<p className="text-black/70 max-w-lg">{corsi[0].desc}</p>
</div>
<a href="#contatti" className="flex-shrink-0 px-8 py-4 bg-black text-[hsl(45,100%,51%)] font-bold uppercase tracking-widest text-sm hover:bg-black/80 transition-all rounded-sm whitespace-nowrap">
Iscriviti ora
</a>
</div>
</Reveal>
{/* Altri corsi */}
{corsi.slice(1).map((c, i) => (
<Reveal key={c.titolo} delay={0.1 * (i + 1)}>
<div className={`${c.bg} border border-white/10 rounded-sm p-6 h-full flex flex-col card-hover`}>
<span className="text-xs font-bold uppercase tracking-widest mb-3 block" style={{ color: c.colore }}>{c.tag}</span>
<h3 className="font-display text-3xl text-white leading-none mb-3">{c.titolo}</h3>
<p className="text-white/60 text-sm leading-relaxed flex-1">{c.desc}</p>
<a href="#contatti" className="mt-6 text-xs font-bold uppercase tracking-widest hover:text-[hsl(45,100%,51%)] transition-colors" style={{ color: c.colore }}>
Prenota lezione prova in coppia →
</a>
</div>
</Reveal>
))}
</div>
{/* CTA prima lezione gratis */}
<Reveal delay={0.2} className="mt-12 text-center p-8 border border-[hsl(45,100%,51%)]/30 rounded-sm bg-[hsl(45,100%,51%)]/5">
<p className="font-display text-3xl md:text-4xl text-white mb-2">
La prima lezione è <span className="text-[hsl(45,100%,51%)]">GRATUITA</span>
</p>
<p className="text-white/50 mb-6 text-sm">Vieni a provare senza impegno. Ti aspettiamo!</p>
<a href="#contatti" className="inline-block px-10 py-4 bg-[hsl(45,100%,51%)] text-black font-bold uppercase tracking-widest text-sm hover:bg-[hsl(45,100%,62%)] transition-all rounded-sm">
Prenota ora
</a>
</Reveal>
</div>
</section>
);
}
// ── Orari / Sedi ──────────────────────────────────────────────
function Sedi() {
const sedi = [
{
giorno: "Martedì",
luogo: "Garbatella",
indirizzo: "Via M. Tamburini 18 — Roma Art Move",
orari: ["20:30 — Primi Passi / Principianti", "21:30 — Intermedi / Avanzati"],
},
{
giorno: "Mercoledì",
luogo: "San Giovanni",
indirizzo: "Via La Spezia 63 — Metro Lodi",
orari: ["20:30 — Primi Passi / Principianti", "21:30 — Intermedi / Avanzati"],
},
];
return (
<section className="py-20 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6">
<Reveal className="mb-12">
<div className="flex items-center gap-3 mb-2">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Calendario lezioni</span>
</div>
<h2 className="font-display text-4xl md:text-5xl text-white">2 SEDI A ROMA</h2>
</Reveal>
<div className="grid md:grid-cols-2 gap-6 max-w-3xl">
{sedi.map((s, i) => (
<Reveal key={s.luogo} delay={0.1 * i}>
<div className="bg-white/5 border border-white/10 rounded-sm p-6 card-hover">
<div className="text-[hsl(45,100%,51%)] font-display text-2xl mb-1">{s.giorno}</div>
<div className="text-white font-semibold text-lg mb-1">{s.luogo}</div>
<div className="flex items-start gap-2 text-white/50 text-sm mb-4">
<IcoMapPin />
<span className="leading-snug">{s.indirizzo}</span>
</div>
<div className="space-y-2">
{s.orari.map(o => (
<div key={o} className="flex items-center gap-2 text-sm text-white/70">
<IcoClock />
<span>{o}</span>
</div>
))}
</div>
</div>
</Reveal>
))}
</div>
</div>
</section>
);
}
// ── Team ──────────────────────────────────────────────────────
function Team() {
const maestri = [
{
nome: "Santiago Castro",
ruolo: "Maestro · Ballerino · Coreografo · TDJ · Organizzatore",
foto: "https://www.tangourbano.it/wp-content/uploads/2023/07/10373015_816650521707115_8757543601746706830_o-199x300.jpg",
desc: "Cuore e anima di Tango Urbano. Maestro, ballerino, coreografo, Tango DJ e organizzatore: Santiago porta il tango argentino autentico nel cuore di Roma.",
},
{
nome: "Serena Cacciola",
ruolo: "Maestra",
foto: "https://www.tangourbano.it/wp-content/uploads/2023/02/serena-2-300x300.jpg",
desc: "Porta leggerezza e precisione in ogni lezione. La sua passione per la danza trasforma ogni allievo.",
},
{
nome: "Lorenzo Camplone",
ruolo: "Maestro",
foto: "",
desc: "Tecnica e musicalità al servizio della connessione. Lorenzo guida gli allievi con cura e dedizione.",
},
{
nome: "Simona Di Giuseppe",
ruolo: "Maestra & Tango DJ",
foto: "https://www.tangourbano.it/wp-content/uploads/2023/11/347250365_1318516072036127_1866092586537305385_n-300x300.jpg",
desc: "Connessione, musica e cultura del tango. Maestra e anima musicale delle milonghe di Tango Urbano.",
},
{
nome: "Daniela Zaccagnini",
ruolo: "Maestra & Stilista di Tango",
foto: "https://www.tangourbano.it/wp-content/uploads/2023/02/dani-1-1-300x300.jpg",
desc: "Eleganza, stile e sensualità. Daniela cura l'estetica del movimento e consiglia look per la milonga.",
},
];
return (
<section id="team" className="py-24 md:py-32 bg-[hsl(0,0%,6%)]">
<div className="max-w-6xl mx-auto px-6">
<Reveal className="text-center mb-16">
<div className="flex items-center justify-center gap-3 mb-4">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">I nostri maestri</span>
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
</div>
<h2 className="font-display text-5xl md:text-7xl text-white leading-none">
IL TEAM
</h2>
</Reveal>
<div className="grid md:grid-cols-4 gap-6">
{maestri.map((m, i) => (
<Reveal key={m.nome} delay={0.1 * i}>
<div className="group text-center card-hover">
<div className="relative mb-4 overflow-hidden rounded-sm aspect-square">
<img src={m.foto} alt={m.nome} className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105" />
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>
<div className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-widest mb-1">{m.ruolo}</div>
<h3 className="text-white font-semibold text-lg mb-2">{m.nome}</h3>
<p className="text-white/50 text-sm leading-relaxed">{m.desc}</p>
</div>
</Reveal>
))}
</div>
</div>
</section>
);
}
// ── Galleria ──────────────────────────────────────────────────
function Galleria() {
return (
<section id="galleria" className="py-16">
<div className="max-w-6xl mx-auto px-6">
<Reveal className="mb-10">
<div className="flex items-center gap-3 mb-2">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Atmosfera</span>
</div>
<h2 className="font-display text-4xl md:text-5xl text-white">LA NOSTRA SCUOLA</h2>
</Reveal>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
<Reveal className="col-span-1 md:col-span-2 row-span-1">
<div className="overflow-hidden rounded-sm aspect-video">
<img src="https://pub-a4d6ad10dc1a4e1da401961c64a9749e.r2.dev/ig/a26fdf736c950c8d.jpg" alt="Lezione di tango" className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
</div>
</Reveal>
<Reveal delay={0.1}>
<div className="overflow-hidden rounded-sm aspect-square">
<img src="https://pub-a4d6ad10dc1a4e1da401961c64a9749e.r2.dev/ig/4faf0c94c7ac55bf.jpg" alt="Coppia di tango" className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
</div>
</Reveal>
<Reveal delay={0.15}>
<div className="overflow-hidden rounded-sm aspect-square">
<img src="https://pub-a4d6ad10dc1a4e1da401961c64a9749e.r2.dev/ig/b01441727b24bb99.jpg" alt="Gruppo Tango Urbano" className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
</div>
</Reveal>
<Reveal delay={0.2} className="col-span-1 md:col-span-2">
<div className="overflow-hidden rounded-sm aspect-video">
<img src="https://www.tangourbano.it/wp-content/uploads/2024/12/1-1024x721.png" alt="Milonga Roma" className="w-full h-full object-cover object-center hover:scale-105 transition-transform duration-700" />
</div>
</Reveal>
</div>
<Reveal delay={0.2} className="mt-6 text-center">
<a href="https://www.instagram.com/tango.urbano/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-3 px-6 py-3 border border-white/20 text-white/70 hover:border-[hsl(45,100%,51%)] hover:text-[hsl(45,100%,51%)] transition-all text-sm font-medium rounded-sm">
<IcoInstagram />
Seguici su Instagram @tango.urbano
</a>
</Reveal>
</div>
</section>
);
}
// ── Eventi ────────────────────────────────────────────────────
function Eventi() {
return (
<section id="eventi" className="py-24 md:py-32 bg-[hsl(0,0%,6%)]">
<div className="max-w-6xl mx-auto px-6">
<div className="grid md:grid-cols-2 gap-16 items-center">
<Reveal>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Oltre le lezioni</span>
</div>
<h2 className="font-display text-5xl md:text-6xl text-white leading-none mb-8">
EVENTI &<br /><span className="text-[hsl(45,100%,51%)]">MILONGHE</span>
</h2>
<div className="space-y-6">
<div className="border-l-2 border-[hsl(45,100%,51%)] pl-6">
<div className="font-display text-2xl text-white mb-1">LA BOMBA</div>
<div className="text-[hsl(45,100%,51%)] text-xs font-bold uppercase tracking-widest mb-2">Milonga Roma</div>
<p className="text-white/60 text-sm leading-relaxed">
La nostra milonga è uno spazio per ballare, incontrarsi e vivere il tango in libertà. Un'esperienza autentica nel cuore di Roma.
</p>
</div>
<div className="border-l-2 border-[hsl(350,72%,45%)] pl-6">
<div className="font-display text-2xl text-white mb-1">SHOW DI TANGO</div>
<div className="text-[hsl(350,72%,45%)] text-xs font-bold uppercase tracking-widest mb-2">Spettacoli & Performance</div>
<p className="text-white/60 text-sm leading-relaxed">
Il team Tango Urbano porta sul palco spettacoli emozionanti di tango argentino per eventi privati, aziendali e teatrali.
</p>
</div>
<div className="border-l-2 border-white/20 pl-6">
<div className="font-display text-2xl text-white mb-1">PRACTICAS & STAGES</div>
<div className="text-white/40 text-xs font-bold uppercase tracking-widest mb-2">Approfondimenti</div>
<p className="text-white/60 text-sm leading-relaxed">
Praticas settimanali per allenare la danza e workshops intensivi con ospiti speciali dall'Argentina e dal mondo.
</p>
</div>
</div>
</Reveal>
<Reveal delay={0.2}>
<div className="relative">
<img
src="https://www.tangourbano.it/wp-content/uploads/2026/01/Corsi-di-Tango-2026-orizzontal.png"
alt="Corsi Tango 2026"
className="w-full rounded-sm object-cover"
/>
<div className="absolute -top-4 -left-4 bg-[hsl(45,100%,51%)] text-black px-4 py-2 rounded-sm">
<div className="font-display text-2xl">2025/26</div>
<div className="text-xs font-bold uppercase tracking-widest">Stagione in corso</div>
</div>
</div>
</Reveal>
</div>
</div>
</section>
);
}
// ── Recensioni ────────────────────────────────────────────────
function Recensioni() {
const reviews = [
{
nome: "Valeria M.",
testo: "Il Tango argentino insegnato in maniera eccelsa, tecnicamente ma divertendosi. Il clima è accogliente e informale, e gli insegnanti molto preparati hanno tanto da trasferire. Lo consiglio vivamente!",
stelle: 5,
},
{
nome: "Marco R.",
testo: "Consiglio a tutti la scuola Tango Urbano di Santiago Castro. Il maestro riesce a scomporre i passi più difficili e a renderli facili da imparare e divertenti. L'ambiente è accogliente e rilassato.",
stelle: 5,
},
{
nome: "Alessandra T.",
testo: "Una scuola d'eccellenza. Il Maestro Santiago Castro coniuga competenza, passione, umanità e accoglienza. Il suo sorriso vi trascinerà nel mondo del tango autentico, attraverso un caloroso abbraccio.",
stelle: 5,
},
];
return (
<section className="py-24 relative overflow-hidden">
{/* BG decorativo */}
<div className="absolute inset-0 bg-gradient-to-br from-[hsl(45,100%,51%)]/5 via-transparent to-[hsl(350,72%,45%)]/5" />
<div className="relative max-w-6xl mx-auto px-6">
<Reveal className="text-center mb-16">
<div className="flex items-center justify-center gap-3 mb-4">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Cosa dicono gli allievi</span>
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
</div>
<h2 className="font-display text-5xl md:text-6xl text-white leading-none">
LE PERSONE DICONO
</h2>
</Reveal>
<div className="grid md:grid-cols-3 gap-6">
{reviews.map((r, i) => (
<Reveal key={r.nome} delay={0.1 * i}>
<div className="bg-white/5 border border-white/10 rounded-sm p-6 flex flex-col card-hover">
<div className="flex gap-1 mb-4">
{Array.from({ length: r.stelle }).map((_, j) => <IcoStar key={j} />)}
</div>
<p className="font-serif italic text-white/80 text-base leading-relaxed flex-1 mb-6">
"{r.testo}"
</p>
<div className="flex items-center gap-3 pt-4 border-t border-white/10">
<div className="w-8 h-8 rounded-full bg-[hsl(45,100%,51%)] flex items-center justify-center text-black font-bold text-sm">
{r.nome[0]}
</div>
<div className="font-semibold text-white text-sm">{r.nome}</div>
</div>
</div>
</Reveal>
))}
</div>
</div>
</section>
);
}
// ── Contatti ──────────────────────────────────────────────────
function Contatti() {
const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error" | "preview">("idle");
const [errMsg, setErrMsg] = useState("");
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setStatus("sending");
const fd = new FormData(e.currentTarget);
const data = Object.fromEntries(fd) as Record<string, string>;
const r = await submitContactForm(data);
if (r.ok) { setStatus("sent"); return; }
if (r.reason === "preview") { setStatus("preview"); return; }
setErrMsg(r.message || "Errore"); setStatus("error");
}
return (
<section id="contatti" className="py-24 md:py-32 bg-[hsl(0,0%,4%)]">
<div className="max-w-6xl mx-auto px-6">
<div className="grid md:grid-cols-2 gap-16">
{/* Info */}
<Reveal>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-[hsl(45,100%,51%)]" />
<span className="text-[hsl(45,100%,51%)] text-xs font-semibold uppercase tracking-[0.25em]">Contattaci</span>
</div>
<h2 className="font-display text-5xl md:text-6xl text-white leading-none mb-6">
VIENI A<br /><span className="text-[hsl(45,100%,51%)]">BALLARE</span>
</h2>
<p className="text-white/60 leading-relaxed mb-10">
La tua prima lezione è GRATUITA e senza impegno se vieni in coppia. Scrivici, chiamaci o mandaci un messaggio su WhatsApp: ti risponderemo subito.
</p>
<div className="space-y-5">
<a href="https://wa.me/393931078263?text=Ciao,%20vorrei%20informazioni%20sui%20corsi%20di%20Tango!" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 group">
<div className="w-12 h-12 rounded-sm bg-[#25D366]/10 flex items-center justify-center text-[#25D366] flex-shrink-0 group-hover:bg-[#25D366]/20 transition-colors">
<IcoWhatsapp />
</div>
<div>
<div className="text-xs text-white/40 uppercase tracking-widest mb-0.5">WhatsApp</div>
<div className="text-white font-semibold group-hover:text-[hsl(45,100%,51%)] transition-colors">+39 393 107 8263</div>
</div>
</a>
<a href="mailto:info@tangourbano.it" className="flex items-center gap-4 group">
<div className="w-12 h-12 rounded-sm bg-[hsl(45,100%,51%)]/10 flex items-center justify-center text-[hsl(45,100%,51%)] flex-shrink-0 group-hover:bg-[hsl(45,100%,51%)]/20 transition-colors">
<IcoMail />
</div>
<div>
<div className="text-xs text-white/40 uppercase tracking-widest mb-0.5">Email</div>
<div className="text-white font-semibold group-hover:text-[hsl(45,100%,51%)] transition-colors">infotangourbano@gmail.com</div>
</div>
</a>
<a href="https://www.instagram.com/tango.urbano/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 group">
<div className="w-12 h-12 rounded-sm bg-purple-500/10 flex items-center justify-center text-purple-400 flex-shrink-0 group-hover:bg-purple-500/20 transition-colors">
<IcoInstagram />
</div>
<div>
<div className="text-xs text-white/40 uppercase tracking-widest mb-0.5">Instagram</div>
<div className="text-white font-semibold group-hover:text-[hsl(45,100%,51%)] transition-colors">@tango.urbano</div>
</div>
</a>
</div>
{/* Mappa placeholder creativa */}
<div className="mt-10 p-4 bg-white/5 border border-white/10 rounded-sm">
<div className="flex items-start gap-3">
<IcoMapPin />
<div>
<div className="text-white font-semibold text-sm mb-1">Sede principale</div>
<div className="text-white/50 text-sm">Via La Spezia 63, San Giovanni — Roma</div>
<div className="text-white/30 text-xs mt-1">Metro Lodi · Mercoledì 20:30</div>
</div>
</div>
</div>
</Reveal>
{/* Form */}
<Reveal delay={0.2}>
<div className="bg-white/5 border border-white/10 rounded-sm p-8">
<h3 className="font-display text-3xl text-white mb-2">PRENOTA LA TUA</h3>
<p className="text-[hsl(45,100%,51%)] font-bold text-sm uppercase tracking-widest mb-8">Prima Lezione GRATUITA in coppia</p>
{status === "sent" ? (
<div className="text-center py-12">
<div className="text-4xl mb-4">💃</div>
<div className="font-display text-2xl text-[hsl(45,100%,51%)] mb-2">PERFETTO!</div>
<p className="text-white/60">Grazie per il tuo messaggio! Ti ricontattiamo presto per organizzare la tua prima lezione.</p>
</div>
) : (
<form onSubmit={onSubmit} className="space-y-5">
<input type="text" name="_hp" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden />
<div>
<label className="block text-white/50 text-xs uppercase tracking-widest mb-2">Nome e Cognome</label>
<input name="name" required className="w-full bg-white/10 border border-white/20 rounded-sm px-4 py-3 text-white placeholder-white/30 text-sm focus:outline-none focus:border-[hsl(45,100%,51%)] transition-colors" placeholder="Mario Rossi" />
</div>
<div>
<label className="block text-white/50 text-xs uppercase tracking-widest mb-2">Email</label>
<input name="email" type="email" required className="w-full bg-white/10 border border-white/20 rounded-sm px-4 py-3 text-white placeholder-white/30 text-sm focus:outline-none focus:border-[hsl(45,100%,51%)] transition-colors" placeholder="mario@email.it" />
</div>
<div>
<label className="block text-white/50 text-xs uppercase tracking-widest mb-2">Telefono (opzionale)</label>
<input name="phone" type="tel" className="w-full bg-white/10 border border-white/20 rounded-sm px-4 py-3 text-white placeholder-white/30 text-sm focus:outline-none focus:border-[hsl(45,100%,51%)] transition-colors" placeholder="+39 333 123 4567" />
</div>
<div>
<label className="block text-white/50 text-xs uppercase tracking-widest mb-2">Livello</label>
<select name="message" className="w-full bg-white/10 border border-white/20 rounded-sm px-4 py-3 text-white text-sm focus:outline-none focus:border-[hsl(45,100%,51%)] transition-colors appearance-none" style={{ background: "hsl(0,0%,15%)" }}>
<option value="Principiante assoluto">Principiante assoluto</option>
<option value="Ho qualche base">Ho qualche base</option>
<option value="Livello intermedio">Livello intermedio</option>
<option value="Avanzato">Avanzato</option>
</select>
</div>
<button type="submit" disabled={status === "sending"} className="w-full py-4 bg-[hsl(45,100%,51%)] text-black font-bold uppercase tracking-widest text-sm hover:bg-[hsl(45,100%,62%)] disabled:opacity-60 transition-all rounded-sm">
{status === "sending" ? "Invio in corso..." : "Prenota la lezione gratuita"}
</button>
<p className="text-center text-white/30 text-xs">
Inviando accetti di essere ricontattato dalla scuola.
</p>
{status === "preview" && <p className="text-sm text-white/50 text-center">Pubblica il sito per ricevere i messaggi davvero.</p>}
{status === "error" && <p className="text-sm text-red-400 text-center">{errMsg}</p>}
</form>
)}
</div>
</Reveal>
</div>
</div>
</section>
);
}
// ── Footer ────────────────────────────────────────────────────
function Footer() {
return (
<footer className="bg-black border-t border-white/10 py-10">
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex items-center gap-3">
<img src="https://www.tangourbano.it/wp-content/uploads/2026/05/logo.png" alt="Tango Urbano Roma" className="h-8 w-auto object-contain" />
<div className="text-white/30 text-xs uppercase tracking-widest">Scuola di Tango Argentino Roma</div>
</div>
<div className="flex items-center gap-6 text-white/40 text-xs uppercase tracking-widest">
<a href="https://www.instagram.com/tango.urbano/" target="_blank" rel="noopener noreferrer" className="hover:text-[hsl(45,100%,51%)] transition-colors flex items-center gap-2">
<IcoInstagram /> Instagram
</a>
<a href="mailto:info@tangourbano.it" className="hover:text-[hsl(45,100%,51%)] transition-colors">info@tangourbano.it</a>
<a href="https://wa.me/393931078263" target="_blank" rel="noopener noreferrer" className="hover:text-[hsl(45,100%,51%)] transition-colors">WhatsApp</a>
</div>
<div className="text-white/20 text-xs">
© {new Date().getFullYear()} Tango Urbano Roma
</div>
</div>
</footer>
);
}
// ── App ───────────────────────────────────────────────────────
export default function App() {
return (
<div className="min-h-screen bg-[hsl(0,0%,4%)]">
<Nav />
<Hero />
<ChiSiamo />
<Corsi />
<Sedi />
<Team />
<Galleria />
<Eventi />
<Recensioni />
<Contatti />
<Footer />
</div>
);
}
