/* Mamma Emy — website views (React, Babel) */
const { useState: useStateV, useEffect: useEffectV } = React;

/* ============== HEADER ============== */
function Header({route, go, kind, setKind}){
  useLucide();
  const [scrolled,setScrolled]=useStateV(false);
  useEffectV(()=>{ const f=()=>setScrolled(window.scrollY>8); window.addEventListener('scroll',f); return ()=>window.removeEventListener('scroll',f); },[]);
  const nav = [['Home','home'],['Dolci','dolci'],['Salati','salati'],['Ricette Senza…','libro']];
  return (
    <header style={{position:'sticky', top:0, zIndex:50, background: scrolled?'rgba(246,239,225,.86)':'var(--crema)',
      backdropFilter: scrolled?'blur(10px)':'none', borderBottom:'1px solid var(--line)', transition:'background .3s'}}>
      <div style={{maxWidth:1180, margin:'0 auto', padding:'16px 28px', display:'flex', alignItems:'center', gap:24}}>
        <div onClick={()=>go('home')} style={{cursor:'pointer'}}><Wordmark size={.92}/></div>
        <nav style={{display:'flex', gap:6, marginLeft:18}}>
          {nav.map(([label,r])=>{
            const active = route===r || (route==='ricettario' && (r==='dolci'&&kind==='dolce'||r==='salati'&&kind==='salato'));
            return <a key={r} onClick={()=>{ if(r==='dolci'){setKind('dolce');go('ricettario');} else if(r==='salati'){setKind('salato');go('ricettario');} else go(r); }}
              style={{fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:15, padding:'8px 14px', borderRadius:999, cursor:'pointer',
              color: active?'var(--panna)':'var(--caffe)', background: active?'var(--caffe)':'transparent', whiteSpace:'nowrap', transition:'all .2s'}}>{label}</a>;
          })}
        </nav>
        <div style={{flex:1}}/>
        <div style={{display:'flex', alignItems:'center', gap:10, fontFamily:'var(--sans-ui)', background:'var(--panna)',
          border:'1.5px solid var(--line)', borderRadius:999, padding:'9px 16px', color:'var(--nebbia)', width:210}}>
          <Icon name="search" size={17} color="var(--nebbia)"/>
          <input placeholder="Cerca…" style={{border:0, background:'transparent', outline:0, fontFamily:'var(--sans-ui)', fontSize:14, color:'var(--fg1)', width:'100%'}}/>
        </div>
      </div>
    </header>
  );
}

/* ============== FOOTER (botanical band) ============== */
function Footer({go}){
  useLucide();
  return (
    <footer style={{marginTop:64, position:'relative', background:'var(--crema)'}}>
      <Newsletter/>
      <div style={{position:'relative', overflow:'hidden'}}>
        <div style={{maxWidth:1180, margin:'0 auto', padding:'48px 28px 150px', display:'flex', gap:48, flexWrap:'wrap', position:'relative', zIndex:2}}>
          <div style={{flex:'1 1 260px'}}>
            <Wordmark size={.92}/>
            <p className="me-small" style={{marginTop:12, maxWidth:'34ch'}}>Ricette sane e semplici fatte in casa, dolci e conserve della tradizione regionale italiana — con i consigli di Mamma Emy.</p>
          </div>
          <div>
            <div className="me-eyebrow" style={{marginBottom:12}}>Ricette</div>
            {['Dolci','Salati','Ricette Senza…','Le più amate'].map(x=> <div key={x} className="me-label" style={{color:'var(--fg2)', marginBottom:8, cursor:'pointer'}}>{x}</div>)}
          </div>
          <div>
            <div className="me-eyebrow" style={{marginBottom:12}}>Mamma Emy</div>
            {['Chi è Mamma Emy','Contatti','Facebook'].map(x=> <div key={x} className="me-label" style={{color:'var(--fg2)', marginBottom:8, cursor:'pointer'}}>{x}</div>)}
          </div>
        </div>
        <img src="/site/assets/botanical-band.png" alt="" style={{position:'absolute', bottom:-8, left:0, width:'100%', minWidth:760, objectFit:'cover', objectPosition:'bottom', zIndex:1, opacity:.96}}/>
      </div>
    </footer>
  );
}

