/* tenroin-top/lp-profile.jsx — 汎用プロフィールページ型（雑誌風・写真メイン・インタビュー紙面）
   ──────────────────────────────────────────────────────────────────────
   config駆動の単一テンプレ。lp-data-profile-<handle>.jsx の1オブジェクト（window.LP_PROFILE_DATA）を
   差し替えるだけで、講師／クリエイターズマーケットの作家・写真家／MY READING LIFE の寄稿者
   いずれのプロフィールにもなる。lp.jsx に依存しない自己完結（creators 等どこにでも置ける）。
   天狼院の誌面トークン（colors_and_type.css）を流用。スタイルは lp-profile.css。
   エントリ html は <ProfileLP cfg={window.LP_PROFILE_DATA}/> を描画。

   ★CD意匠版での追加（構造クラス pf- は維持。新規は装飾レイヤーで、データ/文言は不変）：
     - PfNav … 固定マストヘッド（ロゴ＝天狼院ワードマーク／スクロールで反転）
     - Hero に装飾レイヤー（マストヘッド行・大インデックス・額装フレーム・ヴィネット・微粒子グレイン）
     - PfHead に通し番号＋星罫（celestial モチーフ）
     - PfFoot … 誌面の奥付（ワードマーク＋タグライン）
   いずれも意匠目的の追加要素。差し込み口（pf-）は従来どおり。 */

const { useEffect: usePfEffect, useState: usePfState } = React;
const PF_STAR = '✦';
const PF_LOGO_CREAM = 'assets/logo-wordmark-cream.png';
const PF_LOGO_INK = 'assets/logo-wordmark-ink.png';

function PfHead({ eyebrow, title, no }) {
  return (
    <div className="pf-sechead" data-reveal>
      <div className="pf-sechead-top">
        {no && <span className="pf-sechead-no">{no}</span>}
        <span className="pf-sechead-star">{PF_STAR}</span>
        {eyebrow && <div className="pf-eyebrow">{eyebrow}</div>}
      </div>
      {title && <h2 className="pf-h2">{title}</h2>}
    </div>
  );
}

/* ===== 固定マストヘッド（ロゴ＋誌名）===== */
function PfNav() {
  const [scrolled, setScrolled] = usePfState(false);
  usePfEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > window.innerHeight * 0.72);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'pf-nav' + (scrolled ? ' is-scrolled' : '')}>
      <a className="pf-nav-brand" href="#pf-top" aria-label="天狼院書店 READING LIFE">
        <img className="pf-nav-logo pf-nav-logo--cream" src={PF_LOGO_CREAM} alt="天狼院書店" />
        <img className="pf-nav-logo pf-nav-logo--ink" src={PF_LOGO_INK} alt="天狼院書店" />
      </a>
      <div className="pf-nav-right">
        <span className="pf-nav-label">TENRO-IN CREATORS</span>
        <a className="pf-nav-cta" href="#pf-interview">読む <i>→</i></a>
      </div>
    </header>
  );
}

