// Extras: Legali, Filtro ambiente, Comparatore, Bundle, Recensioni, Prenotazioni, Cookie banner

// ============ Cookie Banner ============
const CookieBanner = () => {
  const [accepted, setAccepted] = useState(() => localStorage.getItem('florilegio-cookies') === 'ok');
  const accept = () => { localStorage.setItem('florilegio-cookies', 'ok'); setAccepted(true); };
  const refuse = () => { localStorage.setItem('florilegio-cookies', 'no'); setAccepted(true); };
  if (accepted) return null;
  return (
    <div className="cookie-banner">
      <div className="cookie-text">
        <strong className="serif">Cookie essenziali.</strong>
        <span> Florilegio usa solo cookie tecnici (carrello, login, preferenze). Niente tracker pubblicitari, niente Google Analytics.</span>
      </div>
      <div className="cookie-actions">
        <button className="btn-ghost" onClick={refuse}>Solo essenziali</button>
        <button className="btn-primary" onClick={accept}>Accetto</button>
      </div>
    </div>
  );
};

// ============ Pagine Legali ============
const LegalLayout = ({ title, children }) => (
  <main className="page legal-page">
    <PageHead eyebrow="Documento legale" title={title} sub="Aggiornato al 29 aprile 2026." />
    <div className="legal-body">{children}</div>
  </main>
);

const TerminiPage = () => (
  <LegalLayout title={<>Termini e <em>condizioni</em></>}>
    <section><h3>1. Soggetto</h3><p>Florilegio è un vivaio domestico gestito da privato in Italia. Le vendite sono effettuate ai sensi del Codice del Consumo (D.Lgs. 206/2005) per i consumatori finali residenti in Italia.</p></section>
    <section><h3>2. Prodotti</h3><p>Vendiamo piante vive, talee radicate e materiali per la coltivazione. Trattandosi di organismi viventi, le immagini sono indicative: ogni esemplare è unico per dimensioni, foglie e variegatura.</p></section>
    <section><h3>3. Prezzi e pagamenti</h3><p>Prezzi in Euro, IVA inclusa quando applicabile. Pagamenti tramite carta (via Stripe), PayPal, bonifico bancario per ordini sopra €100. Ordine confermato solo dopo accredito.</p></section>
    <section><h3>4. Spedizione</h3><p>Spedizioni il martedì in tutta Italia con corriere espresso (24–48h). Imballo isotermico, busta termica autoriscaldante in inverno (sotto i 10°C). Spedizione gratuita oltre €150, altrimenti €9,90 (€14,90 isole).</p></section>
    <section><h3>5. Garanzia attecchimento</h3><p>Per il primo acquisto, in caso di non attecchimento entro 30 giorni dalla consegna seguendo la scheda di cura allegata, sostituiamo la pianta o rimborsiamo l'importo. La garanzia non copre danni da rinvasi prematuri, posizionamento errato o irrigazione eccessiva nei primi 10 giorni.</p></section>
    <section><h3>6. Diritto di recesso</h3><p>Il consumatore ha 14 giorni dalla consegna per esercitare il recesso, salvo per beni che si deteriorano rapidamente (art. 59 lett. d Codice del Consumo). Le piante vive, in quanto deperibili, sono escluse dal recesso. I materiali (vasi, substrati, strumenti) sono soggetti a recesso ordinario se sigillati.</p></section>
    <section><h3>7. Foro competente</h3><p>Per ogni controversia è competente il Foro di Milano.</p></section>
  </LegalLayout>
);