/* ============== NEWSLETTER ============== */
function Newsletter(){
  const [v,setV]=useStateV('');
  return (
    <div style={{maxWidth:1180, margin:'0 auto', padding:'0 28px'}}>
      <div style={{background:'var(--caffe)', borderRadius:'var(--r-lg)', padding:'40px 44px', display:'flex',
        alignItems:'center', gap:32, flexWrap:'wrap', boxShadow:'var(--shadow-md)'}}>
        <div style={{flex:'1 1 320px'}}>
          <span style={{fontFamily:'var(--script)', fontSize:30, color:'var(--terracotta-chiaro)'}}>Resta in cucina con noi</span>
          <h2 style={{color:'var(--panna)', fontSize:30, marginTop:4}}>Ricevi le ricette di Mamma Emy</h2>
        </div>
        <div style={{display:'flex', gap:10, flex:'1 1 320px', minWidth:280}}>
          <input value={v} onChange={e=>setV(e.target.value)} placeholder="La tua email"
            style={{flex:1, border:0, borderRadius:999, padding:'13px 20px', fontFamily:'var(--sans-ui)', fontSize:15, outline:0, background:'var(--panna)', color:'var(--fg1)'}}/>
          <Button variant="primary">Iscriviti</Button>
        </div>
      </div>
    </div>
  );
}

/* ============== HOME ============== */
function Home({go, openRecipe, setKind, setSection}){
  useLucide();
  const featured = window.ME_RECIPES.slice(0,3);
  const popular = ['cheesecake','torta-mele','polpo','crostata'].map(id=>window.ME_RECIPES.find(r=>r.id===id)).filter(Boolean);
  return (
    <main>
      {/* HERO — video di sottofondo (mani che impastano) + libro in sovrimpressione */}
      <section style={{position:'relative', minHeight:'min(86vh, 700px)', display:'flex', alignItems:'center', overflow:'hidden', background:'var(--caffe)'}}>
        <HeroVideo/>
        {/* scrim per leggibilità */}
        <div style={{position:'absolute', inset:0, zIndex:2, background:'linear-gradient(96deg, rgba(42,32,24,.82) 0%, rgba(42,32,24,.6) 42%, rgba(42,32,24,.18) 78%, rgba(42,32,24,.32) 100%)'}}/>
        <div style={{position:'relative', zIndex:3, width:'100%', maxWidth:1180, margin:'0 auto', padding:'56px 28px',
          display:'grid', gridTemplateColumns:'1.08fr .92fr', gap:48, alignItems:'center'}}>
          {/* testo + CTA d'acquisto */}
          <div>
            <span className="me-eyebrow" style={{color:'var(--terracotta-chiaro)'}}>Il libro · Ricette Senza…</span>
            <h1 style={{fontSize:54, lineHeight:1.08, margin:'14px 0 0', color:'var(--panna)'}}>La vera essenza<br/>della cucina italiana,</h1>
            <div style={{fontFamily:'var(--script)', fontSize:54, color:'var(--terracotta-chiaro)', lineHeight:1.1, marginTop:10}}>accessibile a tutti.</div>
            <p className="me-lead" style={{margin:'22px 0 30px', maxWidth:'42ch', color:'rgba(251,248,241,.88)'}}>Oltre 100 ricette prive di allergeni comuni — senza glutine, lattosio e zucchero raffinato — ma ricche di gusto, amore e tradizione.</p>
            <div style={{display:'flex', gap:12, alignItems:'center', flexWrap:'wrap'}}>
              <Button variant="primary" icon="shopping-bag" onClick={()=>go('libro')}>Acquista il libro</Button>
              <Button variant="light" icon="utensils-crossed" onClick={()=>go('ricettario')}>Esplora le ricette</Button>
            </div>
          </div>
          {/* copertina in sovrimpressione */}
          <div style={{justifySelf:'center', position:'relative'}}>
            <div style={{position:'absolute', inset:'-10% -12%', background:'radial-gradient(60% 60% at 50% 42%, rgba(231,168,120,.3), transparent 70%)', filter:'blur(10px)'}}/>
            <BookCover w={410} rotate={-3} style={{position:'relative'}}/>
          </div>
        </div>
      </section>

      {/* CATEGORIES (the six chapters) */}
      <section style={{maxWidth:1180, margin:'0 auto', padding:'40px 28px'}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', borderBottom:'1px solid var(--line)', paddingBottom:14, marginBottom:24}}>
          <h2 style={{fontSize:34}}>I capitoli del gusto</h2>
          <span className="me-meta">Sei modi di dire «senza»</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16}}>
          {window.ME_SECTIONS.map(s=> (
            <div key={s.id} onClick={()=>{ setSection(s.id); go('ricettario'); }}
              style={{background:'var(--panna)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', padding:'22px 24px', cursor:'pointer', transition:'all .25s', position:'relative', overflow:'hidden'}}
              onMouseEnter={e=>{e.currentTarget.style.boxShadow='var(--shadow-md)'; e.currentTarget.style.transform='translateY(-3px)';}}
              onMouseLeave={e=>{e.currentTarget.style.boxShadow='none'; e.currentTarget.style.transform='none';}}>
              <span className="me-chap-scrib" style={{WebkitMaskImage:`url(${s.scribble})`, maskImage:`url(${s.scribble})`}}></span>
              <span style={{fontFamily:'var(--sans-ui)', fontWeight:700, fontSize:12, color:'var(--terracotta-chiaro)', letterSpacing:'.1em'}}>{s.n}</span>
              <div style={{margin:'8px 0 10px', position:'relative', zIndex:1}}>
                <div style={{fontFamily:'var(--serif-display)', fontWeight:600, fontSize:22, color:'var(--caffe)', lineHeight:1.05}}>{s.kicker}</div>
                <div style={{fontFamily:'var(--script)', fontSize:30, color:'var(--terracotta)', lineHeight:1, marginTop:2}}>{s.name}</div>
              </div>
              <p className="me-small" style={{color:'var(--fg2)'}}>{s.intro.slice(0,96)}…</p>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED */}
      <section style={{maxWidth:1180, margin:'0 auto', padding:'36px 28px'}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', borderBottom:'1px solid var(--line)', paddingBottom:14, marginBottom:24}}>
          <h2 style={{fontSize:34}}>Le più amate</h2>
          <a onClick={()=>go('ricettario')} style={{cursor:'pointer', fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:14}}>Vedi tutte →</a>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18}}>
          {popular.map(r=> <RecipeCard key={r.id} r={r} onOpen={openRecipe}/>)}
        </div>
      </section>

      {/* BOOK PROMO */}
      <BookPromo go={go}/>
    </main>
  );
}

