// Homepage screen — Hero + featured + categories + grid
const { useState, useEffect, useMemo } = React;

const Home = ({ onSearch, onOpenRecipe, mobile = false }) => {
  const [tags, setTags] = useState([]);
  const featured = window.RECIPES[0];
  const trending = window.RECIPES.slice(1, 5);
  const latest = window.RECIPES.slice(2, 8);

  const cats = [
    { id: 'chinese', t: '中餐', n: '38 道', img: 'https://images.unsplash.com/photo-1582450871972-ab5ca641643d?w=600&q=80' },
    { id: 'japanese', t: '日料', n: '24 道', img: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?w=600&q=80' },
    { id: 'western', t: '西餐', n: '31 道', img: 'https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=600&q=80' },
    { id: 'quick', t: '15 分鐘快手', n: '46 道', img: 'https://images.unsplash.com/photo-1603133872878-684f208fb84b?w=600&q=80' },
    { id: 'healthy', t: '健康輕食', n: '19 道', img: 'https://images.unsplash.com/photo-1525351484163-7529414344d8?w=600&q=80' },
    { id: 'dessert', t: '甜點', n: '12 道', img: 'https://images.unsplash.com/photo-1488477181946-6428a0291777?w=600&q=80' },
  ];

  const moods = [
    { e: '💪', t: '健身減脂', d: '高蛋白低卡' },
    { e: '🍱', t: '上班族午餐', d: '便當友善' },
    { e: '🌧', t: '雨天暖心', d: '一鍋湯品' },
    { e: '🍰', t: '週末甜點', d: '療癒甜食' },
    { e: '👨‍👩‍👧', t: '家庭聚餐', d: '4 人份以上' },
  ];

  const W = mobile ? 'm' : 'd';

  return (
    <div className={`page page--${W}`}>
      <Header active="home" onNav={onSearch ? (id) => id !== 'home' && onSearch(id, []) : ()=>{}} mobile={mobile} />

      {/* HERO */}
      <section className={`hero hero--${W}`}>
        <div className="hero__l">
          <Eyebrow>智能食材搜索 · Issue 01</Eyebrow>
          <h1 className="hero__h1">
            家裡有什麼？<br />
            <em>我們告訴你做什麼。</em>
          </h1>
          <p className="hero__p">
            輸入冰箱裡的 1–4 樣食材，AIRecipeLive 立即為你匹配可以做的料理，
            並按匹配度排序、提示替代食材。再也不用對著冰箱發呆。
          </p>
          <div className="hero__form">
            <TagInput tags={tags} setTags={setTags} />
            <div className="hero__actions">
              <button className="btn btn--primary" onClick={() => onSearch && onSearch('search', tags.length ? tags : ['雞蛋', '番茄', '洋蔥'])}>
                找食譜 <Icon name="arrowRight" size={16} />
              </button>
              <button className="btn btn--ghost" onClick={() => onSearch && onSearch('search', ['雞蛋', '番茄', '洋蔥'])}>
                <Icon name="sparkles" size={16} /> 為我推薦
              </button>
            </div>
            <div className="hero__quick">
              <span className="quick__label">常用食材：</span>
              <div className="quick__row">
                {window.QUICK_INGREDIENTS.slice(0, mobile ? 6 : 10).map(q => (
                  <button key={q.zh} className={`chip ${tags.includes(q.zh) ? 'is-on' : ''}`}
                    onClick={() => tags.includes(q.zh) ? setTags(tags.filter(x=>x!==q.zh)) : tags.length<4 && setTags([...tags, q.zh])}>
                    {q.zh}
                  </button>
                ))}
              </div>
            </div>
            <div className="hero__pantry">
              <Icon name="fridge" size={14} />
              <span>已連結「我的冰箱」常備：醬油 · 蔥 · 蒜 · 薑 · 米</span>
              <a href="#">編輯</a>
            </div>
          </div>
        </div>
        {!mobile && (
          <div className="hero__r">
            <div className="hero__img">
              <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1600&q=85" alt="番茄炒蛋" />
              <div className="hero__cap">
                <span className="cap__num">No. 01</span>
                <span className="cap__t">本週特選 · 番茄炒蛋蓋飯</span>
              </div>
            </div>
            <div className="hero__stat">
              <div><b>328</b><span>精選食譜</span></div>
              <div><b>15 分</b><span>平均料理時間</span></div>
              <div><b>4.7★</b><span>讀者評分</span></div>
            </div>
          </div>
        )}
      </section>

      {/* FEATURED */}
      <section className="sec sec--feat">
        <div className="sec__head">
          <Eyebrow>本期推薦 · Editor's Pick</Eyebrow>
          <h2 className="sec__h">主編說 · 為什麼這道菜值得做</h2>
        </div>
        <article className={`feat feat--${W}`} onClick={() => onOpenRecipe && onOpenRecipe(featured)}>
          <div className="feat__img"><img src={featured.img} alt="" /></div>
          <div className="feat__body">
            <span className="feat__cat">{featured.cat}</span>
            <h3 className="feat__t">{featured.title}</h3>
            <p className="feat__lead">{featured.teaser}</p>
            <p className="feat__p">
              這道菜的祕密在於先把蛋炒到七分熟、再下番茄。番茄出汁時，
              蛋花會吸滿酸甜的茄汁卻不過老。一道家常到不能再家常的料理，
              卻是檢驗家裡爐火功夫的試金石。
            </p>
            <div className="feat__sig">— 主編 · 林書宇</div>
            <button className="btn btn--ghost">閱讀完整食譜 <Icon name="arrowRight" size={14} /></button>
          </div>
        </article>
      </section>

      {/* CATEGORIES */}
      <section className="sec">
        <div className="sec__head sec__head--row">
          <div>
            <Eyebrow>菜系分類</Eyebrow>
            <h2 className="sec__h">從你今晚想吃的開始</h2>
          </div>
          <a className="sec__more">全部分類 <Icon name="chevronRight" size={14} /></a>
        </div>
        <div className={`cats cats--${W}`}>
          {cats.map(c => (
            <a key={c.id} className="cat">
              <div className="cat__img"><img src={c.img} alt="" /></div>
              <div className="cat__t">{c.t}</div>
              <div className="cat__n">{c.n}</div>
            </a>
          ))}
        </div>
      </section>

      {/* TRENDING */}
      <section className="sec sec--alt">
        <div className="sec__head sec__head--row">
          <div>
            <Eyebrow>本週熱門</Eyebrow>
            <h2 className="sec__h">同好在做什麼？</h2>
          </div>
        </div>
        <div className={`grid grid--${W}`}>
          {trending.map(r => <RecipeCard key={r.slug} r={r} onClick={() => onOpenRecipe && onOpenRecipe(r)} />)}
        </div>
      </section>

      {/* MOOD */}
      <section className="sec">
        <div className="sec__head">
          <Eyebrow>場景 · By Mood</Eyebrow>
          <h2 className="sec__h">今天，你想吃什麼心情？</h2>
        </div>
        <div className={`moods moods--${W}`}>
          {moods.map(m => (
            <button key={m.t} className="mood">
              <span className="mood__e">{m.e}</span>
              <span className="mood__t">{m.t}</span>
              <span className="mood__d">{m.d}</span>
            </button>
          ))}
        </div>
      </section>

      {/* LATEST */}
      <section className="sec">
        <div className="sec__head sec__head--row">
          <div>
            <Eyebrow>最新發布</Eyebrow>
            <h2 className="sec__h">本月 · 編輯部新譜</h2>
          </div>
          <a className="sec__more">所有食譜 <Icon name="chevronRight" size={14} /></a>
        </div>
        <div className={`grid grid--${W}`}>
          {latest.map(r => <RecipeCard key={r.slug} r={r} onClick={() => onOpenRecipe && onOpenRecipe(r)} />)}
        </div>
      </section>

      {/* NEWSLETTER */}
      <section className="news">
        <Eyebrow>每週通訊</Eyebrow>
        <h2 className="news__h">每週日早晨，<br />一封來自編輯部的信。</h2>
        <p className="news__p">三道精選食譜、一個食材小知識，與一段值得停下來讀的廚房故事。</p>
        <form className="news__f" onSubmit={e => e.preventDefault()}>
          <input placeholder="your@email.com" />
          <button className="btn btn--primary">訂閱</button>
        </form>
        <span className="news__note">已有 12,847 位讀者訂閱 · 隨時可取消</span>
      </section>

      {/* FOOTER */}
      <Footer />
    </div>
  );
};

const Footer = () => (
  <footer className="ftr">
    <div className="ftr__top">
      <div className="ftr__brand">
        <div className="ftr__logo">AIRecipe<em>Live</em></div>
        <p>一個結合 AI 食材搜索與精選食譜的全球華人美食平台。Tell me what you have. I'll tell you what to cook.</p>
      </div>
      <div className="ftr__cols">
        <div><h5>食譜</h5><a>中餐</a><a>日料</a><a>西餐</a><a>快手</a><a>健康輕食</a></div>
        <div><h5>工具</h5><a>食材搜索</a><a>我的冰箱</a><a>膳食計劃</a><a>購物清單</a></div>
        <div><h5>關於</h5><a>編輯團隊</a><a>合作邀稿</a><a>聯絡我們</a></div>
        <div><h5>法律</h5><a>隱私政策</a><a>使用條款</a><a>免責聲明</a></div>
      </div>
    </div>
    <div className="ftr__bot">
      <span>© 2026 AIRecipeLive · airecipelive.com</span>
      <span>Designed for the global Chinese kitchen.</span>
    </div>
  </footer>
);

window.Home = Home;
window.Footer = Footer;