// Pages: Propagazione, Materiali, Diario, Chi siamo, Contatti

const PageHead = ({ eyebrow, title, sub, children }) => (
  <section className="page-head">
    <div className="hero-meta mono">
      <span>{eyebrow}</span>
      <span className="line" />
      <span>Florilegio · 2026</span>
    </div>
    <h1 className="page-title">{title}</h1>
    {sub && <p className="page-sub">{sub}</p>}
    {children}
  </section>
);

// ============ Propagazione ============
const GUIDES = [
  { id: 'talea-stelo', num: '01', title: 'Talea di stelo', tag: 'Tecnica base', time: '3–6 settimane', diff: 1, blurb: 'Il metodo più semplice e versatile. Adatto a Monstera, Philodendron, Hoya, Pothos. Un nodo, una foglia, acqua o sphagnum.', steps: ['Selezionare ramo sano con 1+ nodo','Tagliare 2 cm sotto il nodo con lama sterile','Lasciare callosizzare 30–60 minuti','Inserire in acqua o sphagnum umido','Mantenere 22–25°C, luce indiretta','Trapiantare quando radici > 3 cm'] },
  { id: 'foglia', num: '02', title: 'Talea fogliare', tag: 'Begonia, Peperomia', time: '6–10 settimane', diff: 2, blurb: 'Una sola foglia genera multiple plantule. Tecnica magica per le Begonia rhizomatose e alcune Peperomia.', steps: ['Tagliare foglia matura con picciolo','Incidere le nervature principali','Posare su sphagnum umido in terrario chiuso','Mantenere umidità >80%','Plantule alle incisioni in 6–8 settimane','Separare quando hanno 2 foglie proprie'] },
  { id: 'divisione', num: '03', title: 'Divisione', tag: 'Calathea, Maranta', time: 'Immediata', diff: 1, blurb: 'Per piante che producono ciuffi o rizomi. Ogni sezione è già una pianta completa con radici.', steps: ['Estrarre la pianta dal vaso','Rimuovere terra in eccesso, individuare i punti naturali di separazione','Dividere con lama sterile o a mano','Spolverare i tagli con cannella','Rinvasare in substrato fresco','Annaffiare leggermente, riprendere in 1–2 settimane'] },
  { id: 'cormetti', num: '04', title: 'Cormetti / bulbilli', tag: 'Alocasia', time: '4–8 settimane', diff: 2, blurb: 'Le Alocasia producono piccoli cormetti laterali. Separati e germogliati in sphagnum, danno nuove piante identiche.', steps: ['Estrarre la pianta a fine inverno','Individuare i cormetti laterali','Separare con torsione o lama','Posare su sphagnum umido a 25°C','Coprire con campana, alta umidità','Rinvasare quando spunta la prima foglia'] },
  { id: 'stoloni', num: '05', title: 'Stoloni e radici aeree', tag: 'Sarcopyramis, Begonia', time: '2–4 settimane', diff: 1, blurb: 'Molte tropicali producono stoloni striscianti che radicano da soli ai nodi. Basta sezionare e trapiantare.', steps: ['Identificare stoloni con nodi radicanti','Tagliare segmento con almeno 2 nodi','Posizionare in sphagnum umido nel terrario','Mantenere umidità >80%','Le radici si sviluppano in 2–3 settimane'] },
  { id: 'foglia-succ', num: '06', title: 'Foglia di succulenta', tag: 'Echeveria, Sedum', time: '6–12 settimane', diff: 1, blurb: 'Una foglia caduta è già una pianta. Le succulente sono i migliori riproduttori: costo zero, resa enorme.', steps: ['Torcere foglia bassa con punto di attacco intatto','Lasciare asciugare 1–2 giorni','Posare su substrato asciutto','Spruzzare leggermente ogni 3–4 giorni','Piccola rosetta in 6–12 settimane','Rimuovere la foglia madre quando appassisce'] },
];