/* ============== BOOK PROMO STRIP ============== */
function BookPromo({go}){
  return (
    <section style={{maxWidth:1180, margin:'40px auto 0', padding:'0 28px'}}>
      <div style={{background:'var(--pesca)', borderRadius:'var(--r-lg)', overflow:'hidden', display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:300}}>
        <div style={{padding:'48px 48px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <span className="me-eyebrow">Il libro</span>
          <div style={{display:'flex', alignItems:'baseline', gap:'.14em', marginTop:8}}>
            <span style={{fontFamily:'var(--serif-display)', fontWeight:700, fontSize:48, color:'var(--caffe)'}}>Ricette</span>
            <span style={{fontFamily:'var(--script)', fontSize:54, color:'var(--terracotta)'}}>Senza…</span>
          </div>
          <p className="me-body" style={{margin:'14px 0 22px', maxWidth:'40ch'}}>Oltre 100 ricette prive di allergeni comuni — senza glutine, senza lattosio, senza zucchero raffinato — ma ricche di gusto, amore e tradizione.</p>
          <div><Button variant="primary" icon="arrow-right" onClick={()=>go('libro')}>Sfoglia il libro</Button></div>
        </div>
        <div style={{position:'relative', background:'var(--terracotta)'}}>
          <img src="/site/assets/cover-original.png" alt="Ricette Senza" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'top'}}/>
        </div>
      </div>
    </section>
  );
}

