// Hero patterns for PACE LP — 3 refined search-first variants
// Principles applied:
//  - No decorative SVG (concentric circles, dot patterns, sparkles, "+" marks)
//  - Icons reduced to bare minimum (search glass only, in pattern 2/3)
//  - Stats woven into prose, never a 4-tile row
//  - Long-form copy, no telegraphic 体言止め tagline
//  - Asymmetric grids, generous paper-like whitespace
//  - Product photos as protagonist (placeholders sized & framed for real shots)

const { useState: useStateH } = React;

// Hero search bar の共通ロジック。input + 3 select + 送信。
function useHeroSearch() {
  const [kw, setKw] = useStateH("");
  const [scene, setScene] = useStateH("");
  const [budget, setBudget] = useStateH("");
  const [lot, setLot] = useStateH("");
  const submit = () => window.applyHeroSearch({ keyword: kw, scene, budget, lot });
  const onKey = (e) => { if (e.key === "Enter") { e.preventDefault(); submit(); } };
  return { kw, setKw, scene, setScene, budget, setBudget, lot, setLot, submit, onKey };
}

// 共通のセレクト。value="" が placeholder を兼ねる。
function HeroSelect({ label, opts, value, onChange, style }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} style={style}>
      <option value="">{label}</option>
      {opts.map((o) => <option key={o} value={o}>{o}</option>)}
    </select>
  );
}