const PropagazionePage = () => (
  <main className="page">
    <PageHead
      eyebrow="Sezione · Tecniche"
      title={<>Propagare è <em>tradurre</em><br />una pianta in due.</>}
      sub="Sei tecniche fondamentali per moltiplicare le specie del nostro catalogo. Ogni guida è verificata in vivaio: tempi reali, percentuali di attecchimento misurate, materiali necessari."
    />
    <div className="guides-grid">
      {GUIDES.map(g => (
        <article key={g.id} className="guide-card">
          <div className="guide-head">
            <div className="guide-num">{g.num}</div>
            <div className="guide-time mono">{g.time}</div>
          </div>
          <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>{g.tag}</div>
          <h3 className="guide-title">{g.title}</h3>
          <p className="guide-blurb">{g.blurb}</p>
          <details className="guide-steps">
            <summary>Vedi i passaggi <Icon name="arrow" size={12} /></summary>
            <ol>
              {g.steps.map((s, i) => <li key={i}>{s}</li>)}
            </ol>
          </details>
          <div className="guide-foot">
            <span className="mono" style={{ color: 'var(--ink-mute)' }}>Difficoltà</span>
            <div className="diff-pips">
              {[1,2,3].map(i => <span key={i} className={`diff-pip ${i <= g.diff ? 'on' : ''}`} />)}
            </div>
          </div>
        </article>
      ))}
    </div>

    <section className="prop-band">
      <div className="prop-band-inner">
        <div>
          <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 12 }}>Materiali essenziali</div>
          <h2 className="page-title" style={{ fontSize: 'clamp(2.2rem, 4.5vw, 3.6rem)' }}>Quello che ti serve davvero</h2>
        </div>
        <div className="prop-band-list">
          {[
            ['Lame e forbici sterili', 'Bisturi chirurgico monouso o forbici da innesto disinfettate con alcol al 70%.'],
            ['Sphagnum di qualità', 'Cileno o neozelandese a fibra lunga. Idratato 12 ore prima, strizzato.'],
            ['Perlite grossolana', 'Aerazione costante delle radici. Mai usare quella troppo fine.'],
            ['Carbone attivo', 'Spolvero sui tagli per prevenire marciumi e infezioni fungine.'],
            ['Termoigrometro', 'Misurare = controllare. Imprescindibile per tropicali sensibili.'],
            ['Cabinet trasparente', 'Box trasparente o vasca con coperchio. Mantiene umidità >80%.'],
          ].map(([t, d]) => (
            <div key={t} className="prop-band-item">
              <div className="serif" style={{ fontSize: '1.2rem', marginBottom: 4 }}>{t}</div>
              <div style={{ color: 'var(--ink-soft)', fontSize: '.88rem' }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
);

// ============ Materiali ============
const MATERIALS = [

  { id: 'perlite-geb', cat: 'Substrati', name: 'Perlite 2-6mm', size: '10L', blurb: 'Granulometria 2–6mm, ottimale per Aracee e Hoya.' },
  { id: 'sfagno-geb', cat: 'Substrati', name: 'Sfagno cileno fibra lunga', size: '50g x2', blurb: 'Sfagno cileno fibra lunga. Idratare 12h prima dell\'uso. Già ordinato.' },
  { id: 'biochar-geb', cat: 'Substrati', name: 'Biochar', size: '1L', blurb: 'Carbone vegetale attivato. 5–10% nei mix, assorbe le tossine.' },

  { id: 'sfagno-syb', cat: 'Substrati', name: 'Sfagno premium europeo', size: '5L', blurb: 'Sfagno premium europeo. Per terrari e propagazioni delicate.' },
  { id: 'perlite-syb', cat: 'Substrati', name: 'Perlite fine 2-6mm', size: '3L x2', blurb: 'Granulometria fine, drenaggio costante. Per Sonerila e Begonia.' },
  { id: 'bark-syb', cat: 'Substrati', name: 'Bark orchidee mini', size: '3L', blurb: 'Corteccia di pino mini, struttura aerea per Aracee e tropicali.' },
  { id: 'carbon-syb', cat: 'Substrati', name: 'Carbone attivo', size: '3L', blurb: 'Per spolvero sui tagli. Antifungino naturale.' },
  { id: 'humus-syb', cat: 'Substrati', name: 'Humus di lombrico', size: '3L', blurb: 'Apporto organico equilibrato per mix Alocasia e Begonia.' },
  { id: 'cocco-syb', cat: 'Substrati', name: 'Chips di cocco', size: '3-5L', blurb: 'Componente strutturale, drena lentamente. Per mix Alocasia.' },
  // 4 — Vasi
  { id: 'vasi-kah', cat: 'Vasi', name: 'Vasi trasparenti KAHEIGN', size: '36 pz · 9/10/13cm', blurb: 'Vedi le radici crescere. Tre formati per la coltivazione completa.' },
  { id: 'vasi-5cm', cat: 'Vasi', name: 'Vasi quadrati trasparenti 5cm', size: '5 pz', blurb: 'Per talee fresche e plantule. Trasparenti per controllo radicale.' },
  { id: 'vasi-15cm', cat: 'Vasi', name: 'Vasi quadrati trasparenti 15cm', size: '5 pz', blurb: 'Per piante adulte. Geometria che ottimizza lo spazio sui ripiani della vetrina.' },
  { id: 'vasi-9cm', cat: 'Vasi', name: 'Vasi quadrati trasparenti 9cm', size: '5-10 pz', blurb: 'Misura intermedia per le piante in transizione.' },
  { id: 'sotto-syb', cat: 'Vasi', name: 'Sottovasi quadrati 8.8cm', size: '12 pz', blurb: 'Capillarità dal basso, ideali per Begonia e Sonerila.' },
  // 5 — Fertilizzanti & cure
  { id: 'fert-slow', cat: 'Nutrizione', name: 'Fertilizzante BIO rilascio lento', size: '1 conf.', blurb: 'Granulare a lenta cessione. Una sola applicazione per stagione.' },
  { id: 'fert-liq', cat: 'Nutrizione', name: 'Fertilizzante BIO liquido tropicali', size: '500ml', blurb: 'Bilanciato per fogliame tropicale. Diluire in acqua distillata.' },
  { id: 'cannella', cat: 'Nutrizione', name: 'Cannella in polvere', size: '100g', blurb: 'Antimicotica naturale. Spolvero sui tagli durante la propagazione.' },
  { id: 'alcol', cat: 'Nutrizione', name: 'Alcol isopropilico 70%', size: '500ml', blurb: 'Sterilizzazione di lame e forbici. Imprescindibile.' },
  // 2 — Setup
  { id: 'rudsta', cat: 'Setup', name: 'Vetrina vivaio 80x37x120', size: '80x37x120 cm', blurb: 'Vetrina chiusa che ospita tutta la collezione di piante madri.' },
  { id: 'lampade', cat: 'Setup', name: 'Barre LED T5 42cm · 4 pz', size: '4 barre', blurb: 'Spettro completo per la fotosintesi, montate sui ripiani della vetrina.' },
  { id: 'timer', cat: 'Setup', name: 'Timer presa', size: '1 pz', blurb: 'Cicli luce automatici 12h on / 12h off.' },
  { id: 'igro', cat: 'Setup', name: 'Igrometro con termometro', size: '1 pz', blurb: 'Misurare = controllare. Imprescindibile per le tropicali.' },
  { id: 'nebul', cat: 'Setup', name: 'Nebulizzatore manuale 1L', size: '1 pz', blurb: 'Per le nebulizzazioni mattutine sulle Sonerila e Begonia.' },
  { id: 'ventol', cat: 'Setup', name: 'Ventilatore USB piccolo', size: '1 pz', blurb: 'Movimento d\'aria costante per prevenire muffe.' },
];

const MaterialiPage = () => {
  const [activeCat, setActiveCat] = useState('all');
  const cats = ['all', ...new Set(MATERIALS.map(m => m.cat))];
  const filtered = activeCat === 'all' ? MATERIALS : MATERIALS.filter(m => m.cat === activeCat);
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Setup & Materiali"
        title={<>Substrati, vasi,<br /><em>strumenti del vivaio.</em></>}
        sub="Substrati, vasi e attrezzi che uso davvero in vivaio. Niente elenchi di cose consigliate e mai provate: se è qui, è perché ci coltivo."
      />
      <div className="toolbar" style={{ borderTop: 0 }}>
        <div className="chip-row">
          {cats.map(c => (
            <button key={c} className={`chip ${activeCat === c ? 'active' : ''}`} onClick={() => setActiveCat(c)}>
              {c === 'all' ? 'Tutti i materiali' : c}
              <span className="count">{c === 'all' ? MATERIALS.length : MATERIALS.filter(m => m.cat === c).length}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="materials-grid">
        {filtered.map((m, i) => (
          // Fornitore, prezzo d'acquisto e stato ("da ordinare") sono dati
          // interni: dicono al cliente da chi compri e quanto paghi, senza
          // aggiungere nulla a ciò che gli serve sapere. Resta il materiale.
          <article key={m.id} className="mat-card">
            <div className="mat-img">
              <MaterialArt mat={m} />
              <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 }}>{m.cat} · {m.size}</div>
              <h3 className="card-name">{m.name}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: '.85rem', margin: '8px 0 0', flex: 1 }}>{m.blurb}</p>
            </div>
          </article>
        ))}
      </div>
    </main>
  );
};

const MaterialArt = ({ mat }) => {
  const seed = mat.id.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
  const palettes = {
    Substrati: ['#6b503a', '#8a6a4a', '#a08560', '#3a5a3a'],
    Vasi: ['#a0533a', '#c47a5a', '#8a4530', '#ede4ce'],
    Strumenti: ['#3a4a52', '#5a6b75', '#8a9aa3', '#c9c4b0'],
    Nutrizione: ['#3a5a3a', '#6b8a4a', '#c79a3a', '#ede4ce'],
  };
  const pal = palettes[mat.cat] || palettes.Substrati;
  // Material art for new categories
  const altPalettes = {
    Setup: ['#5a4a3a', '#8a7a5a', '#3a4a52', '#ede4ce'],
  };
  const palLocal = palettes[mat.cat] || altPalettes[mat.cat] || palettes.Substrati;
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="400" fill={palLocal[3]} />
      {(mat.cat === 'Substrati' || mat.cat === 'Setup') && (
        <g>
          {[...Array(40)].map((_, i) => {
            const x = (i * 53 + seed) % 400;
            const y = ((i * 73 + seed * 2) % 400);
            const r = 12 + ((i * 7 + seed) % 18);
            return <circle key={i} cx={x} cy={y} r={r} fill={palLocal[i % 3]} opacity=".55" />;
          })}
        </g>
      )}
      {mat.cat === 'Vasi' && (
        <g transform="translate(200 200)">
          <path d="M -90 -60 L -75 80 Q -75 110 -50 110 L 50 110 Q 75 110 75 80 L 90 -60 Z" fill={palLocal[0]} />
          <ellipse cx="0" cy="-60" rx="90" ry="14" fill={palLocal[2]} />
          <ellipse cx="0" cy="-60" rx="80" ry="10" fill={palLocal[1]} />
        </g>
      )}
      {mat.cat === 'Strumenti' && (
        <g transform="translate(200 200) rotate(-20)">
          <rect x="-10" y="-130" width="20" height="180" fill={palLocal[0]} />
          <polygon points="-10,-130 0,-160 10,-130" fill={palLocal[1]} />
          <rect x="-30" y="50" width="60" height="80" rx="6" fill={palLocal[2]} />
        </g>
      )}
      {mat.cat === 'Nutrizione' && (
        <g transform="translate(200 200)">
          <rect x="-60" y="-110" width="120" height="200" rx="6" fill={palLocal[0]} />
          <rect x="-50" y="-90" width="100" height="40" fill={palLocal[3]} opacity=".9" />
          <text x="0" y="-65" textAnchor="middle" fontSize="14" fill={palLocal[0]} fontFamily="monospace">BIO</text>
          <rect x="-25" y="-120" width="50" height="20" rx="2" fill={palLocal[2]} />
        </g>
      )}
    </svg>
  );
};

