// pages.jsx — トップページ・一覧ページ・絞り込みパネル
const { useState: useStateP, useMemo: useMemoP } = React;

// トップページに内包する読み物コンテンツ
const EATING_TIPS = [
  { t: "そのまま", body: "封を開けてそのまま。素材本来の甘みと、ねっとり・もっちりの食感をいちばんシンプルに楽しめます。" },
  { t: "炙る", body: "トースターやグリルで両面を1〜2分。香ばしさが立ち、表面はカリッ、中はとろける食感に変わります。" },
  { t: "バター焼き", body: "フライパンに少量のバターで焼くと、塩気と甘みが絶妙。おやつにもおつまみにもおすすめです。" },
  { t: "アレンジ", body: "刻んでヨーグルトやアイスに、天ぷらや炊き込みご飯の具にも。料理の素材としても優秀です。" },
];
const STORAGE_TIPS = [
  { t: "常温", body: "未開封なら直射日光を避けた涼しい場所で。表示の賞味期限内に食べきりましょう。" },
  { t: "冷蔵", body: "開封後は乾燥を防ぐため密閉して冷蔵庫へ。固くなったらレンジや炙りで温めると食感が戻ります。" },
  { t: "冷凍", body: "長期保存は小分けして冷凍が便利。半解凍ならアイス感覚、しっかり解凍でしっとり食感に。" },
];

// ===== 絞り込みパネル =====
function FilterPanel({ filters, setFilters, counts, onClose }) {
  const toggle = (key, id) => {
    setFilters((f) => {
      const cur = f[key] || [];
      const arr = cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id];
      return { ...f, [key]: arr };
    });
  };
  const setPrice = (id) => setFilters((f) => ({ ...f, price: f.price === id ? null : id }));
  const setRating = (id) => setFilters((f) => ({ ...f, minRating: f.minRating === id ? null : id }));
  const clearAll = () => setFilters({ variety: [], origin: [], shape: [], hardness: [], maker: [], tag: [], price: null, minRating: null });
  const hasAny = filters.variety.length || (filters.origin || []).length || filters.shape.length || filters.hardness.length || filters.maker.length ||
    filters.tag.length || filters.price || filters.minRating;

  const PRICE_BANDS = [
    { id: "a", label: "〜1,000円", test: (p) => p.price < 1000 },
    { id: "b", label: "1,000〜1,500円", test: (p) => p.price >= 1000 && p.price < 1500 },
    { id: "c", label: "1,500〜2,000円", test: (p) => p.price >= 1500 && p.price < 2000 },
    { id: "d", label: "2,000円〜", test: (p) => p.price >= 2000 },
  ];
  const TAGS = ["無添加", "国産", "ギフト", "個包装", "大容量", "訳あり", "希少"];

  const Opt = ({ on, onClick, name, cnt, radio }) => (
    <div className={`fil-opt ${radio ? "fil-radio" : ""} ${on ? "on" : ""}`} onClick={onClick}>
      <span className="box">{on && <Ico name="check" size={13} />}</span>
      <span>{name}</span>
      {cnt != null && <span className="cnt num">{cnt}</span>}
    </div>
  );

  return (
    <div className="card fil-card">
      <div className="fil-head">
        <span className="ft">絞り込み</span>
        {hasAny ? <span className="fil-clear" onClick={clearAll}>すべて解除</span> : <span style={{ fontSize: 12, color: "var(--ink-faint)" }}>条件で探す</span>}
      </div>

      <div className="fil-group">
        <h5>芋の品種</h5>
        {VARIETIES.map((v) => (
          <Opt key={v.id} on={filters.variety.includes(v.id)} onClick={() => toggle("variety", v.id)}
            name={v.name} cnt={counts.variety[v.id] || 0} />
        ))}
      </div>

      <div className="fil-group">
        <h5>形状</h5>
        {SHAPES.map((s) => (
          <Opt key={s.id} on={filters.shape.includes(s.id)} onClick={() => toggle("shape", s.id)}
            name={s.name} cnt={counts.shape[s.id] || 0} />
        ))}
      </div>

      <div className="fil-group">
        <h5>原料産地</h5>
        {(window.ORIGINS || []).map((o) => (
          <Opt key={o.id} on={(filters.origin || []).includes(o.id)} onClick={() => toggle("origin", o.id)}
            name={o.name} cnt={(counts.origin || {})[o.id] || 0} />
        ))}
      </div>

      <div className="fil-group">
        <h5>硬さ</h5>
        {HARDNESS.map((h) => (
          <Opt key={h.id} on={filters.hardness.includes(h.id)} onClick={() => toggle("hardness", h.id)}
            name={h.name} cnt={counts.hardness[h.id] || 0} />
        ))}
      </div>

      <div className="fil-group">
        <h5>メーカー・産地</h5>
        {MAKERS.map((m) => (
          <Opt key={m.id} on={filters.maker.includes(m.id)} onClick={() => toggle("maker", m.id)}
            name={m.name} cnt={counts.maker[m.id] || 0} />
        ))}
      </div>

      <div className="fil-group">
        <h5>価格帯</h5>
        {PRICE_BANDS.map((b) => (
          <Opt key={b.id} radio on={filters.price === b.id} onClick={() => setPrice(b.id)} name={b.label} />
        ))}
      </div>

      <div className="fil-group">
        <h5>評価</h5>
        {[4.5, 4.0, 3.5].map((r) => (
          <Opt key={r} radio on={filters.minRating === r} onClick={() => setRating(r)}
            name={`★ ${r.toFixed(1)} 以上`} />
        ))}
      </div>

      <div className="fil-group">
        <h5>こだわり</h5>
        {TAGS.map((t) => (
          <Opt key={t} on={filters.tag.includes(t)} onClick={() => toggle("tag", t)} name={t} />
        ))}
      </div>

      {onClose && (
        <div className="fil-group">
          <button className="btn btn-primary" style={{ width: "100%" }} onClick={onClose}>
            この条件で見る
          </button>
        </div>
      )}
    </div>
  );
}

