/* Mamma Emy — shared UI components (React, Babel) */
const { useState, useEffect, useRef } = React;

/* ---- Icon: thin Lucide via <i data-lucide> + re-render helper ---- */
function useLucide(dep){
  useEffect(()=>{ if(window.lucide) window.lucide.createIcons(); });
}
function Icon({name, size=18, color, strokeWidth=1.75, style}){
  return <i data-lucide={name} style={{width:size, height:size, color, strokeWidth, ...style}} />;
}

/* ---- Brand wordmark lockup ---- */
function Wordmark({size=1, light=false, onClick}){
  return (
    <div onClick={onClick} style={{display:'flex', alignItems:'baseline', gap:'.14em', cursor:onClick?'pointer':'default', lineHeight:1}}>
      <span style={{fontFamily:'var(--serif-display)', fontWeight:700, fontSize:28*size, color: light?'var(--panna)':'var(--caffe)', letterSpacing:'-.01em'}}>Ricette</span>
      <span style={{fontFamily:'var(--script)', fontSize:32*size, color:'var(--terracotta)'}}>Senza</span>
    </div>
  );
}

/* ---- Tag pill ---- */
const TAG_STYLE = {
  'Senza glutine':{bg:'var(--terracotta-velo)', fg:'var(--terracotta-scuro)', icon:'wheat-off'},
  'Senza lattosio':{bg:'var(--miele-velo)', fg:'#9a6b18', icon:'milk-off'},
  'Senza zucchero':{bg:'var(--salvia-velo)', fg:'var(--oliva-scuro)', icon:'candy-off'},
  'Vegano':{bg:'var(--oliva)', fg:'#fff', icon:'leaf'},
  'Equilibrio':{bg:'var(--pesca)', fg:'var(--terracotta-scuro)', icon:'scale'},
  'Tradizione':{bg:'transparent', fg:'var(--seppia)', icon:'home', border:true},
};
function Tag({label, small}){
  const s = TAG_STYLE[label] || {bg:'var(--sabbia)', fg:'var(--seppia)'};
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:6, fontFamily:'var(--sans-ui)', fontWeight:600,
      fontSize: small?10:12, letterSpacing:'.1em', textTransform:'uppercase', borderRadius:999,
      padding: small?'5px 10px':'7px 13px', background:s.bg, color:s.fg,
      border: s.border?'1.5px solid var(--line)':'1.5px solid transparent'}}>
      {s.icon && <Icon name={s.icon} size={small?12:14} color={s.fg} />}{label}
    </span>
  );
}

/* ---- Button ---- */
function Button({children, variant='primary', icon, onClick, style}){
  const base = {fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:15, borderRadius:999,
    padding:'12px 22px', border:'1.5px solid transparent', cursor:'pointer', display:'inline-flex',
    alignItems:'center', gap:8, transition:'all .28s cubic-bezier(.22,.61,.36,1)'};
  const variants = {
    primary:{background:'var(--terracotta)', color:'#fff'},
    outline:{background:'transparent', color:'var(--terracotta)', borderColor:'var(--terracotta)'},
    ghost:{background:'transparent', color:'var(--caffe)'},
    light:{background:'var(--panna)', color:'var(--caffe)'},
  };
  const [h,setH]=useState(false);
  const hover = {
    primary:{background:'var(--terracotta-scuro)'},
    outline:{background:'var(--terracotta-velo)'},
    ghost:{background:'var(--sabbia)'},
    light:{background:'#fff'},
  };
  return (
    <button onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{...base, ...variants[variant], ...(h?hover[variant]:{}), ...style}}>
      {icon && <Icon name={icon} size={18} color={variants[variant].color} />}{children}
    </button>
  );
}

/* ---- Hero background video (drop-in) with graceful placeholder ----
   Place a looping clip of hands kneading / preparing at
   assets/video/impasto.mp4 and it auto-covers the placeholder. */
function HeroVideo(){
  const [ok,setOk]=useState(false);
  return (
    <div style={{position:'absolute', inset:0, zIndex:1, overflow:'hidden'}}>
      {/* animated warm placeholder shown until a real clip is added */}
      <div style={{position:'absolute', inset:0, background:'linear-gradient(118deg, #2A2018 0%, #4a3220 48%, #75502f 100%)'}}>
        <div className="me-hero-pan" style={{position:'absolute', inset:'-25%', backgroundImage:'repeating-linear-gradient(122deg, rgba(251,248,241,.055) 0 16px, rgba(251,248,241,0) 16px 46px)'}}/>
        <div style={{position:'absolute', inset:0, background:'radial-gradient(120% 90% at 30% 30%, rgba(231,168,120,.18), transparent 60%)'}}/>
      </div>
      <video autoPlay muted loop playsInline
        onLoadedData={()=>setOk(true)} onError={()=>setOk(false)}
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', opacity: ok?1:0, transition:'opacity .7s var(--ease)'}}>
        <source src="/site/assets/video/impasto.mp4" type="video/mp4"/>
      </video>
      {!ok && (
        <div style={{position:'absolute', left:24, bottom:20, display:'inline-flex', alignItems:'center', gap:9,
          fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize:11.5, letterSpacing:'.03em',
          color:'rgba(251,248,241,.66)', background:'rgba(42,32,24,.42)', border:'1px solid rgba(251,248,241,.2)',
          borderRadius:8, padding:'8px 13px', backdropFilter:'blur(2px)'}}>
          <span aria-hidden="true">▶</span> assets/video/impasto.mp4 — mani che impastano · loop muto
        </div>
      )}
    </div>
  );
}