// ============ Diario ============
const POSTS = [
  { id: 1, num: '06', title: 'Acclimatazione: i primi 10 giorni delle piante da spedizione', cat: 'Cura', date: '24 Apr 2026', read: '5 min', excerpt: 'Le nuove Sonerila e Begonia arrivano lunedì. Cosa fare e — soprattutto — cosa NON fare nei primi dieci giorni: niente rinvasi, niente fertilizzanti, solo umidità costante e luce indiretta.', author: 'Florilegio' },
  { id: 2, num: '05', title: 'Le mie ricette di substrato, per pianta', cat: 'Substrati', date: '18 Apr 2026', read: '7 min', excerpt: 'Sphagnum, perlite, bark, biochar, chips di cocco. Per Sonerila/Sarcopyramis: 50/30/10/10. Per Alocasia: 25/25/20/15/10/5. Per Begonia: 40/30/20/10. Tutte le formule che uso in vivaio.', author: 'Florilegio' },
  { id: 3, num: '04', title: 'Sonerila Glowing Lines: vale i 65 euro?', cat: 'Specie', date: '11 Apr 2026', read: '6 min', excerpt: 'Le micro-melastomataceae con nervature iridescenti stanno conquistando i terraristi. Costano care e sono delicate. Riflessione onesta su quando vale la pena.', author: 'Florilegio' },
  { id: 4, num: '03', title: 'Cinque piante baby: cosa è arrivato in vivaio', cat: 'Recensione', date: '02 Apr 2026', read: '4 min', excerpt: 'Alocasia Black Velvet Pink Albo, Frydek Variegata, Infernalis, Begonia Rex Fireworks, Monstera Thai Constellation. Cinque piante giovani da acclimatare: cosa mi aspetto da ognuna e quali temo di più.', author: 'Florilegio' },
  { id: 5, num: '02', title: 'Il vivaio in 80x37 cm: come l\'ho costruito', cat: 'Setup', date: '20 Mar 2026', read: '8 min', excerpt: 'Una vetrina chiusa, quattro barre LED e un timer. Come ho ricavato un vivaio domestico per 15+ piante madri da un mobile da soggiorno, e cosa rifarei diversamente.', author: 'Florilegio' },
  { id: 6, num: '01', title: 'Manifesto: perché apro Florilegio', cat: 'Editoriale', date: '12 Mar 2026', read: '6 min', excerpt: 'Tre piante madri (Philodendron Micans, Begonia Maculata, Pilea Moon Valley), un piano a sei mesi, e l\'idea di un vivaio piccolo che documenta tutto. Break-even previsto al mese 6–10.', author: 'Florilegio' },
];

