/* =========================================================
   VARIANT B — "Paper & Ivory"
   White base, generous whitespace, thin hairlines.
   Blue for links/accents, red for a single word/brand mark.
   Very quiet, magazine-like.
   ========================================================= */
const VariantB = () => {
  const M = useResponsive();
  const B = makeB(M);
  return (
    <div style={B.root}>
      <header style={B.header}>
        <div style={B.topRow}>
          <span>since 1998</span>
          <span style={B.dot}>·</span>
          <span>宍粟市 山崎町</span>
          <span style={{ marginLeft: 'auto' }}>9:00 – 18:00 / 定休 月・第3火</span>
        </div>
        <div style={B.brandRow}>
          <PirosMark size={56} color="#2a241d" />
          <nav style={B.nav}>
            {[['About', 'お店'], ['Menu', 'メニュー'], ['Stylist', 'スタッフ'], ['Journal', 'お知らせ'], ['Access', 'アクセス']].map(([en, jp]) =>
            <a key={en} style={B.navItem}>
                <span style={B.navEn}>{en}</span>
                <span style={B.navJp}>{jp}</span>
              </a>
            )}
          </nav>
          <a style={B.bookBtn}>Reserve →</a>
        </div>
      </header>

      <section style={B.hero}>
        <div style={B.heroInner}>
          <div style={B.heroEyebrow}>— a small hair salon in 山崎町 —</div>
          <h1 style={{ ...B.heroH, fontSize: M.isMobile ? "32px" : (M.isTablet ? "48px" : "65px") }}>
            いつまでも、<br />
            <em style={B.heroHIt}>かわいく、美しく。</em>
          </h1>
          <p style={{ ...B.heroLead, fontSize: M.isMobile ? "14px" : "18px" }}>
            1998年から、町のみなさんの髪と向き合って。<br />
            丁寧な手仕事と、長いおつきあいを。
          </p>
        </div>
        <div style={B.heroPhoto}>
          <img src="assets/piros-exterior.png" alt="Piros exterior"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={B.heroCaption}>
            <span style={B.heroFig}>fig. 01</span>
            <span>青い壁の、小さなお店</span>
          </div>
        </div>
      </section>

      <div style={B.rule} />

      <section style={B.about}>
        <div style={B.sectionRow}>
          <div style={B.sectionLabel}>
            <div style={B.sLabelN}>01</div>
            <div style={B.sLabelEn}>About</div>
            <div style={B.sLabelJp}>お店のこと</div>
          </div>
          <div style={B.sectionBody}>
            <h2 style={B.h2}>
              青い壁の、<em style={B.itBlue}>ちいさな</em>美容室。
            </h2>
            <p style={B.pLead}>
              山崎町の角っこ、赤いひさしが目印のちいさなお店。<br />
              1998年から、町のみなさんの髪を担ってきました。
            </p>
            <p style={{ ...B.p, fontSize: M.isMobile ? "14px" : "18px" }}>
              大切にしているのは、ひとりひとりと向き合うゆったりとした時間。
              ご家族のこと、暮らしのこと、他愛ないおしゃべりも、私たちの仕事のうちです。
            </p>
            <p style={{ ...B.p, fontSize: M.isMobile ? "14px" : "18px" }}>
              小学生だったお客様が、いまはご自分のお嬢さんと一緒にいらしてくださる。
              そんな長いおつきあいを、これからもずっと。
            </p>

            <div style={B.valueRow}>
              {[
              ['気どらない', 'お客様の8割が地元の方。'],
              ['ていねい', '予約制で、お一人ずつのペースで。'],
              ['長いおつきあい', '親子2代・3代でのご来店も。']].
              map(([t, b]) =>
              <div key={t} style={B.value}>
                  <div style={B.valueT}>{t}</div>
                  <div style={{ ...B.valueB, fontSize: M.isMobile ? "12px" : "14px" }}>{b}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <div style={B.rule} />

      <section style={B.menu}>
        <div style={B.sectionRow}>
          <div style={B.sectionLabel}>
            <div style={B.sLabelN}>02</div>
            <div style={B.sLabelEn}>Menu</div>
            <div style={B.sLabelJp}>メニュー</div>
          </div>
          <div style={B.sectionBody}>
            <h2 style={B.h2}>料金表</h2>
            <div style={{ ...B.menuSub, fontSize: M.isMobile ? "12px" : "14px" }}>税込 / 初回カウンセリング（20分）無料</div>

            <div style={B.menuList}>
              {[
              [null, 'Hair'],
              ['カット', '¥4,800'],
              ['カット＋カラー', '¥9,800'],
              ['カット＋パーマ', '¥10,800'],
              ['リタッチ / 白髪染め', '¥5,800'],
              [null, 'Care'],
              ['トリートメント', '¥3,500'],
              ['ヘッドスパ 30 / 60 min', '¥3,000 / ¥5,000'],
              ['縮毛矯正', '¥13,000'],
              [null, 'Special'],
              ['ブライダルヘア', '¥8,800'],
              ['着付け / ヘアセット', '¥5,500 / ¥3,500'],
              ['メイク', '¥4,500']].
              map(([n, p], i) => n === null ?
              <div key={i} style={B.menuGroup}>
                  <span style={B.menuGroupEn}>{p}</span>
                </div> :

              <div key={i} style={B.menuRow}>
                  <span>{n}</span>
                  <span style={B.menuDots} />
                  <span style={B.menuP}>{p}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <div style={B.rule} />

      <section style={B.stylist}>
        <div style={B.sectionRow}>
          <div style={B.sectionLabel}>
            <div style={B.sLabelN}>03</div>
            <div style={B.sLabelEn}>Stylist</div>
            <div style={B.sLabelJp}>スタッフ</div>
          </div>
          <div style={B.sectionBody}>
            <h2 style={B.h2}>お迎えする三人。</h2>
            <div style={B.stylistGrid}>
              {[
              ['Takashi Hirano', '平野 貴志', 'Owner · 28y', '地元生まれ地元育ち。背伸びをしない美しさを。'],
              ['Yuki Nakamura', '中村 ゆき', 'Senior · 15y', '扱いやすいスタイル提案。ふたりの子のママ。'],
              ['Aoi Tsuji', '辻 あおい', 'Stylist · 6y', '艶のある仕上がり。縮毛矯正とトリートメント。']].
              map(([en, jp, role, bio]) =>
              <div key={en} style={B.stylistCard}>
                  <div style={B.stylistPhoto}><Placeholder label={en} tone="cream" /></div>
                  <div style={B.stylistRole}>{role}</div>
                  <div style={B.stylistNameEn}>{en}</div>
                  <div style={B.stylistNameJp}>{jp}</div>
                  <p style={B.stylistBio}>{bio}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <div style={B.rule} />

      <section style={B.journal}>
        <div style={B.sectionRow}>
          <div style={B.sectionLabel}>
            <div style={B.sLabelN}>04</div>
            <div style={B.sLabelEn}>Journal</div>
            <div style={B.sLabelJp}>お知らせ</div>
          </div>
          <div style={B.sectionBody}>
            <h2 style={B.h2}>最近のお知らせ</h2>
            <div style={B.jList}>
              {[
              ['お知らせ', '2026.04.20', '春のヘッドスパキャンペーンを開始しました'],
              ['お知らせ', '2026.04.10', 'ゴールデンウィーク期間の営業について'],
              ['ブログ', '2026.03.28', '白髪を活かすグレイカラーという選択肢'],
              ['ブログ', '2026.03.15', '梅雨に向けた髪のお手入れ 3つのコツ']].
              map(([cat, d, t]) =>
              <article key={t} style={B.jRow}>
                  <div style={B.jDate}>{d}</div>
                  <div style={B.jCat}>{cat}</div>
                  <div style={B.jT}>{t}</div>
                </article>
              )}
            </div>
          </div>
        </div>
      </section>

      <div style={B.rule} />

      <section style={B.access}>
        <div style={B.sectionRow}>
          <div style={B.sectionLabel}>
            <div style={B.sLabelN}>05</div>
            <div style={B.sLabelEn}>Access</div>
            <div style={B.sLabelJp}>ご予約・店舗情報</div>
          </div>
          <div style={B.sectionBody}>
            <h2 style={B.h2}>ご予約</h2>
            <p style={B.accessLead}>
              LINE またはサイト内フォームから、24時間受け付けております。
            </p>
            <div style={B.accessCtas}>
              <a style={B.ctaLine}>LINE で予約 →</a>
              <a style={B.ctaForm}>フォームで予約 →</a>
              <a style={B.ctaTel}>☎ 0790-00-0000</a>
            </div>
            <div style={B.accessGrid}>
              <div>
                {[
                ['Address', '〒671-2544 兵庫県宍粟市山崎町○○○-○'],
                ['Hours', '9:00 – 18:00'],
                ['Closed', '毎週月曜 / 第3火曜'],
                ['Parking', '店舗前に5台']].
                map(([k, v]) =>
                <div key={k} style={B.accessRow}>
                    <div style={B.accessK}>{k}</div>
                    <div style={B.accessV}>{v}</div>
                  </div>
                )}
              </div>
              <div style={B.mapBox}>
                <Placeholder label="山崎町" sub="map" tone="cream" />
                <div style={B.mapPin} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer style={B.footer}>
        <PirosMark size={40} color="#2a241d" />
        <div style={B.footerTag}>いつまでも、かわいく、美しく。</div>
        <div style={B.footerBase}>© 2026 Piros hair salon · since 1998</div>
      </footer>
    </div>);

};

const makeB = (M) => ({
  root: {
    width: '100%', background: '#ffffff', color: '#2a241d',
    fontFamily: '"Zen Kaku Gothic New","Noto Sans JP",sans-serif',
    fontSize: 14, lineHeight: 1.9
  },
  header: {
    padding: M.isMobile ? '14px 16px 16px' : (M.isTablet ? '16px 32px 20px' : '18px 72px 24px'),
    borderBottom: '1px solid rgba(42,36,29,0.08)'
  },
  topRow: {
    display: 'flex',
    gap: M.isMobile ? 6 : 10,
    alignItems: 'center',
    flexWrap: 'wrap',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 11 : 12,
    color: '#6a5e4e',
    marginBottom: M.isMobile ? 12 : 20
  },
  dot: { opacity: 0.5 },
  brandRow: {
    display: M.isMobile ? 'flex' : 'grid',
    flexDirection: M.isMobile ? 'column' : undefined,
    gridTemplateColumns: M.isMobile ? undefined : 'auto 1fr auto',
    alignItems: 'center',
    gap: M.isMobile ? 14 : 40
  },
  nav: {
    display: 'flex',
    gap: M.isMobile ? 18 : 32,
    justifyContent: 'center',
    overflowX: M.isMobile ? 'auto' : 'visible',
    whiteSpace: M.isMobile ? 'nowrap' : 'normal',
    width: M.isMobile ? '100%' : 'auto',
    paddingBottom: M.isMobile ? 4 : 0,
  },
  navItem: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, cursor: 'pointer', flex: M.isMobile ? '0 0 auto' : 'initial' },
  navEn: { fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: M.isMobile ? 13 : 15, color: '#2a241d' },
  navJp: { fontSize: 10, color: '#6a5e4e', letterSpacing: '0.2em' },
  bookBtn: {
    padding: M.isMobile ? '9px 18px' : '11px 22px',
    background: '#2a241d', color: '#fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 13,
    cursor: 'pointer'
  },

  hero: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : '1fr 1fr',
    gap: M.isMobile ? 32 : 0,
    padding: M.isMobile ? '40px 16px 60px' : (M.isTablet ? '60px 32px 80px' : '80px 72px 120px'),
    alignItems: 'center'
  },
  heroInner: { paddingRight: M.isMobile ? 0 : 40, order: M.isMobile ? 1 : 0 },
  heroEyebrow: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 14,
    color: '#a83242',
    marginBottom: M.isMobile ? 18 : 32
  },
  heroH: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 500,
    fontSize: M.isMobile ? 32 : (M.isTablet ? 52 : 72),
    lineHeight: 1.3, margin: M.isMobile ? '0 0 20px 0' : '0 0 32px 0'
  },
  heroHIt: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    color: '#2c4d7a'
  },
  heroLead: { fontSize: M.isMobile ? 13 : 15, lineHeight: 2.1, color: '#3d3428', margin: 0 },
  heroPhoto: {
    position: 'relative',
    aspectRatio: M.isMobile ? '4/3' : '4/5',
    order: M.isMobile ? 2 : 0,
    marginBottom: M.isMobile ? 32 : 0,
  },
  heroCaption: {
    position: 'absolute',
    bottom: M.isMobile ? -24 : -32,
    left: 0,
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 13, color: '#6a5e4e',
    display: 'flex', gap: 12, alignItems: 'baseline'
  },
  heroFig: { color: '#a83242' },

  rule: { height: 1, background: 'rgba(42,36,29,0.1)', margin: M.isMobile ? '0 16px' : (M.isTablet ? '0 32px' : '0 72px') },

  sectionRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? '160px 1fr' : '220px 1fr'),
    gap: M.isMobile ? 24 : (M.isTablet ? 36 : 60),
    padding: M.isMobile ? '60px 16px' : (M.isTablet ? '80px 32px' : '100px 72px')
  },
  sectionLabel: M.isMobile
    ? { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap', borderBottom: '1px solid rgba(42,36,29,0.1)', paddingBottom: 14 }
    : { position: 'sticky', top: 20, alignSelf: 'start' },
  sLabelN: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 14,
    color: '#a83242',
    marginBottom: M.isMobile ? 0 : 8
  },
  sLabelEn: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 22 : 32,
    color: '#2a241d', marginBottom: M.isMobile ? 0 : 6
  },
  sLabelJp: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 12,
    color: '#6a5e4e', letterSpacing: '0.2em'
  },
  sectionBody: { maxWidth: 820 },
  h2: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 500,
    fontSize: M.isMobile ? 26 : (M.isTablet ? 36 : 44),
    lineHeight: 1.4,
    margin: M.isMobile ? '0 0 24px 0' : '0 0 32px 0'
  },
  itBlue: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    color: '#2c4d7a'
  },

  about: {},
  pLead: {
    fontFamily: '"Shippori Mincho", serif',
    fontSize: M.isMobile ? 16 : 20,
    lineHeight: 2,
    color: '#2c4d7a',
    margin: M.isMobile ? '0 0 22px 0' : '0 0 28px 0'
  },
  p: { fontSize: M.isMobile ? 13 : 14, lineHeight: 2.1, color: '#3d3428', margin: '0 0 18px 0' },
  valueRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 22 : 32,
    paddingTop: M.isMobile ? 28 : 40,
    marginTop: M.isMobile ? 28 : 40,
    borderTop: '1px solid rgba(42,36,29,0.1)'
  },
  value: {},
  valueT: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 700,
    fontSize: 17, color: '#2a241d', marginBottom: 8
  },
  valueB: { fontSize: 12, lineHeight: 1.9, color: '#6a5e4e' },

  menu: {},
  menuSub: { fontSize: 12, color: '#6a5e4e', letterSpacing: '0.1em', marginTop: -16, marginBottom: 32 },
  menuList: {},
  menuGroup: {
    marginTop: M.isMobile ? 28 : 36, marginBottom: 14,
    borderBottom: '1px solid rgba(42,36,29,0.25)', paddingBottom: 10
  },
  menuGroupEn: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 18 : 22, color: '#2c4d7a'
  },
  menuRow: { display: 'flex', alignItems: 'baseline', padding: '12px 0', fontSize: M.isMobile ? 13 : 14 },
  menuDots: { flex: 1, borderBottom: '1px dotted rgba(42,36,29,0.25)', margin: '0 10px', transform: 'translateY(-4px)' },
  menuP: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 14 : 15, color: '#a83242'
  },

  stylist: {},
  stylistGrid: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 32 : 28
  },
  stylistCard: {},
  stylistPhoto: { position: 'relative', aspectRatio: '3/4', marginBottom: 18 },
  stylistRole: {
    fontFamily: '"Archivo", sans-serif', fontSize: 10, letterSpacing: '0.3em',
    color: '#6a5e4e', marginBottom: 6
  },
  stylistNameEn: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 20 : 22, color: '#2a241d', marginBottom: 3
  },
  stylistNameJp: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 13,
    color: '#6a5e4e', letterSpacing: '0.15em', marginBottom: 12
  },
  stylistBio: { fontSize: 12, lineHeight: 1.9, color: '#3d3428', margin: 0 },

  journal: {},
  jList: {},
  jRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '90px 1fr' : '110px 90px 1fr',
    gap: M.isMobile ? 12 : 20,
    padding: M.isMobile ? '16px 0' : '20px 0',
    borderBottom: '1px solid rgba(42,36,29,0.1)',
    cursor: 'pointer'
  },
  jDate: { fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: M.isMobile ? 12 : 14, color: '#2c4d7a' },
  jCat: { fontFamily: '"Shippori Mincho", serif', fontSize: 11, color: '#a83242', letterSpacing: '0.2em', display: M.isMobile ? 'none' : 'block' },
  jT: { fontSize: M.isMobile ? 13 : 14, color: '#2a241d' },

  access: {},
  accessLead: { fontSize: M.isMobile ? 13 : 14, lineHeight: 2, color: '#3d3428', margin: '0 0 28px 0' },
  accessCtas: { display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: M.isMobile ? 32 : 48 },
  ctaLine: {
    padding: M.isMobile ? '12px 18px' : '14px 24px',
    background: '#2c4d7a', color: '#fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor: 'pointer'
  },
  ctaForm: {
    padding: M.isMobile ? '12px 18px' : '14px 24px',
    background: '#2a241d', color: '#fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor: 'pointer'
  },
  ctaTel: {
    padding: M.isMobile ? '12px 18px' : '14px 24px',
    background: 'transparent', color: '#2a241d',
    border: '1px solid #2a241d',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor: 'pointer'
  },
  accessGrid: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : '1fr 1fr',
    gap: M.isMobile ? 28 : 40,
    alignItems: 'start'
  },
  accessRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '90px 1fr' : '100px 1fr',
    gap: M.isMobile ? 12 : 20,
    padding: '14px 0', borderBottom: '1px solid rgba(42,36,29,0.1)'
  },
  accessK: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 13, color: '#a83242'
  },
  accessV: { fontSize: M.isMobile ? 12 : 13, lineHeight: 1.8, color: '#2a241d' },
  mapBox: { position: 'relative', aspectRatio: M.isMobile ? '16/10' : '4/3' },
  mapPin: {
    position: 'absolute', top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 14, height: 14, borderRadius: '50%',
    background: '#a83242', border: '3px solid #ffffff',
    boxShadow: '0 2px 8px rgba(0,0,0,0.2)'
  },

  footer: {
    padding: M.isMobile ? '40px 16px' : (M.isTablet ? '48px 32px' : '56px 72px'),
    textAlign: 'center',
    borderTop: '1px solid rgba(42,36,29,0.1)'
  },
  footerTag: {
    fontFamily: '"Shippori Mincho", serif',
    fontSize: M.isMobile ? 13 : 14,
    color: '#6a5e4e', marginTop: 14, letterSpacing: '0.1em'
  },
  footerBase: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: 11, color: '#6a5e4e', marginTop: 24, opacity: 0.7
  }
});

window.VariantB = VariantB;