const { useState, useEffect, useMemo, useRef } = React; // Utility: format euro const eur = (n) => `€${n.toLocaleString('it-IT', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`; const priceRange = (p) => `${eur(p.priceMin)}–${eur(p.priceMax)}`; const TIERS = { base: { label: 'Base', cls: '' }, mid: { label: 'Mid', cls: 'mid' }, premium: { label: 'Rara', cls: 'premium' }, }; // ============ Top Bar ============ const NAV_ITEMS = ['Catalogo', 'Aste', 'Bundle', 'Ambiente', 'Propagazione', 'Diario', 'Chi siamo']; const MOBILE_EXTRA = ['Prenotazioni', 'Wishlist', 'Ordini', 'FAQ', 'Contatti']; const TopBar = ({ cartCount, onCartClick, onLogoClick, activeSection, onNav, onSearch, onAccount }) => { const [menuOpen, setMenuOpen] = useState(false); // Blocca lo scroll del sito quando il menu mobile è aperto useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const go = (n) => { onNav(n); setMenuOpen(false); }; return (
Florilegio
{/* Menu mobile a tutta pagina */}
setMenuOpen(false)} />
); }; // ============ Search Overlay ============ const SearchOverlay = ({ open, onClose, onOpenPlant, onNav }) => { const [q, setQ] = useState(''); const inputRef = useRef(null); useEffect(() => { if (open) { setQ(''); setTimeout(() => inputRef.current?.focus(), 80); } }, [open]); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (open) window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; const ql = q.trim().toLowerCase(); // Cerca anche fra le condizioni di coltivazione: "poca luce", "senza teca" // e "principiante" prima non restituivano nulla, pur essendo informazioni // presenti su ogni scheda. const results = ql.length >= 1 ? cercaPiante(CATALOG.plants, ql, CATALOG.categories).slice(0, 12) : []; // Ogni suggerimento è verificato: prima "In casa" e "In arrivo" portavano a // zero risultati, perché la ricerca non guardava nella categoria. const suggestions = ['Begonia', 'Alocasia', 'Poca luce', 'Casa normale', 'Variegata', 'Sole diretto']; return (
e.stopPropagation()}>
setQ(e.target.value)} />
{!ql && (
Suggerimenti
{suggestions.map(s => ( ))}
)} {ql && (
{results.length} risultat{results.length === 1 ? 'o' : 'i'}
{results.length === 0 && (
Nessun risultato per "{q}"
)} {results.map(p => { const cat = CATALOG.categories.find(c => c.id === p.cat); return ( ); })}
)}
); }; const ORDER_STATUS_LABEL = { nuovo: 'In lavorazione', preparazione: 'In preparazione', spedito: 'Spedito', consegnato: 'Consegnato', annullato: 'Annullato', }; // ============ Account Drawer ============ const AccountDrawer = ({ open, onClose, saved, cart, onOpenPlant, onNav, auth }) => { const { user, token, login, logout, googleClientId } = auth; const [view, setView] = useState('signin'); // signin | signup const [form, setForm] = useState({ name: '', email: '', password: '' }); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); const [orders, setOrders] = useState([]); const googleBtnRef = useRef(null); useEffect(() => { if (open && !user) { setView('signin'); setErr(''); } }, [open, user]); // Storico ordini reale del cliente, dal server useEffect(() => { if (!open || !token) { setOrders([]); return; } fetch('/api/auth/orders', { headers: { Authorization: `Bearer ${token}` } }) .then(r => r.ok ? r.json() : []) .then(setOrders) .catch(() => setOrders([])); }, [open, token]); // Pulsante Google ufficiale, disegnato da Google stesso useEffect(() => { if (!open || user || !googleClientId || !googleBtnRef.current) return; let cancelled = false; const render = () => { if (cancelled || !window.google?.accounts?.id || !googleBtnRef.current) return; window.google.accounts.id.initialize({ client_id: googleClientId, callback: async (resp) => { setBusy(true); setErr(''); try { const r = await fetch('/api/auth/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ credential: resp.credential }), }); const data = await r.json(); if (!r.ok) throw new Error(data.error || 'Accesso con Google non riuscito'); login(data.token, data.user); } catch (e) { setErr(e.message); } finally { setBusy(false); } }, }); googleBtnRef.current.innerHTML = ''; window.google.accounts.id.renderButton(googleBtnRef.current, { theme: 'outline', size: 'large', width: 320, text: 'continue_with', locale: 'it', }); }; if (window.google?.accounts?.id) render(); else { const s = document.createElement('script'); s.src = 'https://accounts.google.com/gsi/client'; s.async = true; s.defer = true; s.onload = render; document.head.appendChild(s); } return () => { cancelled = true; }; }, [open, user, googleClientId, login]); const submit = async (e) => { e.preventDefault(); setErr(''); setBusy(true); try { const path = view === 'signup' ? '/api/auth/register' : '/api/auth/login'; const body = view === 'signup' ? { name: form.name, email: form.email, password: form.password } : { email: form.email, password: form.password }; const r = await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const data = await r.json(); if (!r.ok) throw new Error(data.error || 'Operazione non riuscita'); login(data.token, data.user); setForm({ name: '', email: '', password: '' }); } catch (e) { setErr(e.message); } finally { setBusy(false); } }; const savedPlants = saved.map(id => CATALOG.plants.find(p => p.id === id)).filter(Boolean); return ( <>
); }; // ============ Hero ============ const Hero = () => { const sellable = CATALOG.plants.filter(p => p.status !== 'material'); const total = sellable.length; const cats = CATALOG.categories.filter(c => c.id !== 'materiali').length; const prices = sellable.map(p => p.priceMin).filter(Boolean); const pricesMax = sellable.map(p => p.priceMax).filter(Boolean); const minP = Math.min(...prices); const maxP = Math.max(...pricesMax); return (
Edizione N.01 — Primavera 2026 Milano · IT

