/* =========================================================
   VARIANT A — "Editorial Calm"
   Full-bleed storefront photo hero. Cream body. Serif-led.
   Red and blue only as hairline accents and a small badge.
   ========================================================= */
const VariantA = () => {
  const M = useResponsive();
  const A = makeA(M);
  return (
    <div style={A.root}>
      {/* Header */}
      <header style={A.header}>
        <div style={A.brand}>
          <PirosMark size={36} color="#2a241d" />
          <div style={A.brandSub}>hair salon · 山崎町</div>
        </div>
        <nav style={A.nav}>
          {['About', 'Menu', 'Stylist', 'Journal', 'Access'].map((x) =>
          <a key={x} style={A.navItem}>{x}</a>
          )}
        </nav>
        <div style={A.headerR}>
          <span style={A.tel}>0790 · 00 · 0000</span>
          <a style={A.headerBook}>Reserve</a>
        </div>
      </header>

      {/* Hero */}
      <section style={A.hero}>
        <div style={A.heroImg}>
          <img src="assets/piros-exterior.png" alt="Piros exterior"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={A.heroTint} />
        </div>
        <div style={A.heroOverlay}>
          <div style={A.heroEyebrow}>Est. 1998 · 宍粟市 山崎町</div>
          <h1 style={{ ...A.heroH, fontSize: M.isMobile ? "32px" : (M.isTablet ? "44px" : "60px") }}>
            いつまでも、<br />
            <em style={A.heroHIt}>かわいく、</em>美しく。
          </h1>
          <p style={A.heroP}>
            青い壁の、小さな美容室。<br />
            丁寧な手仕事と、長いおつきあいを大切に。
          </p>
          <div style={A.heroBtns}>
            <a style={A.heroBtnPrimary}>ご予約はこちら</a>
            <a style={A.heroBtnGhost}>はじめての方へ →</a>
          </div>
        </div>
      </section>

      {/* About */}
      <section style={A.about}>
        <div style={A.kicker}>— About · お店のこと</div>
        <h2 style={A.h2}>
          青い壁の、<em style={A.itBlue}>ちいさな</em>美容室。
        </h2>
        <div style={A.aboutCols}>
          <p style={{ ...A.aboutLead, fontSize: M.isMobile ? "20px" : (M.isTablet ? "22px" : "26px") }}>
            1998年、山崎町の角っこにPiros はひらきました。<br />
            もうすぐ30年になります。
          </p>
          <div style={A.aboutRight}>
            <p style={A.p}>
              赤いひさしと青い壁は、開業当時から変わらない目印。
              町のみなさんに「あそこの、青いお店」と呼ばれて育ってきました。
            </p>
            <p style={A.p}>
              変わらないのは、ひとりひとりと丁寧に向き合う時間。
              髪型のことはもちろん、暮らしのこと、ご家族のこと、
              他愛ないおしゃべりも、私たちの大切な仕事です。
            </p>
            <p style={A.p}>
              いくつになっても、鏡の前で「あら、いいじゃない」と思える瞬間を。
            </p>
          </div>
        </div>

        <div style={A.aboutGallery}>
          <div style={{ ...A.galleryItem, gridColumn: 'span 2' }}>
            <Placeholder label="店内" sub="interior" tone="cream" />
          </div>
          <div style={A.galleryItem}><Placeholder label="窓辺" sub="by the window" tone="ink" /></div>
          <div style={A.galleryItem}><Placeholder label="道具" sub="tools" tone="cream" /></div>
          <div style={A.galleryItem}><Placeholder label="赤いひさし" sub="awning" tone="red" /></div>
        </div>
      </section>

      {/* Menu */}
      <section style={A.menu}>
        <div style={A.kicker}>— Menu · メニュー</div>
        <h2 style={A.h2}>料金表</h2>
        <div style={A.menuSub}>税込 / 初回カウンセリング（20分）無料</div>

        <div style={A.menuGrid}>
          {[
          ['Hair', '髪を、ととのえる', [
          ['カット', '¥4,800'],
          ['カット＋カラー', '¥9,800'],
          ['カット＋パーマ', '¥10,800'],
          ['リタッチカラー', '¥5,800'],
          ['白髪染め', '¥5,800']]],

          ['Care', '髪を、いたわる', [
          ['トリートメント', '¥3,500'],
          ['ヘッドスパ 30min', '¥3,000'],
          ['ヘッドスパ 60min', '¥5,000'],
          ['縮毛矯正', '¥13,000'],
          ['ホームケア相談', '無料']]],

          ['Special', 'とくべつな日に', [
          ['ブライダルヘア', '¥8,800'],
          ['着付け', '¥5,500'],
          ['ヘアセット', '¥3,500'],
          ['メイク', '¥4,500'],
          ['出張対応', '応相談']]]].

          map(([en, jp, items]) =>
          <div key={en} style={A.menuCol}>
              <div style={A.menuColH}>
                <div style={A.menuColEn}>{en}</div>
                <div style={A.menuColJp}>{jp}</div>
              </div>
              <div>
                {items.map(([n, p]) =>
              <div key={n} style={A.menuRow}>
                    <span>{n}</span>
                    <span style={A.menuDots} />
                    <span style={A.menuP}>{p}</span>
                  </div>
              )}
              </div>
            </div>
          )}
        </div>
      </section>

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

      {/* Journal */}
      <section style={A.journal}>
        <div style={A.kicker}>— Journal · お知らせ・ブログ</div>
        <h2 style={A.h2}>最近のお知らせ</h2>
        <div style={A.journalList}>
          {[
          ['お知らせ', '2026.04.20', '春のヘッドスパキャンペーンを開始しました'],
          ['お知らせ', '2026.04.10', 'ゴールデンウィーク期間の営業について'],
          ['ブログ', '2026.03.28', '白髪を活かすグレイカラーという選択肢'],
          ['ブログ', '2026.03.15', '梅雨に向けた髪のお手入れ 3つのコツ']].
          map(([cat, d, t]) =>
          <article key={t} style={A.journalRow}>
              <div style={A.journalDate}>{d}</div>
              <div style={A.journalCat}>{cat}</div>
              <div style={A.journalT}>{t}</div>
              <div style={A.journalArr}>→</div>
            </article>
          )}
        </div>
        <a style={A.journalMore}>一覧を見る</a>
      </section>

      {/* Access / CTA */}
      <section style={A.access}>
        <div style={A.accessL}>
          <div style={{ ...A.kicker, color: '#b88b3d' }}>— Access · 店舗情報</div>
          <h2 style={{ ...A.h2, color: '#fbf7ee' }}>ご予約・アクセス</h2>
          <div style={A.accessList}>
            {[
            ['Address', '〒671-2544\n兵庫県宍粟市山崎町○○○-○'],
            ['Tel', '0790-00-0000'],
            ['Hours', '9:00 – 18:00'],
            ['Closed', '毎週月曜 / 第3火曜'],
            ['Parking', '店舗前に5台']].
            map(([k, v]) =>
            <div key={k} style={A.accessRow}>
                <div style={A.accessK}>{k}</div>
                <div style={A.accessV}>{v}</div>
              </div>
            )}
          </div>
          <div style={A.ctaRow}>
            <a style={A.ctaLine}>LINE で予約</a>
            <a style={A.ctaForm}>フォームで予約</a>
          </div>
        </div>
        <div style={A.accessR}>
          <Placeholder label="map" sub="山崎町" tone="ink" />
          <div style={A.accessPin} />
        </div>
      </section>

      <footer style={A.footer}>
        <PirosMark size={44} color="#fbf7ee" />
        <div style={A.footerTag}>いつまでも、かわいく、美しく。</div>
        <div style={A.footerBase}>© 2026 Piros hair salon · since 1998 · 宍粟市山崎町</div>
      </footer>
    </div>);

};