const PrivacyPage = () => (
  <LegalLayout title={<>Privacy <em>policy</em></>}>
    <section><h3>1. Titolare del trattamento</h3><p>Florilegio · Milano · info@florilegio.online</p></section>
    <section><h3>2. Dati raccolti</h3><p><strong>Per gli ordini:</strong> nome, indirizzo, email, telefono, dettagli pagamento (gestiti da Stripe, mai memorizzati da noi). <strong>Per la newsletter:</strong> solo email. <strong>Per l'account:</strong> email, password (cifrata), wishlist, storico ordini.</p></section>
    <section><h3>3. Finalità</h3><p>Evasione ordini, comunicazioni di servizio, newsletter (con consenso esplicito), assistenza post-vendita.</p></section>
    <section><h3>4. Base giuridica</h3><p>Esecuzione contratto (ordini), consenso (newsletter), interesse legittimo (assistenza, frode).</p></section>
    <section><h3>5. Conservazione</h3><p>Dati ordini per 10 anni (obblighi fiscali). Newsletter fino a revoca. Account fino a richiesta cancellazione.</p></section>
    <section><h3>6. Diritti</h3><p>Accesso, rettifica, cancellazione, portabilità, opposizione. Scrivi a info@florilegio.online: rispondiamo entro 30 giorni.</p></section>
    <section><h3>7. Cookie</h3><p>Solo tecnici (sessione, carrello, preferenze tema). Nessun cookie pubblicitario, nessun tracker di terze parti, nessun Google Analytics.</p></section>
    <section><h3>8. Pagamenti</h3><p>Gestiti da Stripe Payments Europe Ltd. Conformi PCI-DSS Livello 1. I dati della carta non passano mai dai nostri server.</p></section>
  </LegalLayout>
);

const ResiPage = () => (
  <LegalLayout title={<>Resi e <em>rimborsi</em></>}>
    <section><h3>Piante vive</h3><p>In quanto beni deperibili, le piante vive sono <strong>escluse dal diritto di recesso</strong> (art. 59 lett. d Codice del Consumo). Tuttavia copriamo:</p><ul><li><strong>Pianta arrivata danneggiata:</strong> foto entro 24h dalla consegna → sostituzione gratuita o rimborso integrale</li><li><strong>Garanzia attecchimento</strong> (primo acquisto): 30 giorni → sostituzione o rimborso</li></ul></section>
    <section><h3>Materiali</h3><p>Vasi, substrati, strumenti: <strong>14 giorni</strong> per il recesso se sigillati e non utilizzati. Spese di restituzione a carico del cliente. Rimborso entro 14 giorni dalla ricezione del reso.</p></section>
    <section><h3>Come procedere</h3><ol><li>Email a <strong>info@florilegio.online</strong> con numero ordine e foto (se applicabile)</li><li>Ricevi entro 24h la procedura specifica</li><li>Rimborso sul metodo di pagamento originale entro 5–10 giorni lavorativi</li></ol></section>
  </LegalLayout>
);

// ============ Filtro Ambiente ============
// Acquistabile = in vendita e con giacenza reale, come nel resto del sito
const isBuyableAmb = (p) => p.status === 'available' && p.stock > 0;

