Untitled

export default function LandingRouletteSniper() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-black via-zinc-900 to-black text-zinc-100">
      {/* NAVBAR */}
      <header className="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-black/50">
        <nav className="mx-auto max-w-7xl px-6 py-4 flex items-center justify-between">
          <a href="#home" className="flex items-center gap-3 group">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-lime-300 grid place-items-center shadow-lg shadow-emerald-500/20 ring-1 ring-white/10">
              <span className="text-black font-extrabold">RS</span>
            </div>
            <div>
              <p className="text-lg font-bold leading-none">Roulette Sniper</p>
              <p className="text-xs text-zinc-400 leading-none mt-1">Smart Signals Bot</p>
            </div>
          </a>
          <div className="hidden md:flex items-center gap-7 text-sm">
            <a href="#features" className="hover:text-white/90 text-zinc-300">Funzioni</a>
            <a href="#how" className="hover:text-white/90 text-zinc-300">Come funziona</a>
            <a href="#pricing" className="hover:text-white/90 text-zinc-300">Prezzi</a>
            <a href="#faq" className="hover:text-white/90 text-zinc-300">FAQ</a>
          </div>
          <div className="flex items-center gap-3">
            <a href="#pricing" className="hidden sm:inline-block rounded-xl px-4 py-2 bg-white text-black font-semibold hover:opacity-90">Acquista</a>
          </div>
        </nav>
      </header>

      {/* HERO */}
      <section id="home" className="relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute -top-36 -left-24 h-96 w-96 rounded-full bg-emerald-500/10 blur-3xl" />
          <div className="absolute -bottom-36 -right-24 h-96 w-96 rounded-full bg-lime-400/10 blur-3xl" />
        </div>
        <div className="mx-auto max-w-7xl px-6 pt-20 pb-14">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-zinc-300">
                <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"/> Live‑ready • Telegram Bot v4
              </div>
              <h1 className="mt-5 text-4xl sm:text-5xl font-black tracking-tight">
                Trasforma i <span className="text-emerald-400">dati</span> in decisioni: 
                <span className="block">il tuo assistente alla roulette live</span>
              </h1>
              <p className="mt-5 text-zinc-300 text-base sm:text-lg leading-relaxed">
                Roulette Sniper analizza sequenze, settori e progressioni e ti dice <strong className="text-white">quando giocare</strong> e <strong className="text-white">quando fermarti</strong>. 
                Pensato per tavoli live europei, con interfaccia ultra‑semplice e logiche configurabili.
              </p>
              <div className="mt-7 flex flex-wrap gap-3">
                <a href="#pricing" className="rounded-2xl px-5 py-3 bg-emerald-400 text-black font-bold shadow-lg shadow-emerald-500/20 hover:opacity-90">Compra ora</a>
                <a href="#demo" className="rounded-2xl px-5 py-3 border border-white/15 bg-white/5 hover:bg-white/10">Guarda la demo</a>
              </div>
              <p className="mt-3 text-xs text-zinc-400">Educational purpose. Nessuna garanzia di vincita. Gioca responsabilmente 18+.</p>
            </div>
            <div className="relative">
              <div className="rounded-3xl border border-white/10 bg-gradient-to-br from-zinc-900 to-zinc-950 p-4 shadow-2xl">
                <div className="rounded-2xl border border-white/10 bg-black p-4">
                  <div className="text-xs text-zinc-400">Telegram • Roulette Sniper</div>
                  <div className="mt-3 space-y-2 text-sm">
                    <div className="rounded-xl bg-white/5 border border-white/10 p-3">
                      <p className="text-emerald-300 font-semibold">Roulette Sniper v4.3 pronto.</p>
                      <p>Inviami 6 numeri (es: 23, 8, 9, 12, 7, 21)</p>
                      <p className="text-zinc-400">🟢 ti dirò io quando giocare</p>
                      <p className="text-zinc-400">🔴 oppure quando fermarti</p>
                      <p className="text-zinc-300">Si gioca: centro + 5 vicini (11 numeri)</p>
                    </div>
                    <div className="rounded-xl bg-white/5 border border-white/10 p-3">
                      <p className="text-zinc-300">Esito ultimo giro: <span className="text-white font-semibold">17</span></p>
                      <p className="text-emerald-400 font-semibold">Prossima azione: GIOCA ora • Progressione ULTRALIGHT</p>
                      <p className="text-zinc-400">Stake: 0,10 → 0,20 → 0,50 → 1 → 2 → 4</p>
                    </div>
                    <div className="rounded-xl bg-white/5 border border-white/10 p-3">
                      <p className="text-zinc-300">Stop‑loss dinamico: <span className="text-white font-semibold">attivo</span> • Target profit: <span className="text-white font-semibold">+0,30€</span></p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-6 -right-6 rotate-2 rounded-xl bg-emerald-400/10 px-3 py-1 text-xs border border-emerald-400/20">Schermate simulate a scopo illustrativo</div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section className="border-y border-white/10 bg-white/5">
        <div className="mx-auto max-w-7xl px-6 py-10 grid md:grid-cols-3 gap-6 text-sm">
          <div className="rounded-2xl border border-white/10 p-5 bg-black/40">
            <p className="text-zinc-400">Setup in 10 minuti</p>
            <p className="mt-1 text-white font-semibold">Guida passo‑passo + file pronti</p>
          </div>
          <div className="rounded-2xl border border-white/10 p-5 bg-black/40">
            <p className="text-zinc-400">Algoritmi configurabili</p>
            <p className="mt-1 text-white font-semibold">Versione Full & Ultralight</p>
          </div>
          <div className="rounded-2xl border border-white/10 p-5 bg-black/40">
            <p className="text-zinc-400">Supporto</p>
            <p className="mt-1 text-white font-semibold">Onboarding via Telegram</p>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="mx-auto max-w-7xl px-6 py-20">
        <div className="max-w-2xl">
          <h2 className="text-3xl sm:text-4xl font-extrabold">Funzioni chiave</h2>
          <p className="mt-3 text-zinc-300">Tutto quello che serve per usare segnali chiari sui tavoli <span className="text-white">live europei</span>.</p>
        </div>
        <div className="mt-10 grid md:grid-cols-3 gap-6">
          {[
            {
              title: 'Segnali chiari',
              desc: 'Istruzioni “Gioca/Ferma” con progressioni pronte (Base, Ultralight).'
            },
            {
              title: 'Logiche su settori',
              desc: 'Centro + vicini, tracking ultimi numeri, pattern e reset vittoria.'
            },
            {
              title: 'Gestione rischio',
              desc: 'Target profit, stop‑loss dinamico, limiti di puntata personalizzabili.'
            },
            {
              title: 'UX ultra‑semplice',
              desc: 'Invia i numeri estratti e ricevi subito l’azione successiva.'
            },
            {
              title: 'Installazione rapida',
              desc: 'Guida PDF + video demo. Funziona su desktop (Windows/macOS).'
            },
            {
              title: 'Assistenza',
              desc: 'Supporto iniziale 1:1 per l’avvio e verifica del bot.'
            }
          ].map((f, i) => (
            <div key={i} className="rounded-2xl border border-white/10 bg-white/5 p-6">
              <h3 className="font-bold text-lg">{f.title}</h3>
              <p className="mt-2 text-zinc-300 text-sm leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how" className="mx-auto max-w-7xl px-6 pb-16">
        <div className="rounded-3xl border border-white/10 bg-gradient-to-br from-zinc-900 to-zinc-950 p-8">
          <h2 className="text-3xl font-extrabold">Come funziona</h2>
          <ol className="mt-6 grid md:grid-cols-4 gap-6 text-sm">
            <li className="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p className="text-zinc-400">01</p>
              <p className="mt-1 font-semibold">Compra e scarica</p>
              <p className="mt-1 text-zinc-300">Ricevi il pacchetto: bot, guida PDF e tabelle.</p>
            </li>
            <li className="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p className="text-zinc-400">02</p>
              <p className="mt-1 font-semibold">Setup in 10′</p>
              <p className="mt-1 text-zinc-300">Inserisci TOKEN, avvia e collega il tuo Telegram.</p>
            </li>
            <li className="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p className="text-zinc-400">03</p>
              <p className="mt-1 font-semibold">Usa i segnali</p>
              <p className="mt-1 text-zinc-300">Invia gli ultimi numeri → ricevi l’azione e la progressione.</p>
            </li>
            <li className="rounded-2xl border border-white/10 bg-white/5 p-5">
              <p className="text-zinc-400">04</p>
              <p className="mt-1 font-semibold">Controllo del rischio</p>
              <p className="mt-1 text-zinc-300">Applica target/stop e rispetta i limiti del tavolo.</p>
            </li>
          </ol>
        </div>
      </section>

      {/* DEMO */}
      <section id="demo" className="mx-auto max-w-7xl px-6 pb-6">
        <div className="grid lg:grid-cols-2 gap-8 items-start">
          <div className="rounded-3xl border border-white/10 overflow-hidden bg-black/50">
            <div className="aspect-video w-full bg-zinc-900 grid place-items-center">
              <span className="text-zinc-400 text-sm">[Embed video demo qui]</span>
            </div>
          </div>
          <div className="rounded-3xl border border-white/10 p-6 bg-white/5">
            <h3 className="text-2xl font-bold">Cosa vedrai nella demo</h3>
            <ul className="mt-4 space-y-2 text-zinc-300 text-sm list-disc pl-6">
              <li>Installazione completa in pochi minuti</li>
              <li>Uso pratico al tavolo live europeo</li>
              <li>Selezione progressione: Base o Ultralight</li>
              <li>Settaggio target profit e stop‑loss</li>
            </ul>
            <a href="#pricing" className="mt-6 inline-block rounded-2xl px-5 py-3 bg-emerald-400 text-black font-bold hover:opacity-90">Pronto ad iniziare</a>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="mx-auto max-w-7xl px-6 py-20">
        <div className="text-center max-w-2xl mx-auto">
          <h2 className="text-3xl sm:text-4xl font-extrabold">Scegli il tuo piano</h2>
          <p className="mt-3 text-zinc-300">Licenza personale. Aggiornamenti minori inclusi. Supporto onboarding.</p>
        </div>
        <div className="mt-10 grid md:grid-cols-3 gap-6">
          {/* STARTER */}
          <div className="rounded-3xl border border-white/10 bg-white/5 p-6 flex flex-col">
            <p className="text-sm text-zinc-400">Starter</p>
            <p className="mt-2 text-4xl font-black">€49</p>
            <p className="text-xs text-zinc-400">una tantum</p>
            <ul className="mt-4 space-y-2 text-sm text-zinc-300">
              <li>Versione Ultralight</li>
              <li>Guida PDF + tabelle base</li>
              <li>Video demo</li>
            </ul>
            <a href="#checkout-starter" className="mt-6 rounded-2xl px-5 py-3 bg-white text-black font-bold text-center hover:opacity-90">Acquista Starter</a>
          </div>
          {/* PRO */}
          <div className="relative rounded-3xl border border-emerald-400/30 bg-emerald-400/10 p-6 flex flex-col ring-1 ring-emerald-400/30">
            <div className="absolute -top-3 right-4 rounded-full bg-emerald-400 text-black text-xs font-extrabold px-2 py-1">Consigliato</div>
            <p className="text-sm text-emerald-300">Pro</p>
            <p className="mt-2 text-4xl font-black">€99</p>
            <p className="text-xs text-zinc-400">una tantum</p>
            <ul className="mt-4 space-y-2 text-sm text-emerald-200">
              <li>Tutte le versioni (Full + Ultralight)</li>
              <li>Guida PDF + tabelle complete</li>
              <li>Onboarding 1:1 su Telegram (30′)</li>
              <li>Aggiornamenti minori inclusi</li>
            </ul>
            <a href="#checkout-pro" className="mt-6 rounded-2xl px-5 py-3 bg-emerald-400 text-black font-bold text-center hover:opacity-90">Acquista Pro</a>
          </div>
          {/* AGENCY */}
          <div className="rounded-3xl border border-white/10 bg-white/5 p-6 flex flex-col">
            <p className="text-sm text-zinc-400">Agency</p>
            <p className="mt-2 text-4xl font-black">€249</p>
            <p className="text-xs text-zinc-400">una tantum</p>
            <ul className="mt-4 space-y-2 text-sm text-zinc-300">
              <li>Pro + licenza 3 dispositivi</li>
              <li>Call tecnica 60′</li>
              <li>Priorità supporto</li>
            </ul>
            <a href="#checkout-agency" className="mt-6 rounded-2xl px-5 py-3 bg-white text-black font-bold text-center hover:opacity-90">Acquista Agency</a>
          </div>
        </div>
        <p className="mt-6 text-xs text-center text-zinc-500">I prezzi sono di esempio: personalizzali prima della pubblicazione.</p>
      </section>

      {/* FAQ */}
      <section id="faq" className="mx-auto max-w-7xl px-6 pb-24">
        <div className="grid lg:grid-cols-2 gap-8">
          <div>
            <h2 className="text-3xl font-extrabold">FAQ</h2>
            <p className="mt-3 text-zinc-300">Le risposte alle domande più comuni.</p>
          </div>
          <div className="space-y-4">
            {[
              {
                q: 'Il bot garantisce vincite?',
                a: 'No. È uno strumento educativo/di supporto decisionale. Non garantisce alcun risultato. Usa sempre bankroll management e gioca responsabilmente (18+).'
              },
              {
                q: 'Serve esperienza?',
                a: 'No, la guida e la demo ti accompagnano passo‑passo. Serve un account Telegram e un PC (Windows o macOS).'
              },
              {
                q: 'Funziona su qualsiasi tavolo?',
                a: 'È pensato per roulette europea live. Rispetta limiti del tavolo e condizioni della piattaforma su cui giochi.'
              },
              {
                q: 'Cosa include l’acquisto?',
                a: 'File del bot, guida PDF, tabelle, video demo e supporto onboarding secondo il piano scelto.'
              },
              {
                q: 'Posso rivendere il bot?',
                a: 'No, la licenza è personale (no resale). Per partnership contattaci.'
              },
            ].map((item, i) => (
              <details key={i} className="group rounded-2xl border border-white/10 bg-white/5 p-5 open:bg-white/10">
                <summary className="cursor-pointer list-none font-semibold">{item.q}</summary>
                <p className="mt-2 text-sm text-zinc-300 leading-relaxed">{item.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-6 py-10 grid md:grid-cols-3 gap-8 text-sm">
          <div>
            <p className="font-bold">Roulette Sniper</p>
            <p className="mt-2 text-zinc-400">Bot educativo per tavoli live europei. Segnali semplici, setup rapido.</p>
          </div>
          <div className="space-y-2">
            <a href="#pricing" className="block hover:text-white/90 text-zinc-300">Prezzi</a>
            <a href="#demo" className="block hover:text-white/90 text-zinc-300">Demo</a>
            <a href="#faq" className="block hover:text-white/90 text-zinc-300">FAQ</a>
          </div>
          <div className="space-y-2 text-zinc-400">
            <p className="text-xs">© {new Date().getFullYear()} Roulette Sniper. Tutti i diritti riservati.</p>
            <p className="text-xs">Questo prodotto non è affiliato con alcun casinò o piattaforma terza.</p>
            <p className="text-xs">18+ • Gioca responsabilmente • Educational only</p>
          </div>
        </div>
      </footer>
    </div>
  );
}