/* =========================================================
   VARIANT C — "Atelier"
   Warm ivory base, soft frame, centered type.
   Uses the storefront photo as a small framed moment rather than hero bg.
   Blue used only for one heading accent; red as tiny marker.
   ========================================================= */
const VariantC = () => {
  const M = useResponsive();
  const C = makeC(M);
  return (
    <div style={C.root}>
      <header style={C.header}>
        <div style={C.brand}>
          <PirosMark size={38} color="#2a241d"/>
        </div>
        <nav style={C.nav}>
          {[['about','お店のこと'],['menu','メニュー'],['stylist','スタッフ'],['journal','お知らせ'],['access','アクセス']].map(([en, jp]) => (
            <a key={en} style={C.navItem}>
              <span style={C.navEn}>{en}</span>
              <span style={C.navJp}>{jp}</span>
            </a>
          ))}
        </nav>
        <a style={C.bookBtn}>Reserve →</a>
      </header>

      <section style={C.hero}>
        <div style={C.heroMark}>— Piros · est. 1998 —</div>
        <h1 style={C.heroH}>
          <span style={C.heroHA}>いつまでも、</span>
          <span style={C.heroHB}>かわいく、美しく。</span>
        </h1>
        <p style={C.heroP}>
          青い壁の、小さな美容室。宍粟市山崎町で。<br/>
          丁寧な手仕事と、長いおつきあいを大切に。
        </p>

        <div style={C.heroFrame}>
          <img src="assets/piros-exterior.png" alt="Piros exterior"
               style={{width:'100%', height:'100%', objectFit:'cover'}}/>
        </div>
        <div style={C.heroCap}>fig. Piros · 宍粟市 山崎町</div>

        <div style={C.heroBtns}>
          <a style={C.heroBtnPri}>ご予約はこちら</a>
          <a style={C.heroBtnGhost}>はじめての方へ →</a>
        </div>
      </section>

      <section style={C.about}>
        <div style={C.kicker}>— About · お店のこと —</div>
        <h2 style={C.h2}>青い壁の、<em style={C.itBlue}>ちいさな</em>美容室。</h2>
        <div style={C.aboutGrid}>
          <p style={C.aboutLead}>
            1998年、山崎町の角っこにPiros はひらきました。<br/>
            赤いひさしと青い壁は、開業当時から変わらない目印です。
          </p>
          <div>
            <p style={C.p}>
              変わらないのは、ひとりひとりと丁寧に向き合う時間。
              気どらず、ていねいに、長いおつきあいを。
            </p>
            <p style={C.p}>
              小学生だったお客様が、ご自分のお嬢さんと一緒に。
              そんな瞬間を、これからもずっと。
            </p>
          </div>
        </div>
      </section>

      <section style={C.menu}>
        <div style={C.kicker}>— Menu · メニュー —</div>
        <h2 style={C.h2}>料金表</h2>
        <div style={C.menuSub}>税込 / 初回カウンセリング（20分）無料</div>
        <div style={C.menuWrap}>
          {[
            ['Hair', [
              ['カット', '¥4,800'],
              ['カット＋カラー', '¥9,800'],
              ['カット＋パーマ', '¥10,800'],
              ['リタッチ / 白髪染め', '¥5,800'],
            ]],
            ['Care', [
              ['トリートメント', '¥3,500'],
              ['ヘッドスパ 30 / 60min', '¥3,000 / ¥5,000'],
              ['縮毛矯正', '¥13,000'],
            ]],
            ['Special', [
              ['ブライダルヘア', '¥8,800'],
              ['着付け / ヘアセット', '¥5,500 / ¥3,500'],
              ['メイク', '¥4,500'],
            ]],
          ].map(([en, items]) => (
            <div key={en} style={C.menuCol}>
              <div style={C.menuColH}>{en}</div>
              {items.map(([n, p]) => (
                <div key={n} style={C.menuRow}>
                  <span>{n}</span>
                  <span style={C.menuDots}/>
                  <span style={C.menuP}>{p}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </section>

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

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

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

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

const makeC = (M) => ({
  root: {
    width:'100%', background:'#fbf7ee', color:'#2a241d',
    fontFamily:'"Zen Kaku Gothic New","Noto Sans JP",sans-serif',
    fontSize:14, lineHeight:1.95,
  },
  header: {
    display: M.isMobile ? 'flex' : 'grid',
    flexDirection: M.isMobile ? 'column' : undefined,
    gridTemplateColumns: M.isMobile ? undefined : 'auto 1fr auto',
    alignItems:'center',
    gap: M.isMobile ? 12 : 40,
    padding: M.isMobile ? '14px 16px' : (M.isTablet ? '18px 32px' : '22px 72px'),
    borderBottom:'1px solid rgba(42,36,29,0.08)',
  },
  brand: {},
  nav: {
    display:'flex',
    gap: M.isMobile ? 16 : 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: {
    padding: M.isMobile ? '60px 20px 70px' : (M.isTablet ? '80px 40px 100px' : '100px 72px 120px'),
    textAlign:'center',
    maxWidth:1000, margin:'0 auto',
  },
  heroMark: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic',
    fontSize: M.isMobile ? 12 : 14,
    color:'#a83242',
    marginBottom: M.isMobile ? 20 : 32,
    letterSpacing:'0.05em',
  },
  heroH: {
    display:'flex',
    flexDirection:'var(--hero-flex-dir, column)',
    flexWrap:'wrap',
    justifyContent:'center',
    columnGap:'var(--hero-row-gap, 0)',
    margin: M.isMobile ? '0 0 22px 0' : '0 0 32px 0',
    lineHeight:1.25,
  },
  heroHA: {
    fontFamily:'"Shippori Mincho", serif', fontWeight:500,
    fontSize:'var(--hero-size-a, 50px)', color:'#2a241d',
    whiteSpace:'nowrap',
  },
  heroHB: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:500,
    fontSize:'var(--hero-size-b, 58px)', color:'#2c4d7a', marginTop:6,
    whiteSpace:'nowrap',
  },
  heroP: {
    fontSize: M.isMobile ? 13 : 15,
    lineHeight:2, color:'#3d3428',
    margin: M.isMobile ? '0 0 32px 0' : '0 0 56px 0'
  },
  heroFrame: {
    position:'relative',
    aspectRatio: M.isMobile ? '4/3' : (M.isTablet ? '16/10' : '16/8'),
    maxWidth:820, margin:'0 auto',
    border:'1px solid rgba(42,36,29,0.15)',
    padding: M.isMobile ? 6 : 10,
    background:'#fbf7ee',
  },
  heroCap: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic', fontSize:12,
    color:'#6a5e4e', marginTop:14,
  },
  heroBtns: {
    display:'flex',
    gap: M.isMobile ? 12 : 18,
    justifyContent:'center',
    marginTop: M.isMobile ? 32 : 48,
    alignItems:'center',
    flexWrap:'wrap',
  },
  heroBtnPri: {
    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 : 13,
    color:'#a83242', textAlign:'center',
    marginBottom: M.isMobile ? 12 : 18,
    letterSpacing:'0.05em',
  },
  h2: {
    fontFamily:'"Shippori Mincho", serif', fontWeight:500,
    fontSize: M.isMobile ? 28 : (M.isTablet ? 36 : 44),
    textAlign:'center',
    margin: M.isMobile ? '0 0 28px 0' : '0 0 40px 0',
    lineHeight:1.4,
  },
  itBlue: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:500,
    color:'#2c4d7a',
  },

  about: {
    padding: M.isMobile ? '60px 20px' : (M.isTablet ? '90px 40px' : '120px 72px'),
    maxWidth:1100, margin:'0 auto'
  },
  aboutGrid: {
    display:'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? '1fr' : '1fr 1fr'),
    gap: M.isMobile ? 28 : 64,
    maxWidth:900, margin:'0 auto'
  },
  aboutLead: {
    fontFamily:'"Shippori Mincho", serif', fontWeight:500,
    fontSize: M.isMobile ? 16 : 20,
    lineHeight:2, color:'#2c4d7a', margin:0,
  },
  p: {fontSize: M.isMobile ? 13 : 14, lineHeight:2.1, color:'#3d3428', margin:'0 0 18px 0'},

  menu: {
    padding: M.isMobile ? '60px 20px' : (M.isTablet ? '90px 40px' : '120px 72px'),
    background:'#f4ecdb'
  },
  menuSub: {
    textAlign:'center', fontSize:12, color:'#6a5e4e',
    letterSpacing:'0.1em',
    marginTop: M.isMobile ? -16 : -24,
    marginBottom: M.isMobile ? 32 : 48,
  },
  menuWrap: {
    display:'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 32 : 48,
    maxWidth:1100, margin:'0 auto',
  },
  menuCol: {},
  menuColH: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:500,
    fontSize: M.isMobile ? 20 : 24,
    color:'#2c4d7a', marginBottom:20,
    paddingBottom:14, borderBottom:'1px solid rgba(42,36,29,0.2)',
    textAlign:'center',
  },
  menuRow: {display:'flex', alignItems:'baseline', padding:'12px 0', fontSize: M.isMobile ? 13 : 14},
  menuDots: {flex:1, borderBottom:'1px dotted rgba(42,36,29,0.3)', 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 ? '60px 20px' : (M.isTablet ? '90px 40px' : '120px 72px'),
    maxWidth:1200, margin:'0 auto'
  },
  stylistGrid: {
    display:'grid',
    gridTemplateColumns: M.isMobile ? '1fr' : (M.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
    gap: M.isMobile ? 32 : 40
  },
  stylistCard: {},
  stylistPhoto: {position:'relative', aspectRatio:'4/5', marginBottom:20},
  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 ? 22 : 24, color:'#2a241d', marginBottom:3,
  },
  stylistNameJp: {
    fontFamily:'"Shippori Mincho", serif', fontSize:13,
    color:'#6a5e4e', letterSpacing:'0.15em', marginBottom:14,
  },
  stylistBio: {fontSize:12, lineHeight:1.9, color:'#3d3428', margin:0},

  journal: {
    padding: M.isMobile ? '60px 20px' : (M.isTablet ? '90px 40px' : '120px 72px'),
    background:'#f4ecdb'
  },
  jList: {maxWidth:860, margin:'0 auto'},
  jRow: {
    display:'grid',
    gridTemplateColumns: M.isMobile ? '80px 1fr' : '110px 80px 1fr 30px',
    alignItems:'center',
    gap: M.isMobile ? 12 : 20,
    padding: M.isMobile ? '16px 0' : '20px 0',
    borderBottom:'1px solid rgba(42,36,29,0.12)', 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'},
  jArr: {color:'#6a5e4e', textAlign:'right', display: M.isMobile ? 'none' : 'block'},

  access: {
    padding: M.isMobile ? '60px 20px' : (M.isTablet ? '90px 40px' : '120px 72px'),
    maxWidth:900, margin:'0 auto', textAlign:'center'
  },
  accessLead: {fontSize: M.isMobile ? 13 : 14, lineHeight:2, color:'#3d3428', margin:'0 0 28px 0'},
  accessCtas: {
    display:'flex', gap: M.isMobile ? 10 : 14,
    justifyContent:'center', flexWrap:'wrap',
    marginBottom: M.isMobile ? 32 : 48,
  },
  ctaLine: {
    padding: M.isMobile ? '12px 22px' : '15px 28px',
    background:'#2c4d7a', color:'#fbf7ee',
    fontFamily:'"Fraunces", serif', fontStyle:'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor:'pointer',
  },
  ctaForm: {
    padding: M.isMobile ? '12px 22px' : '15px 28px',
    background:'#2a241d', color:'#fbf7ee',
    fontFamily:'"Fraunces", serif', fontStyle:'italic',
    fontSize: M.isMobile ? 13 : 14,
    cursor:'pointer',
  },
  accessInfo: {maxWidth:540, margin:'0 auto', textAlign:'left'},
  accessRow: {
    display:'grid', gridTemplateColumns:'110px 1fr', gap: M.isMobile ? 12 : 20,
    padding:'14px 0', borderBottom:'1px solid rgba(42,36,29,0.12)',
  },
  accessK: {
    fontFamily:'"Fraunces", serif', fontStyle:'italic',
    fontSize:13, color:'#a83242',
  },
  accessV: {fontSize:13, lineHeight:1.8, color:'#2a241d'},

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

window.VariantC = VariantC;