// Lettura di un singolo articolo. Il pulsante "Leggi articolo" e le anteprime
// non avevano alcun gestore: erano elementi morti, e non esisteva una vista in
// cui aprire il testo. Il campo `body` è opzionale: finché non c'è, l'articolo
// si apre comunque e dichiara con onestà che il testo completo non è pronto,
// invece di far cliccare a vuoto.
const ArticoloDiario = ({ post, onIndietro }) => (
  <main className="page">
    <button className="link-btn" style={{ marginBottom: 20 }} onClick={onIndietro}>
      <Icon name="arrow_left" size={14} /> Torna al diario
    </button>
    <article className="articolo">
      <div className="mono articolo-meta">
        N.{post.num} · {post.cat} · {post.date}{post.body ? ` · ${post.read} di lettura` : ''}
      </div>
      <h1 className="serif articolo-titolo">{post.title}</h1>
      <div className="articolo-firma mono">di {post.author}</div>
      <div className="articolo-copertina"><PostArt id={post.id} large /></div>
      <p className="articolo-occhiello">{post.excerpt}</p>
      {post.body ? (
        <div className="articolo-corpo">
          {post.body.split('\n\n').map((par, i) => <p key={i}>{par}</p>)}
        </div>
      ) : (
        <div className="articolo-attesa">
          <strong>Il testo completo non è ancora pubblicato.</strong>
          <p>
            Quello che leggi sopra è l’anteprima di un articolo in preparazione.
            Iscriviti alla newsletter dal fondo pagina per sapere quando esce.
          </p>
        </div>
      )}
    </article>
  </main>
);