Un florilegio di
piante esotiche,
coltivate con metodo.

Piccolo vivaio domestico dedicato a begonie rare, aracee da sottobosco e melastomatacee tropicali. Ogni pianta è propagata in casa con substrati su misura, schede tecniche complete e tempi di radicazione verificati. Spedizione in tutta Italia.

{total}
Varietà
{cats}
Categorie
€{minP}–{maxP}
Range
); }; // ============ Toolbar ============ const Toolbar = ({ activeCat, setActiveCat, query, setQuery, view, setView, tierFilter, setTierFilter, luceFilter, setLuceFilter, umiditaFilter, setUmiditaFilter, soloDisponibili, setSoloDisponibili, onGuida, risultati, onAzzera }) => { const counts = useMemo(() => { const m = {}; CATALOG.plants.forEach((p) => { m[p.cat] = (m[p.cat] || 0) + 1; }); m.all = CATALOG.plants.length; return m; }, []); // Le categorie senza piante non vengono mostrate: annunciarle con titolo e // descrizione per poi non offrire nulla è peggio che ometterle. const all = [{ id: 'all', num: '*', title: 'Tutte' }, ...CATALOG.categories.filter(c => counts[c.id] > 0)]; const filtriAttivi = activeCat !== 'all' || tierFilter !== 'all' || luceFilter !== 'all' || umiditaFilter !== 'all' || soloDisponibili || !!query; return (
{all.map((c) => ( ))}
Luce {[['all', 'Qualsiasi'], ['bassa', 'Poca'], ['media', 'Media'], ['brillante', 'Molta'], ['sole', 'Sole diretto']].map(([k, l]) => ( ))}
Umidità {[['all', 'Qualsiasi'], ['normale', 'Casa normale'], ['alta', 'Alta'], ['teca', 'Teca o serra']].map(([k, l]) => ( ))}
{filtriAttivi && ( )} {risultati} {risultati === 1 ? 'pianta' : 'piante'}
{[['all', 'Tutte'], ['base', 'Base'], ['mid', 'Mid'], ['premium', 'Rare']].map(([k, l]) => ( ))}
setQuery(e.target.value)} />
); }; // ============ Avvisami quando torna disponibile ============ // Sostituisce il pulsante "Esaurito", che era un vicolo cieco: il visitatore // interessato se ne andava senza lasciare traccia. Qui la domanda viene // raccolta, e l'avviso parte da solo quando la giacenza torna sopra zero. const AvvisamiQuandoTorna = ({ plant }) => { const [aperto, setAperto] = useState(false); const [email, setEmail] = useState(''); const [stato, setStato] = useState(null); // null | 'invio' | 'fatto' | messaggio d'errore // Cambiando pianta il modulo riparte pulito, altrimenti resterebbe // la conferma della richiesta precedente. useEffect(() => { setAperto(false); setEmail(''); setStato(null); }, [plant.id]); const invia = async (e) => { e.preventDefault(); setStato('invio'); try { const r = await fetch('/api/attese', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, plantId: plant.id }), }); const j = await r.json().catch(() => ({})); setStato(r.ok ? 'fatto' : (j.error || 'Non è stato possibile registrare la richiesta')); } catch { setStato('Connessione non riuscita. Riprova fra poco.'); } }; if (stato === 'fatto') { return (
Ti scriverò appena torna disponibile.
); } if (!aperto) { return ( ); } return (
{ setEmail(e.target.value); if (stato && stato !== 'invio') setStato(null); }} /> {stato && stato !== 'invio' &&
{stato}
}
); }; // ============ Guida "adatta a te" ============ // Due domande, non un questionario: sono le uniche due variabili che // determinano davvero se una di queste piante sopravvive in casa di qualcuno. // Le risposte impostano i filtri del catalogo, così restano modificabili dopo. const GuidaAdatta = ({ open, onClose, onApplica }) => { const [luce, setLuce] = useState(null); const [umidita, setUmidita] = useState(null); useEffect(() => { if (open) { setLuce(null); setUmidita(null); } }, [open]); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (open) window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; const risultati = CATALOG.plants.filter(p => (!luce || luciDi(p).includes(luce)) && (!umidita || umiditaDi(p) === umidita) ).length; const DOM_LUCE = [ ['bassa', 'Finestra a nord, o stanza poco luminosa'], ['media', 'Luce buona, ma senza sole diretto'], ['brillante', 'Molto luminosa per gran parte del giorno'], ['sole', 'Il sole batte direttamente sulle piante'], ]; const DOM_UMIDITA = [ ['normale', 'Casa normale, senza nulla di particolare'], ['alta', 'Posso usare un umidificatore o un bagno luminoso'], ['teca', 'Ho una teca o una piccola serra'], ]; return (
e.stopPropagation()}>
Due domande