// Shared product placeholder. Real catalog photo goes here later.
const ProductPhoto = ({ p, ratio = "4 / 5", showBadge = true, tone = "warm" }) => {
  const tones = {
    warm:  { bg: "#ece6da", ink: "#a8a094" },
    cool:  { bg: "#e6e6e2", ink: "#a0a09a" },
    dark:  { bg: "#2a2620", ink: "#5a544a" },
  };
  const t = tones[tone] || tones.warm;
  return (
    <div style={{
      aspectRatio: ratio, background: t.bg, position: "relative", overflow: "hidden",
    }}>
      {/* Subtle paper grain — single soft gradient, not a pattern */}
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.5), transparent 60%)`,
      }} />
      {/* Filename hint — designers/devs see where photo goes */}
      <div style={{
        position: "absolute", bottom: 14, left: 14,
        fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
        fontSize: 13, color: t.ink, letterSpacing: "0.1em",
      }}>
        photo / {p?.cat?.toLowerCase?.() || "product"}_{String(p?.id || 0).padStart(2, "0")}
      </div>
      {showBadge && p?.badge && (
        <div style={{
          position: "absolute", top: 14, left: 14, padding: "4px 10px",
          background: "#1a1612", color: "#f4ead0",
          fontFamily: "'Noto Serif JP', 'Shippori Mincho', serif", fontSize: 12, letterSpacing: "0.2em", fontWeight: 500,
        }}>{p.badge}</div>
      )}
    </div>
  );
};

// Magnifying glass — kept as a single small icon (not "decorative SVG")
const SearchGlass = ({ size = 18, color = "#1a1612" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="7" />
    <path d="M21 21l-5-5" />
  </svg>
);

// =========================================================
// "選ばれる理由" — pace の強み4点をファーストビューに織り込む
// 装飾なし、罫線と漢数字番号、長めの説明文で「AI感」を避ける
// =========================================================
const WHY_REASONS = [
  {
    n: "一",
    title: "戦略としてのノベルティ",
    body: "ご担当者様のビジネス課題を伺った上で、企業戦略に沿ったオリジナルノベルティをご提案します。配って終わりではない、一手としてのノベルティです。",
  },
  {
    n: "二",
    title: "課題から逆算する企画",
    body: "御社が抱える課題を解くための装置として、ノベルティを設計します。記念品でも宣伝品でもない、もうひとつの企業戦略の手段としてご活用いただけます。",
  },
  {
    n: "三",
    title: "差別化されたものづくり",
    body: "市場に溢れる「普通のノベルティ」とは違う、御社のためにつくられた一点を。形・素材・印刷・パッケージまで、差別化を前提に組み上げます。",
  },
  {
    n: "四",
    title: "職人と仕上げる一点",
    body: "国内外の協力工場・職人とともに、御社の意向を汲んだオリジナルノベルティをかたちにします。発注先ではなく、共につくる相手としてお付き合いください。",
  },
];

const WhyChosen = ({ tone = "cream", title = "パーチェが選ばれる、四つの理由", variant }) => {
  const v = variant || window.__WHY_VARIANT || "A";
  if (v === "B") return <WhyChosenB tone={tone} title={title} />;
  if (v === "C") return <WhyChosenC tone={tone} title={title} />;
  if (v === "D") return <WhyChosenD tone={tone} title={title} />;
  if (v === "E") return <WhyChosenE tone={tone} title={title} />;
  return <WhyChosenA tone={tone} title={title} />;
};

const WHY_PALETTES = {
  cream: { bg: "#f4f1ea", panel: "#ede4d1", ink: "#1a1612", muted: "#6b6055", rule: "#d5c9aa", accent: "#9a7e3a", eyebrow: "#9a7e3a" },
  paper: { bg: "#ede4d1", panel: "#e3d6b5", ink: "#1a1612", muted: "#6b6055", rule: "#c8b878", accent: "#9a7e3a", eyebrow: "#9a7e3a" },
  indigo: { bg: "#1f2a3a", panel: "#293648", ink: "#f0e9d8", muted: "#a8a39a", rule: "#3d4a5e", accent: "#c8b878", eyebrow: "#c8b878" },
  forest: { bg: "#1d2b22", panel: "#27382e", ink: "#f4ead0", muted: "#a8a08e", rule: "#3a4a3d", accent: "#c8b878", eyebrow: "#c8b878" },
  burgundy: { bg: "#5a2a26", panel: "#6b332e", ink: "#f4ead0", muted: "#c8a89a", rule: "#7a4540", accent: "#e0c890", eyebrow: "#e0c890" },
};

// =========================================================
// Variant A — 漢数字+縦罫線4分割（既存）
// 帳簿のような端正さ。読み物として成立。
// =========================================================
const WhyChosenA = ({ tone, title }) => {
  const t = WHY_PALETTES[tone] || WHY_PALETTES.cream;
  return (
    <div style={{ background: t.bg, color: t.ink, padding: "72px 56px 80px", borderTop: `1px solid ${t.rule}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 44, gap: 32, flexWrap: "wrap" }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.eyebrow, fontSize: 14, letterSpacing: "0.35em" }}>
            Why pace &nbsp;—&nbsp; 選ばれる理由
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho', 'Noto Serif JP', serif", fontWeight: 400, fontSize: 22, lineHeight: 1.7, letterSpacing: "0.08em", margin: 0, color: t.ink }}>
            {title}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {WHY_REASONS.map((r, i) => (
            <div key={r.n} style={{ padding: "0 28px", borderLeft: i === 0 ? "none" : `1px solid ${t.rule}` }}>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 28, fontWeight: 400, color: t.accent, marginBottom: 18, letterSpacing: "0.1em" }}>{r.n}</div>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 19, fontWeight: 500, lineHeight: 1.7, color: t.ink, marginBottom: 16, letterSpacing: "0.06em" }}>{r.title}</div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14.5, lineHeight: 2.1, color: t.muted, margin: 0, letterSpacing: "0.03em" }}>{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// Variant B — 縦書きインデックス（雑誌の目次風）
// 左に大型タイトル+導入文、右に4項目を縦書きで並べる
// =========================================================
const WhyChosenB = ({ tone, title }) => {
  const t = WHY_PALETTES[tone] || WHY_PALETTES.cream;
  return (
    <div style={{ background: t.bg, color: t.ink, padding: "88px 56px 96px", borderTop: `1px solid ${t.rule}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "4fr 8fr", gap: 80, alignItems: "start" }}>
        <div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.eyebrow, fontSize: 14, letterSpacing: "0.35em", marginBottom: 28 }}>
            Why pace
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 400, fontSize: 32, lineHeight: 1.6, letterSpacing: "0.06em", margin: 0, color: t.ink }}>
            {title}
          </h2>
          <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 15, lineHeight: 2.2, color: t.muted, marginTop: 28, letterSpacing: "0.04em" }}>
            ノベルティを「配って終わる消耗品」ではなく、企業戦略の一手として捉え直すこと。それがパーチェの仕事です。
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {WHY_REASONS.map((r, i) => (
            <div key={r.n} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
              <div style={{
                writingMode: "vertical-rl", textOrientation: "mixed",
                fontFamily: "'Shippori Mincho', serif", fontSize: 19, fontWeight: 500,
                color: t.ink, lineHeight: 1.4, letterSpacing: "0.18em", marginBottom: 24,
                minHeight: 200,
              }}>
                <span style={{ color: t.accent, fontSize: 16, letterSpacing: "0.3em", marginRight: 14 }}>{`0${i + 1}`}</span>
                {r.title}
              </div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13.5, lineHeight: 2, color: t.muted, margin: 0, letterSpacing: "0.03em" }}>
                {r.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// Variant C — オーバーラップ大番号（タイポグラフィ前面）
// 大きな数字とタイトルが重なる構図、説明文は番号の下に控えめに
// =========================================================
const WhyChosenC = ({ tone, title }) => {
  const t = WHY_PALETTES[tone] || WHY_PALETTES.cream;
  const { isMobile, isTablet } = (window.useViewport || (() => ({ isMobile: false, isTablet: false })))();
  return (
    <div style={{
      background: t.bg, color: t.ink,
      padding: isMobile ? "56px 20px 64px" : "88px 56px 100px",
      borderTop: `1px solid ${t.rule}`,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.eyebrow, fontSize: isMobile ? 12 : 14, letterSpacing: "0.35em", marginBottom: 14 }}>
            Why pace &nbsp;—&nbsp; 選ばれる理由
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 400, fontSize: isMobile ? 20 : 26, lineHeight: 1.6, letterSpacing: "0.08em", margin: 0, color: t.ink }}>
            {title}
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)",
          gap: isMobile ? 48 : "56px 80px",
        }}>
          {WHY_REASONS.map((r, i) => (
            <div key={r.n} style={{ position: "relative", paddingLeft: isMobile ? 72 : 100, minHeight: 140 }}>
              <div style={{
                position: "absolute", left: 0, top: isMobile ? -16 : -24,
                fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontWeight: 300,
                fontSize: isMobile ? 64 : 96, lineHeight: 1, color: t.accent, opacity: 0.85, letterSpacing: "-0.02em",
              }}>
                {`0${i + 1}`}
              </div>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: isMobile ? 17 : 22, fontWeight: 500, lineHeight: 1.6, color: t.ink, marginBottom: 12, letterSpacing: "0.05em", paddingTop: 4 }}>
                {r.title}
              </div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: isMobile ? 13 : 15, lineHeight: 2.0, color: t.muted, margin: 0, letterSpacing: "0.03em", maxWidth: 480 }}>
                {r.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// Variant D — タイムライン横並び（プロセスの流れとして）
// 4本柱を「戦略 → 企画 → 差別化 → ものづくり」の流れに見立てる
// =========================================================
const WhyChosenD = ({ tone, title }) => {
  const t = WHY_PALETTES[tone] || WHY_PALETTES.cream;
  const stages = ["戦略", "企画", "差別化", "ものづくり"];
  return (
    <div style={{ background: t.bg, color: t.ink, padding: "80px 56px 96px", borderTop: `1px solid ${t.rule}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.eyebrow, fontSize: 14, letterSpacing: "0.35em", marginBottom: 14 }}>
            Why pace &nbsp;—&nbsp; 選ばれる理由
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 400, fontSize: 28, lineHeight: 1.6, letterSpacing: "0.08em", margin: 0, color: t.ink }}>
            {title}
          </h2>
        </div>
        {/* Timeline rule */}
        <div style={{ position: "relative", marginBottom: 24 }}>
          <div style={{ position: "absolute", left: "12.5%", right: "12.5%", top: 11, height: 1, background: t.rule }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", position: "relative" }}>
            {stages.map((stg, i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%",
                  background: t.bg, border: `1.5px solid ${t.accent}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 13, color: t.accent,
                }}>
                  {i + 1}
                </div>
                <div style={{ marginTop: 14, fontFamily: "'Shippori Mincho', serif", fontSize: 15, color: t.accent, letterSpacing: "0.2em" }}>
                  {stg}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 36, marginTop: 36 }}>
          {WHY_REASONS.map((r, i) => (
            <div key={r.n} style={{ textAlign: "center", padding: "0 14px" }}>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 20, fontWeight: 500, lineHeight: 1.6, color: t.ink, marginBottom: 14, letterSpacing: "0.06em" }}>
                {r.title}
              </div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 2, color: t.muted, margin: 0, letterSpacing: "0.03em", textAlign: "left" }}>
                {r.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// Variant E — 写真とペアリング（左右交互の縦積み）
// 各項目に商品写真プレースホルダを添え、説得力を出す
// =========================================================
const WhyChosenE = ({ tone, title }) => {
  const t = WHY_PALETTES[tone] || WHY_PALETTES.cream;
  const products = window.PRODUCTS || [];
  return (
    <div style={{ background: t.bg, color: t.ink, padding: "88px 56px 96px", borderTop: `1px solid ${t.rule}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 32 }}>
          <div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.eyebrow, fontSize: 14, letterSpacing: "0.35em", marginBottom: 14 }}>
              Why pace &nbsp;—&nbsp; 選ばれる理由
            </div>
            <h2 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 400, fontSize: 28, lineHeight: 1.6, letterSpacing: "0.08em", margin: 0, color: t.ink }}>
              {title}
            </h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {WHY_REASONS.map((r, i) => {
            const p = products[i] || {};
            return (
              <div key={r.n}>
                <div style={{ aspectRatio: "4 / 3", background: t.panel, position: "relative", overflow: "hidden", marginBottom: 20 }}>
                  <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.4), transparent 60%)" }} />
                  <div style={{ position: "absolute", top: 14, left: 14, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: t.accent, fontSize: 13, letterSpacing: "0.25em" }}>
                    {`No.0${i + 1}`}
                  </div>
                  <div style={{ position: "absolute", bottom: 14, right: 14, fontFamily: "'Shippori Mincho', serif", fontSize: 36, color: t.accent, opacity: 0.5, letterSpacing: "0.1em" }}>
                    {r.n}
                  </div>
                </div>
                <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 19, fontWeight: 500, lineHeight: 1.6, color: t.ink, marginBottom: 12, letterSpacing: "0.06em" }}>
                  {r.title}
                </div>
                <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 2, color: t.muted, margin: 0, letterSpacing: "0.03em" }}>
                  {r.body}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// =========================================================
