// ---------- Home page ----------

function HomePage({ data, categories, onNav }) {
  // Top software: most alternatives, then alphabetical
  const top = React.useMemo(() => {
    return [...data].sort((a,b) => (b.alternative.length - a.alternative.length) || a.nome.localeCompare(b.nome)).slice(0, 8);
  }, [data]);

  React.useEffect(() => {
    applyPageSEO({
      title: 'AlternativeGratis.it — Alternative gratuite e open source ai software a pagamento',
      description: `Directory italiana delle migliori alternative gratuite e open source ai software a pagamento. ${data.length} software testati con ${data.reduce((n,s)=>n+s.alternative.length,0)} alternative gratis confrontate: Photoshop, Notion, Slack, Microsoft Office e molto altro.`,
      path: '/',
      type: 'website',
      keywords: 'alternative gratis, software gratuiti, open source italia, alternative a pagamento, software free',
    });
    setSchemas([
      websiteSchema(),
      organizationSchema(),
      collectionPageSchema(
        'Alternative gratis ai software a pagamento',
        `Directory italiana di ${data.length} software con alternative gratuite e open source.`,
        '/'
      ),
      {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Software più cercati con alternative gratis",
        "itemListElement": top.map((s, i) => ({
          "@type": "ListItem",
          "position": i + 1,
          "url": SITE_URL + `/alternativa/${s.slug}`,
          "name": `Alternative gratis a ${s.nome}`,
        })),
      },
    ]);
  }, [data]);

  return (
    <div className="view">
      <section className="hero">
        <div className="container-narrow">
          <h1>Alternative <em>gratis</em> al software<br/>che paghi ogni mese.</h1>
          <p className="lead">La directory italiana dei migliori software gratuiti e open source. 30 programmi testati, 75 alternative confrontate.</p>
          <SearchBar data={data} onNav={onNav} large placeholder="Cerca un software (es. Photoshop, Notion, Canva…)" />
          <div className="hero-pills">
            <span className="hero-pill"><span>Popolari:</span></span>
            {['Photoshop','Notion','Canva','Microsoft Office','ChatGPT'].map(nm => {
              const s = data.find(x => x.nome === nm || x.nome.includes(nm));
              if (!s) return null;
              return <a key={nm} href={`#/alternativa/${s.slug}`} className="hero-pill" onClick={(e)=>{e.preventDefault(); onNav(`/alternativa/${s.slug}`);}}>{nm}</a>;
            })}
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="container">
          <div className="section-header">
            <h2>Sfoglia per categoria</h2>
            <a href="#/software" className="link" onClick={(e)=>{e.preventDefault(); onNav('/software');}}>Tutti i software →</a>
          </div>
          <div className="cat-grid">
            {categories.map(c => (
              <a key={c.slug} href={`#/categoria/${c.slug}`} className="cat-card"
                 onClick={(e)=>{e.preventDefault(); onNav(`/categoria/${c.slug}`);}}>
                <div>
                  <CatIcon name={c.name} />
                  <div className="cat-name">{c.name}</div>
                </div>
                <div className="cat-count"><strong>{c.count}</strong> software · <strong>{c.altCount}</strong> alternative</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-header">
            <h2>Software più cercati</h2>
            <a href="#/software" className="link" onClick={(e)=>{e.preventDefault(); onNav('/software');}}>Vedi tutti →</a>
          </div>
          <div className="sw-grid">
            {top.map(s => <SoftwareCard key={s.id} sw={s} onNav={onNav} />)}
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="container-narrow">
          <h2 className="serif" style={{fontSize:'clamp(28px, 3.5vw, 38px)', margin:'0 0 16px', fontWeight:400}}>Cos'è AlternativeGratis.it</h2>
          <p style={{fontSize:17, color:'var(--ink-2)', lineHeight:1.65, margin:'0 0 14px'}}>
            AlternativeGratis.it è la prima directory italiana dedicata a trovare <strong>alternative gratuite e open source</strong> ai software a pagamento più usati: Photoshop, Notion, Slack, Microsoft Office, Canva e decine di altri.
          </p>
          <p style={{fontSize:17, color:'var(--ink-2)', lineHeight:1.65, margin:'0 0 14px'}}>
            Per ogni software premium trovi da 3 a 5 alternative selezionate, ognuna con <strong>punti di forza, limiti reali</strong>, piattaforme supportate e un consiglio su chi dovrebbe usarla. Niente classifiche sponsorizzate, niente marketing: solo informazioni pratiche per risparmiare senza rinunciare alla qualità.
          </p>
          <p style={{fontSize:17, color:'var(--ink-2)', lineHeight:1.65, margin:0}}>
            Tutte le schede sono scritte in italiano e aggiornate periodicamente.
          </p>
        </div>
      </section>
    </div>
  );
}

function SoftwareCard({ sw, onNav }) {
  return (
    <a href={`#/alternativa/${sw.slug}`} className="sw-card"
       onClick={(e)=>{e.preventDefault(); onNav(`/alternativa/${sw.slug}`);}}>
      <div className="sw-card-head">
        <div style={{display:'flex', alignItems:'center', gap:12, minWidth:0, flex:1}}>
          <Logo name={sw.nome} size={44} url={sw.sito_ufficiale} />
          <div style={{minWidth:0}}>
            <h3>{sw.nome}</h3>
            <div className="cat-tag">{sw.categoria}</div>
          </div>
        </div>
      </div>
      <p className="desc">{sw.descrizione_it}</p>
      <div className="sw-card-foot">
        <span><strong>{sw.alternative.length}</strong> alternative gratis</span>
        <span style={{color:'var(--accent)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:4}}>Vedi <Icon.arrow/></span>
      </div>
    </a>
  );
}

Object.assign(window, { HomePage, SoftwareCard });