const DiarioPage = () => {
  const [activeCat, setActiveCat] = useState('Tutti');
  const [aperto, setAperto] = useState(null);
  const cats = ['Tutti', ...new Set(POSTS.map(p => p.cat))];
  const filtered = activeCat === 'Tutti' ? POSTS : POSTS.filter(p => p.cat === activeCat);
  const featured = filtered[0];
  const rest = filtered.slice(1);

  // Aprendo un articolo si torna in cima: senza, si arriva a metà pagina
  useEffect(() => { if (aperto) window.scrollTo({ top: 0, behavior: 'smooth' }); }, [aperto]);

  if (aperto) {
    const post = POSTS.find(p => p.id === aperto);
    if (post) return <ArticoloDiario post={post} onIndietro={() => setAperto(null)} />;
  }

  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Diario"
        title={<>Note dal <em>vivaio</em>.</>}
        sub="Appunti di coltivazione, recensioni di specie, riflessioni sul mestiere botanico. Pubblicato a cadenza irregolare quando c'è qualcosa di vero da dire."
      />
      <div className="toolbar" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="chip-row">
          {cats.map(c => (
            <button key={c} className={`chip ${activeCat === c ? 'active' : ''}`} onClick={() => setActiveCat(c)}>{c}</button>
          ))}
        </div>
        <div className="mono" style={{ color: 'var(--ink-mute)' }}>{filtered.length} articoli</div>
      </div>

      {featured && (
        <article className="post-feature">
          <div className="post-feature-img">
            <PostArt id={featured.id} large />
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 12 }}>
              N.{featured.num} · {featured.cat} · {featured.date} · {featured.read} di lettura
            </div>
            <h2 className="post-title-feature">{featured.title}</h2>
            <p className="post-excerpt">{featured.excerpt}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 24 }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--leaf)', color: '#fff', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontSize: '.95rem' }}>
                {featured.author.split(' ').map(s => s[0]).join('')}
              </div>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem' }}>{featured.author}</div>
                <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: '.6rem' }}>Vivaista</div>
              </div>
              <button className="btn-primary" style={{ marginLeft: 'auto', minWidth: 180 }}
                onClick={() => setAperto(featured.id)}>
                Leggi articolo <Icon name="arrow" size={14} />
              </button>
            </div>
          </div>
        </article>
      )}

      <div className="posts-grid">
        {rest.map(p => (
          <article key={p.id} className="post-card" style={{ cursor: 'pointer' }}
            onClick={() => setAperto(p.id)}
            tabIndex={0} role="button"
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setAperto(p.id); } }}>
            <div className="post-img"><PostArt id={p.id} /></div>
            <div className="post-body">
              <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>N.{p.num} · {p.cat}</div>
              <h3 className="post-title">{p.title}</h3>
              <p className="post-excerpt-sm">{p.excerpt}</p>
              <div className="post-meta">
                <span className="mono">{p.date} · {p.read}</span>
                <span className="mono" style={{ color: 'var(--ink-soft)' }}>{p.author}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </main>
  );
};

const PostArt = ({ id, large }) => {
  const palettes = [
    ['#3a5a3a', '#6b8a4a', '#c79a3a', '#ede4ce'],
    ['#4a3a5a', '#a03a6b', '#c87fa3', '#ede4ce'],
    ['#3a4a52', '#6b7a85', '#b8502e', '#ede4ce'],
    ['#6b503a', '#a08560', '#c79a3a', '#f4e8cc'],
    ['#1a2018', '#3a5a3a', '#d97a56', '#ede4ce'],
    ['#2a3a4a', '#4a5a6b', '#b8502e', '#cdc4b0'],
  ];
  const p = palettes[(id - 1) % palettes.length];
  const r = (n) => ((id * (n + 7) * 9301 + 49297) % 233280) / 233280;
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill={p[3]} />
      {[...Array(8)].map((_, i) => {
        const x = r(i) * 400;
        const y = r(i + 9) * 300;
        const sz = 60 + r(i + 17) * 100;
        return (
          <ellipse
            key={i}
            cx={x} cy={y}
            rx={sz * 0.4} ry={sz}
            fill={p[i % 3]} opacity={0.5 + r(i + 21) * 0.4}
            transform={`rotate(${r(i + 33) * 360} ${x} ${y})`}
          />
        );
      })}
      <rect width="400" height="300" fill={p[0]} opacity=".05" />
    </svg>
  );
};

// ============ Chi siamo ============
const ChiSiamoPage = () => (
  <main className="page">
    <PageHead
      eyebrow="Sezione · Chi siamo"
      title={<>Un vivaio piccolo,<br />una botanica <em>onesta</em>.</>}
      sub="Florilegio è un progetto domestico nato a Milano nel 2026. Tre piante madri, una vetrina chiusa, l'idea di documentare ogni passo della propagazione e vendere solo quello che cresce bene a casa mia."
    />

    <section className="manifest-band">
      <div className="manifest-grid">
        <div className="manifest-item">
          <div className="manifest-num serif">01</div>
          <h3>Schede scritte in vivaio</h3>
          <p>Luce, umidità, temperatura e substrato di ogni pianta sono quelli che uso davvero, non ripresi da un catalogo. Puoi filtrare per le condizioni di casa tua ed escludere in partenza le specie che da te soffrirebbero.</p>
        </div>
        <div className="manifest-item">
          <div className="manifest-num serif">02</div>
          <h3>Propagazione interna</h3>
          <p>Le talee del catalogo vengono dalle mie piante madri. Conosco i tempi reali di radicazione perché le ho fatte radicare io.</p>
        </div>
        <div className="manifest-item">
          <div className="manifest-num serif">03</div>
          <h3>Niente piante che non coltivo</h3>
          <p>Non vendo specie che non ho mai tenuto. Se trovi una pianta a catalogo è perché è in vivaio o sta arrivando da fornitori che conosco.</p>
        </div>
        <div className="manifest-item">
          <div className="manifest-num serif">04</div>
          <h3>Spedizione termica</h3>
          <p>Confezionamento isotermico, busta calore in inverno, tracking aggiornato. Spedizioni il martedì per arrivo entro venerdì.</p>
        </div>
      </div>
    </section>

    <section className="team-section">
      <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 12 }}>Le persone</div>
      <h2 className="page-title" style={{ fontSize: 'clamp(2rem, 4vw, 3.4rem)', marginBottom: 40 }}>Il vivaio</h2>
      <div className="team-grid" style={{ gridTemplateColumns: '1fr', maxWidth: 600 }}>
        <div className="team-card">
          <div className="team-portrait">
            <svg viewBox="0 0 200 240" preserveAspectRatio="xMidYMid slice">
              <rect width="200" height="240" fill="#ede4ce" />
              <circle cx="100" cy="92" r="44" fill="#3a5a3a" />
              <path d="M 30 240 L 30 200 Q 30 150 100 150 Q 170 150 170 200 L 170 240 Z" fill="#3a5a3a" />
            </svg>
          </div>
          <h3 className="serif" style={{ fontSize: '1.4rem', marginTop: 14 }}>Florilegio</h3>
          <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 10 }}>Vivaio domestico · Milano</div>
          <p style={{ color: 'var(--ink-soft)', fontSize: '.88rem' }}>Botanica autodidatta, attenzione ossessiva alle Begonia rare, alle Aracee da sottobosco e alle micro-melastomatacee. Setup in casa, spedizioni dal martedì. Documento tutto su Instagram.</p>
        </div>
      </div>
    </section>

  </main>
);