/* ============== RICETTARIO (list + filters) ============== */
function Ricettario({openRecipe, kind, setKind, section, setSection}){
  useLucide();
  const [tag,setTag]=useStateV('Tutte');
  const tags=['Tutte','Senza glutine','Senza lattosio','Senza zucchero','Vegano','Tradizione'];
  let list = window.ME_RECIPES;
  if (kind) list = list.filter(r=>r.kind===kind);
  if (section) list = list.filter(r=>r.section===section);
  if (tag!=='Tutte') list = list.filter(r=>r.tags.includes(tag));
  const sec = window.ME_SECTIONS.find(s=>s.id===section);
  const title = sec ? sec.kicker+' '+sec.name : kind==='dolce'?'Dolci' : kind==='salato'?'Salati' : 'Tutte le ricette';
  return (
    <main style={{maxWidth:1180, margin:'0 auto', padding:'40px 28px 0'}}>
      <span className="me-eyebrow">Ricettario</span>
      <h1 style={{fontSize:48, margin:'10px 0 6px'}}>{title}</h1>
      {sec && <p className="me-lead" style={{maxWidth:'62ch', marginBottom:8}}>{sec.intro}</p>}
      <div style={{display:'flex', gap:14, alignItems:'center', flexWrap:'wrap', borderBottom:'1px solid var(--line)', padding:'18px 0 22px', marginTop:8}}>
        <div style={{display:'flex', gap:8, marginRight:8}}>
          {[['Tutte',null],['Dolci','dolce'],['Salati','salato']].map(([l,k])=>(
            <span key={l} onClick={()=>{setKind(k); setSection(null);}}
              style={{fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:14, padding:'9px 16px', borderRadius:999, cursor:'pointer',
              background: kind===k?'var(--terracotta)':'transparent', color: kind===k?'#fff':'var(--seppia)', border:'1.5px solid '+(kind===k?'var(--terracotta)':'var(--line)')}}>{l}</span>
          ))}
        </div>
        <div style={{width:1, height:24, background:'var(--line)'}}/>
        <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
          {tags.map(t=> <span key={t} onClick={()=>{setTag(t); setSection(null);}}
            style={{fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:14, padding:'9px 16px', borderRadius:999, cursor:'pointer',
            background: tag===t?'var(--caffe)':'var(--panna)', color: tag===t?'var(--panna)':'var(--seppia)', border:'1.5px solid '+(tag===t?'var(--caffe)':'var(--line)')}}>{t}</span>)}
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, padding:'28px 0'}}>
        {list.map(r=> <RecipeCard key={r.id} r={r} onOpen={openRecipe}/>)}
        {list.length===0 && <p className="me-lead" style={{gridColumn:'1/-1'}}>Nessuna ricetta per questo filtro.</p>}
      </div>
    </main>
  );
}

/* ============== RECIPE DETAIL ============== */
function RecipeDetail({r, go, openRecipe}){
  useLucide();
  const hasSteps = r.steps && r.steps.length>0;
  const more = window.ME_RECIPES.filter(x=>x.section===r.section && x.id!==r.id).slice(0,4);
  return (
    <main style={{maxWidth:1100, margin:'0 auto', padding:'28px 28px 0'}}>
      <a onClick={()=>go('ricettario')} style={{cursor:'pointer', fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:14, display:'inline-flex', alignItems:'center', gap:6, color:'var(--seppia)'}}><Icon name="arrow-left" size={16} color="var(--seppia)"/>Torna al ricettario</a>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'start', margin:'18px 0 8px'}}>
        <div>
          <div style={{display:'flex', gap:8, marginBottom:14}}>{r.tags.map(t=> <Tag key={t} label={t} small/>)}</div>
          <h1 style={{fontSize:52, lineHeight:1.02}}>{r.title}</h1>
          <p className="me-lead" style={{margin:'16px 0 22px'}}>{r.desc}</p>
          <div style={{padding:'18px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}><MetaRow r={r}/></div>
        </div>
        <img src={r.photo} alt={r.title} style={{width:'100%', height:380, objectFit:'cover', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-md)'}}/>
      </div>

      {hasSteps ? (
        <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:48, margin:'40px 0'}}>
          <aside style={{position:'sticky', top:90, alignSelf:'start', background:'var(--pesca)', borderRadius:'var(--r-md)', padding:'26px 28px'}}>
            <h3 style={{fontSize:24, marginBottom:14}}>Ingredienti</h3>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:10}}>
              {r.ingredients.map((it,i)=>(
                <li key={i} className="me-body" style={{display:'flex', gap:10, fontSize:16, lineHeight:1.4}}>
                  <span style={{color:'var(--terracotta)', fontWeight:700}}>•</span>{it}
                </li>
              ))}
            </ul>
          </aside>
          <div>
            <h3 style={{fontSize:24, marginBottom:20}}>Preparazione</h3>
            <ol style={{listStyle:'none', display:'flex', flexDirection:'column', gap:24}}>
              {r.steps.map((s,i)=>(
                <li key={i} style={{display:'grid', gridTemplateColumns:'44px 1fr', gap:16}}>
                  <span style={{fontFamily:'var(--serif-display)', fontWeight:700, fontSize:30, color:'var(--terracotta)', lineHeight:1}}>{i+1}</span>
                  <div>
                    <h4 style={{fontFamily:'var(--sans-ui)', fontWeight:700, fontSize:16, color:'var(--caffe)', marginBottom:5}}>{s.h}</h4>
                    <p className="me-body">{s.body}</p>
                  </div>
                </li>
              ))}
            </ol>
            <div style={{marginTop:34, padding:'22px 26px', background:'var(--panna)', border:'1px dashed var(--tortora)', borderRadius:'var(--r-md)'}}>
              <div className="me-eyebrow" style={{marginBottom:10}}>Note</div>
              {[0,1,2].map(i=> <div key={i} style={{height:1, background:'var(--line)', margin:'18px 0'}}/>)}
            </div>
          </div>
        </div>
      ) : (
        <div style={{margin:'34px 0', padding:'26px 30px', background:'var(--pesca)', borderRadius:'var(--r-md)'}}>
          <p className="me-lead" style={{margin:0}}>Il procedimento completo di questa ricetta è disponibile nel libro <strong>«Ricette Senza…»</strong>.</p>
        </div>
      )}

      <section style={{borderTop:'1px solid var(--line)', padding:'30px 0 0'}}>
        <h2 style={{fontSize:30, marginBottom:20}}>Dalla stessa sezione</h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18}}>
          {more.map(x=> <RecipeCard key={x.id} r={x} onOpen={openRecipe}/>)}
        </div>
      </section>
    </main>
  );
}