// Pattern 1 — Quiet catalog (paper-white, asymmetric)
// 紙の図録のように静かに。タイトルは1サイズ、長文リードで語りかける。
// 上半分は見出し+リード+検索、下半分は1点の主役写真+小さな商品索引。
// =========================================================
function HeroSearch() {
  const featured = (window.PRODUCTS || []).slice(0, 1)[0];
  const grid = (window.PRODUCTS || []).slice(1, 7);
  const s = useHeroSearch();

  return (
    <>
      <section style={{ background: "#f4f1ea", color: "#1a1612", paddingTop: 96, paddingBottom: 88 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 56px" }}>

        {/* Top eyebrow — single line, very small */}
        <div style={{
          fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
          color: "#3d3530", fontSize: 14, letterSpacing: "0.35em", marginBottom: 56,
        }}>
          Strategic Novelty &nbsp;—&nbsp; pace
        </div>

        {/* Asymmetric headline + lede grid */}
        <div style={{
          display: "grid", gridTemplateColumns: "5fr 4fr", gap: 80, alignItems: "start", marginBottom: 72,
        }}>
          <div>
            <h1 style={{
              fontFamily: "'Shippori Mincho', 'Noto Serif JP', serif", fontWeight: 400,
              fontSize: 46, lineHeight: 1.55, letterSpacing: "0.04em", margin: 0,
              color: "#1a1612",
            }}>
              ノベルティ戦略の本質は、<br />
              <span style={{ color: "#9a7e3a" }}>経営戦略</span>である。
            </h1>
          </div>
          <div style={{ paddingTop: 18 }}>
            <div style={{
              fontFamily: "'Noto Serif JP', 'Shippori Mincho', serif", fontWeight: 400,
              fontSize: 15.5, lineHeight: 2.0, color: "#3d3530", letterSpacing: "0.05em",
            }}>
              <p style={{ margin: 0 }}>
                企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
              </p>
              <p style={{ margin: "16px 0 0" }}>
                ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
              </p>
              <p style={{ margin: "16px 0 0" }}>
                世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
              </p>
            </div>
          </div>
        </div>

        {/* Quiet search bar — paper field, no shadow */}
        <div style={{
          background: "#fff", border: "1px solid #1a1612",
          padding: "6px 6px 6px 24px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) 150px 140px 140px auto",
          alignItems: "center", marginBottom: 14,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingRight: 16, borderRight: "1px solid #e8e2d6" }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="商品名・キーワード（例：今治タオル）" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif", fontSize: 16, color: "#1a1612",
                padding: "20px 0", letterSpacing: "0.05em",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none", borderRight: "1px solid #e8e2d6", background: "transparent",
              fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#3d3530",
              padding: "20px 18px", outline: "none", appearance: "none", letterSpacing: "0.08em",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト", "災害備蓄", "自治体"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "#1a1612", color: "#f4f1ea", border: "none",
            padding: "20px 32px",
            fontFamily: "'Noto Serif JP', serif", fontSize: 15, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
          }}>探す</button>
        </div>

        {/* Inline link row instead of stat tiles */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: "#3d3530", letterSpacing: "0.1em",
          paddingBottom: 80, borderBottom: "1px solid #e0d8c8",
        }}>
          <div>
            よく検索されているもの&nbsp;—&nbsp;
            {["今治タオル", "ボールペン", "エコバッグ", "タンブラー", "ドリップコーヒー"].map((k, i, a) => (
              <React.Fragment key={k}>
                <a href="#catalog" style={{ color: "#1a1612", textDecoration: "underline", textUnderlineOffset: 4, textDecorationThickness: "0.5px" }}>{k}</a>
                {i < a.length - 1 ? "、" : ""}
              </React.Fragment>
            ))}
          </div>
          <a href="#contact" style={{ color: "#1a1612", textDecoration: "underline", textUnderlineOffset: 4, textDecorationThickness: "0.5px" }}>
            紙のカタログを取り寄せる &rarr;
          </a>
        </div>

        {/* Hero product band — one large photo + small index */}
        <div style={{
          display: "grid", gridTemplateColumns: "7fr 5fr", gap: 56, marginTop: 80,
        }}>
          <a href="#catalog" style={{ textDecoration: "none", color: "inherit" }}>
            <ProductPhoto p={featured} ratio="5 / 4" tone="warm" />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 18 }}>
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 13, letterSpacing: "0.25em", marginBottom: 6 }}>
                  This Month — {featured?.cat}
                </div>
                <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 20, fontWeight: 500 }}>
                  {featured?.name}
                </div>
              </div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#1a1612", fontSize: 15, letterSpacing: "0.2em" }}>
                no.{String(featured?.id).padStart(2, "0")} &rarr;
              </div>
            </div>
          </a>

          <div style={{ paddingTop: 8 }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
              color: "#3d3530", fontSize: 14, letterSpacing: "0.3em", marginBottom: 24,
              paddingBottom: 14, borderBottom: "1px solid #1a1612",
            }}>
              Index — 取り扱い商品より
            </div>
            <ol style={{
              listStyle: "none", padding: 0, margin: 0,
              display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: 22, columnGap: 32,
            }}>
              {grid.map((p) => (
                <li key={p.id}>
                  <a href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
                    <ProductPhoto p={p} ratio="1 / 1" tone="warm" showBadge={false} />
                    <div style={{ marginTop: 10, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 12, letterSpacing: "0.2em" }}>
                      {p.cat}
                    </div>
                    <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 15, fontWeight: 500, lineHeight: 1.6, marginTop: 2 }}>
                      {p.name}
                    </div>
                  </a>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
    <WhyChosen tone="cream" />
    </>
  );
}