const makeA = (M) => ({
  root: {
    width: '100%', background: '#fbf7ee', color: '#2a241d',
    fontFamily: '"Zen Kaku Gothic New","Noto Sans JP",sans-serif',
    fontSize: 14, lineHeight: 1.9
  },
  header: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : 'auto 1fr auto',
    alignItems: 'center',
    gap: M.isMobile ? 12 : 40,
    padding: M.isMobile ? '14px 16px' : (M.isTablet ? '20px 28px' : '22px 56px'),
    background: '#fbf7ee',
    borderBottom: '1px solid rgba(42,36,29,0.1)'
  },
  brand: { display: 'flex', alignItems: 'baseline', gap: 14, justifyContent: M.isMobile ? 'center' : 'flex-start' },
  brandSub: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 12,
    color: '#6a5e4e', letterSpacing: '0.15em'
  },
  nav: {
    display: 'flex',
    gap: M.isMobile ? 18 : 32,
    justifyContent: 'center',
    overflowX: M.isMobile ? 'auto' : 'visible',
    whiteSpace: M.isMobile ? 'nowrap' : 'normal',
    paddingBottom: M.isMobile ? 4 : 0,
  },
  navItem: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 14 : 15, color: '#2a241d', cursor: 'pointer',
    flex: M.isMobile ? '0 0 auto' : 'initial',
  },
  headerR: { display: 'flex', alignItems: 'center', gap: M.isMobile ? 12 : 20, justifyContent: M.isMobile ? 'center' : 'flex-end' },
  tel: {
    fontFamily: '"Fraunces", serif', fontSize: M.isMobile ? 13 : 14, color: '#2a241d',
    letterSpacing: '0.1em'
  },
  headerBook: {
    padding: M.isMobile ? '8px 16px' : '10px 22px',
    background: '#2c4d7a', color: '#fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 13,
    cursor: 'pointer', letterSpacing: '0.1em'
  },

  hero: {
    position: 'relative',
    height: M.isMobile ? 480 : (M.isTablet ? 600 : 720),
    overflow: 'hidden'
  },
  heroImg: { position: 'absolute', inset: 0 },
  heroTint: {
    position: 'absolute', inset: 0,
    background: M.isMobile
      ? 'linear-gradient(180deg, rgba(251,247,238,0.85) 0%, rgba(251,247,238,0.45) 50%, transparent 100%)'
      : 'linear-gradient(90deg, rgba(251,247,238,0.92) 0%, rgba(251,247,238,0.6) 35%, transparent 60%)'
  },
  heroOverlay: {
    position: 'absolute',
    left: M.isMobile ? 20 : (M.isTablet ? 40 : 80),
    right: M.isMobile ? 20 : 'auto',
    top: M.isMobile ? 40 : '50%',
    transform: M.isMobile ? 'none' : 'translateY(-50%)',
    maxWidth: M.isMobile ? 'none' : 540
  },
  heroEyebrow: {
    fontFamily: '"Archivo", sans-serif',
    fontSize: M.isMobile ? 10 : 11,
    letterSpacing: '0.35em',
    color: '#a83242', marginBottom: M.isMobile ? 18 : 28
  },
  heroH: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 500,
    fontSize: M.isMobile ? 32 : (M.isTablet ? 56 : 76),
    lineHeight: 1.25, margin: '0 0 28px 0', color: '#2a241d'
  },
  heroHIt: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    color: '#2c4d7a'
  },
  heroP: {
    fontSize: M.isMobile ? 13 : 15, lineHeight: 2,
    color: '#3d3428', margin: M.isMobile ? '0 0 28px 0' : '0 0 40px 0'
  },
  heroBtns: { display: 'flex', gap: M.isMobile ? 12 : 18, alignItems: 'center', flexWrap: 'wrap' },
  heroBtnPrimary: {
    padding: M.isMobile ? '12px 22px' : '15px 32px',
    background: '#2a241d', color: '#fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    letterSpacing: '0.08em', cursor: 'pointer'
  },
  heroBtnGhost: {
    padding: M.isMobile ? '10px 0' : '15px 0', color: '#2a241d',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    borderBottom: '1px solid #2a241d', cursor: 'pointer'
  },

  kicker: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 14,
    color: '#a83242', textAlign: 'center',
    marginBottom: M.isMobile ? 12 : 16, letterSpacing: '0.05em'
  },
  h2: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 500,
    fontSize: M.isMobile ? 28 : (M.isTablet ? 38 : 48),
    textAlign: 'center',
    margin: M.isMobile ? '0 0 32px 0' : '0 0 56px 0',
    color: '#2a241d', lineHeight: 1.4
  },
  itBlue: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    color: '#2c4d7a'
  },

  about: {
    padding: M.isMobile ? '64px 20px' : (M.isTablet ? '100px 40px' : '140px 80px'),
    maxWidth: 1400, margin: '0 auto'
  },
  aboutCols: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? '1fr' : '1fr 1.2fr'),
    gap: M.isMobile ? 28 : 72,
    maxWidth: 1100,
    margin: M.isMobile ? '0 auto 48px' : '0 auto 80px'
  },
  aboutLead: {
    fontFamily: '"Shippori Mincho", serif', fontWeight: 500,
    fontSize: 22, lineHeight: 2, color: '#2c4d7a', margin: 0
  },
  aboutRight: {},
  p: {
    fontSize: M.isMobile ? 13 : 14,
    lineHeight: 2.1, color: '#3d3428',
    margin: '0 0 18px 0'
  },
  aboutGallery: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? 'repeat(2, 1fr)' : (M.isTablet ? 'repeat(3, 1fr)' : 'repeat(4, 1fr)'),
    gridTemplateRows: M.isMobile ? '160px 160px' : (M.isTablet ? '200px 160px' : '260px 200px'),
    gap: M.isMobile ? 8 : 12
  },
  galleryItem: { position: 'relative' },

  menu: {
    padding: M.isMobile ? '64px 20px' : (M.isTablet ? '100px 40px' : '140px 80px'),
    background: '#f4ecdb'
  },
  menuSub: {
    textAlign: 'center', fontSize: 12, color: '#6a5e4e',
    letterSpacing: '0.15em',
    marginTop: M.isMobile ? -20 : -36,
    marginBottom: M.isMobile ? 36 : 56
  },
  menuGrid: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 36 : 48,
    maxWidth: 1200, margin: '0 auto'
  },
  menuCol: {},
  menuColH: {
    textAlign: 'center', marginBottom: 28,
    paddingBottom: 20, borderBottom: '1px solid rgba(42,36,29,0.15)'
  },
  menuColEn: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 500,
    fontSize: M.isMobile ? 24 : 28, color: '#2c4d7a', marginBottom: 4
  },
  menuColJp: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 13,
    color: '#6a5e4e', letterSpacing: '0.15em'
  },
  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: {
    padding: M.isMobile ? '64px 20px' : (M.isTablet ? '100px 40px' : '140px 80px'),
    maxWidth: 1300, margin: '0 auto'
  },
  stylistGrid: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 36 : 40
  },
  stylistCard: { position: 'relative' },
  stylistPhoto: { position: 'relative', aspectRatio: '4/5', marginBottom: 24 },
  stylistNo: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: 14, color: '#a83242', marginBottom: 6, letterSpacing: '0.1em'
  },
  stylistRole: {
    fontFamily: '"Archivo", sans-serif', fontSize: 10, letterSpacing: '0.3em',
    color: '#6a5e4e', marginBottom: 8
  },
  stylistNameEn: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 600,
    fontSize: M.isMobile ? 22 : 26, color: '#2a241d', marginBottom: 4
  },
  stylistNameJp: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 14,
    color: '#6a5e4e', letterSpacing: '0.15em', marginBottom: 16
  },
  stylistBio: { fontSize: 13, lineHeight: 2, color: '#3d3428', margin: 0 },

  journal: {
    padding: M.isMobile ? '64px 20px' : (M.isTablet ? '100px 40px' : '140px 80px'),
    background: '#fbf7ee', maxWidth: 1400, margin: '0 auto'
  },
  journalList: { maxWidth: 900, margin: '0 auto' },
  journalRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '80px 1fr 20px' : '110px 90px 1fr 30px',
    alignItems: 'center',
    gap: M.isMobile ? 12 : 24,
    padding: M.isMobile ? '16px 0' : '22px 0',
    borderBottom: '1px solid rgba(42,36,29,0.12)', cursor: 'pointer'
  },
  journalDate: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 14, color: '#2c4d7a'
  },
  journalCat: {
    fontFamily: '"Shippori Mincho", serif', fontSize: 11,
    color: '#a83242', letterSpacing: '0.2em',
    display: M.isMobile ? 'none' : 'block',
  },
  journalT: { fontSize: M.isMobile ? 13 : 14, color: '#2a241d' },
  journalArr: { color: '#6a5e4e', textAlign: 'right' },
  journalMore: {
    display: 'block', textAlign: 'center', marginTop: 32,
    fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 14,
    color: '#2a241d', borderBottom: '1px solid #2a241d',
    width: 'fit-content', margin: '32px auto 0', padding: '4px 0',
    cursor: 'pointer'
  },

  access: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : '1fr 1fr',
    background: '#1f3656', color: '#fbf7ee'
  },
  accessL: {
    padding: M.isMobile ? '64px 20px' : (M.isTablet ? '80px 40px' : '100px 72px')
  },
  accessList: { borderTop: '1px solid rgba(251,247,238,0.2)', marginBottom: 40 },
  accessRow: {
    display: 'grid',
    gridTemplateColumns: M.isMobile ? '90px 1fr' : '120px 1fr',
    gap: M.isMobile ? 12 : 20,
    padding: M.isMobile ? '14px 0' : '18px 0',
    borderBottom: '1px solid rgba(251,247,238,0.15)'
  },
  accessK: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 12 : 14,
    color: '#b88b3d', letterSpacing: '0.05em'
  },
  accessV: { fontSize: M.isMobile ? 12 : 13, lineHeight: 1.9, whiteSpace: 'pre-line' },
  ctaRow: { display: 'flex', gap: 12, flexWrap: 'wrap' },
  ctaLine: {
    padding: M.isMobile ? '12px 20px' : '15px 26px',
    background: '#fbf7ee', color: '#1f3656',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor: 'pointer', letterSpacing: '0.08em'
  },
  ctaForm: {
    padding: M.isMobile ? '12px 20px' : '15px 26px',
    background: 'transparent', color: '#fbf7ee',
    border: '1px solid #fbf7ee',
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor: 'pointer', letterSpacing: '0.08em'
  },
  accessR: M.isMobile
    ? { position: 'relative', aspectRatio: '16/9', minHeight: 0 }
    : (M.isTablet
      ? { position: 'relative', aspectRatio: '4/3', minHeight: 0 }
      : { position: 'relative', minHeight: 560 }),
  accessPin: {
    position: 'absolute', top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 16, height: 16, borderRadius: '50%',
    background: '#a83242', border: '3px solid #fbf7ee'
  },

  footer: {
    background: '#1f3656', color: 'rgba(251,247,238,0.7)',
    padding: M.isMobile ? '36px 20px 24px' : '48px 40px 32px',
    textAlign: 'center',
    borderTop: '1px solid rgba(251,247,238,0.1)'
  },
  footerTag: {
    fontFamily: '"Shippori Mincho", serif',
    fontSize: M.isMobile ? 13 : 14,
    marginTop: 14, letterSpacing: '0.1em', color: '#b88b3d'
  },
  footerBase: {
    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
    fontSize: 11, marginTop: 28, opacity: 0.6, letterSpacing: '0.08em'
  }
});

window.VariantA = VariantA;