// ---------- Category & All Software pages ----------

function CategoryPage({ category, softwareList, onNav }) {
  const totalAlts = softwareList.reduce((n, s) => n + s.alternative.length, 0);

  React.useEffect(() => {
    const title = `${category.name} — ${softwareList.length} software con alternative gratis | AlternativeGratis.it`;
    const description = `Alternative gratuite e open source nella categoria ${category.name}: ${softwareList.length} software testati con ${totalAlts} alternative gratis confrontate. ${categoryDescription(category.name)}`;
    applyPageSEO({
      title,
      description,
      path: `/categoria/${category.slug}`,
      type: 'website',
      keywords: `${category.name.toLowerCase()} gratis, alternative ${category.name.toLowerCase()}, software ${category.name.toLowerCase()} gratuiti, open source ${category.name.toLowerCase()}`,
    });
    setSchemas([
      collectionPageSchema(
        `${category.name} — Alternative gratis`,
        description,
        `/categoria/${category.slug}`
      ),
      categoryItemList(category, softwareList),
      breadcrumbSchema([
        { name: 'Home', path: '/' },
        { name: category.name, path: `/categoria/${category.slug}` },
      ]),
    ]);
    window.scrollTo({top:0, behavior:'instant'});
  }, [category.slug]);

  return (
    <div className="view">
      <div className="container">
        <nav className="breadcrumbs">
          <a href="#/" onClick={(e)=>{e.preventDefault(); onNav('/');}}>Home</a>
          <span className="sep">/</span>
          <span>{category.name}</span>
        </nav>

        <header style={{padding:'8px 0 32px', borderBottom:'1px solid var(--border)', marginBottom:32, display:'flex', gap:20, alignItems:'flex-start', flexWrap:'wrap'}}>
          <div style={{flex:'1 1 480px'}}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:12}}>
              <span style={{width:52, height:52, borderRadius:12, background:'var(--surface)', border:'1px solid var(--border)', display:'inline-flex', alignItems:'center', justifyContent:'center', color:'var(--accent)'}}>
                <CatIcon name={category.name} />
              </span>
              <div style={{fontSize:13.5, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Categoria</div>
            </div>
            <h1 className="serif" style={{fontSize:'clamp(36px, 5vw, 52px)', margin:'0 0 12px', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.05}}>
              Alternative gratis in <em style={{color:'var(--accent)'}}>{category.name}</em>
            </h1>
            <p style={{fontSize:17, color:'var(--ink-2)', margin:0, maxWidth:620, lineHeight:1.55}}>
              {categoryDescription(category.name)}
            </p>
            <div style={{marginTop:16, fontSize:14, color:'var(--ink-3)'}}>
              <strong style={{color:'var(--ink)'}}>{softwareList.length}</strong> software · <strong style={{color:'var(--ink)'}}>{totalAlts}</strong> alternative gratuite
            </div>
          </div>
        </header>

        <div className="sw-grid">
          {softwareList.map(s => <SoftwareCard key={s.id} sw={s} onNav={onNav} />)}
        </div>
      </div>
    </div>
  );
}