// =========================================================
// Pattern 2 — Dark editorial (deep ink, large search card on warm paper)
// 黒インクの上半分に長文の挨拶文。下半分は紙色に戻り、検索 + 主役写真2点。
// =========================================================
function HeroSearchHero() {
  const a = (window.PRODUCTS || [])[0];
  const b = (window.PRODUCTS || [])[1];
  const c = (window.PRODUCTS || [])[2];
  const s = useHeroSearch();
  const { isMobile, isTablet } = (window.useViewport || (() => ({ isMobile: false, isTablet: false })))();
  const compact = isMobile || isTablet;
  // WordPress から商品が非同期で読み込まれたら再描画(Featured が出るように)
  const [, setTick] = useStateH(0);
  React.useEffect(() => {
    const onLoaded = () => setTick((t) => t + 1);
    window.addEventListener("pace:products-loaded", onLoaded);
    return () => window.removeEventListener("pace:products-loaded", onLoaded);
  }, []);

  return (
    <>
      <section style={{ background: "#f4f1ea", color: "#1a1612" }}>
      {/* Top — warm cream panel with golden accent rule */}
      <div style={{ background: "#ede4d1", color: "#1a1612", paddingTop: isMobile ? 88 : 120, paddingBottom: isMobile ? 56 : 88, borderBottom: "1px solid #d5c9aa" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: isMobile ? "0 20px" : "0 56px" }}>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
            color: "#9a7e3a", fontSize: isMobile ? 11 : 14, letterSpacing: "0.3em",
            marginBottom: isMobile ? 24 : 32,
          }}>
            Strategic Novelty &nbsp;—&nbsp; pace
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: compact ? "1fr" : "5fr 5fr",
            gap: compact ? 32 : 96,
            alignItems: "start",
          }}>
            <h1 style={{
              fontFamily: "'Shippori Mincho', 'Noto Serif JP', serif", fontWeight: 400,
              fontSize: isMobile ? 32 : (isTablet ? 40 : 52),
              lineHeight: 1.5, letterSpacing: "0.06em", margin: 0,
              color: "#1a1612",
            }}>
              ノベルティ戦略の<br />
              本質は、<br />
              <span style={{ color: "#9a7e3a" }}>経営戦略</span>である。
            </h1>
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontWeight: 400,
              fontSize: isMobile ? 13 : 15.5, lineHeight: 1.95, color: "#3d3530", letterSpacing: "0.04em",
            }}>
              <p style={{ margin: 0 }}>
                企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom — paper, search overlapping the seam */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: isMobile ? "0 20px" : "0 56px" }}>
        {/* Search bar overlapping the seam (モバイルは縦並び) */}
        <div style={{
          marginTop: isMobile ? 32 : -36, marginBottom: isMobile ? 48 : 72,
          background: "#fff", border: "1px solid #1a1612",
          padding: isMobile ? "12px" : "8px 8px 8px 28px",
          display: compact ? "flex" : "grid",
          flexDirection: compact ? "column" : undefined,
          gridTemplateColumns: compact ? undefined : "minmax(0, 1fr) 150px 140px 140px auto",
          alignItems: compact ? "stretch" : "center",
          gap: compact ? 8 : 0,
        }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 12,
            paddingRight: compact ? 0 : 16,
            paddingLeft: compact ? 14 : 0,
            borderRight: compact ? "none" : "1px solid #e8e2d6",
            borderBottom: compact ? "1px solid #e8e2d6" : "none",
          }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="探したい商品の名前、キーワード" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif",
                fontSize: isMobile ? 14 : 16, color: "#1a1612",
                padding: isMobile ? "16px 0" : "22px 0", letterSpacing: "0.05em",
                width: "100%",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none",
              borderRight: compact ? "none" : "1px solid #e8e2d6",
              borderBottom: compact ? "1px solid #e8e2d6" : "none",
              background: "transparent",
              fontFamily: "'Noto Serif JP', serif",
              fontSize: isMobile ? 14 : 15, color: "#3d3530",
              padding: isMobile ? "14px 12px" : "22px 18px",
              outline: "none", appearance: "none", letterSpacing: "0.08em",
              width: "100%",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト", "災害備蓄"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "#9a7e3a", color: "#fefcf6", border: "none",
            padding: isMobile ? "16px 24px" : "22px 36px",
            fontFamily: "'Noto Serif JP', serif",
            fontSize: isMobile ? 14 : 15, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
            marginTop: compact ? 8 : 0,
          }}>この条件で探す</button>
        </div>

        {/* Featured 3 — コンパクトな横並び(商品なしなら非表示)
            選定ロジック:
              1) isFeatured が true の商品を最優先(featuredOrder 昇順)
              2) 該当なしの場合は、全商品の先頭3件をフォールバック表示 */}
        {(() => {
          const all = window.PRODUCTS || [];
          if (all.length === 0) return null;
          const marked = all.filter((p) => p.isFeatured)
            .sort((a, b) => {
              const ao = a.featuredOrder ?? 9999;
              const bo = b.featuredOrder ?? 9999;
              return ao - bo;
            });
          const featured = (marked.length > 0 ? marked : all).slice(0, 3);
          if (featured.length === 0) return null;
          const cardImg = (p) => {
            if (Array.isArray(p.images) && p.images.length > 0) return p.images[0];
            if (p.imageUrl) return p.imageUrl;
            return `uploads/products/product_${String(p.id).padStart(2, "0")}.jpg`;
          };
          return (
            <div style={{ marginBottom: isMobile ? 48 : 80 }}>
              <div style={{
                display: "flex", alignItems: "baseline", justifyContent: "space-between",
                marginBottom: isMobile ? 16 : 24, gap: 16, flexWrap: "wrap",
              }}>
                <div style={{
                  fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
                  color: "#9a7e3a", fontSize: isMobile ? 12 : 14, letterSpacing: "0.3em",
                }}>
                  Featured &nbsp;—&nbsp; 注目の商品
                </div>
                <a href="#catalog" style={{
                  fontFamily: "'Noto Serif JP', serif", fontSize: isMobile ? 12 : 13,
                  color: "#3d3530", textDecoration: "none", letterSpacing: "0.1em",
                  borderBottom: "1px solid #9a7e3a", paddingBottom: 2,
                }}>すべて見る →</a>
              </div>
              <div style={{
                display: "grid",
                gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                gap: isMobile ? 14 : 20,
              }}>
                {featured.map((p) => (
                  <a key={p.id} href="#catalog" style={{
                    textDecoration: "none", color: "inherit",
                    background: "#fff", border: "1px solid #e8e2d6", borderRadius: 3,
                    overflow: "hidden", display: "flex",
                    flexDirection: isMobile ? "row" : "column",
                    transition: "transform .3s ease, box-shadow .3s ease",
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 10px 28px -14px rgba(45,37,32,0.18)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
                  >
                    <div style={{
                      width: isMobile ? 110 : "100%",
                      height: isMobile ? 110 : 160,
                      flexShrink: 0,
                      background: "#f4f0e8",
                    }}>
                      <img
                        src={cardImg(p)}
                        alt={p.name}
                        onError={(e) => { e.currentTarget.style.display = "none"; }}
                        style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}
                      />
                    </div>
                    <div style={{
                      padding: isMobile ? "12px 14px" : "16px 18px 18px",
                      display: "flex", flexDirection: "column", justifyContent: "center",
                      flex: 1, minWidth: 0,
                    }}>
                      <div style={{
                        fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
                        color: "#9a7e3a", fontSize: 11, letterSpacing: "0.18em",
                        marginBottom: 4, textTransform: "none",
                      }}>{p.cat || "Product"}</div>
                      <div style={{
                        fontFamily: "'Shippori Mincho', serif",
                        fontSize: isMobile ? 14 : 15, fontWeight: 500, color: "#1a1612",
                        lineHeight: 1.5, marginBottom: 6,
                        overflow: "hidden", textOverflow: "ellipsis",
                        display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical",
                      }}>{p.name}</div>
                      {p.price && (
                        <div style={{
                          fontFamily: "'Shippori Mincho', serif",
                          fontSize: isMobile ? 13 : 14, color: "#3d3530", fontWeight: 500,
                          letterSpacing: "0.02em",
                        }}>
                          {p.price}
                          <span style={{ fontSize: 10, color: "#6b6560", marginLeft: 4 }}>(税抜)</span>
                        </div>
                      )}
                    </div>
                  </a>
                ))}
              </div>
            </div>
          );
        })()}

      </div>
    </section>
    <WhyChosen tone="paper" />
    </>
  );
}