const AmbientePage = ({ onOpenPlant, onNav }) => {
  const [light, setLight] = useState('mid');
  const [humidity, setHumidity] = useState('mid');
  const [exp, setExp] = useState('beg');

  // Confronta le risposte con i campi luce e umidità delle schede. La versione
  // precedente cercava parole chiave dentro le note e interrogava p.cura e
  // p.status === 'material', che non esistono fra i campi di una pianta: i
  // risultati erano quindi in buona parte casuali.
  const matches = useMemo(() => {
    const LUCE = { low: 'bassa', mid: 'media', high: 'brillante' };
    // Quanta umidità l'utente può garantire, sulla stessa scala delle schede
    const puoiDare = { low: 0, mid: 1, high: 2 }[humidity];
    const RICHIESTA = { normale: 0, alta: 1, teca: 2 };

    return CATALOG.plants.filter(p => {
      // La pianta deve tollerare la luce che hai: chi vuole sottobosco
      // brucia in pieno sole, e viceversa non regge in una stanza interna.
      if (!luciDi(p).includes(LUCE[light])) return false;
      // Non deve chiedere più umidità di quanta tu possa darne
      if (RICHIESTA[umiditaDi(p)] > puoiDare) return false;
      // A un principiante non si consiglia una specie da teca, anche se
      // dichiara di poterla fornire: è dove si concentrano i fallimenti.
      if (exp === 'beg' && umiditaDi(p) === 'teca') return false;
      return true;
    })
      // Prima le acquistabili: consigliare ciò che non si può comprare frustra
      .sort((a, b) => (isBuyableAmb(b) - isBuyableAmb(a)))
      .slice(0, 9);
  }, [light, humidity, exp]);

  const Q = ({ label, value, options, set }) => (
    <div className="amb-q">
      <div className="mono amb-q-label">{label}</div>
      <div className="amb-options">
        {options.map(o => (
          <button key={o.k} className={`amb-opt ${value === o.k ? 'active' : ''}`} onClick={() => set(o.k)}>
            <div className="amb-opt-icon">{o.icon}</div>
            <div className="serif">{o.l}</div>
            <div className="mono">{o.s}</div>
          </button>
        ))}
      </div>
    </div>
  );

  return (
    <main className="page">
      <PageHead
        eyebrow="Strumento · Trova la pianta giusta"
        title={<>Adatta al tuo <em>ambiente</em>.</>}
        sub="Tre domande sulla tua casa: ti suggerisco solo le piante che possono crescere bene da te. Niente sorprese, niente piante destinate a morire."
      />
      <div className="ambiente-form">
        <Q label="Quanta luce hai?" value={light} set={setLight} options={[
          { k: 'low', l: 'Poca', s: 'Stanza interna, lontano dalle finestre', icon: '◐' },
          { k: 'mid', l: 'Media', s: 'Vicino a finestra esposta E/O', icon: '◑' },
          { k: 'high', l: 'Tanta', s: 'Davanti a finestra a Sud', icon: '◉' },
        ]} />
        <Q label="Umidità tipica?" value={humidity} set={setHumidity} options={[
          { k: 'low', l: 'Secca', s: 'Riscaldamento acceso, no umidificatore', icon: '✦' },
          { k: 'mid', l: 'Normale', s: '40–60%, nessun controllo attivo', icon: '✧' },
          { k: 'high', l: 'Alta', s: 'Terrario, umidificatore o stanza umida', icon: '❋' },
        ]} />
        <Q label="Esperienza?" value={exp} set={setExp} options={[
          { k: 'beg', l: 'Principiante', s: 'Le mie prime piante', icon: '○' },
          { k: 'int', l: 'Intermedio', s: 'Ho già qualche tropicale viva', icon: '◐' },
          { k: 'pro', l: 'Esperto', s: 'Cerco specie rare e sfide', icon: '●' },
        ]} />
      </div>

      <div className="amb-results">
        <div className="amb-results-head">
          <div className="mono" style={{ color: 'var(--ink-mute)' }}>{matches.length} piante consigliate per te</div>
          <button className="link-btn" onClick={() => onNav('Catalogo')}>Vedi tutto il catalogo →</button>
        </div>
        {matches.length === 0 ? (
          <div style={{ padding: '80px 20px', textAlign: 'center' }}>
            <div className="serif" style={{ fontSize: '1.6rem', marginBottom: 10 }}>Nessuna pianta per queste condizioni</div>
            <div style={{ color: 'var(--ink-mute)', maxWidth: '48ch', margin: '0 auto' }}>
              Al momento non ho specie adatte a questa combinazione. Prova ad allargare una risposta —
              spesso basta un umidificatore per aprire buona parte del catalogo.
            </div>
          </div>
        ) : (
        <div className="materials-grid">
          {matches.map((p, i) => {
            const cat = CATALOG.categories.find(c => c.id === p.cat);
            return (
              <article key={p.id} className="mat-card" onClick={() => onOpenPlant(p)} style={{ cursor: 'pointer' }}>
                <div className="mat-img">
                  {/* Mancava del tutto: il riquadro conteneva solo il numero,
                      mentre ogni pianta ha le sue foto caricate dal gestionale. */}
                  <PlantArt plant={p} />
                  <div className="mat-no mono">N.{String(i + 1).padStart(3, '0')}</div>
                </div>
                <div className="mat-body">
                  <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 6 }}>{cat?.title}</div>
                  <h3 className="card-name">{p.name}</h3>
                  {/* Perché è stata consigliata: senza, il risultato è un elenco
                      da prendere sulla fiducia. */}
                  <div className="cura-sintesi" style={{ marginTop: 8 }}>
                    <span className="cura-voce"><Icon name="sun" size={11} />{ETICHETTE_LUCE[luciDi(p)[0]]}</span>
                    <span className={`cura-voce cura-${umiditaDi(p)}`}><Icon name="droplet" size={11} />{ETICHETTE_UMIDITA[umiditaDi(p)]}</span>
                  </div>
                  <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: '.66rem', marginTop: 8 }}>
                    {p.family} · {priceRange(p)}
                    {!isBuyableAmb(p) && <span style={{ color: 'var(--accent)' }}> · esaurita</span>}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
        )}
      </div>
    </main>
  );
};