Dove vivranno le piante?

1 · Quanta luce c’è nel punto in cui le terrai?
{DOM_LUCE.map(([k, testo]) => ( ))}
2 · Quanta umidità puoi garantire?
{DOM_UMIDITA.map(([k, testo]) => ( ))}

È la variabile che fa fallire più acquisti. Molte di queste specie vengono dal sottobosco tropicale e in un appartamento asciutto soffrono, per quanta cura ci si metta.

{(luce || umidita) ? <>{risultati} {risultati === 1 ? 'pianta adatta' : 'piante adatte'} : 'Scegli almeno una risposta'}
); }; // ============ Product Card ============ // Acquistabile solo se in vendita E con giacenza reale. // I preordini sono disattivati: non si prenota nulla, si vende solo il disponibile. const isBuyable = (p) => p.status === 'available' && p.stock > 0; const stockLabel = (p) => { if (p.status === 'coming_soon') return { text: 'In arrivo', cls: 'soon' }; if (!isBuyable(p)) return { text: 'Esaurito', cls: 'out' }; return p.stock <= 5 ? { text: `Solo ${p.stock}`, cls: 'low' } : { text: `${p.stock} disp.`, cls: '' }; }; // Riga compatta con le due condizioni che determinano se una pianta // sopravvive a casa di chi la compra. La temperatura è quasi sempre quella // domestica, quindi non entra: occuperebbe spazio senza aiutare a scegliere. const CuraSintesi = ({ plant }) => { const luci = luciDi(plant); const um = umiditaDi(plant); return (
{ETICHETTE_LUCE[luci[0]]} {ETICHETTE_UMIDITA[um]}
); }; const ProductCard = ({ plant, index, onOpen, onQuickAdd, saved, onSave }) => { const tier = TIERS[plant.tier]; const st = stockLabel(plant); const buyable = isBuyable(plant); const no = String(index + 1).padStart(3, '0'); return (
onOpen(plant)}>
N.{no}
{tier.label}
{st.text}
{plant.family}

{plant.name}

{plant.origin}
{/* Cura a colpo d'occhio: su piante esotiche è l'informazione che decide l'acquisto, e finora era sepolta nella scheda di dettaglio. */}
Da {eur(plant.priceMin)}
{buyable ? ( ) : ( )}
); }; // ============ List Row ============ const ListRow = ({ plant, index, onOpen, onQuickAdd }) => { const tier = TIERS[plant.tier]; const no = String(index + 1).padStart(3, '0'); return (
onOpen(plant)}>
N.{no}
{plant.name}
{plant.family} · {plant.origin}
{plant.prop}
{tier.label}
{priceRange(plant)}
{isBuyable(plant) ? ( ) : ( )}
); }; // ============ Category Section ============ const CategorySection = ({ cat, plants, view, onOpen, onQuickAdd }) => { if (plants.length === 0) return null; return (
{cat.num.split('').map((c, i) => {c})}
Categoria {cat.num} · {plants.length} varietà

{cat.title}

{cat.subtitle}

{cat.blurb}