// =========================================================
// Pattern 3 — Forest green (deep green ink + warm cream, asymmetric library)
// 深い緑のサイドバンド+クリーム紙。本棚のように写真が並ぶ。
// =========================================================
function HeroSearchRich() {
  const lead = (window.PRODUCTS || [])[0];
  const items = (window.PRODUCTS || []).slice(1, 5);
  const s = useHeroSearch();

  return (
    <>
      <section style={{ background: "#f1ebde", color: "#1a1612" }}>
      {/* Top band: deep green left, cream right — single grid, no abs positioning */}
      <div style={{
        display: "grid", gridTemplateColumns: "minmax(360px, 38%) 1fr",
        alignItems: "stretch",
      }}>
        {/* Green left panel */}
        <div style={{ background: "#1d2b22", color: "#f4ead0", padding: "120px 56px 96px" }}>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
            color: "#c8b878", fontSize: 14, letterSpacing: "0.35em", marginBottom: 40,
          }}>
            The Catalogue, vol. 30
          </div>
          <h1 style={{
            fontFamily: "'Shippori Mincho', serif", fontWeight: 400,
            fontSize: 38, lineHeight: 1.65, letterSpacing: "0.05em", margin: 0,
            color: "#f4ead0",
          }}>
            ノベルティ戦略の<br />
            本質は、<br />
            <span style={{ color: "#c8b878" }}>経営戦略</span>である。
          </h1>
          <div style={{
            marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(244,234,208,.3)",
            fontFamily: "'Shippori Mincho', serif", fontSize: 15, letterSpacing: "0.4em", color: "#c8b878",
          }}>
            戦略型ノベルティの図録 &nbsp;—&nbsp; pace
          </div>
        </div>

        {/* Cream right panel — lede + intro */}
        <div style={{ padding: "120px 56px 96px", maxWidth: 720 }}>
          <div style={{
            fontFamily: "'Noto Serif JP', serif", fontWeight: 400,
            fontSize: 16, lineHeight: 2.1, color: "#1a1612", letterSpacing: "0.05em",
          }}>
            <p style={{ margin: 0 }}>
              企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
            </p>
            <p style={{ margin: "18px 0 0" }}>
              ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
            </p>
            <p style={{ margin: "18px 0 0" }}>
              世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
            </p>
          </div>
          <a href="#contact" style={{
            display: "inline-block", marginTop: 36,
            fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#1a1612",
            textDecoration: "underline", textUnderlineOffset: 6, textDecorationThickness: "0.5px",
            letterSpacing: "0.15em",
          }}>
            紙のカタログを取り寄せる &rarr;
          </a>
        </div>
      </div>

      {/* Body — cream, centered */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 56px 88px" }}>
        {/* Search bar */}
        <div style={{
          background: "#fff", border: "1px solid #1a1612",
          padding: "6px 6px 6px 22px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) 130px 130px 130px auto",
          alignItems: "center", marginBottom: 72,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingRight: 14, borderRight: "1px solid #e8e2d6" }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="商品名・キーワード" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#1a1612",
                padding: "18px 0", letterSpacing: "0.05em",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none", borderRight: "1px solid #e8e2d6", background: "transparent",
              fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: "#3d3530",
              padding: "18px 14px", outline: "none", appearance: "none", letterSpacing: "0.08em",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "#1d2b22", color: "#f4ead0", border: "none",
            padding: "18px 28px",
            fontFamily: "'Noto Serif JP', serif", fontSize: 14, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
          }}>探す</button>
        </div>

        {/* Library row — one large + four small, asymmetric */}
        <div style={{
          display: "grid", gridTemplateColumns: "6fr 6fr", gap: 56, alignItems: "start",
        }}>
          {/* Lead photo */}
          <a href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <ProductPhoto p={lead} ratio="4 / 5" tone="warm" />
            <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 13, letterSpacing: "0.25em", marginBottom: 6 }}>
                  Plate I &nbsp;—&nbsp; {lead?.cat}
                </div>
                <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 20, fontWeight: 500 }}>
                  {lead?.name}
                </div>
              </div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#1a1612", fontSize: 15, letterSpacing: "0.2em" }}>
                no.{String(lead?.id).padStart(2, "0")}
              </div>
            </div>
          </a>

          {/* Four-up grid — but offset, like a contact sheet */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, paddingTop: 56 }}>
            {items.map((p, i) => (
              <a key={p.id} href="#catalog" style={{
                textDecoration: "none", color: "inherit", display: "block",
                marginTop: i === 1 ? 32 : 0, marginBottom: i === 2 ? 32 : 0,
              }}>
                <ProductPhoto p={p} ratio="1 / 1" tone={i % 2 ? "cool" : "warm"} showBadge={false} />
                <div style={{ marginTop: 12 }}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 12, letterSpacing: "0.2em" }}>
                    Plate {["II", "III", "IV", "V"][i]} &nbsp;—&nbsp; {p.cat}
                  </div>
                  <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 15, fontWeight: 500, lineHeight: 1.6, marginTop: 4 }}>
                    {p.name}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>

      </div>
    </section>
    <WhyChosen tone="forest" />
    </>
  );
}