/* ===== 主役（全画面級の写真＋大きな名前） ===== */
function PfHero({ h }) {
  if (!h) return null;
  return (
    <header className="pf-hero" id="pf-top" style={{ '--pf-pos': h.focus || 'center 18%', '--pf-pos-m': h.focusMobile || 'center 20%' }}>
      <div className="pf-hero-media">
        {h.photo
          ? <img src={h.photo} alt={h.name || ''} />
          : <image-slot class="ph-c" shape="rect" placeholder="主役の堂々たるポートレート（縦・雑誌の表紙級）"></image-slot>}
        <div className="pf-hero-scrim"></div>
        <div className="pf-hero-vignette" aria-hidden="true"></div>
        <div className="pf-hero-grain" aria-hidden="true"></div>
      </div>
      <div className="pf-hero-frame" aria-hidden="true"></div>
      <div className="pf-hero-flash" aria-hidden="true"></div>
      <div className="pf-hero-top">
        <span className="pf-hero-top-l">READING LIFE — 本のその先の体験</span>
        <span className="pf-hero-top-r">{PF_STAR} SINCE 2013</span>
      </div>
      <div className="pf-hero-copy">
        {h.kicker && <div className="pf-hero-kicker">{h.kicker}</div>}
        <h1 className="pf-hero-name"><span className="pf-hero-name-in">{h.name}</span></h1>
        {h.reading && <div className="pf-hero-reading">{h.reading}</div>}
        {h.role && (
          <div className="pf-hero-role">
            <span className="pf-hero-role-txt">{h.role}</span>
            {/* ★公認シール：hero.cert があれば肩書き脇に表示（天狼院書店 公認）。意匠は lp-profile.css(.pf-hero-cert) */}
            {h.cert && (
              <span className="pf-hero-cert" title={'天狼院書店 ' + h.cert} aria-label={'天狼院書店 ' + h.cert}>
                <span className="pf-hero-cert-ring" aria-hidden="true"></span>
                <span className="pf-hero-cert-star" aria-hidden="true">{PF_STAR}</span>
                <span className="pf-hero-cert-label">{h.cert}</span>
                <span className="pf-hero-cert-foot" aria-hidden="true">TENRO-IN</span>
              </span>
            )}
          </div>
        )}
        {h.tagline && <p className="pf-hero-tagline">{h.tagline}</p>}
      </div>
      <div className="pf-hero-scroll"><span>SCROLL</span><i></i></div>
    </header>
  );
}

/* ===== 導入（リード＋略歴） ===== */
function PfIntro({ cfg }) {
  const x = cfg.intro; if (!x) return null;
  return (
    <section className="pf-section pf-intro">
      <div className="pf-wrap pf-narrow">
        {x.lead && <p className="pf-lead" data-reveal>{x.lead}</p>}
        {x.bio && <div className="pf-bio" data-reveal>{x.bio.map((p, i) => <p key={i}>{p}</p>)}</div>}
        {x.facts && <div className="pf-facts" data-reveal>
          {x.facts.map((f, i) => (
            <div className="pf-fact" key={i}><div className="pf-fact-n">{f.n}<span>{f.u}</span></div><div className="pf-fact-l">{f.l}</div></div>
          ))}
        </div>}
      </div>
    </section>
  );
}

/* ===== 取引媒体・クライアント（権威の物量） ===== */
function PfClients({ cfg }) {
  const c = cfg.clients;
  if (!c && !cfg.books) return null;
  return (
    <section className="pf-section pf-clients">
      <div className="pf-wrap" data-reveal>
        {c && c.label && <div className="pf-clients-label">{c.label}</div>}
        {c && c.items && <div className="pf-clients-items">{c.items.map((x, i) => <span className="pf-client" key={i}>{x}</span>)}</div>}
        <PfBookShelf books={cfg.books} center />
      </div>
    </section>
  );
}

/* ===== 著書 書影シェルフ（WORKS の中に表示）＝本の表紙を並べる。author 系クリエイター用。 =====
   books = { items:[{ t, pub, date, cover, href, cta }] }（PfClients から呼ぶ）。center で中央寄せ。
   ★書影を使える仕組み：cover に画像パス(assets/...)があれば表紙画像。無ければ image-slot
     プレースホルダ（後から cover を入れれば差し替わる）。本のような陰影は CSS(.pf-book-cover)。 */