function AllSoftwarePage({ data, categories, onNav }) {
  React.useEffect(() => {
    applyPageSEO({
      title: `Tutti i software — ${data.length} alternative gratis testate | AlternativeGratis.it`,
      description: `Sfoglia tutti i ${data.length} software con alternative gratuite e open source: Photoshop, Notion, Slack, Microsoft Office, Canva, ChatGPT e molti altri. Filtra per categoria.`,
      path: '/software',
      type: 'website',
      keywords: 'alternative gratis software, software gratuiti elenco, software open source italia',
    });
    setSchemas([
      collectionPageSchema(
        'Tutti i software con alternative gratis',
        `Elenco completo di ${data.length} software con alternative gratuite testate.`,
        '/software'
      ),
      {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Tutti i software testati",
        "numberOfItems": data.length,
        "itemListElement": data.map((s, i) => ({
          "@type": "ListItem",
          "position": i + 1,
          "url": SITE_URL + `/alternativa/${s.slug}`,
          "name": `Alternative gratis a ${s.nome}`,
        })),
      },
      breadcrumbSchema([
        { name: 'Home', path: '/' },
        { name: 'Tutti i software', path: '/software' },
      ]),
    ]);
    window.scrollTo({top:0, behavior:'instant'});
  }, [data]);

  const [cat, setCat] = React.useState('Tutte');
  const [q, setQ] = React.useState('');

  const filtered = React.useMemo(() => {
    const needle = q.toLowerCase().trim();
    return data.filter(s => {
      if (cat !== 'Tutte' && s.categoria !== cat) return false;
      if (!needle) return true;
      return s.nome.toLowerCase().includes(needle) ||
             s.descrizione_it.toLowerCase().includes(needle) ||
             (s.sottocategorie||[]).some(x=>x.toLowerCase().includes(needle));
    }).sort((a,b)=>a.nome.localeCompare(b.nome));
  }, [data, cat, q]);

  return (
    <div className="view">
      <div className="container">
        <nav className="breadcrumbs">
          <a href="#/" onClick={(e)=>{e.preventDefault(); onNav('/');}}>Home</a>
          <span className="sep">/</span>
          <span>Tutti i software</span>
        </nav>
        <header style={{padding:'8px 0 28px'}}>
          <h1 className="serif" style={{fontSize:'clamp(36px, 5vw, 52px)', margin:'0 0 12px', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.05}}>
            Tutti i software <em style={{color:'var(--accent)'}}>testati</em>
          </h1>
          <p style={{fontSize:17, color:'var(--ink-2)', margin:'0 0 20px', maxWidth:620}}>
            Esplora tutti i {data.length} software recensiti. Filtra per categoria o cerca per nome.
          </p>
          <div className="searchbar" style={{maxWidth:520}}>
            <Icon.search />
            <input
              type="text" placeholder="Cerca per nome o parola chiave…"
              value={q} onChange={(e)=>setQ(e.target.value)}
            />
          </div>
          <div className="filter-bar">
            <button className={`filter-pill ${cat==='Tutte'?'active':''}`} onClick={()=>setCat('Tutte')}>
              Tutte <span style={{opacity:0.6, marginLeft:4}}>({data.length})</span>
            </button>
            {categories.map(c => (
              <button key={c.slug} className={`filter-pill ${cat===c.name?'active':''}`} onClick={()=>setCat(c.name)}>
                {c.name} <span style={{opacity:0.6, marginLeft:4}}>({c.count})</span>
              </button>
            ))}
          </div>
        </header>

        {filtered.length === 0 ? (
          <div style={{padding:'60px 20px', textAlign:'center', color:'var(--ink-3)'}}>
            <p style={{fontSize:16, margin:0}}>Nessun software trovato.</p>
          </div>
        ) : (
          <div className="sw-grid">
            {filtered.map(s => <SoftwareCard key={s.id} sw={s} onNav={onNav} />)}
          </div>
        )}
      </div>
    </div>
  );
}

function categoryDescription(name) {
  const m = {
    "Produttività": "Suite ufficio, app per note e strumenti di produttività gratuiti per sostituire i colossi a pagamento come Microsoft Office, Notion o Evernote.",
    "Project Management": "Board kanban, Gantt, task management e collaborazione: alternative gratis e open source a Trello, Asana e Monday.",
    "Grafica e Design": "Editor grafici, vettoriali e strumenti di design gratuiti e open source. Da Photoshop a Canva, da Figma a Illustrator.",
    "Video Editing": "Software di montaggio video gratuiti e professionali: alternative a Premiere Pro, CapCut e agli editor a pagamento.",
    "Comunicazione": "Chat aziendali, messaggistica e collaborazione in tempo reale. Alternative gratuite e self-hostabili a Slack.",
    "Sicurezza e Privacy": "Password manager, VPN e antivirus gratuiti e open source. Proteggi i tuoi dati senza pagare.",
    "Email Marketing": "Piattaforme per campagne email, automazioni e newsletter gratuite o con piano free generoso.",
    "CRM e Vendite": "CRM e strumenti di vendita gratuiti e open source per piccoli team e freelance.",
    "Cloud e Storage": "Archiviazione cloud, sync e backup gratuiti. Alternative a Dropbox e Google Drive con più spazio e privacy.",
    "AI e Chatbot": "Modelli AI gratuiti e open source: chatbot, generazione immagini, correzione testi. Alternative a ChatGPT, Midjourney e Grammarly.",
    "Software Italiani": "Alternative gratuite o low-cost ai software gestionali, fatturazione elettronica e PEC italiani.",
  };
  return m[name] || `I migliori software gratuiti e open source nella categoria ${name}.`;
}

Object.assign(window, { CategoryPage, AllSoftwarePage, categoryDescription });