// Extras 2: Mobile menu, Reviews, Comparator, Plant of month, Gallery, Linktree, SEO

// ============ Mobile Menu ============
const MobileMenu = ({ open, onClose, activeSection, onNav }) => {
  const links = ['Catalogo', 'Bundle', 'Ambiente', 'Materiali', 'Propagazione', 'Diario', 'Galleria', 'Prenotazioni', 'FAQ', 'Chi siamo', 'Contatti'];
  return (
    <>
      <div className={`mobile-menu-bg ${open ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`mobile-menu ${open ? 'open' : ''}`}>
        <div className="mobile-menu-head">
          <div className="serif" style={{ fontSize: '1.4rem' }}>Menu</div>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={16} /></button>
        </div>
        <nav className="mobile-menu-nav">
          {links.map(n => (
            <button key={n} className={`mobile-menu-link ${activeSection === n ? 'active' : ''}`} onClick={() => { onNav(n); onClose(); }}>
              <span className="serif">{n}</span>
              <Icon name="arrow" size={14} />
            </button>
          ))}
        </nav>
        <div className="mobile-menu-foot">
          <button className="link-btn" onClick={() => { onNav('Termini'); onClose(); }}>Termini</button>
          <button className="link-btn" onClick={() => { onNav('Privacy'); onClose(); }}>Privacy</button>
          <button className="link-btn" onClick={() => { onNav('Resi'); onClose(); }}>Resi</button>
        </div>
      </aside>
    </>
  );
};

// ============ Reviews ============
const SAMPLE_REVIEWS = [
  { plantId: 'philo-micans', name: 'Lucia M.', rating: 5, date: '12 Apr 2026', months: 8, text: 'Ricevuta perfetta dopo 36h, foglie un po\' arrotolate ma riprese in 3 giorni. Ora ha 4 foglie nuove con il velluto bronzato che è un sogno.' },
  { plantId: 'philo-micans', name: 'Andrea P.', rating: 5, date: '02 Apr 2026', months: 4, text: 'La consiglio a chiunque inizi con i Philodendron. Cresce bene anche con luce media.' },
  { plantId: 'beg-maculata', name: 'Sara T.', rating: 4, date: '20 Mar 2026', months: 6, text: 'Bellissime macchie bianche, fiorita due volte. Soffre se l\'aria è troppo secca, ho dovuto aggiungere umidificatore.' },
  { plantId: 'pilea-mv', name: 'Giulia F.', rating: 5, date: '18 Mar 2026', months: 12, text: 'Resistente, fa plantule a non finire. La mia preferita per regalare ai principianti.' },
];

const Reviews = ({ plantId }) => {
  const reviews = SAMPLE_REVIEWS.filter(r => r.plantId === plantId);
  if (reviews.length === 0) {
    return (
      <div className="reviews-empty">
        <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 8 }}>Recensioni</div>
        <div className="serif" style={{ fontSize: '1.1rem', color: 'var(--ink-soft)' }}>Nessuna recensione ancora. Sii il primo a recensirla dopo l'acquisto.</div>
      </div>
    );
  }
  const avg = (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1);
  return (
    <div className="reviews-section">
      <div className="reviews-head">
        <div>
          <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 6 }}>Recensioni clienti</div>
          <div className="reviews-rating">
            <span className="serif" style={{ fontSize: '2rem' }}>{avg}</span>
            <span className="stars">{'★'.repeat(Math.round(avg))}{'☆'.repeat(5 - Math.round(avg))}</span>
            <span className="mono" style={{ color: 'var(--ink-mute)' }}>{reviews.length} recension{reviews.length === 1 ? 'e' : 'i'}</span>
          </div>
        </div>
      </div>
      {reviews.map((r, i) => (
        <div key={i} className="review">
          <div className="review-head">
            <div className="serif" style={{ fontSize: '1.05rem' }}>{r.name}</div>
            <div className="stars">{'★'.repeat(r.rating)}{'☆'.repeat(5 - r.rating)}</div>
          </div>
          <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: '.65rem', marginBottom: 10 }}>{r.date} · ce l'ha da {r.months} mesi</div>
          <p style={{ color: 'var(--ink-soft)', fontSize: '.92rem', lineHeight: 1.6 }}>{r.text}</p>
        </div>
      ))}
    </div>
  );
};

// ============ Comparator ============
const ComparePage = ({ onOpenPlant, onNav }) => {
  const [selected, setSelected] = useState(() => {
    try { return JSON.parse(localStorage.getItem('florilegio-compare') || '[]'); } catch { return []; }
  });
  useEffect(() => { localStorage.setItem('florilegio-compare', JSON.stringify(selected)); }, [selected]);

  const sellable = CATALOG.plants.filter(p => p.status !== 'material');
  const toggle = (id) => setSelected(s => s.includes(id) ? s.filter(i => i !== id) : s.length < 3 ? [...s, id] : s);
  const items = selected.map(id => CATALOG.plants.find(p => p.id === id)).filter(Boolean);

  return (
    <main className="page">
      <PageHead
        eyebrow="Strumento · Confronto"
        title={<>Confronta fino a <em>3 piante</em>.</>}
        sub="Selezionale dal catalogo qui sotto. Le confronti su cure, difficoltà, dimensioni e prezzo, una accanto all'altra."
      />

      <div className="cmp-picker">
        <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 16 }}>Seleziona piante ({selected.length}/3)</div>
        <div className="cmp-options">
          {sellable.map(p => (
            <button
              key={p.id}
              className={`cmp-opt ${selected.includes(p.id) ? 'active' : ''}`}
              onClick={() => toggle(p.id)}
              disabled={!selected.includes(p.id) && selected.length >= 3}
            >
              {selected.includes(p.id) && <span className="cmp-num">{selected.indexOf(p.id) + 1}</span>}
              <div className="serif" style={{ fontSize: '.9rem' }}>{p.name}</div>
              <div className="mono" style={{ fontSize: '.6rem', color: 'var(--ink-mute)' }}>{p.family}</div>
            </button>
          ))}
        </div>
      </div>

      {items.length > 0 && (
        <div className="cmp-table">
          <div className="cmp-row cmp-row-head">
            <div></div>
            {items.map(p => (
              <div key={p.id} className="cmp-cell-head">
                <div className="serif" style={{ fontSize: '1.4rem', marginBottom: 6 }}>{p.name}</div>
                <div className="mono" style={{ color: 'var(--ink-mute)' }}>{p.family}</div>
                <button className="link-btn" style={{ marginTop: 10 }} onClick={() => onOpenPlant(p)}>Vedi scheda →</button>
              </div>
            ))}
          </div>
          {[
            ['Origine', p => p.origin],
            ['Prezzo', p => priceRange(p)],
            ['Tier', p => TIERS[p.tier].label],
            ['Disponibilità', p => p.stock + ' pezzi · ' + (p.status === 'available' ? 'Spedibile' : p.status === 'incoming' ? 'In arrivo' : 'In propagazione')],
            ['Luce', p => (p.cura?.luce || 'Filtrata indiretta')],
            ['Acqua', p => (p.cura?.acqua || 'Quando il substrato è quasi asciutto')],
            ['Umidità', p => (p.cura?.umidita || '60% +')],
            ['Difficoltà', p => '★'.repeat(p.tier === 'base' ? 1 : p.tier === 'mid' ? 2 : 3) + '☆'.repeat(p.tier === 'base' ? 2 : p.tier === 'mid' ? 1 : 0)],
          ].map(([label, fn]) => (
            <div key={label} className="cmp-row">
              <div className="cmp-label mono">{label}</div>
              {items.map(p => <div key={p.id} className="cmp-cell">{fn(p)}</div>)}
            </div>
          ))}
        </div>
      )}

      {items.length === 0 && (
        <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--ink-mute)' }}>
          Seleziona almeno una pianta dal listino sopra per iniziare il confronto.
        </div>
      )}
    </main>
  );
};

// ============ Plant of the Month ============
const PlantOfMonth = ({ onOpenPlant }) => {
  const sellable = CATALOG.plants.filter(p => p.tier === 'mid' || p.tier === 'premium');
  const month = new Date().getMonth();
  const featured = sellable[month % sellable.length] || sellable[0];
  if (!featured) return null;
  return (
    <section className="potm" onClick={() => onOpenPlant(featured)}>
      <div className="potm-img">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
          <rect width="600" height="600" fill="#3a5a3a" />
          {[...Array(8)].map((_, i) => {
            const a = (i / 8) * Math.PI * 2;
            return <ellipse key={i} cx={300 + Math.cos(a) * 120} cy={300 + Math.sin(a) * 120} rx="80" ry="160" fill="#5a7a4a" opacity=".7" transform={`rotate(${i * 45} ${300 + Math.cos(a) * 120} ${300 + Math.sin(a) * 120})`} />;
          })}
          <circle cx="300" cy="300" r="40" fill="#c79a3a" opacity=".3" />
        </svg>
      </div>
      <div className="potm-content">
        <div className="mono potm-tag">Pianta del mese · {new Date().toLocaleDateString('it-IT', { month: 'long', year: 'numeric' })}</div>
        <h2 className="potm-title serif">{featured.name}</h2>
        <div className="mono potm-fam">{featured.family} · {featured.origin}</div>
        <p className="potm-notes">{(featured.notes || '').substring(0, 220)}…</p>
        <div className="potm-foot">
          <div className="serif" style={{ fontSize: '1.6rem' }}>{priceRange(featured)}</div>
          <button className="btn-primary">Scopri la pianta <Icon name="arrow" size={14} /></button>
        </div>
      </div>
    </section>
  );
};

// ============ Gallery ============
const GALLERY = [
  { id: 1, title: 'La vetrina del vivaio · setup attuale', tag: 'Setup' },
  { id: 2, title: 'Philodendron Micans, foglia nuova', tag: 'Madre' },
  { id: 3, title: 'Begonia Maculata in fioritura', tag: 'Madre' },
  { id: 4, title: 'Pilea Moon Valley con plantule', tag: 'Propagazione' },
  { id: 5, title: 'Talee in radicazione · Aprile 2026', tag: 'Propagazione' },
  { id: 6, title: 'Le lampade LED in azione', tag: 'Setup' },
  { id: 7, title: 'Substrati pre-mixati pronti', tag: 'Substrati' },
  { id: 8, title: 'Vasi trasparenti KAHEIGN', tag: 'Setup' },
  { id: 9, title: 'Sphagnum cileno idratato', tag: 'Substrati' },
];

const GalleryPage = () => {
  const [filter, setFilter] = useState('Tutti');
  const tags = ['Tutti', ...new Set(GALLERY.map(g => g.tag))];
  const items = filter === 'Tutti' ? GALLERY : GALLERY.filter(g => g.tag === filter);
  return (
    <main className="page">
      <PageHead
        eyebrow="Sezione · Galleria"
        title={<>Il vivaio <em>in foto</em>.</>}
        sub="Foto dal vivaio reale: piante madri, propagazioni, la vetrina, i materiali in uso. Aggiornate ogni settimana."
      />
      <div className="toolbar" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="chip-row">
          {tags.map(t => (
            <button key={t} className={`chip ${filter === t ? 'active' : ''}`} onClick={() => setFilter(t)}>
              {t} <span className="count">{t === 'Tutti' ? GALLERY.length : GALLERY.filter(g => g.tag === t).length}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="gallery-grid">
        {items.map(g => (
          <figure key={g.id} className="gal-item">
            <div className="gal-img">
              <GalleryArt id={g.id} />
              <div className="gal-tag mono">{g.tag}</div>
            </div>
            <figcaption>
              <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: '.62rem' }}>N.{String(g.id).padStart(3, '0')}</div>
              <div className="serif" style={{ fontSize: '1.1rem', marginTop: 4 }}>{g.title}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </main>
  );
};

const GalleryArt = ({ id }) => {
  const palettes = [
    ['#3a5a3a', '#6b8a4a', '#c79a3a'],
    ['#5a4a3a', '#8a7a5a', '#b8502e'],
    ['#3a4a52', '#5a6a72', '#a8b8a8'],
    ['#2a4a3a', '#4a6a4a', '#ede4ce'],
  ];
  const pal = palettes[id % palettes.length];
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="400" fill={pal[0]} />
      {[...Array(12)].map((_, i) => {
        const x = ((i * 53 + id * 17) % 400);
        const y = ((i * 73 + id * 23) % 400);
        const r = 30 + ((i * 7 + id * 11) % 60);
        return <circle key={i} cx={x} cy={y} r={r} fill={pal[i % 3]} opacity={.4 + (i % 4) * .15} />;
      })}
      <circle cx="200" cy="200" r="80" fill={pal[2]} opacity=".3" />
    </svg>
  );
};

// ============ Linktree-style ============
const LinkBioPage = ({ onNav, onOpenPlant }) => {
  const links = [
    { label: 'Catalogo completo', sub: 'Tutte le piante disponibili', to: 'Catalogo', icon: '◐' },
    { label: 'Talee in propagazione', sub: 'Prenota con caparra del 30%', to: 'Prenotazioni', icon: '✦' },
    { label: 'Trova la pianta giusta per te', sub: '3 domande, 9 piante consigliate', to: 'Ambiente', icon: '✧' },
    { label: 'Diario del vivaio', sub: 'Appunti dalla coltivazione', to: 'Diario', icon: '✎' },
    { label: 'Galleria foto', sub: 'Il vivaio in immagini', to: 'Galleria', icon: '◉' },
    { label: 'Kit & Bundle', sub: 'Combinazioni a prezzo combinato', to: 'Bundle', icon: '❋' },
    { label: 'Contattami', sub: 'info@florilegio.online', to: 'Contatti', icon: '@' },
  ];
  return (
    <main className="linktree">
      <div className="lt-head">
        <div className="lt-avatar">
          <svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#3a5a3a" /><circle cx="50" cy="50" r="30" fill="#c79a3a" opacity=".4" /></svg>
        </div>
        <div className="serif lt-name">Florilegio</div>
        <div className="mono lt-handle">@florilegio.vivaio</div>
        <div className="lt-bio">Vivaio domestico a Milano. Begonia rare, Aracee da sottobosco, melastomatacee. Spedizioni il martedì in tutta Italia.</div>
      </div>
      <div className="lt-links">
        {links.map((l, i) => (
          <button key={i} className="lt-link" onClick={() => onNav(l.to)}>
            <div className="lt-link-icon">{l.icon}</div>
            <div style={{ flex: 1, textAlign: 'left' }}>
              <div className="serif lt-link-label">{l.label}</div>
              <div className="mono lt-link-sub">{l.sub}</div>
            </div>
            <Icon name="arrow" size={14} />
          </button>
        ))}
      </div>
      <div className="lt-foot">
        <div className="mono">© 2026 Florilegio · Milano</div>
      </div>
    </main>
  );
};

Object.assign(window, {
  MobileMenu, Reviews, ComparePage, PlantOfMonth, GalleryPage, LinkBioPage,
});