function PfBookShelf({ books, center }) {
  if (!books || !(books.items || []).length) return null;
  return (
    <div className={'pf-books-shelf' + (center ? ' is-center' : '')} data-reveal>
      {books.items.map((it, i) => {
        const inner = (
          <>
            <div className="pf-book-cover">
              {it.cover
                ? <img src={it.cover} alt={it.t || ''} loading="lazy" />
                : <image-slot class="ph-c" shape="rect" id={'book-' + i} placeholder={it.t || '書影'}></image-slot>}
            </div>
            <div className="pf-book-info">
              <div className="pf-book-t">{it.t}</div>
              {(it.pub || it.date) && <div className="pf-book-meta">{[it.pub, it.date].filter(Boolean).join(' ／ ')}</div>}
              {it.href && <span className="pf-book-go">{it.cta || '見る'} ▸</span>}
            </div>
          </>
        );
        return (
          <article className="pf-book" key={i}>
            {it.href
              ? <a className="pf-book-link" href={it.href} target="_blank" rel="noopener">{inner}</a>
              : <div className="pf-book-link is-static">{inner}</div>}
          </article>
        );
      })}
    </div>
  );
}

/* ===== インタビュー紙面（Q&A＋プルクオート） ===== */
function PfInterview({ cfg }) {
  const v = cfg.interview; if (!v) return null;
  return (
    <section className="pf-section pf-interview" id="pf-interview">
      <div className="pf-wrap pf-narrow">
        <PfHead eyebrow={v.eyebrow} title={v.title} no="01" />
        {v.lead && <p className="pf-lead" data-reveal>{v.lead}</p>}
        <div className="pf-qa">
          {(v.blocks || []).map((b, i) => {
            if (b.pull) return <blockquote className="pf-pull" data-reveal key={i}>{b.pull}</blockquote>;
            if (b.q) return (
              <div className="pf-qa-item" data-reveal key={i}>
                <div className="pf-q"><span className="pf-q-mark">Q</span>{b.q}</div>
                <div className="pf-a">{b.a}</div>
              </div>
            );
            if (b.img) return (
              <figure className="pf-qa-img" data-reveal key={i}>
                {b.img === true ? <image-slot class="ph-c" shape="rect" placeholder={b.cap || '取材カット'}></image-slot> : <img src={b.img} alt={b.cap || ''} loading="lazy" />}
                {b.cap && <figcaption>{b.cap}</figcaption>}
              </figure>
            );
            return <p className="pf-a" data-reveal key={i}>{b.p}</p>;
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== 作品ギャラリー（写真／動画 対応の GALLERY システム） =====
   ★item スキーマ（lp-data の gallery.items[]）— すべて任意：
     { cap:'自然光', tag:'PORTRAIT',            // tag があれば自動でフィルタタブ生成
       src:'...jpg',                            // 写真
       type:'video', video:'...mp4',            // 動画（ホバー再生＋ライトボックス再生）
       poster:'...jpg', duration:'1:12',        // 動画のポスター/尺
       wide:true | tall:true }                  // 非対称グリッドのスパン
   写真と動画を1つのグリッドに混在可。クリックでライトボックス。 */
function PfGalleryCell({ it, i, feature, onOpen }) {
  const isVideo = it.type === 'video' || !!it.video;
  const media = it.src || it.poster;
  const clickable = !!(media || it.video);
  const cls = 'pf-gcell'
    + (feature ? ' is-feature' : (it.wide ? ' is-wide' : '') + (it.tall ? ' is-tall' : ''))
    + (isVideo ? ' is-video' : '');
  return (
    <figure
      className={cls}
      onClick={clickable ? () => onOpen(i) : undefined}
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(i); } } : undefined}
    >
      <div className="pf-gcell-media">
        {isVideo && it.video
          ? <video src={it.video} poster={it.poster || it.src} muted loop playsInline preload="metadata"
              onMouseEnter={(e) => { const p = e.currentTarget.play(); if (p && p.catch) p.catch(() => {}); }}
              onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }} />
          : media
            ? <img src={media} alt={it.cap || ''} loading="lazy" />
            : <image-slot class="ph-c" shape="rect" placeholder={it.cap || '作品'}></image-slot>}
      </div>
      {isVideo && <span className="pf-gcell-play" aria-hidden="true"><i></i></span>}
      {isVideo && it.duration && <span className="pf-gcell-dur">{it.duration}</span>}
      <div className="pf-gcell-info">
        <span className="pf-gcell-idx">{String(i + 1).padStart(2, '0')}</span>
        <span className="pf-gcell-meta">
          {it.tag && <span className="pf-gcell-tag">{it.tag}</span>}
          {it.cap && <span className="pf-gcell-cap">{it.cap}</span>}
        </span>
        <span className="pf-gcell-view">VIEW</span>
      </div>
    </figure>
  );
}