// ============ Bundle / Kit ============
const BUNDLES = [
  {
    id: 'k-arac', name: 'Kit Aracee · Principiante', price: 79, save: 18,
    desc: 'Tutto il necessario per iniziare con una Aracea: pianta acclimatata, substrato pre-mixato, vaso trasparente, scheda di cura A4 stampata.',
    items: ['1 Aracea base (Philodendron o Anthurium)', 'Substrato Aracee 3L pre-miscelato', 'Vaso trasparente 13cm', 'Scheda cura plastificata'],
  },
  {
    id: 'k-prop', name: 'Kit Propagazione', price: 49, save: 12,
    desc: 'Per chi vuole iniziare a propagare. Perlite, sphagnum, vasetti e bisturi sterile.',
    items: ['Perlite 2-6mm · 3L', 'Sphagnum cileno 50g', '5 vasetti trasparenti 5cm', 'Bisturi + cannella antimicotica'],
  },
  {
    id: 'k-terr', name: 'Kit Terrario · Sonerila', price: 119, save: 25,
    desc: 'Ecosistema chiuso pronto: pianta delicata, substrato specifico, vetro 20cm.',
    items: ['1 Sonerila Glowing Lines', 'Substrato terrario 1L', 'Vetro chiuso 20cm', 'Bark drenaggio + biochar'],
  },
];

const BundlePage = ({ onAdd }) => (
  <main className="page">
    <PageHead
      eyebrow="Sezione · Kit & Bundle"
      title={<>Kit pronti, <em>prezzo combinato</em>.</>}
      sub="Combinazioni curate di pianta + materiali, a un prezzo più basso rispetto al singolo. Ogni kit contiene tutto quello che serve per iniziare bene."
    />
    <div className="bundle-grid">
      {BUNDLES.map(b => (
        <article key={b.id} className="bundle-card">
          <div className="bundle-head">
            <h3 className="serif">{b.name}</h3>
            <div className="bundle-save mono">Risparmi €{b.save}</div>
          </div>
          <p style={{ color: 'var(--ink-soft)', margin: '12px 0 18px' }}>{b.desc}</p>
          <ul className="bundle-list">
            {b.items.map((it, i) => <li key={i}><Icon name="check" size={12} /> {it}</li>)}
          </ul>
          <div className="bundle-foot">
            <div className="serif" style={{ fontSize: '2rem' }}>€{b.price}</div>
            <button className="btn-primary" onClick={() => onAdd(b)}>Aggiungi al carrello <Icon name="plus" size={14} /></button>
          </div>
        </article>
      ))}
    </div>
  </main>
);

// ============ Prenotazioni / Calendario ============
const PrenotazioniPage = ({ onNav }) => {
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Prenotazioni"
        title={<>Prenotazioni <em>chiuse</em>.</>}
        sub="Al momento non accetto prenotazioni né caparre: vendo soltanto le piante realmente pronte e disponibili in vivaio."
      />
      <div className="prenot-closed">
        <div className="prenot-closed-ico"><Icon name="alert" size={22} /></div>
        <h4 className="serif">Nessuna prenotazione attiva</h4>
        <p>
          Preferisco non far attendere nessuno su piante che devono ancora radicare.
          Quando una talea è pronta compare direttamente nel catalogo, con la sua foto reale
          e la giacenza aggiornata.
        </p>
        <div className="prenot-closed-actions">
          <button className="btn-primary" onClick={() => onNav?.('Catalogo')}>Vedi il catalogo</button>
          <button className="btn-ghost" onClick={() => onNav?.('Contatti')}>Scrivimi per una richiesta</button>
        </div>
      </div>
      <div className="prenot-info-box">
        <h4 className="serif">Come funzionerà quando riapriranno</h4>
        <ol>
          <li>Le talee in propagazione compariranno qui con la data prevista</li>
          <li>Riceverai una foto ogni 2 settimane fino alla disponibilità</li>
          <li>Alla maturazione paghi e spedisco entro la settimana successiva</li>
          <li>Se la talea non attecchisce, non paghi nulla</li>
        </ol>
        <p style={{ marginTop: 14, fontSize: '.85rem', color: 'var(--ink-mute)' }}>
          Iscriviti alla newsletter dalla home per sapere quando riaprono.
        </p>
      </div>
    </main>
  );
};

Object.assign(window, {
  CookieBanner, TerminiPage, PrivacyPage, ResiPage,
  AmbientePage, BundlePage, PrenotazioniPage,
});