/* ============== LIBRO LANDING ============== */
function Libro({go, openRecipe}){
  useLucide();
  return (
    <main>
      <section style={{maxWidth:1180, margin:'0 auto', padding:'48px 28px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'center'}}>
        <div>
          <span className="me-eyebrow">Il ricettario</span>
          <div style={{display:'flex', alignItems:'baseline', gap:'.14em', margin:'12px 0 0'}}>
            <span style={{fontFamily:'var(--serif-display)', fontWeight:700, fontSize:72, color:'var(--caffe)', lineHeight:1}}>Ricette</span>
          </div>
          <div style={{fontFamily:'var(--script)', fontSize:82, color:'var(--terracotta)', lineHeight:1}}>Senza…</div>
          <p className="me-lead" style={{margin:'22px 0 26px', maxWidth:'44ch'}}>Scoprite la vera essenza della cucina italiana, accessibile a tutti. Oltre 100 ricette prive di allergeni comuni ma ricche di gusto, amore e tradizione.</p>
          <div style={{display:'flex', gap:12}}>
            <Button variant="primary" icon="book-open" onClick={()=>window.open('/libro','_blank')}>Apri il libro sfogliabile</Button>
            <Button variant="outline" onClick={()=>go('ricettario')}>Vai alle ricette</Button>
          </div>
        </div>
        <img src="/site/assets/cover-original.png" alt="Copertina Ricette Senza" style={{width:'100%', maxWidth:380, justifySelf:'center', borderRadius:'var(--r-md)', boxShadow:'var(--shadow-lg)'}}/>
      </section>

      <section style={{maxWidth:1180, margin:'0 auto', padding:'20px 28px 10px'}}>
        <h2 style={{fontSize:34, borderBottom:'1px solid var(--line)', paddingBottom:14, marginBottom:24}}>I sei capitoli</h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:18}}>
          {window.ME_SECTIONS.map(s=>(
            <div key={s.id} style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:20, alignItems:'start', background:'var(--panna)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', padding:'24px 26px'}}>
              <span style={{fontFamily:'var(--serif-display)', fontWeight:700, fontSize:40, color:'var(--terracotta-chiaro)', lineHeight:1}}>{s.n}</span>
              <div>
                <div style={{fontFamily:'var(--serif-display)', fontWeight:600, fontSize:22, color:'var(--caffe)'}}>{s.kicker} <span style={{fontFamily:'var(--script)', color:'var(--terracotta)', fontSize:26}}>{s.name}</span></div>
                <p className="me-small" style={{marginTop:8, color:'var(--fg2)'}}>{s.intro}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Header, Footer, Newsletter, Home, BookPromo, Ricettario, RecipeDetail, Libro });