// ============ Contatti ============
const ContattiPage = () => {
  const [form, setForm] = useState({ name: '', email: '', subject: 'general', message: '' });
  const [sent, setSent] = useState(false);
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setBusy(true); setErr('');
    try {
      const r = await fetch('/api/messages', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || 'Invio non riuscito');
      setSent(true);
      setForm({ name: '', email: '', subject: 'general', message: '' });
      setTimeout(() => setSent(false), 6000);
    } catch (e) {
      setErr(e.message + ' — puoi scrivere direttamente a info@florilegio.online');
    } finally { setBusy(false); }
  };
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Contatti"
        title={<>Scrivici. Rispondiamo<br />in <em>24 ore</em>.</>}
        sub="Domande sul catalogo, richieste di specie, problemi con un ordine, collaborazioni. Il vivaio risponde personalmente — niente bot, niente ticketing system."
      />
      <div className="contact-grid">
        <form onSubmit={submit} className="contact-form">
          <div className="field">
            <label>Nome</label>
            <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
          </div>
          <div className="field">
            <label>Email</label>
            <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} required />
          </div>
          <div className="field">
            <label>Oggetto</label>
            <select value={form.subject} onChange={e => setForm({ ...form, subject: e.target.value })}>
              <option value="general">Domanda generale</option>
              <option value="order">Problema con un ordine</option>
              <option value="species">Richiesta di una specie</option>
              <option value="wholesale">Vendita all'ingrosso</option>
              <option value="press">Stampa & collaborazioni</option>
            </select>
          </div>
          <div className="field">
            <label>Messaggio</label>
            <textarea rows="6" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} required style={{ padding: '12px 14px', border: '1px solid var(--line)', borderRadius: 2, background: '#fff', fontFamily: 'inherit', fontSize: '.92rem', resize: 'vertical' }} />
          </div>
          {err && <div className="auth-error" style={{ marginBottom: 14 }} role="alert">{err}</div>}
          {sent && (
            <div className="form-success" role="status">
              <Icon name="check" size={16} />
              <span>Messaggio ricevuto. Ti rispondo entro 24 ore all'indirizzo che hai indicato.</span>
            </div>
          )}
          <button type="submit" className="btn-primary" style={{ minWidth: 200 }} disabled={busy || sent}>
            {busy ? 'Invio…' : sent ? <><Icon name="check" size={14} /> Inviato</> : 'Invia messaggio'}
          </button>
        </form>
        <aside className="contact-info">
          <div className="contact-block">
            <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>Vivaio</div>
            <div className="serif" style={{ fontSize: '1.4rem', lineHeight: 1.2 }}>Milano · IT</div>
            <p style={{ color: 'var(--ink-soft)', fontSize: '.85rem', marginTop: 10 }}>
              Vivaio domestico, ritiro su appuntamento. Spedizioni il martedì in tutta Italia.
            </p>
          </div>
          <div className="contact-block">
            <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>Email</div>
            <a className="serif" href="mailto:info@florilegio.online" style={{ fontSize: '1.2rem', textDecoration: 'underline' }}>info@florilegio.online</a>
            <div className="mono" style={{ color: 'var(--ink-mute)', marginTop: 4, fontSize: '.62rem' }}>Risposta entro 24h</div>
          </div>
          <div className="contact-block">
            <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>Instagram</div>
            <a className="serif" href="https://instagram.com/florilegio.vivaio" target="_blank" rel="noopener noreferrer"
               style={{ fontSize: '1.2rem', textDecoration: 'underline' }}>@florilegio.vivaio</a>
            <div className="mono" style={{ color: 'var(--ink-mute)', marginTop: 4, fontSize: '.62rem' }}>Aggiornamenti dal vivaio</div>
          </div>
        </aside>
      </div>
    </main>
  );
};

Object.assign(window, { PropagazionePage, MaterialiPage, DiarioPage, ChiSiamoPage, ContattiPage });