/* ---- Book cover composition (reusable, scaled) ---- */
function BookCover({w=384, rotate=0, style}){
  useLucide();
  const scale = w/1023;
  return (
    <div className="bc-frame" style={{width:w, height:w*1537/1023,
      boxShadow:'0 30px 70px rgba(20,12,6,.5), 0 8px 22px rgba(20,12,6,.4)',
      transform: rotate?`rotate(${rotate}deg)`:undefined, ...style}}>
      <div className="bc-inner" style={{transform:`scale(${scale})`}}>
        <div className="bc-bg" style={{backgroundImage:"url('/site/assets/photos/cover-photo.jpg')"}}></div>
        <div className="bc-topwash"></div>
        <svg className="bc-title" viewBox="0 0 1023 360" aria-label="Ricette Senza…">
          <defs><path id="bcArc" d="M 118 274 Q 511 200 904 274" fill="none"></path></defs>
          <text textAnchor="middle">
            <textPath href="#bcArc" startOffset="48%">
              <tspan className="ricette" style={{fontSize:'104px', letterSpacing:'1px'}}>Ricette </tspan><tspan className="senza" style={{fontSize:'124px'}} dy="2">Senza…</tspan>
            </textPath>
          </text>
        </svg>
        <div className="bc-brand">
          <img className="bc-seal" src="/site/assets/logo-badge.png" alt="Logo Mamma Emy"/>
          <div className="bc-ribbon"><span className="bc-tail l"></span><span className="lbl">Mamma Emy</span><span className="bc-tail r"></span></div>
        </div>
        <div className="bc-info">
          <div className="big"><b>100+</b><i>ricette</i></div>
          <div className="sub">prive di allergeni comuni</div>
          <div className="bc-chips">
            <span className="bc-chip g"><i data-lucide="wheat-off"></i>Senza glutine</span>
            <span className="bc-chip l"><i data-lucide="milk-off"></i>Senza lattosio</span>
            <span className="bc-chip z"><i data-lucide="candy-off"></i>Senza zucchero</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Meta row (time · difficulty · servings) ---- */
function MetaRow({r, compact}){
  const items = [['clock', r.time, 'Tempo'], ['chef-hat', r.diff, 'Difficoltà'], ['users', r.serves, 'Porzioni']];
  if (compact) return (
    <div style={{display:'flex', gap:14, fontFamily:'var(--sans-ui)', fontSize:11, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--nebbia)'}}>
      {items.map(([ic,v])=> <span key={ic} style={{display:'inline-flex',alignItems:'center',gap:5}}><Icon name={ic} size={13} color="var(--terracotta-chiaro)"/>{v}</span>)}
    </div>
  );
  return (
    <div style={{display:'flex', alignItems:'stretch'}}>
      {items.map(([ic,v,k],i)=> (
        <div key={ic} style={{display:'flex', alignItems:'center', gap:10, padding:'0 30px', paddingLeft:i===0?0:30, borderLeft:i===0?'none':'1px solid var(--line)'}}>
          <Icon name={ic} size={19} color="var(--terracotta)"/>
          <div style={{display:'flex', flexDirection:'column'}}>
            <span style={{fontFamily:'var(--sans-ui)', fontWeight:700, fontSize:15, color:'var(--caffe)', lineHeight:1}}>{v}</span>
            <span style={{fontFamily:'var(--sans-ui)', fontWeight:600, fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--nebbia)', marginTop:3}}>{k}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---- Recipe card ---- */
function RecipeCard({r, onOpen}){
  const [h,setH]=useState(false);
  return (
    <article onClick={()=>onOpen(r)} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{background:'var(--panna)', border:'1px solid var(--line)', borderRadius:'var(--r-md)',
      overflow:'hidden', cursor:'pointer', boxShadow: h?'var(--shadow-lg)':'var(--shadow-sm)',
      transform: h?'translateY(-4px)':'none', transition:'all .28s cubic-bezier(.22,.61,.36,1)'}}>
      <div style={{position:'relative', height:184, background:'var(--sabbia)'}}>
        <img src={r.photo} alt={r.title} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
        <span style={{position:'absolute', top:12, left:12, fontFamily:'var(--sans-ui)', fontWeight:600,
          fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', background:'rgba(251,248,241,.94)',
          color:'var(--terracotta-scuro)', padding:'5px 11px', borderRadius:999}}>{r.tags[0]}</span>
      </div>
      <div style={{padding:'15px 18px 18px'}}>
        <h3 style={{fontSize:22, marginBottom:9}}>{r.title}</h3>
        <MetaRow r={r} compact/>
      </div>
    </article>
  );
}

Object.assign(window, { useLucide, Icon, Wordmark, Tag, Button, MetaRow, RecipeCard, HeroVideo, BookCover });