Difficoltà propagazione
{[1,2,3].map((i) => )}
{view === 'grid' ? (
{plants.map((p, i) => ( ))}
) : (
N.
Specie
Propagazione
Tier
Prezzo
{plants.map((p, i) => ( ))}
)}
); }; // ============ Detail Drawer ============ const Detail = ({ plant, open, onClose, onAdd, saved, onSave }) => { const [qty, setQty] = useState(1); const [tab, setTab] = useState('cura'); const [added, setAdded] = useState(false); const [shared, setShared] = useState(false); useEffect(() => { if (open) { setQty(1); setTab('cura'); setAdded(false); } }, [open, plant?.id]); if (!plant) return null; const tier = TIERS[plant.tier]; const midPrice = Math.round((plant.priceMin + plant.priceMax) / 2); const handleAdd = () => { onAdd(plant, qty); setAdded(true); setTimeout(() => setAdded(false), 1600); }; const buyable = isBuyable(plant); // Condivisione: usa il pannello nativo del telefono se disponibile, // altrimenti copia il link negli appunti. const sharePlant = async () => { const url = `${location.origin}${location.pathname}#pianta-${plant.id}`; const data = { title: `${plant.name} — Florilegio`, text: `${plant.name} (${plant.family}) su Florilegio`, url }; try { if (navigator.share) { await navigator.share(data); return; } await navigator.clipboard.writeText(url); setShared(true); setTimeout(() => setShared(false), 1800); } catch { /* l'utente ha annullato la condivisione */ } }; return ( <>
); }; // ============ Cart Drawer ============ const CartDrawer = ({ open, onClose, cart, onRemove, onQty, onCheckout }) => { const items = cart.map(ci => ({ ...ci, plant: CATALOG.plants.find(p => p.id === ci.id) })).filter(i => i.plant); const total = items.reduce((s, i) => s + Math.round((i.plant.priceMin + i.plant.priceMax) / 2) * i.qty, 0); return ( <>
); }; // ============ Checkout ============ // I dati della carta non passano più da qui: si inseriscono sulla pagina di // Stripe. Per questo sono state rimosse le funzioni che formattavano e // validavano numero, scadenza e CVC — tenerle sarebbe stato solo un invito a // rimettere un form carta sul nostro dominio. const Checkout = ({ open, onClose, cart, onComplete, auth }) => { const [step, setStep] = useState(1); // 1 contact, 2 shipping, 3 payment, 4 success const [contact, setContact] = useState({ email: '', firstName: '', lastName: '', phone: '' }); const [shipping, setShipping] = useState({ address: '', city: '', zip: '', province: '', country: 'Italia' }); const [payMethod, setPayMethod] = useState('card'); const [errors, setErrors] = useState({}); const [processing, setProcessing] = useState(false); const [orderError, setOrderError] = useState(null); const [orderId, setOrderId] = useState(''); const [promo, setPromo] = useState(''); const [promoApplied, setPromoApplied] = useState(null); useEffect(() => { if (open) { setStep(1); setErrors({}); setProcessing(false); setOrderError(null); } }, [open]); // Se il cliente è loggato, precompila i suoi dati invece di farglieli riscrivere useEffect(() => { if (!open || !auth?.user) return; const [first = '', ...rest] = (auth.user.name || '').split(' '); setContact(c => ({ ...c, email: c.email || auth.user.email, firstName: c.firstName || first, lastName: c.lastName || rest.join(' '), })); }, [open, auth?.user]); const items = cart.map(ci => ({ ...ci, plant: CATALOG.plants.find(p => p.id === ci.id) })).filter(i => i.plant); const subtotal = items.reduce((s, i) => s + Math.round((i.plant.priceMin + i.plant.priceMax) / 2) * i.qty, 0); const shippingCost = subtotal >= 150 ? 0 : 12; const discount = promoApplied ? Math.round(subtotal * promoApplied.pct) : 0; const taxBase = subtotal - discount + shippingCost; const tax = Math.round(taxBase * 0.22 / 1.22); // IVA inclusa const total = taxBase; const validateStep = () => { const e = {}; if (step === 1) { if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contact.email)) e.email = 'Email non valida'; if (!contact.firstName.trim()) e.firstName = 'Richiesto'; if (!contact.lastName.trim()) e.lastName = 'Richiesto'; if (!/^[\d\s+()-]{6,}$/.test(contact.phone)) e.phone = 'Telefono non valido'; } else if (step === 2) { if (!shipping.address.trim()) e.address = 'Richiesto'; if (!shipping.city.trim()) e.city = 'Richiesto'; if (!/^\d{5}$/.test(shipping.zip)) e.zip = 'CAP a 5 cifre'; if (!shipping.province.trim()) e.province = 'Richiesto'; } // Lo step 3 non ha più campi da validare: la carta si inserisce su Stripe. setErrors(e); return Object.keys(e).length === 0; }; const next = () => { if (validateStep()) setStep(s => s + 1); }; const back = () => setStep(s => Math.max(1, s - 1)); const applyPromo = () => { const codes = { 'PRIMAVERA10': { pct: 0.1, label: '−10% Primavera' }, 'BENVENUTO': { pct: 0.15, label: '−15% Benvenuto' } }; const code = promo.trim().toUpperCase(); if (codes[code]) setPromoApplied({ ...codes[code], code }); else setPromoApplied({ pct: 0, label: 'Codice non valido', invalid: true }); }; const submitPayment = async () => { if (!validateStep()) return; setProcessing(true); setOrderError(null); try { const res = await fetch('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: items.map(i => ({ id: i.id, qty: i.qty })), contact, shipping, payMethod }) }); const data = await res.json(); if (!res.ok) { // 409 = la disponibilità è cambiata mentre il cliente compilava setOrderError({ msg: data.error || 'Errore durante l\'elaborazione dell\'ordine', stock: res.status === 409 }); return; } // Il carrello resta finché il pagamento non è confermato: se il cliente // annulla su Stripe deve ritrovare le sue piante, non un carrello vuoto. if (data.checkoutUrl) { sessionStorage.setItem('florilegio-ordine-in-corso', data.id); window.location.href = data.checkoutUrl; return; } setOrderId(data.id); setStep(4); } catch(err) { setOrderError({ msg: 'Errore di connessione. Controlla la rete e riprova.' }); } finally { setProcessing(false); } }; const handleClose = () => { if (step === 4) onComplete(); onClose(); }; if (items.length === 0 && step !== 4) return null; return (
Florilegio
{step < 4 && (
{[[1,'Contatti'],[2,'Spedizione'],[3,'Pagamento']].map(([n,l]) => (
n ? 'done' : ''}`}>
{step > n ? : n}
{l}
))}
)}
{step === 4 ? (

Ordine confermato

Grazie {contact.firstName}. Riceverai un'email di conferma a {contact.email} con i dettagli e il tracciamento. Le piante saranno preparate dal vivaio nelle prossime 48 ore.

Numero ordine
{orderId}
Importo addebitato
{eur(total)}
Metodo
Pagamento sicuro Stripe
Spedizione
{shipping.address}, {shipping.zip} {shipping.city} ({shipping.province})
Consegna stimata
{new Date(Date.now() + 4*86400000).toLocaleDateString('it-IT', { day: 'numeric', month: 'long' })}
) : (
Step {step} di 3

{step === 1 && 'I tuoi contatti'} {step === 2 && 'Indirizzo di spedizione'} {step === 3 && 'Pagamento sicuro'}

{step === 1 && 'Per inviarti la conferma e gli aggiornamenti di spedizione.'} {step === 2 && 'Spedizione assicurata in tutta Italia, confezione termica.'} {step === 3 && 'Tutte le transazioni sono crittografate. Nessun dato di pagamento è memorizzato sui nostri server.'}

{step === 1 && (
setContact({ ...contact, email: e.target.value })} /> {errors.email && {errors.email}}
setContact({ ...contact, firstName: e.target.value })} /> {errors.firstName && {errors.firstName}}
setContact({ ...contact, lastName: e.target.value })} /> {errors.lastName && {errors.lastName}}
setContact({ ...contact, phone: e.target.value })} /> {errors.phone && {errors.phone}}
)} {step === 2 && (
setShipping({ ...shipping, address: e.target.value })} /> {errors.address && {errors.address}}
setShipping({ ...shipping, city: e.target.value })} /> {errors.city && {errors.city}}
setShipping({ ...shipping, zip: e.target.value.replace(/\D/g, '') })} /> {errors.zip && {errors.zip}}
setShipping({ ...shipping, province: e.target.value.toUpperCase() })} /> {errors.province && {errors.province}}
)} {step === 3 && (
{/* Nessun campo carta qui: i dati di pagamento si inseriscono sulla pagina di Stripe, non sul nostro sito. */}

Pagamento sicuro con Stripe

Cliccando qui sotto vieni portato sulla pagina protetta di Stripe per inserire i dati di pagamento. I dati della carta non passano mai dal sito di Florilegio.

  • Carte di credito e debito
  • Apple Pay e Google Pay
  • Autenticazione 3D Secure inclusa

Al termine torni automaticamente qui con la conferma dell'ordine.

)} {orderError && (
{orderError.stock ? 'Disponibilità cambiata' : 'Ordine non completato'}

{orderError.msg}

{orderError.stock &&

Aggiorna il carrello per continuare: nel frattempo qualcun altro potrebbe aver acquistato l'ultimo esemplare.

}
)}
{step > 1 ? ( ) :
} {step < 3 ? ( ) : ( )}
{/* Order summary */}
)}
); }; // ============ Footer ============ const Footer = ({ onNav }) => ( ); // ============ Tweaks Panel ============ const TweaksPanel = ({ settings, onChange }) => (

Tweaks

{[ { k: 'warm', bg: '#f4f0e8', ink: '#1a2018', acc: '#b8502e' }, { k: 'cool', bg: '#edefe8', ink: '#10201a', acc: '#3a7a5a' }, { k: 'mono', bg: '#f0efec', ink: '#111', acc: '#c79a3a' }, { k: 'dusk', bg: '#1a2018', ink: '#f4f0e8', acc: '#d97a56' }, ].map(p => (
onChange({ palette: p.k })} /> ))}
{['Instrument Serif','EB Garamond','DM Serif Display'].map(f => (
onChange({ font: f })}>{f.split(' ')[0]}
))}
{['grid','list'].map(v => (
onChange({ view: v })}>{v === 'grid' ? 'Griglia' : 'Lista'}
))}
{['comoda','compatta'].map(d => (
onChange({ density: d })}>{d}
))}
); // ============ Aste ============ // Conto alla rovescia leggibile, aggiornato ogni secondo const useCountdown = (endAt) => { const [ms, setMs] = useState(() => new Date(endAt) - Date.now()); useEffect(() => { setMs(new Date(endAt) - Date.now()); const t = setInterval(() => setMs(new Date(endAt) - Date.now()), 1000); return () => clearInterval(t); }, [endAt]); return ms; }; const formattaResiduo = (ms) => { if (ms <= 0) return 'Terminata'; const s = Math.floor(ms / 1000); const g = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60; if (g > 0) return `${g}g ${h}h ${m}m`; if (h > 0) return `${h}h ${m}m ${sec}s`; return `${m}m ${sec}s`; }; const AstaCard = ({ asta, onOffri, urgente }) => { const ms = useCountdown(asta.endAt); const finita = ms <= 0; const programmata = asta.stato === 'programmata'; return (
{asta.images?.[0] ? {asta.name} :
🌿
}
{programmata ? `Inizia ${new Date(asta.startAt).toLocaleDateString('it-IT', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}` : finita ? 'In chiusura…' : `Chiude tra ${formattaResiduo(ms)}`}
{asta.family &&
{asta.family}
}

{asta.name}

{asta.bidCount > 0 ? 'Offerta attuale' : 'Base d\'asta'}
{eur(asta.currentBid || asta.startPrice)}
{asta.bidCount} offert{asta.bidCount === 1 ? 'a' : 'e'}
{asta.leaderName &&
in testa: {asta.leaderName}
}
{asta.hasReserve && !asta.reserveMet && (
Prezzo di riserva non ancora raggiunto
)}
); }; const AstesPage = ({ auth, onLoginNeeded }) => { const [aste, setAste] = useState(null); const [sel, setSel] = useState(null); // asta su cui si sta offrendo const carica = () => fetch('/api/auctions').then(r => r.ok ? r.json() : []).then(setAste).catch(() => setAste([])); useEffect(() => { carica(); const t = setInterval(carica, 8000); return () => clearInterval(t); }, []); const attive = (aste || []).filter(a => a.stato === 'attiva'); const prossime = (aste || []).filter(a => a.stato === 'programmata'); return (
Aste dal vivaio.} sub="Esemplari unici e piante da collezione, aggiudicati a chi fa l'offerta più alta. Chi offre nell'ultimo minuto fa slittare la chiusura, così nessuno vince rubando l'ultimo secondo." /> {aste === null &&
Carico le aste…
} {aste && attive.length === 0 && prossime.length === 0 && (
🔨

Nessuna asta in corso

Le aste compaiono qui quando ci sono esemplari speciali. Iscriviti alla newsletter per saperlo in anticipo.

)} {attive.length > 0 && (
{attive.map(a => ( auth.user ? setSel(asta) : onLoginNeeded()} /> ))}
)} {prossime.length > 0 && ( <>

In arrivo

{prossime.map(a => ( {}} /> ))}
)} {sel && ( setSel(null)} onFatta={() => { setSel(null); carica(); }} /> )}
); }; const OffertaModal = ({ asta: astaIniziale, auth, onClose, onFatta }) => { const [asta, setAsta] = useState(astaIniziale); const [importo, setImporto] = useState(String(astaIniziale.minNext)); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); const [fatto, setFatto] = useState(false); const ms = useCountdown(asta.endAt); // Tiene aggiornata l'offerta corrente mentre il modale è aperto useEffect(() => { const t = setInterval(() => { fetch(`/api/auctions/${asta.id}`).then(r => r.ok ? r.json() : null).then(d => { if (d) { setAsta(d); setImporto(v => Math.max(Number(v) || 0, d.minNext) === d.minNext ? String(d.minNext) : v); } }).catch(() => {}); }, 5000); return () => clearInterval(t); }, [asta.id]); const offri = async (e) => { e.preventDefault(); setErr(''); setBusy(true); try { const r = await fetch(`/api/auctions/${asta.id}/bid`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${auth.token}` }, body: JSON.stringify({ importo: Math.floor(Number(importo)) }), }); const d = await r.json(); if (!r.ok) { setErr(d.error || 'Offerta non riuscita'); if (d.minNext) { setAsta(a => ({ ...a, minNext: d.minNext })); setImporto(String(d.minNext)); } return; } setFatto(true); setTimeout(onFatta, 2200); } catch { setErr('Errore di connessione. Riprova.'); } finally { setBusy(false); } }; return (
e.stopPropagation()}> {fatto ? (

Offerta piazzata

Sei in testa a {eur(Math.floor(Number(importo)))}. Se qualcuno ti supera ti avviso via email.

) : ( <>
La tua offerta

{asta.name}

{asta.bidCount > 0 ? 'Offerta attuale' : 'Base d\'asta'}
{eur(asta.currentBid || asta.startPrice)}
{ms <= 0 ? 'In chiusura' : `Chiude tra ${formattaResiduo(ms)}`}
€ setImporto(e.target.value)} autoFocus />
{[0, 1, 2].map(k => { const v = asta.minNext + asta.incremento * k; return ; })}
{err &&
{err}
}

Offrendo ti impegni ad acquistare se vinci. Il pagamento avviene solo a fine asta, se sei il migliore offerente.

)}
); }; // ============ App ============ const App = () => { const [activeCat, setActiveCat] = useState('all'); const [query, setQuery] = useState(''); const [view, setView] = useState('grid'); const [tierFilter, setTierFilter] = useState('all'); const [luceFilter, setLuceFilter] = useState('all'); const [umiditaFilter, setUmiditaFilter] = useState('all'); const [soloDisponibili, setSoloDisponibili] = useState(false); const [guidaAperta, setGuidaAperta] = useState(false); const azzeraFiltri = () => { setActiveCat('all'); setQuery(''); setTierFilter('all'); setLuceFilter('all'); setUmiditaFilter('all'); setSoloDisponibili(false); }; const [selected, setSelected] = useState(null); const [detailOpen, setDetailOpen] = useState(false); const [cart, setCart] = useState(() => { try { return JSON.parse(localStorage.getItem('florilegio-cart') || '[]'); } catch { return []; } }); const [cartOpen, setCartOpen] = useState(false); const [checkoutOpen, setCheckoutOpen] = useState(false); const [saved, setSaved] = useState(() => { try { return JSON.parse(localStorage.getItem('florilegio-saved') || '[]'); } catch { return []; } }); const [toast, setToast] = useState(null); const [settings, setSettings] = useState({ palette: 'warm', font: 'Instrument Serif', view: 'grid', density: 'comoda' }); const [activeSection, setActiveSection] = useState('Catalogo'); const [searchOpen, setSearchOpen] = useState(false); const [accountOpen, setAccountOpen] = useState(false); // ---- Autenticazione cliente ---- const [authToken, setAuthToken] = useState(() => localStorage.getItem('florilegio-token') || null); const [authUser, setAuthUser] = useState(null); const [googleClientId, setGoogleClientId] = useState(''); useEffect(() => { fetch('/api/config').then(r => r.json()) .then(c => setGoogleClientId(c.googleClientId || '')) .catch(() => {}); }, []); // Riconvalida il token salvato: se scaduto o non più valido, esce in silenzio useEffect(() => { if (!authToken) { setAuthUser(null); return; } fetch('/api/auth/me', { headers: { Authorization: `Bearer ${authToken}` } }) .then(r => r.ok ? r.json() : Promise.reject()) .then(d => setAuthUser(d.user)) .catch(() => { localStorage.removeItem('florilegio-token'); setAuthToken(null); setAuthUser(null); }); }, [authToken]); const auth = useMemo(() => ({ user: authUser, token: authToken, googleClientId, login: (token, user) => { localStorage.setItem('florilegio-token', token); setAuthToken(token); setAuthUser(user); }, logout: () => { localStorage.removeItem('florilegio-token'); setAuthToken(null); setAuthUser(null); }, }), [authUser, authToken, googleClientId]); // ---- Ritorno dalla pagina di pagamento Stripe ---- // L'esito NON si deduce dall'URL: chiunque potrebbe aprire "?pagamento=ok". // Si chiede al server, che sa solo quello che Stripe gli ha confermato via // webhook firmato. Se l'incasso non risulta ancora registrato si riprova per // qualche secondo, perché il webhook può arrivare poco dopo il redirect. const [esitoPagamento, setEsitoPagamento] = useState(null); useEffect(() => { const q = new URLSearchParams(location.search); const ordine = q.get('ordine'); const esito = q.get('pagamento'); if (!ordine || !esito) return; // Pulisce subito la barra degli indirizzi history.replaceState(null, '', location.pathname + location.hash); sessionStorage.removeItem('florilegio-ordine-in-corso'); if (esito === 'annullato') { setEsitoPagamento({ stato: 'annullato', id: ordine }); return; } let tentativi = 0; setEsitoPagamento({ stato: 'verifica', id: ordine }); const controlla = async () => { try { const r = await fetch(`/api/orders/${encodeURIComponent(ordine)}/stato`); if (r.ok) { const d = await r.json(); if (d.paymentStatus === 'pagato') { setEsitoPagamento({ stato: 'pagato', ...d }); setCart([]); // ora sì: l'incasso è confermato return; } } } catch { /* riprova */ } if (++tentativi < 8) setTimeout(controlla, 1500); else setEsitoPagamento({ stato: 'in_verifica', id: ordine }); }; controlla(); }, []); // Router via hash. Le sezioni con spazio ("Chi siamo") arrivano codificate // come "Chi%20siamo": senza decodifica non corrispondono mai alla lista e la // pagina resta su quella precedente al reload o all'apertura di un link. useEffect(() => { const apply = () => { let h = (location.hash || '#Catalogo').replace('#',''); try { h = decodeURIComponent(h); } catch { /* hash malformato */ } const valid = ['Catalogo','Aste','Propagazione','Diario','Chi siamo','Contatti','Wishlist','FAQ','Ordini','Termini','Privacy','Resi','Ambiente','Bundle','Prenotazioni']; if (valid.includes(h)) { setActiveSection(h); window.scrollTo({ top: 0 }); } }; apply(); window.addEventListener('hashchange', apply); return () => window.removeEventListener('hashchange', apply); }, []); const navTo = (s) => { location.hash = encodeURIComponent(s); setActiveSection(s); window.scrollTo({ top: 0 }); }; useEffect(() => { localStorage.setItem('florilegio-cart', JSON.stringify(cart)); }, [cart]); useEffect(() => { localStorage.setItem('florilegio-saved', JSON.stringify(saved)); }, [saved]); // Apply settings useEffect(() => { const root = document.documentElement; const palettes = { warm: { bg: '#f4f0e8', card: '#ffffff', ink: '#1a2018', inkSoft: '#4a524a', line: '#d8d1c2', lineSoft: '#e8e2d4', accent: '#b8502e', leaf: '#3a5a3a', cream: '#ede4ce', dark: '#1a2018' }, cool: { bg: '#edefe8', card: '#ffffff', ink: '#10201a', inkSoft: '#3a4a42', line: '#c8d0c2', lineSoft: '#dde2d8', accent: '#3a7a5a', leaf: '#2a5a4a', cream: '#d8e0cc', dark: '#10201a' }, mono: { bg: '#f0efec', card: '#ffffff', ink: '#111', inkSoft: '#444', line: '#d4d2cc', lineSoft: '#e4e2dc', accent: '#c79a3a', leaf: '#333', cream: '#e0ddd2', dark: '#111' }, dusk: { bg: '#1a2018', card: '#242c22', ink: '#f4f0e8', inkSoft: '#b8b5a8', line: '#3a4238', lineSoft: '#2a3228', accent: '#d97a56', leaf: '#8aa098', cream: '#3a4238', dark: '#0e1310' }, }; const p = palettes[settings.palette]; root.style.setProperty('--bg', p.bg); root.style.setProperty('--bg-card', p.card); root.style.setProperty('--ink', p.ink); root.style.setProperty('--ink-soft', p.inkSoft); root.style.setProperty('--line', p.line); root.style.setProperty('--line-soft', p.lineSoft); root.style.setProperty('--accent', p.accent); root.style.setProperty('--leaf', p.leaf); root.style.setProperty('--cream', p.cream); root.style.setProperty('--bg-dark', p.dark); root.style.setProperty('--serif', `'${settings.font}', Georgia, serif`); if (settings.view) setView(settings.view); }, [settings]); const openDetail = (plant) => { setSelected(plant); setDetailOpen(true); }; const closeDetail = () => setDetailOpen(false); const addToCart = (plant, qty = 1) => { setCart(prev => { const exist = prev.find(i => i.id === plant.id); if (exist) return prev.map(i => i.id === plant.id ? { ...i, qty: i.qty + qty } : i); return [...prev, { id: plant.id, qty }]; }); setToast(`Aggiunta · ${plant.name}`); setTimeout(() => setToast(null), 2000); }; const removeCart = (id) => setCart(c => c.filter(i => i.id !== id)); const qtyCart = (id, q) => setCart(c => q <= 0 ? c.filter(i => i.id !== id) : c.map(i => i.id === id ? { ...i, qty: q } : i)); const toggleSave = (plant) => setSaved(s => s.includes(plant.id) ? s.filter(i => i !== plant.id) : [...s, plant.id]); const filteredPlants = useMemo(() => { const base = CATALOG.plants.filter(p => { if (activeCat !== 'all' && p.cat !== activeCat) return false; if (tierFilter !== 'all' && p.tier !== tierFilter) return false; // Le condizioni di coltivazione sono la domanda vera del cliente: // "sopravvive dove vivo io?". I dati c'erano ma non erano filtrabili. if (luceFilter !== 'all' && !luciDi(p).includes(luceFilter)) return false; if (umiditaFilter !== 'all' && umiditaDi(p) !== umiditaFilter) return false; if (soloDisponibili && !(p.status === 'available' && p.stock > 0)) return false; return true; }); return cercaPiante(base, query, CATALOG.categories); }, [activeCat, query, tierFilter, luceFilter, umiditaFilter, soloDisponibili]); const cartCount = cart.reduce((s, i) => s + i.qty, 0); return ( <> setCartOpen(true)} onLogoClick={() => navTo('Catalogo')} activeSection={activeSection} onNav={navTo} onSearch={() => setSearchOpen(true)} onAccount={() => setAccountOpen(true)} /> {activeSection === 'Catalogo' && (<> setGuidaAperta(true), risultati: filteredPlants.length }} />
{activeCat === 'all' ? CATALOG.categories.map(cat => { const plants = filteredPlants.filter(p => p.cat === cat.id); // Con i filtri attivi una sezione può restare senza piante: mostrarne // il titolo e poi il vuoto fa sembrare il catalogo rotto. if (!plants.length) return null; return ; }) : (() => { const cat = CATALOG.categories.find(c => c.id === activeCat); return ; })() } {filteredPlants.length === 0 && (
Nessuna pianta trovata
{soloDisponibili ? 'Con questi criteri non c’è nulla di disponibile in questo momento. Prova a togliere “Solo disponibili”: potrai farti avvisare quando le piante tornano.' : 'Prova ad allargare i criteri, oppure azzera i filtri e riparti.'}
)}
)} setGuidaAperta(false)} onApplica={(luce, umidita) => { // Imposta i filtri invece di mostrare un elenco separato: il cliente // resta nel catalogo che conosce e può allargare i criteri da lì. setActiveCat('all'); setQuery(''); setTierFilter('all'); setLuceFilter(luce || 'all'); setUmiditaFilter(umidita || 'all'); }} /> {activeSection === 'Propagazione' && } {/* Materiali e Galleria erano linkate dal footer e dal menu ma non venivano disegnate da nessuna parte: chi ci cliccava finiva su una pagina bianca. I componenti esistevano già, mancava il collegamento. */} {activeSection === 'Materiali' && } {activeSection === 'Galleria' && } {activeSection === 'Diario' && } {activeSection === 'Chi siamo' && } {activeSection === 'Contatti' && } {activeSection === 'Wishlist' && addToCart(p)} onRemove={(p) => toggleSave(p)} onNav={navTo} />} {activeSection === 'FAQ' && } {activeSection === 'Ordini' && } {activeSection === 'Termini' && } {activeSection === 'Privacy' && } {activeSection === 'Resi' && } {activeSection === 'Ambiente' && } {activeSection === 'Bundle' && { setToast(`Aggiunto · ${b.name}`); setTimeout(() => setToast(null), 1800); }} />} {activeSection === 'Aste' && setAccountOpen(true)} />} {activeSection === 'Prenotazioni' && } {activeSection === 'Catalogo' && }