// ============ Wishlist ============
const WishlistPage = ({ saved, onOpenPlant, onAdd, onRemove, onNav }) => {
  const items = saved.map(id => CATALOG.plants.find(p => p.id === id)).filter(Boolean);
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Wishlist"
        title={<>Le tue piante <em>salvate</em>.</>}
        sub="Tutte le specie che hai messo da parte. Aggiungile al carrello quando sei pronto, oppure rimuovile dalla lista."
      />
      {items.length === 0 ? (
        <div style={{ padding: '120px 20px', textAlign: 'center' }}>
          <div className="serif" style={{ fontSize: '2rem', marginBottom: 12 }}>Nessuna pianta salvata</div>
          <div style={{ color: 'var(--ink-mute)', maxWidth: '50ch', margin: '0 auto 28px' }}>
            Sfoglia il catalogo e tocca il cuore sulle piante che ti interessano. Le ritrovi qui.
          </div>
          <button className="btn-primary" onClick={() => onNav('Catalogo')}>Vai al catalogo <Icon name="arrow" size={14} /></button>
        </div>
      ) : (
        <div className="materials-grid" style={{ marginTop: 32 }}>
          {items.map((p, i) => {
            const cat = CATALOG.categories.find(c => c.id === p.cat);
            return (
              <article key={p.id} className="mat-card">
                <div className="mat-img" style={{ cursor: 'pointer' }} onClick={() => onOpenPlant(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} · {p.family}</div>
                  <h3 className="card-name" style={{ cursor: 'pointer' }} onClick={() => onOpenPlant(p)}>{p.name}</h3>
                  <p style={{ color: 'var(--ink-soft)', fontSize: '.85rem', margin: '8px 0 14px', flex: 1 }}>{(p.notes || '').substring(0, 110)}…</p>
                  <div className="card-foot" style={{ marginTop: 'auto' }}>
                    <div className="card-price">{priceRange(p)}</div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button className="card-add" title="Rimuovi" onClick={() => onRemove(p)} style={{ background: 'transparent', border: '1px solid var(--line)', color: 'var(--ink)' }}>
                        <Icon name="close" size={14} />
                      </button>
                      <button className="card-add" title="Aggiungi al carrello" onClick={() => onAdd(p)}>
                        <Icon name="plus" size={16} />
                      </button>
                    </div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      )}
    </main>
  );
};

// ============ FAQ ============
const FAQ_ITEMS = [
  { q: 'Quanto ci mettono ad arrivare le piante?', a: 'Spedisco il martedì in tutta Italia con corriere espresso (24–48h). Confezionamento isotermico, busta termica in inverno. Spedizione gratuita oltre €150.' },
  { q: 'Come confezioni le piante per il viaggio?', a: 'Substrato leggermente umido, foglie protette con velina, vaso fissato con cartone, scatola interna. In inverno aggiungo busta termica autoriscaldante 24h. In tre anni di spedizioni: 0 piante arrivate morte.' },
  { q: 'Cosa succede quando arriva la pianta?', a: 'Acclimatazione 7–10 giorni: NON rinvasare, NON fertilizzare, NON spostare. Lasciala dove arriva, in luce indiretta, umidità alta. Solo dopo, gradualmente, sposta nella posizione definitiva.' },
  { q: 'Le talee sono già radicate?', a: 'Sì. Vendo solo talee con apparato radicale visibile (>3 cm) o plantule già autonome. Niente talee in acqua appena tagliate. Le foto del prodotto mostrano sempre lo stato reale.' },
  { q: 'Cos\'è la "garanzia attecchimento"?', a: 'Per il primo acquisto, se la pianta non attecchisce entro 30 giorni seguendo la mia scheda di cura, la sostituisco gratis o rimborso. Vale solo per piante con scheda tecnica completa, non per ordini multipli.' },
  { q: 'Pagamenti: quali metodi accetti?', a: 'Carta di credito/debito (Visa, Mastercard, Amex), PayPal, bonifico bancario per ordini >€100. Tutti i pagamenti sono cifrati. Non conservo dati delle carte.' },
  { q: 'Spedite all\'estero?', a: 'Per ora solo Italia. Le piante tropicali soffrono i tempi lunghi delle spedizioni intracomunitarie. Sto valutando un servizio per Svizzera e Austria con corriere espresso refrigerato.' },
  { q: 'Posso ritirare di persona?', a: 'Sì, su appuntamento a Milano. Scrivimi a info@florilegio.online indicando l\'ordine e ti propongo qualche fascia oraria.' },
  { q: 'Le piante "in arrivo" quando saranno disponibili?', a: 'Stato aggiornato in tempo reale sul catalogo. Le specie in arrivo dai vivai partner sono attese fra inizio e metà maggio 2026. Dopo arrivano in vivaio per l\'acclimatazione di 7–10 giorni, poi diventano spedibili.' },
  { q: 'Posso prenotare una talea che è in propagazione?', a: 'Sì, con caparra del 30%. Ti mando una foto ogni 2 settimane fino a quando la talea è pronta. Tempi medi: 3–6 settimane per Aracee, 6–10 per Begonia da foglia.' },
];

const FAQPage = () => {
  const [open, setOpen] = useState(0);
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · FAQ"
        title={<>Domande <em>frequenti</em>.</>}
        sub="Tutto quello che mi chiedete più spesso. Se non trovi la risposta, scrivetemi a info@florilegio.online: rispondo entro 24h."
      />
      <div className="faq-list">
        {FAQ_ITEMS.map((item, i) => (
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="mono faq-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="serif faq-q-text">{item.q}</span>
              <span className="faq-toggle"><Icon name={open === i ? 'minus' : 'plus'} size={14} /></span>
            </button>
            {open === i && <div className="faq-a">{item.a}</div>}
          </div>
        ))}
      </div>
    </main>
  );
};

// ============ Order Tracking ============
const OrdiniPage = ({ onNav }) => {
  const [orders, setOrders] = useState(() => {
    try { return JSON.parse(localStorage.getItem('florilegio-orders') || '[]'); } catch { return []; }
  });
  const [trackingId, setTrackingId] = useState('');
  const [trackResult, setTrackResult] = useState(null);
  const track = (e) => {
    e.preventDefault();
    const found = orders.find(o => o.id.toLowerCase() === trackingId.trim().toLowerCase());
    setTrackResult(found || 'notfound');
  };
  const STAGES = [
    { id: 'pagato', label: 'Pagato', desc: 'Ordine ricevuto e confermato' },
    { id: 'preparazione', label: 'In preparazione', desc: 'Pianta in fase di confezionamento' },
    { id: 'spedito', label: 'Spedito', desc: 'Consegnato al corriere espresso' },
    { id: 'consegnato', label: 'Consegnato', desc: 'Pacco arrivato a destinazione' },
  ];
  const stageFor = (order) => {
    const days = (Date.now() - new Date(order.date || Date.now()).getTime()) / 86400000;
    if (days < 1) return 0;
    if (days < 3) return 1;
    if (days < 5) return 2;
    return 3;
  };
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Ordini"
        title={<>Traccia il tuo <em>ordine</em>.</>}
        sub="Inserisci il codice ordine ricevuto via email. Lo stato si aggiorna automaticamente in base alle tempistiche del corriere."
      />
      <form onSubmit={track} className="track-form">
        <input
          placeholder="FLR-2026-XXXXXX"
          value={trackingId}
          onChange={(e) => setTrackingId(e.target.value)}
          required
        />
        <button type="submit" className="btn-primary">Traccia <Icon name="arrow" size={14} /></button>
      </form>

      {trackResult === 'notfound' && (
        <div className="track-card track-empty">
          <div className="serif" style={{ fontSize: '1.4rem', marginBottom: 8 }}>Ordine non trovato</div>
          <div style={{ color: 'var(--ink-soft)' }}>Verifica che il codice sia corretto. Se il problema persiste, scrivimi a info@florilegio.online.</div>
        </div>
      )}

      {trackResult && trackResult !== 'notfound' && (() => {
        const stage = stageFor(trackResult);
        return (
          <div className="track-card">
            <div className="track-head">
              <div>
                <div className="mono" style={{ color: 'var(--ink-mute)' }}>Ordine</div>
                <div className="serif" style={{ fontSize: '1.6rem' }}>{trackResult.id}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="mono" style={{ color: 'var(--ink-mute)' }}>Totale</div>
                <div className="serif" style={{ fontSize: '1.6rem' }}>€{trackResult.total}</div>
              </div>
            </div>
            <div className="track-stages">
              {STAGES.map((s, i) => (
                <div key={s.id} className={`track-stage ${i <= stage ? 'done' : ''} ${i === stage ? 'current' : ''}`}>
                  <div className="track-dot">{i <= stage ? <Icon name="check" size={12} /> : <span>{i + 1}</span>}</div>
                  <div>
                    <div className="serif" style={{ fontSize: '1.05rem' }}>{s.label}</div>
                    <div style={{ color: 'var(--ink-mute)', fontSize: '.82rem' }}>{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })()}

      <div className="track-history">
        <h3 className="serif" style={{ fontSize: '1.6rem', marginBottom: 18 }}>Tutti i tuoi ordini</h3>
        {orders.length === 0 ? (
          <div style={{ padding: '40px 0', color: 'var(--ink-mute)' }}>
            Nessun ordine ancora. <button className="link-btn" onClick={() => onNav('Catalogo')}>Vai al catalogo →</button>
          </div>
        ) : (
          orders.map(o => (
              <button key={o.id} className="account-row" onClick={() => { setTrackingId(o.id); setTrackResult(o); window.scrollTo({ top: 200, behavior: 'smooth' }); }}>
              <div>
                <div className="serif" style={{ fontSize: '1.05rem' }}>{o.id}</div>
                <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: '.65rem' }}>{new Date(o.date).toLocaleDateString('it-IT')} · {o.items.length} articol{o.items.length === 1 ? 'o' : 'i'}</div>
              </div>
              <div className="serif">€{o.total}</div>
            </button>
          ))
        )}
      </div>
    </main>
  );
};

// ============ Newsletter ============
const Newsletter = () => {
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  const [err, setErr] = useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setErr('');
    try {
      const r = await fetch('/api/newsletter', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || 'Iscrizione non riuscita');
      setDone(true);
      setTimeout(() => { setDone(false); setEmail(''); }, 5000);
    } catch (e) { setErr(e.message); }
  };
  return (
    <section className="newsletter">
      <div className="newsletter-inner">
        <div className="newsletter-text">
          <div className="mono" style={{ color: 'rgba(244,240,232,.6)', marginBottom: 14 }}>Newsletter · una al mese</div>
          <h2 className="newsletter-title">
            Una lettera dal vivaio,<br />ogni <em>luna piena</em>.
          </h2>
          <p className="newsletter-sub">
            Nuovi arrivi, talee disponibili, recensioni di specie, foto del setup. Niente spam, niente automazioni — la scrivo a mano una volta al mese.
          </p>
        </div>
        <form onSubmit={submit} className="newsletter-form">
          <input
            type="email"
            placeholder="la-tua@email.it"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            aria-label="Il tuo indirizzo email"
            required
          />
          <button type="submit" disabled={done}>
            {done ? <><Icon name="check" size={14} /> Iscritto</> : <>Iscriviti <Icon name="arrow" size={14} /></>}
          </button>
        </form>
        {err && <div className="newsletter-msg err">{err}</div>}
        {done && <div className="newsletter-msg">Grazie! Ti avviso quando arrivano nuove piante.</div>}
      </div>
    </section>
  );
};

Object.assign(window, { WishlistPage, FAQPage, OrdiniPage, Newsletter });