function PfLightbox({ items, index, onClose, onNav }) {
  usePfEffect(() => {
    if (index == null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowRight') onNav(1);
      else if (e.key === 'ArrowLeft') onNav(-1);
    };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [index]);
  if (index == null) return null;
  const it = items[index] || {};
  const isVideo = it.type === 'video' || !!it.video;
  const media = it.src || it.poster;
  return (
    <div className="pf-lightbox" onClick={onClose}>
      <div className="pf-lb-top">
        <span className="pf-lb-counter">{String(index + 1).padStart(2, '0')}<i>/</i>{String(items.length).padStart(2, '0')}</span>
        <button className="pf-lb-close" onClick={onClose} aria-label="閉じる">✕</button>
      </div>
      <button className="pf-lb-nav pf-lb-prev" onClick={(e) => { e.stopPropagation(); onNav(-1); }} aria-label="前へ">‹</button>
      <button className="pf-lb-nav pf-lb-next" onClick={(e) => { e.stopPropagation(); onNav(1); }} aria-label="次へ">›</button>
      <figure className="pf-lb-stage" onClick={(e) => e.stopPropagation()} key={index}>
        <div className="pf-lb-media">
          {isVideo && it.video
            ? <video src={it.video} poster={it.poster || it.src} controls autoPlay muted loop playsInline />
            : media
              ? <img src={media} alt={it.cap || ''} />
              : <div className="pf-lb-empty">作品</div>}
        </div>
        <figcaption className="pf-lb-cap">
          {it.tag && <span className="pf-lb-tag">{it.tag}</span>}
          {it.cap && <span className="pf-lb-title">{it.cap}</span>}
        </figcaption>
      </figure>
    </div>
  );
}

function PfGallery({ cfg }) {
  const g = cfg.gallery; if (!g) return null;
  const items = g.items || [];
  const tags = [];
  items.forEach((it) => { if (it.tag && tags.indexOf(it.tag) < 0) tags.push(it.tag); });
  const [filter, setFilter] = usePfState('ALL');
  const [open, setOpen] = usePfState(null);
  const shown = filter === 'ALL' ? items : items.filter((it) => it.tag === filter);
  const nav = (d) => setOpen((o) => (o + d + shown.length) % shown.length);
  return (
    <section className="pf-section pf-gallery" id="pf-works">
      <div className="pf-wrap">
        <div className="pf-gallery-head">
          <PfHead eyebrow={g.eyebrow} title={g.title} no="02" />
          {tags.length > 1 && (
            <div className="pf-gallery-filter" data-reveal>
              <button className={'pf-filter-btn' + (filter === 'ALL' ? ' is-on' : '')} onClick={() => { setFilter('ALL'); setOpen(null); }}>ALL</button>
              {tags.map((t) => <button key={t} className={'pf-filter-btn' + (filter === t ? ' is-on' : '')} onClick={() => { setFilter(t); setOpen(null); }}>{t}</button>)}
            </div>
          )}
        </div>
        <div className="pf-gallery-grid" data-reveal key={filter}>
          {shown.map((it, i) => <PfGalleryCell key={i} it={it} i={i} feature={i === 0} onOpen={setOpen} />)}
        </div>
      </div>
      <PfLightbox items={shown} index={open} onClose={() => setOpen(null)} onNav={nav} />
    </section>
  );
}

/* ===== Works（書く系）＝記事リスト（誌面の目次風）。写真/動画は gallery、書く系は writings を使う。 ===== */
function PfWritings({ cfg }) {
  const w = cfg.writings; if (!w) return null;
  return (
    <section className="pf-section pf-writings" id="pf-writings">
      <div className="pf-wrap pf-narrow">
        <PfHead eyebrow={w.eyebrow} title={w.title} no="03" />
        {w.lead && <p className="pf-lead" data-reveal>{w.lead}</p>}
        <ul className="pf-wlist">
          {(w.items || []).map((it, i) => (
            <li className="pf-witem" data-reveal key={i}>
              <a className="pf-witem-link" href={it.href || '#'}>
                <span className="pf-witem-idx">{String(i + 1).padStart(2, '0')}</span>
                <span className="pf-witem-body">
                  {it.meta && <div className="pf-witem-meta">{it.meta}</div>}
                  <div className="pf-witem-title">{it.t}</div>
                  {it.ex && <p className="pf-witem-ex">{it.ex}</p>}
                  <span className="pf-witem-go">{it.cta || '読む'} ▸</span>
                </span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ===== 略年譜・受賞・仕事（テキスト実績） ===== */
function PfCredits({ cfg }) {
  const c = cfg.credits; if (!c) return null;
  return (
    <section className="pf-section pf-credits">
      <div className="pf-wrap pf-narrow">
        <PfHead eyebrow={c.eyebrow} title={c.title} no="04" />
        {(c.groups || []).map((grp, i) => (
          <div className="pf-credit-group" data-reveal key={i}>
            <div className="pf-credit-h">{grp.h}</div>
            <ul className="pf-credit-list">{grp.items.map((x, j) => <li key={j}>{x}</li>)}</ul>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== 出口（More）＝3つの独立ブロック。使う場所に応じて config の有無で出し分け =====
   cfg.learn   …〈Learning〉この人から、学ぶ（講座/レッスン）       ＝講師プロフィールで使う
   cfg.market  …〈Creators Market〉作品を、買う（作品・プリント等） ＝クリエイターズマーケットで使う
   cfg.articles…〈MY READING LIFE〉記事を、読む（寄稿・連載）        ＝MY READING LIFE で使う
   いずれも、その config キーがある時だけ描画（無ければ非表示）。 */
function PfMoreBlock({ b, k }) {
  if (!b) return null;
  return (
    <div className="pf-more-block" data-reveal>
      <PfHead eyebrow={b.eyebrow} title={b.title} />
      {b.lead && <p className="pf-lead">{b.lead}</p>}
      <div className="pf-link-grid">
        {(b.cards || []).map((c, i) => (
          <a className="pf-link-card" href={c.href} key={i}>
            {/* ★メインビジュアル：c.img があれば画像、無ければ image-slot（著者がドラッグで差せる）。
                市場では lp-data の各 card に img:'assets/...' を入れる。slotはリンク遷移を抑止。 */}
            <div className="pf-link-media" onClick={c.img ? undefined : (e) => e.preventDefault()}>
              {c.img
                ? <img src={c.img} alt={c.t || ''} loading="lazy" />
                : <image-slot class="ph-c" shape="rect" id={'more-' + (k || 'x') + '-' + i} placeholder={c.t || 'メインビジュアル'}></image-slot>}
            </div>
            <div className="pf-link-body">
              <div className="pf-link-t">{c.t}</div>
              {c.d && <div className="pf-link-d">{c.d}</div>}
              {/* CTA矢印は lp-profile.css(v3) の金リング(::after)に一本化。旧インライン▸は削除 */}
              <span className="pf-link-go">{c.cta || 'ひらく'}</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}
/* ===== 出展・登壇・出店（会える場所） =====
   cfg.activities … 文学フリマ／個展／トークショー／定期講座 等の予定・実績。
   item: { date, tag('出展'/'個展'/'登壇'/'講座'…), name, venue, note, href(任意) }。
   クリエイターの「いま会える場所」を誌面の予定表のように並べる。 */
function PfActivities({ cfg }) {
  const a = cfg.activities; if (!a) return null;
  return (
    <section className="pf-section pf-activities" id="pf-activities">
      <div className="pf-wrap pf-narrow">
        <PfHead eyebrow={a.eyebrow || 'Activities'} title={a.title} no={a.no} />
        {a.lead && <p className="pf-lead" data-reveal>{a.lead}</p>}
        <ul className="pf-act-list">
          {(a.items || []).map((it, i) => {
            const inner = (
              <>
                <span className="pf-act-date">{it.date}</span>
                <span className="pf-act-main">
                  <span className="pf-act-top">
                    {it.tag && <span className="pf-act-tag">{it.tag}</span>}
                    <span className="pf-act-name">{it.name}</span>
                  </span>
                  {it.venue && <span className="pf-act-venue">{it.venue}</span>}
                  {it.note && <span className="pf-act-note">{it.note}</span>}
                </span>
                {it.href && <span className="pf-act-go">▸</span>}
              </>
            );
            return (
              <li className="pf-act-item" data-reveal key={i}>
                {it.href
                  ? <a className="pf-act-link" href={it.href}>{inner}</a>
                  : <div className="pf-act-link is-static">{inner}</div>}
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

/* ===== Connect（フォロー・リンクのハブ）＝HP替わりの宣伝セクション =====
   cfg.connect … SNS・note・YouTube・Web・問い合わせ等を“リッチなカード”で。
   link: { platform, handle, note, href, cta(任意) }。出口(More)の闇の上で gold が映える。 */
function PfMore({ cfg }) {
  if (!cfg.learn && !cfg.market && !cfg.articles) return null;
  return (
    <section className="pf-section pf-more">
      <div className="pf-wrap">
        {/* タイトルのコピー「この人の、その先へ。」はCDコメントによりカット。セクション名(More/番号)は残す */}
        <PfHead eyebrow="More" no={cfg.moreNo || '05'} />
        <PfMoreBlock b={cfg.learn} k="learn" />
        <PfMoreBlock b={cfg.market} k="market" />
        <PfMoreBlock b={cfg.articles} k="articles" />
      </div>
    </section>
  );
}

/* ===== Connect（フォロー・リンク）＝独立したダークの最終セクション =====
   `pf-more` を併用してダーク配色（地・見出し色）を継承。仕事を依頼する(Hire)の直後に置き、
   「学ぶ/買う/読む（More）→ 仕事を依頼する（Hire）→ フォロー&連絡（Connect）」の流れにする。
   cfg.connect（リッチ）優先・無ければ簡易 cfg.sns にフォールバック。 */
function PfConnect({ cfg }) {
  const c = cfg.connect;
  if (!c && !cfg.sns) return null;
  return (
    <section className="pf-section pf-more pf-connect-sec" id="pf-connect">
      <div className="pf-wrap">
        {c ? (
          <div className="pf-connect" data-reveal>
            <PfHead eyebrow={c.eyebrow || 'Connect'} title={c.title} />
            {c.lead && <p className="pf-lead">{c.lead}</p>}
            <div className="pf-connect-grid">
              {(c.links || []).map((l, i) => (
                <a className="pf-connect-card" href={l.href || '#'} key={i} target="_blank" rel="noopener">
                  <span className="pf-connect-plat">{l.platform}</span>
                  {l.handle && <span className="pf-connect-handle">{l.handle}</span>}
                  {l.note && <span className="pf-connect-note">{l.note}</span>}
                  <span className="pf-connect-go">{l.cta || 'ひらく'}</span>
                </a>
              ))}
            </div>
          </div>
        ) : (
          <div className="pf-sns" data-reveal>{cfg.sns.map((s, i) => <a className="pf-sns-a" href={s.href} key={i} target="_blank" rel="noopener">{s.label}</a>)}</div>
        )}
      </div>
    </section>
  );
}

/* ===== 仕事を依頼する（天狼院クリエイター・エージェント機能） =====
   cfg.hire … 天狼院が窓口(エージェント)となって、このクリエイターへの仕事をつなぐ。
   { agentNote, eyebrow, title, lead, services:[{t,d}], steps:[{n,t,d}], cta:{label,href,note} }。
   依頼できる仕事 → 依頼の流れ → 大きなCTA。HP替わりプロフィールの“収益の入口”。 */
function PfHire({ cfg }) {
  const h = cfg.hire; if (!h) return null;
  return (
    <section className="pf-section pf-hire" id="pf-hire">
      <div className="pf-wrap pf-narrow pf-hire-in" data-reveal>
        {h.agentNote && <div className="pf-hire-badge">{PF_STAR} {h.agentNote}</div>}
        {h.eyebrow && <div className="pf-eyebrow pf-hire-eyebrow">{h.eyebrow}</div>}
        {h.title && <h2 className="pf-h2 pf-hire-title">{h.title}</h2>}
        {h.lead && <p className="pf-lead pf-hire-lead">{h.lead}</p>}
        {h.services && <div className="pf-hire-services">
          {h.services.map((s, i) => (
            <div className="pf-hire-svc" key={i}>
              <div className="pf-hire-svc-t">{s.t}</div>
              {s.d && <div className="pf-hire-svc-d">{s.d}</div>}
              {/* ★参考価格：service.price があれば下部に表示（金の値札ライン）。意匠は lp-profile.css(.pf-hire-svc-price) */}
              {s.price && <div className="pf-hire-svc-price"><span className="pf-hire-svc-price-k">参考価格</span><span className="pf-hire-svc-price-v">{s.price}</span></div>}
            </div>
          ))}
        </div>}
        {h.steps && <ol className="pf-hire-steps">
          {h.steps.map((s, i) => (
            <li className="pf-hire-step" key={i}>
              <span className="pf-hire-step-n">{s.n}</span>
              <span className="pf-hire-step-t">{s.t}</span>
              {s.d && <span className="pf-hire-step-d">{s.d}</span>}
            </li>
          ))}
        </ol>}
        {h.cta && <div className="pf-hire-cta-wrap">
          <a className="pf-hire-cta" href={h.cta.href || '#'}>{h.cta.label || '仕事を依頼する'}</a>
          {h.cta.note && <div className="pf-hire-cta-note">{h.cta.note}</div>}
        </div>}
      </div>
    </section>
  );
}

/* ===== 奥付（フッター） ===== */
function PfFoot() {
  return (
    <footer className="pf-foot">
      <div className="pf-wrap pf-foot-in">
        <img className="pf-foot-logo" src={PF_LOGO_CREAM} alt="天狼院書店 READING LIFE" />
        <p className="pf-foot-tag">読むだけではない。書く、撮る、語る、出会う。<br />本のその先の体験を。</p>
        <div className="pf-foot-meta">© TENRO-IN BOOK STORE — READING LIFE</div>
      </div>
    </footer>
  );
}

/* ===== ルート構成 ===== */
function ProfileLP({ cfg }) {
  return (
    <div className="pf-root ti">
      <PfNav />
      <PfHero h={cfg.hero} />
      <PfIntro cfg={cfg} />
      <PfClients cfg={cfg} />
      <PfInterview cfg={cfg} />
      <PfGallery cfg={cfg} />
      <PfWritings cfg={cfg} />
      <PfCredits cfg={cfg} />
      <PfActivities cfg={cfg} />
      <PfMore cfg={cfg} />
      <PfHire cfg={cfg} />
      <PfConnect cfg={cfg} />
      <PfFoot />
    </div>
  );
}

Object.assign(window, { ProfileLP });