// =========================================================
// Pattern 4 — Indigo & cream "spread" (見開き)
// 雑誌の見開きのように左ページに藍色の小見出し、右ページに大きな写真。
// 検索バーは下端に1本の細いラインで配置。
// =========================================================
function HeroSpread() {
  const a = (window.PRODUCTS || [])[0];
  const small = (window.PRODUCTS || []).slice(1, 4);
  const s = useHeroSearch();

  return (
    <>
      <section style={{ background: "#f4f1ea", color: "#1a1612", paddingTop: 80, paddingBottom: 80 }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 56px" }}>
        {/* Top eyebrow row, very minimal */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          paddingBottom: 24, borderBottom: "1px solid #1a1612", marginBottom: 64,
          fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
          color: "#1a1612", fontSize: 14, letterSpacing: "0.3em",
        }}>
          <span>The Spread &nbsp;—&nbsp; pace strategic novelty</span>
          <span style={{ color: "#3d3530" }}>April, MMXXVI</span>
        </div>

        {/* Spread: left text page / right photo page */}
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80, alignItems: "start" }}>
          {/* Left page */}
          <div style={{ paddingTop: 24 }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
              color: "#2e3a55", fontSize: 15, letterSpacing: "0.3em", marginBottom: 32,
            }}>
              Vol. 30 &nbsp;—&nbsp; Towel
            </div>
            <h1 style={{
              fontFamily: "'Shippori Mincho', serif", fontWeight: 400,
              fontSize: 42, lineHeight: 1.55, letterSpacing: "0.05em", margin: 0,
              color: "#2e3a55",
            }}>
              ノベルティ戦略の本質は、<br />
              <span style={{ color: "#9a7e3a" }}>経営戦略</span>である。
            </h1>
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontWeight: 400,
              fontSize: 15, lineHeight: 2.0, color: "#3d3530", margin: "32px 0 0", letterSpacing: "0.05em",
            }}>
              <p style={{ margin: 0 }}>
                企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                ECO素材・バイオマス素材など、環境に配慮した仕様もご相談いただけます。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                世界陸上・デフリンピック・ホノルルマラソンから大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないノベルティを、圧倒的なコスト感と精度でお届けします。
              </p>
            </div>
          </div>

          {/* Right page: large photo + caption */}
          <a href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <ProductPhoto p={a} ratio="4 / 5" tone="warm" />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 18 }}>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 18, fontWeight: 500 }}>
                {a?.name}
              </div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 14, letterSpacing: "0.2em" }}>
                Plate I &nbsp;/&nbsp; {a?.cat}
              </div>
            </div>
          </a>
        </div>

        {/* Bottom: thin search line (no card, no shadow) */}
        <div style={{
          marginTop: 80, paddingTop: 28, borderTop: "1px solid #1a1612",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) 140px 140px 140px auto",
          alignItems: "center", gap: 0,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingRight: 16 }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="商品名・キーワードでお探しください" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif", fontSize: 16, color: "#1a1612",
                padding: "16px 0", letterSpacing: "0.05em",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none", borderLeft: "1px solid #d5c9aa", background: "transparent",
              fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#3d3530",
              padding: "16px 18px", outline: "none", appearance: "none", letterSpacing: "0.08em",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "transparent", color: "#1a1612", border: "1px solid #1a1612",
            padding: "14px 32px", marginLeft: 16,
            fontFamily: "'Noto Serif JP', serif", fontSize: 15, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
          }}>探す</button>
        </div>

        {/* Small thumbs strip */}
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {small.map((p, i) => (
            <a key={p.id} href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <ProductPhoto p={p} ratio="3 / 2" tone={i === 1 ? "cool" : "warm"} showBadge={false} />
              <div style={{ marginTop: 10, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 13, letterSpacing: "0.2em" }}>
                Plate {["II","III","IV"][i]} &nbsp;/&nbsp; {p.cat}
              </div>
              <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 16, fontWeight: 500, marginTop: 2 }}>
                {p.name}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
    <WhyChosen tone="indigo" />
    </>
  );
}