// ===== トップページ =====
function TopPage({ onGoList, onOpen }) {
  const top = [...PRODUCTS].sort((a, b) => a.rank - b.rank).slice(0, 8);
  const totalReviews = PRODUCTS.reduce((s, p) => s + ((p.reviews || []).length), 0);
  // ヒーロー＝最新登録の商品（_seq が小さいほど新しい。無ければ人気No.1）
const hero = [...PRODUCTS].sort((a, b) =>
    ((a._seq != null ? a._seq : 999) - (b._seq != null ? b._seq : 999)) || (a.rank - b.rank))[0];
  const isNew = hero && hero._seq != null;
  return (
    <main>
      {/* ヒーロー */}
      <section className="hero">
        <div className="wrap hero-grid">
          <div>
            <span className="chip olive" style={{ marginBottom: 16 }}>
              <Ico name="leaf" size={14} /> 国内の干し芋を、まとめて比較
            </span>
            <h1>あなた好みの<br /><em>干し芋</em>が、きっと見つかる。</h1>
            <p className="lead">
              品種・形状・メーカーで絞り込み、甘さや味わいのスコアとレビューを見比べて選べる、
              干し芋の比較・レビューサイトです。
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={onGoList}>
                <Ico name="search" size={17} /> 商品をさがす
              </button>
              <button className="btn btn-ghost" onClick={() => document.getElementById("health")?.scrollTo}>
                健康効果を知る
              </button>
            </div>
            <div className="hero-stats">
              <div><div className="n">{PRODUCTS.length}</div><div className="k">掲載商品</div></div>
              <div><div className="n">{MAKERS.length}</div><div className="k">メーカー</div></div>
              <div><div className="n">{VARIETIES.length}</div><div className="k">品種</div></div>
              <div><div className="n num">{totalReviews}</div><div className="k">実食レビュー</div></div>
            </div>
          </div>
          <div className="hero-art" onClick={() => hero && onOpen(hero)} style={{ cursor: hero ? "pointer" : "default" }}>
            {hero
              ? <ProductImg p={hero} label={`${varietyName(hero.variety)}・${shapeName(hero.shape)}`} />
              : <Ph label="ヒーロー画像：干し芋の盛り合わせ（横長）" style={{ position: "absolute", inset: 0 }} />}
            {hero && (
              <div className="hero-float">
                <span className="rank-badge r1"><Ico name="leaf" size={16} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>{isNew ? "新着ピックアップ" : "今週の人気No.1"}</div>
                  <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                    {hero.name}
                  </div>
                </div>
                <span className="stars"><Stars value={hero.rating} /></span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* 品種から探す（品種ガイド兼用） */}
      <section className="wrap" style={{ marginTop: 18 }} id="variety">
        <div className="sec-head">
          <div className="sec-title"><small>BY VARIETY</small>芋の品種ガイド</div>
        </div>
        <div className="facet-grid">
          {VARIETIES.map((v) => {
            const cnt = PRODUCTS.filter((p) => p.variety === v.id).length;
            return (
              <div className="facet-tile" key={v.id} onClick={() => onGoList({ variety: [v.id] })}>
                <div className="ft-name">{v.name}</div>
                <div className="ft-note">{v.note}</div>
                <div className="ft-cnt num">{cnt} 商品</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* 形状から探す */}
      <section className="wrap" style={{ marginTop: 44 }}>
        <div className="sec-head">
          <div className="sec-title"><small>BY SHAPE</small>形状から探す</div>
        </div>
        <div className="facet-grid">
          {SHAPES.map((s) => {
            const cnt = PRODUCTS.filter((p) => p.shape === s.id).length;
            return (
              <div className="facet-tile" key={s.id} onClick={() => onGoList({ shape: [s.id] })}>
                <div className="ft-name">{s.name}</div>
                <div className="ft-note">{s.note}</div>
                <div className="ft-cnt num">{cnt} 商品</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* 人気ランキング */}
      <section className="wrap" style={{ marginTop: 50 }}>
        <div className="sec-head">
          <div className="sec-title"><small>RANKING</small>人気ランキング</div>
        </div>
        <div className="rank-row">
          {top.map((p) => (
            <div key={p.id} style={{ position: "relative" }}>
              <span className={`rank-badge r${p.rank}`} style={{ position: "absolute", top: 10, right: 10, zIndex: 3 }}>{p.rank}</span>
              <ProductCard p={p} onOpen={onOpen} />
            </div>
          ))}
        </div>
      </section>

      {/* 健康効果 */}
      <section className="wrap" style={{ marginTop: 56 }} id="health">
        <div className="health">
          <div className="sec-head">
            <div className="sec-title"><small>HEALTH</small>干し芋の健康効果</div>
          </div>
          <div className="health-grid">
            {HEALTH_POINTS.map((h) => (
              <div className="hp" key={h.title}>
                <span className="hp-ico"><Ico name={h.icon} size={24} /></span>
                <h4>{h.title}</h4>
                <p>{h.body}</p>
              </div>
            ))}
          </div>
          <div className="health-note">
            ※ 効果には個人差があります。本ページは一般的な栄養情報であり、特定の疾病の予防・治療を保証するものではありません。
          </div>
        </div>
      </section>

      {/* おいしい食べ方 */}
      <section className="wrap" style={{ marginTop: 56 }} id="howto">
        <div className="sec-head">
          <div className="sec-title"><small>HOW TO EAT</small>おいしい食べ方</div>
        </div>
        <div className="facet-grid">
          {EATING_TIPS.map((e, i) => (
            <div className="info-tile" key={e.t}>
              <span className="info-no num">{i + 1}</span>
              <div className="ft-name">{e.t}</div>
              <div className="ft-note">{e.body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 保存方法 */}
      <section className="wrap" style={{ marginTop: 50 }} id="storage">
        <div className="sec-head">
          <div className="sec-title"><small>STORAGE</small>保存方法</div>
        </div>
        <div className="facet-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px,1fr))" }}>
          {STORAGE_TIPS.map((s) => (
            <div className="info-tile" key={s.t}>
              <div className="ft-name">{s.t}</div>
              <div className="ft-note">{s.body}</div>
            </div>
          ))}
        </div>
        <div className="aff-note" style={{ marginTop: 14 }}>
          ヒント：表面に吹く白い粉は、芋の糖分が結晶化したもので甘さの証。カビではありませんので安心してお召し上がりください。
        </div>
      </section>

      {/* 運営者情報・お問い合わせ */}
      <section className="wrap" style={{ marginTop: 50 }} id="about">
        <div className="sec-head">
          <div className="sec-title"><small>ABOUT</small>サイトについて</div>
        </div>
        <div className="about-grid">
          <div className="card" style={{ padding: "22px 24px" }}>
            <h4 style={{ margin: "0 0 14px", fontFamily: "var(--font-head)", fontSize: 18 }}>運営者情報</h4>
            <dl className="about-dl">
              <dt>運営者</dt><dd>干し芋ナビ</dd>
              <dt>サイト名</dt><dd>干し芋ナビ</dd>
              <dt>開設</dt><dd>2026年</dd>
              <dt>内容</dt><dd>国内の干し芋を品種・形状・メーカーで比較し、実食レビューとあわせて紹介する情報サイトです。</dd>
            </dl>
            <p className="aff-note" style={{ marginTop: 16 }}>
              当サイトはアフィリエイトプログラム（楽天市場・Amazonアソシエイト等）を利用しています。リンクから購入された場合、当サイトが報酬を得ることがあります。
            </p>
          </div>
          <div className="card" style={{ padding: "22px 24px" }} id="contact">
            <h4 style={{ margin: "0 0 14px", fontFamily: "var(--font-head)", fontSize: 18 }}>お問い合わせ</h4>
            <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.7, margin: "0 0 16px" }}>
              掲載のご依頼、内容の誤りのご指摘、その他ご質問は、下記よりお気軽にご連絡ください。
            </p>
            <div className="contact-line">
              <span className="contact-lbl">メール</span>
              <a href="mailto:imohoshi25@gmail.com" className="num" style={{ color: "var(--olive-deep)", fontWeight: 700 }}>imohoshi25@gmail.com</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { FilterPanel, TopPage });