// =========================================================
// Pattern 5 — Marquee headline (大判タイポ + 余白)
// 一行の大きな見出しが画面を横断。下に検索と4枚の小さな写真。
// 写真より文字が主役。引き算の構図。
// =========================================================
function HeroMarquee() {
  const items = (window.PRODUCTS || []).slice(0, 4);
  const s = useHeroSearch();

  return (
    <>
      <section style={{ background: "#f6f3ec", color: "#1a1612", paddingTop: 96, paddingBottom: 80 }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        {/* Eyebrow */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
          color: "#3d3530", fontSize: 14, letterSpacing: "0.3em", marginBottom: 56,
        }}>
          <span>Strategic Novelty &nbsp;—&nbsp; pace</span>
          <span>パーチェ株式会社</span>
        </div>

        {/* Marquee headline — single line that fills width */}
        <h1 style={{
          fontFamily: "'Shippori Mincho', serif", fontWeight: 400,
          fontSize: "clamp(40px, 5.5vw, 88px)", lineHeight: 1.25, letterSpacing: "0.04em",
          margin: 0, color: "#1a1612",
        }}>
          ノベルティ戦略の本質は、<br />
          <span style={{ color: "#9a7e3a" }}>経営戦略</span>である。
        </h1>

        {/* Lede sits to the right, below */}
        <div style={{
          display: "grid", gridTemplateColumns: "5fr 7fr", gap: 64, alignItems: "start",
          marginTop: 56, paddingBottom: 56, borderBottom: "1px solid #d5c9aa",
        }}>
          <div />
          <div style={{
            fontFamily: "'Noto Serif JP', serif", fontWeight: 400,
            fontSize: 16, lineHeight: 2.1, color: "#3d3530", letterSpacing: "0.05em",
          }}>
            <p style={{ margin: 0 }}>
              企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
            </p>
            <p style={{ margin: "16px 0 0" }}>
              ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
            </p>
            <p style={{ margin: "16px 0 0" }}>
              世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
            </p>
          </div>
        </div>

        {/* Search bar */}
        <div style={{
          marginTop: 56, marginBottom: 64,
          background: "#fff", border: "1px solid #1a1612",
          padding: "6px 6px 6px 24px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) 150px 140px 140px auto",
          alignItems: "center",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingRight: 16, borderRight: "1px solid #e8e2d6" }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="商品名・キーワード(例:今治タオル)" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif", fontSize: 16, color: "#1a1612",
                padding: "20px 0", letterSpacing: "0.05em",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none", borderRight: "1px solid #e8e2d6", background: "transparent",
              fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#3d3530",
              padding: "20px 18px", outline: "none", appearance: "none", letterSpacing: "0.08em",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "#9a7e3a", color: "#fefcf6", border: "none",
            padding: "20px 32px",
            fontFamily: "'Noto Serif JP', serif", fontSize: 15, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
          }}>探す</button>
        </div>

        {/* Four-tile thumb strip, equal grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          {items.map((p, i) => (
            <a key={p.id} href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <ProductPhoto p={p} ratio="4 / 5" tone={i % 2 ? "cool" : "warm"} showBadge={i === 0} />
              <div style={{ marginTop: 12 }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#3d3530", fontSize: 13, letterSpacing: "0.2em" }}>
                  No.{String(i + 1).padStart(2, "0")} &nbsp;/&nbsp; {p.cat}
                </div>
                <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 16, fontWeight: 500, marginTop: 2, lineHeight: 1.6 }}>
                  {p.name}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
    <WhyChosen tone="cream" />
    </>
  );
}

// =========================================================
// Pattern 6 — Burgundy ledger (深い赤茶 + 帳簿のような表組み)
// 老舗商家の帳簿のような端正さ。番号付きインデックス + 1点写真。
// =========================================================
function HeroLedger() {
  const items = (window.PRODUCTS || []).slice(0, 6);
  const lead = items[0];
  const s = useHeroSearch();

  return (
    <>
      <section style={{ background: "#f4f1ea", color: "#1a1612" }}>
      {/* Burgundy header band */}
      <div style={{ background: "#5a2a26", color: "#f4ead0", paddingTop: 64, paddingBottom: 64 }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 56px" }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "baseline",
            paddingBottom: 24, borderBottom: "1px solid rgba(244,234,208,.3)", marginBottom: 32,
            fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
            fontSize: 14, letterSpacing: "0.3em", color: "#d8b878",
          }}>
            <span>The Ledger &nbsp;/&nbsp; Strategic Novelty</span>
            <span>pace &nbsp;/&nbsp; vol. 30</span>
          </div>
          <h1 style={{
            fontFamily: "'Shippori Mincho', serif", fontWeight: 400,
            fontSize: 44, lineHeight: 1.5, letterSpacing: "0.05em", margin: 0,
            color: "#f4ead0",
          }}>
            ノベルティ戦略の本質は、<br />
            <span style={{ color: "#e0c890" }}>経営戦略</span>である。
          </h1>
          <div style={{
            fontFamily: "'Noto Serif JP', serif", fontWeight: 400,
            fontSize: 15.5, lineHeight: 2.1, color: "#e0d0a8", margin: "32px 0 0", letterSpacing: "0.05em",
            maxWidth: 880,
          }}>
            <p style={{ margin: 0 }}>
              企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
            </p>
            <p style={{ margin: "14px 0 0" }}>
              ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
            </p>
            <p style={{ margin: "14px 0 0" }}>
              世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
            </p>
          </div>
        </div>
      </div>

      {/* Body — ledger-style index + lead photo */}
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "72px 56px 88px" }}>
        {/* Search row, narrow, slightly inset */}
        <div style={{
          background: "#fff", border: "1px solid #1a1612",
          padding: "6px 6px 6px 22px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) 140px 140px 140px auto",
          alignItems: "center", marginBottom: 64,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingRight: 14, borderRight: "1px solid #e8e2d6" }}>
            <SearchGlass />
            <input
              value={s.kw} onChange={(e) => s.setKw(e.target.value)} onKeyDown={s.onKey}
              placeholder="商品名・キーワード" style={{
                flex: 1, border: "none", outline: "none", background: "transparent",
                fontFamily: "'Noto Serif JP', serif", fontSize: 15, color: "#1a1612",
                padding: "18px 0", letterSpacing: "0.05em",
              }} />
          </div>
          {(() => { const selStyle = {
              border: "none", borderRight: "1px solid #e8e2d6", background: "transparent",
              fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: "#3d3530",
              padding: "18px 14px", outline: "none", appearance: "none", letterSpacing: "0.08em",
            }; return (<>
              <HeroSelect label="利用シーン" value={s.scene} onChange={s.setScene} style={selStyle}
                opts={["展示会", "周年記念", "VIPギフト"]} />
              <HeroSelect label="予算帯" value={s.budget} onChange={s.setBudget} style={selStyle}
                opts={["〜500円", "500〜2,000円", "2,000円〜"]} />
            </>); })()}
          <button onClick={s.submit} style={{
            background: "#5a2a26", color: "#f4ead0", border: "none",
            padding: "18px 28px",
            fontFamily: "'Noto Serif JP', serif", fontSize: 14, letterSpacing: "0.3em", fontWeight: 500,
            cursor: "pointer",
          }}>探す</button>
        </div>

        {/* Two columns: ledger (left) + lead photo (right) */}
        <div style={{ display: "grid", gridTemplateColumns: "5fr 5fr", gap: 80, alignItems: "start" }}>
          {/* Ledger: numbered index */}
          <div>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
              paddingBottom: 14, borderBottom: "1px solid #1a1612", marginBottom: 8,
              fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
              color: "#1a1612", fontSize: 14, letterSpacing: "0.3em",
            }}>
              <span>Index &nbsp;—&nbsp; 取扱品より</span>
              <span style={{ color: "#3d3530" }}>パーチェ株式会社</span>
            </div>
            {items.map((p, i) => (
              <a key={p.id} href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
                <div style={{
                  display: "grid", gridTemplateColumns: "60px 1fr 100px 24px",
                  alignItems: "baseline", padding: "20px 0", borderBottom: i < items.length - 1 ? "1px solid #e0d8c8" : "1px solid #1a1612",
                  gap: 16,
                }}>
                  <span style={{
                    fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
                    color: "#9a7e3a", fontSize: 20, letterSpacing: "0.1em",
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span style={{
                    fontFamily: "'Shippori Mincho', serif", fontSize: 17, fontWeight: 500, lineHeight: 1.5,
                  }}>
                    {p.name}
                  </span>
                  <span style={{
                    fontFamily: "'Noto Serif JP', serif", fontSize: 13, color: "#3d3530", letterSpacing: "0.15em", textAlign: "right",
                  }}>
                    {p.cat}
                  </span>
                  <span style={{
                    fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
                    color: "#1a1612", fontSize: 16, textAlign: "right",
                  }}>&rarr;</span>
                </div>
              </a>
            ))}
          </div>

          {/* Lead photo */}
          <div style={{ position: "sticky", top: 24 }}>
            <a href="#catalog" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <ProductPhoto p={lead} ratio="4 / 5" tone="warm" />
              <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid #1a1612", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#9a7e3a", fontSize: 14, letterSpacing: "0.25em" }}>
                    Featured &nbsp;—&nbsp; {lead?.cat}
                  </div>
                  <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 22, fontWeight: 500, marginTop: 6, letterSpacing: "0.04em" }}>
                    {lead?.name}
                  </div>
                </div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 15, letterSpacing: "0.2em" }}>
                  no.{String(lead?.id).padStart(2, "0")}
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
    <WhyChosen tone="burgundy" />
    </>
  );
}

Object.assign(window, { HeroSearch, HeroSearchHero, HeroSearchRich, HeroSpread, HeroMarquee, HeroLedger, WhyChosen });