// Page sections for moja_run run

const Groomer = () => (
  <section id="groomer" className="groomer">
    <div className="wrap groomer-grid">
      <div className="groomer-photo">
        <img src="assets/groomer.jpg" alt="トリマー 下田千絵さん"/>
      </div>
      <div className="groomer-info">
        <div className="label en">OUR GROOMER</div>
        <h3>Chie Shimoda<span className="ja">下田 千絵</span></h3>
        <div className="role en">Head Groomer / Dog Trainer</div>
        <p>
          ドッグトレーニングの現場経験を持つ、ベテラントリマー。<br/>
          "グルーミング技術" と "トレーニング" の両方の目線から、ワンちゃん一頭ずつの性格に合わせた施術を心がけています。
        </p>
        <p>
          人見知り・触られるのが苦手・はじめてのトリミング。<br/>
          そんな子も、まずは安心できる距離からゆっくりと行っていきます。
        </p>
        <div className="groomer-tags">
          <span className="t">ドッグトレーニング経験</span>
          <span className="t">シニア対応</span>
          <span className="t">パピー対応</span>
          <span className="t">皮膚ケア相談</span>
        </div>
        <div className="groomer-family">
          <div className="fam-photo">
            <img src="assets/family.jpg" alt="もじゃるまる と ニコリン坊"/>
          </div>
          <div className="fam-body">
            <div className="fam-label">MY PARTNER</div>
            <div className="fam-row">
              <div className="pet">
                <div className="avatar"><img src="assets/mojarumaru.png" alt="もじゃるまる"/></div>
                <div className="pet-info">
                  <div className="name">もじゃるまる</div>
                  <div className="breed">ビションフリーゼ ♂</div>
                  <div className="birthday">2015年 6月10日生まれ</div>
                </div>
              </div>
              <div className="pet">
                <div className="avatar"><img src="assets/nikorinbo.png" alt="ニコリン坊"/></div>
                <div className="pet-info">
                  <div className="name">ニコリン坊</div>
                  <div className="breed">ビションフリーゼ ♂</div>
                  <div className="birthday">2025年 8月15日生まれ</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Statement = () => (
  <section className="statement">
    <div className="en-line">— Heart to Heart —</div>
    <h3>
      きれいにする、だけじゃない。<br/>
      お家にいるような<span className="hl">リラックスできる時間</span>を。
    </h3>
    <p>
      仕上がりの美しさはもちろん、その日の体調・気分・性格に合わせて、<br/>
      ワンちゃんが「また来てもいいかな」と思える時間づくりを大切にしています。
    </p>
  </section>
);

const IconShield = () => (
  <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M24 6 L40 12 L40 26 Q40 36 24 42 Q8 36 8 26 L8 12 Z"/>
    <path d="M18 24 L22 28 L30 18"/>
  </svg>
);
const IconBubble = () => (
  <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.4">
    <circle cx="20" cy="22" r="10"/>
    <circle cx="34" cy="14" r="5"/>
    <circle cx="32" cy="34" r="6"/>
    <circle cx="14" cy="36" r="4"/>
  </svg>
);
const IconTraining = () => (
  <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M8 36 L18 36 L22 26 L26 38 L30 22 L34 30 L40 30"/>
    <circle cx="14" cy="14" r="4"/>
    <path d="M14 18 L14 26 M10 22 L18 22"/>
  </svg>
);
const IconSenior = () => (
  <svg width="32" height="32" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14 32 Q14 22 24 22 Q34 22 34 32"/>
    <circle cx="24" cy="14" r="6"/>
    <path d="M10 38 L38 38"/>
    <path d="M18 28 L18 30 M30 28 L30 30"/>
  </svg>
);

const Strengths = () => {
  const items = [
    { ico: <IconShield/>, t: '完全プライベート', d: 'お預かりからお返しまで、1対1の貸切り。他のワンちゃんと一緒の空間に入ることはありません。' },
    { ico: <IconTraining/>, t: 'トレーニング経験を持つ\nトリマーが施術', d: 'ドッグトレーニングの現場経験を活かし、性格を見極めながら無理のないペースで進めます。' },
    { ico: <IconSenior/>, t: 'その子の性格や体調に\n合わせたお手入れプラン', d: '体調・年齢・皮膚の状態に合わせて時間配分や工程を細かく調整。' },
    { ico: <IconBubble/>, t: 'オゾン水 &\nマイクロファインバブル', d: '低刺激で皮膚にやさしい洗浄。小型犬は温浴サービス、中型犬以上はスキンケアスプレーを無料で。' },
  ];
  return (
    <section id="strengths" className="strengths">
      <div className="wrap">
        <div className="strengths-head">
          <div className="eyebrow">STRENGTHS</div>
          <h2>もじゃるんるんの <span className="accent">4 つのこだわり</span></h2>
          <div className="sub">— その子のための時間を、丁寧に。—</div>
        </div>
        <div className="strengths-grid">
          {items.map((it, i) => (
            <div key={i} className="strength-card">
              <div className="num">{i+1}</div>
              <div className="ico">{it.ico}</div>
              <h4>{it.t.split('\n').map((l, j) => <React.Fragment key={j}>{j>0 && <br/>}{l}</React.Fragment>)}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Recommend = () => {
  const items = [
    { t: '他のワンちゃんが苦手な子', d: 'プライベートな空間なので他のワンちゃんに気を使うことなくのんびり過ごせます。' },
    { t: '皮膚が敏感な子', d: '病院で処方された薬用シャンプーでのお手入れも承ります。' },
    { t: 'トリミングが苦手な子', d: '無理に押さえつけず、まずは安心できる距離からゆっくりと。' },
    { t: 'はじめてのパピー', d: 'トリマー＝怖くない人と思ってもらえるよう、はじめの一回を大切に。' },
    { t: '種類豊富なシャンプーを取り扱うお店', d: '季節、皮膚被毛の状態を確認して、さらに飼い主さんのお好みに合わせたシャンプー剤をチョイス。' },
    { t: 'マンツーマンを希望', d: '他のワンちゃんと顔を合わせない、完全プライベートな空間を求める方に。' },
  ];
  return (
    <section className="recommend">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>RECOMMENDED FOR</div>
            <h2>こんなワンちゃんに、<br/><span className="accent">おすすめです</span>。</h2>
          </div>
          <p style={{maxWidth:'none', fontSize:16, color:'var(--ink-2)', margin:0, fontWeight:500, textWrap:'pretty'}}>
            まずはお気軽にご相談ください。
          </p>
        </div>
        <div className="recommend-grid">
          {items.map((it, i) => (
            <div key={i} className="recommend-card">
              <div className="check">✓</div>
              <div className="body">
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SkincareBand = () => (
  <section className="skincare-band">
    <div className="ornament">
      <span className="line"></span>
      <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 4 L18 14 L28 16 L18 18 L16 28 L14 18 L4 16 L14 14 Z"/>
      </svg>
      <span className="line"></span>
    </div>
    <div className="en-line">— Customized Skincare —</div>
    <h3>
      理想のスキンケアを<br/>
      <span className="accent">叶える豊富なオプション</span>
    </h3>
    <p>
      皮膚の状態・毛質・お悩みに合わせて選べる、こだわりのオプションメニュー。<br/>
      オゾン水洗浄やマイクロファインバブル、各種スキンケアスプレーなど、<br/>
      その子に合ったメニューを一緒に見つけます。
    </p>
  </section>
);

const SHAMPOO_STEPS = [
  ['カウンセリング', 'コース・内容の確認。体調や気になることをお伺いします'],
  ['爪切り・耳掃除', '足裏バリカン・肛門腺絞り・肛門バリカンも'],
  ['オゾン水シャンプー', '低刺激のオゾン水、マイクロファインバブルでやさしく洗浄\n＋お選び頂いたオプション'],
  ['ブロー・乾かし', 'ふんわり仕上げのドライング'],
  ['お顔まわりのお手入れ', '目周り・口周りをすっきりと'],
  ['仕上げ・お迎え', '指定のお時間にお迎えをお願いします。'],
];

const TRIMMING_STEPS = [
  ['カウンセリング', 'コース・内容の確認。体調や気になること、カットスタイルについてお伺いします'],
  ['爪切り・耳掃除', '足裏バリカン・肛門腺絞り・肛門バリカンも'],
  ['オゾン水シャンプー', '低刺激のオゾン水、マイクロファインバブルでやさしく洗浄\n＋お選び頂いたオプション'],
  ['ブロー・乾かし', 'ハサミの仕上げに向けてしっかり乾かします'],
  ['カット', 'お好みのスタイルにあわせてハサミ仕上げ'],
  ['仕上げ・お迎え', '指定のお時間にお迎えをお願いします。'],
];

const Courses = () => (
  <section id="courses" className="courses">
    <div className="wrap">
      <div className="section-head" style={{marginBottom:24}}>
        <div>
          <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>COURSE FLOW</div>
          <h2>コースの<span className="accent">流れ</span></h2>
        </div>
        <p style={{maxWidth:'none', fontSize:13, color:'var(--muted)', margin:0, textWrap:'pretty'}}>
          シャンプーコース・トリミングコースの施術の流れをご紹介します。<br className="d-br"/>
          所要時間はワンちゃんによって異なります。
        </p>
      </div>

      <div className="courses-grid">
        <div className="course-card" id="course-shampoo">
          <div className="course-label">— Course 01 —</div>
          <h3 className="course-title">シャンプーコース</h3>
          <ol className="course-steps">
            {SHAMPOO_STEPS.map(([t, d], i) => (
              <li key={i}>
                <span className="step-num">{String(i+1).padStart(2,'0')}</span>
                <div className="step-body">
                  <strong>{t}</strong>
                  <span className="step-desc">{d}</span>
                </div>
              </li>
            ))}
          </ol>
          <div className="course-foot">
            目安所要時間：90分前後<br/>
            ※ 皮膚・被毛の状態によりお時間が前後する場合がございます。
          </div>
        </div>

        <div className="course-card featured" id="course-trimming">
          <div className="course-label">— Course 02 —</div>
          <h3 className="course-title">トリミングコース</h3>
          <ol className="course-steps">
            {TRIMMING_STEPS.map(([t, d], i) => (
              <li key={i}>
                <span className="step-num">{String(i+1).padStart(2,'0')}</span>
                <div className="step-body">
                  <strong>{t}</strong>
                  <span className="step-desc">{d}</span>
                </div>
              </li>
            ))}
          </ol>
          <div className="course-foot">
            目安所要時間：2〜3時間<br/>
            ※ 皮膚・被毛の状態によりお時間が前後する場合がございます。
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FAQ_ITEMS = [
  {
    q: 'はじめての利用ですが、すぐに予約できますか？',
    a: '誠に申し訳ございませんが、現在ご新規のお客様の受付は停止しております。再開時は LINE および Instagram にてお知らせいたします。'
  },
  {
    q: '予約の変更・キャンセルはどうすればいいですか？',
    a: '公式 LINE よりご連絡をお願いいたします。施術中はお返事にお時間がかかる場合がございますが、当日中にお返事いたします。日時の変更・遅刻・キャンセルの場合は必ずご連絡くださいませ。'
  },
  {
    q: 'トリミングが苦手な子でも大丈夫ですか？',
    a: 'ドッグトレーニングの現場経験を持つトリマーが担当いたします。人見知り・触られるのが苦手・はじめてのトリミングの子も、まずは安心できる距離からゆっくりと進めてまいります。'
  },
  {
    q: '皮膚が敏感な子なのですが…',
    a: 'オゾン水洗浄や低刺激のシャンプー、オーガニックハーブパック、クロモジエステなど、皮膚にやさしいオプションをご用意しております。気になる点はカウンセリング時にご相談ください。'
  },
  {
    q: '所要時間はどのくらいですか？',
    a: 'シャンプーコースは目安 90分前後、トリミングコースは目安 2〜3時間です。皮膚・被毛の状態によりお時間が前後する場合がございますので、あらかじめご了承ください。'
  },
  {
    q: '駐車場はありますか？',
    a: 'はい、近隣に駐車スペースを2台分ご用意しております。ご予約時にお声がけください。'
  },
  {
    q: '料金の支払い方法は？',
    a: '現金にてお支払いをお願いしております。'
  },
  {
    q: 'マーキングする子でも大丈夫ですか？',
    a: 'マナーパンツを最低2枚以上ご持参ください。'
  },
  {
    q: '未去勢、未避妊でも大丈夫ですか？',
    a: 'ご利用いただけますが、ご予約の際に事前にお伝えください。ご予約日にヒート（生理中）が被った場合は日程の変更をさせていただきます。'
  },
];

const FAQ = () => (
  <section id="faq" className="faq">
    <div className="wrap">
      <div className="section-head" style={{justifyContent:'center', textAlign:'center', flexDirection:'column', alignItems:'center'}}>
        <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>FAQ</div>
        <h2>よくある<span className="accent">ご質問</span></h2>
        <p style={{margin:'12px 0 0', fontSize:13, color:'var(--muted)'}}>
          お問い合わせの多いご質問をまとめました。
        </p>
      </div>
      <div className="faq-list">
        {FAQ_ITEMS.map((it, i) => (
          <details key={i} className="faq-item">
            <summary>
              <span className="q-mark">Q.</span>
              <span>{it.q}</span>
              <span className="chev">+</span>
            </summary>
            <div className="body">{it.a}</div>
          </details>
        ))}
      </div>
    </div>
  </section>
);

const Topbar = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [
    ['concept', 'CONCEPT', 'コンセプト'],
    ['strengths', 'STRENGTHS', 'こだわり'],
    ['groomer', 'GROOMER', 'トリマー紹介'],
    ['courses', 'COURSE', 'コース'],
    ['menu', 'PRICE', '料金'],
    ['gallery', 'GALLERY', 'ギャラリー'],
    ['access', 'ACCESS', 'アクセス'],
    ['faq', 'Q & A', 'よくある質問'],
    ['news', 'NEWS', 'お知らせ'],
  ];
  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
    }, 60);
  };
  return (
    <>
      <header className={`topbar ${open ? 'is-open' : ''}`} style={{ boxShadow: scrolled ? '0 4px 18px rgba(0,0,0,0.04)' : 'none' }}>
        <div className="topbar-inner">
          <a href="#top" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'});}}>
            <Brand/>
          </a>
          <div className="topbar-hours">
            <span className="th-label">OPEN</span>
            <span className="th-val">9:00 — 18:00</span>
          </div>
          <nav className="nav">
            {links.map(([id, label]) => (
              <a key={id} href={`#${id}`} className="en" onClick={go(id)}>{label}</a>
            ))}
          </nav>
          <a className="cta-btn nav-cta" href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer">
            <span className="dot"></span>
            LINE で問い合わせ
          </a>
          <button
            className={`hamburger ${open ? 'is-open' : ''}`}
            aria-label="メニューを開く"
            aria-expanded={open}
            onClick={()=>setOpen(o => !o)}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </header>

      <div className={`mobile-drawer ${open ? 'is-open' : ''}`} onClick={()=>setOpen(false)}>
        <div className="mobile-drawer-inner" onClick={(e)=>e.stopPropagation()}>
          <div className="md-head">
            <Brand/>
          </div>
          <nav className="md-nav">
            {links.map(([id, label, ja]) => (
              <a key={id} href={`#${id}`} onClick={go(id)}>
                <span className="md-en">{label}</span>
                <span className="md-ja">{ja}</span>
                <span className="md-arrow">→</span>
              </a>
            ))}
          </nav>
          <a className="md-cta" href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer">
            <span className="md-cta-icon">L</span>
            LINE で問い合わせ・ご予約
          </a>
          <div className="md-foot">
            <div>OPEN 9:00 — 18:00 / 定休日：金・日</div>
            <div>神奈川県藤沢市菖蒲沢 1192-5</div>
          </div>
        </div>
      </div>
    </>
  );
};

const Hero = () => (
  <section id="top" className="hero">
    <div style={{position:'absolute', top:96, right:20, backgroundColor:'var(--cream-2, #faf6ef)', padding:'7px 12px', borderRadius:6, fontSize:11.5, color:'var(--ink-2)', border:'1px solid var(--border)', lineHeight:1.5, textAlign:'center', zIndex:5}}>
      <div style={{fontWeight:600, marginBottom:2}}>動物取扱責任者番号</div>
      <div style={{fontFamily:'Quicksand', fontWeight:600, letterSpacing:'0.05em'}}>保管：210159</div>
    </div>
    <div className="paw-scatter" aria-hidden="true">
      <Paw className="paw p1"/>
      <Paw className="paw p2"/>
      <Paw className="paw p3"/>
      <Paw className="paw p4"/>
      <Paw className="paw p5"/>
      <Paw className="paw p6"/>
      <Paw className="paw p7"/>
      <Paw className="paw p8"/>
      <Paw className="paw p9"/>
      <Paw className="paw p10"/>
    </div>
    <div className="hero-grid">
      <div>
        <div className="hero-eyebrow">
          <span className="pin"></span>
          <span className="en">FUJISAWA · PRIVATE DOG SALON</span>
        </div>
        <div className="hero-head">
          <div className="hero-head-text">
            <h1>
              もじゃもじゃも、<br/>
              まんまるも。<br/>
              <span className="pop">ぜんぶ可愛い</span>。
            </h1>
          </div>
          <img className="hero-logo-mini" src="assets/logo-circle.png" alt="moja_run run ロゴ"/>
        </div>
        <p className="lead">
          一頭一頭寄り添い、その子に合ったお手入れ、シャンプー<br className="d-br"/>
          カットをご提案。<br className="d-br"/>
          シニアもパピーも安心して過ごせる、<br className="d-br"/>
          地域に寄り添うちいさな隠れ家サロンです。
        </p>
        <div className="hero-ctas">
          <a className="cta-btn" href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer">
            <span className="dot"></span> LINE で友だち追加
          </a>
          <button className="cta-btn ghost" onClick={()=>document.getElementById('menu')?.scrollIntoView({behavior:'smooth'})}>
            メニューを見る →
          </button>
        </div>
        <div className="hero-meta">
          <div className="item">
            <div className="label">OPEN</div>
            <div className="val">9:00 — 18:00</div>
          </div>
          <div className="item">
            <div className="label">CLOSED</div>
            <div className="val">金・日</div>
          </div>
          <div className="item">
            <div className="label">AREA</div>
            <div className="val">神奈川県藤沢市 菖蒲沢</div>
          </div>
        </div>
      </div>
      <div className="hero-art">
        <div className="hero-blob"></div>
        <div className="hero-logo"><img src="assets/logo-circle.png" alt="moja_run run logo"/></div>
        <div className="hero-badge b1">
          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <path id="circlePath" d="M 100, 100 m -72, 0 a 72,72 0 1,1 144,0 a 72,72 0 1,1 -144,0"/>
            </defs>
            <text fill="#8d5f4b" fontFamily="Quicksand, sans-serif" fontSize="13" fontWeight="600" letterSpacing="4">
              <textPath href="#circlePath" startOffset="0">
                ♡  HEART  TO  HEART  ♡  PRIVATE  DOG  SALON  
              </textPath>
            </text>
            <g transform="translate(100 100)">
              <text textAnchor="middle" dominantBaseline="middle" fill="#c89a86" fontSize="28" fontFamily="Cormorant Garamond, serif" fontStyle="italic">moja</text>
              <text textAnchor="middle" dominantBaseline="middle" y="22" fill="#c89a86" fontSize="14" fontFamily="Quicksand, sans-serif" letterSpacing="2">run·run</text>
            </g>
          </svg>
        </div>
        <div className="hero-badge b2">
          <svg className="paw-ico" viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="20" cy="22" rx="6" ry="8"/>
            <ellipse cx="44" cy="22" rx="6" ry="8"/>
            <ellipse cx="10" cy="36" rx="5" ry="7"/>
            <ellipse cx="54" cy="36" rx="5" ry="7"/>
            <path d="M32 30c-9 0-16 8-16 16 0 6 4 10 10 10 3 0 5-1 6-1s3 1 6 1c6 0 10-4 10-10 0-8-7-16-16-16z"/>
          </svg>
          <span>アットホーム<br/>なサロン</span>
        </div>
      </div>
    </div>
    <div className="scroll-hint">
      <span>SCROLL</span>
      <div className="bar"></div>
    </div>
  </section>
);

const Concept = () => (
  <section id="concept" className="concept">
    <div className="wrap concept-grid">
      <div className="concept-img">
        <img src="assets/concept.jpg" alt="ふんわり仕上がったビションフリーゼ"/>
      </div>
      <div>
        <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>CONCEPT</div>
        <h3>
          <span className="hl">一頭ずつ</span>と、ゆっくり<br/>
          向き合う時間を。
        </h3>
        <p>
          もじゃるんるんは、お預かりからお返しまで完全マンツーマン。<br className="d-br"/>
          他のワンちゃんと一緒の空間に入ることはありません。
        </p>
        <p>
          その日の体調や気分、毛のお悩みをしっかり伺ってから、<br className="d-br"/>
          一頭ずつのペースに合わせて、無理のないトリミングを行います。
        </p>
        <div className="concept-list">
          <div className="pill">
            <span className="paw-num"><span className="num en">1</span></span>
            <span className="t">完全予約制</span>
          </div>
          <div className="pill">
            <span className="paw-num"><span className="num en">2</span></span>
            <span className="t">1対1の貸切</span>
          </div>
          <div className="pill">
            <span className="paw-num"><span className="num en">3</span></span>
            <span className="t">シニア歓迎</span>
          </div>
          <div className="pill">
            <span className="paw-num"><span className="num en">4</span></span>
            <span className="t">皮膚ケア相談</span>
          </div>
          <div className="pill">
            <span className="paw-num"><span className="num en">5</span></span>
            <span className="t">オゾン水洗浄</span>
          </div>
          <div className="pill">
            <span className="paw-num"><span className="num en">6</span></span>
            <span className="t">写真お渡し</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const BREED_PRICES = [
  { name: 'チワワ スムース', size: '〜3kg', shampoo: 5000, cut: null },
  { name: 'チワワ ロング', size: '〜3kg', shampoo: 5500, cut: 8000 },
  { name: 'M.ダックス スムース', size: '〜5kg', shampoo: 5500, cut: null },
  { name: 'M.ダックス ロング', size: '〜5kg', shampoo: 6000, cut: 9000 },
  { name: 'M.ピンシャー', size: '', shampoo: 5500, cut: null },
  { name: 'パピヨン', size: '', shampoo: 7000, cut: 9000 },
  { name: 'ヨーキー', size: '', shampoo: 7000, cut: 9500 },
  { name: 'ポメラニアン', size: '', shampoo: 7500, cut: 9500 },
  { name: 'シーズー', size: '', shampoo: 7500, cut: 10000 },
  { name: 'ペキニーズ', size: '', shampoo: 8000, cut: 10500 },
  { name: 'マルチーズ', size: '', shampoo: 7500, cut: 9500 },
  { name: 'キャバリア', size: '', shampoo: 8000, cut: 10500 },
  { name: 'ウェスティー', size: '', shampoo: 8500, cut: 10500 },
  { name: 'M.シュナウザー', size: '', shampoo: 8500, cut: 10500 },
  { name: 'ジャックラッセルテリア', size: '', shampoo: 7000, cut: 8500 },
  { name: '柴', size: '', shampoo: 9000, cut: null },
  { name: 'トイプードル', size: '〜5kg', shampoo: 7500, cut: 10500 },
  { name: 'シェルティー', size: '', shampoo: 9000, cut: null },
  { name: 'A.コッカー', size: '', shampoo: 8500, cut: 12000 },
  { name: 'E.コッカー', size: '', shampoo: 8500, cut: 12000 },
  { name: 'ビションフリーゼ', size: '〜7kg', shampoo: 8500, cut: 13000 },
];
const LARGE_PRICE = { shampoo: 15000, cut: 18000 };

const Yen = ({ v }) => v == null
  ? <span className="none">—</span>
  : <span className="yen">¥{v.toLocaleString()}<span className="tilde">〜</span></span>;

const Menu = () => (
  <section id="menu">
    <div className="wrap">
      <div className="section-head" style={{marginBottom:24}}>
        <div>
          <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>MENU & PRICE</div>
          <h2>料金表 — <span className="accent">犬種別</span></h2>
        </div>
        <p style={{fontSize:13, color:'var(--muted)', margin:0, textAlign:'left', textWrap:'pretty'}}>
          すべて税込価格です。<br className="d-br"/>
          体のサイズ・毛量・毛玉の処理時間により料金が異なる場合がございます。
        </p>
      </div>

      <div className="price-table-wrap">
        <table className="price-table">
          <thead>
            <tr>
              <th>犬種<span className="sub">BREED</span></th>
              <th>シャンプーコース<span className="sub">SHAMPOO</span></th>
              <th>カットコース<span className="sub">CUT</span></th>
            </tr>
          </thead>
          <tbody>
            {BREED_PRICES.map(b => (
              <tr key={b.name}>
                <td>{b.name}{b.size && <span className="size">{b.size}</span>}</td>
                <td><Yen v={b.shampoo}/></td>
                <td><Yen v={b.cut}/></td>
              </tr>
            ))}
            <tr className="large">
              <td>
                大型犬
                <div className="row-note">※ 飼い主様にお手伝いいただくコースとなります</div>
              </td>
              <td><Yen v={LARGE_PRICE.shampoo}/></td>
              <td><Yen v={LARGE_PRICE.cut}/></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="price-includes">
        <div className="card">
          <h5>COURSE INCLUDES — コースに含まれるもの</h5>
          <p>爪切り・足裏バリカン・肛門腺絞り・肛門バリカン・耳掃除</p>
        </div>
        <div className="card">
          <h5>OTHER BREEDS — その他の犬種</h5>
          <p>記載のない犬種・ミックス犬もご対応可能です。<br/>お問い合わせフォームよりお気軽にご相談ください。</p>
        </div>
      </div>

      <div className="options-section">
        <div className="skincare-band" style={{padding:'70px 32px', borderRadius:24}}>
          <div className="ornament">
            <span className="line"></span>
            <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 4 L18 14 L28 16 L18 18 L16 28 L14 18 L4 16 L14 14 Z"/>
            </svg>
            <span className="line"></span>
          </div>
          <div className="en-line">— Customized Skincare —</div>
          <h3>
            理想のスキンケアを<br/>
            <span className="accent">叶える豊富なオプション</span>
          </h3>
          <p>
            皮膚の状態・毛質・お悩みに合わせて選べる、こだわりのオプションメニュー。<br/>
            オゾン水洗浄やマイクロファインバブル、各種スキンケアスプレーなど、<br/>
            その子に合ったメニューを一緒に見つけます。
          </p>
          <div className="options-grid" style={{marginTop:48, maxWidth:920, marginLeft:'auto', marginRight:'auto', textAlign:'left'}}>
            <div className="option-card opt-kuromoji">
              <div className="opt-banner">
                <img className="bg-photo" src="assets/kuromoji.jpg" alt="クロモジ"/>
              </div>
              <div className="opt-body">
                <span className="opt-tag">こだわり</span>
                <h4>クロモジエステ 3点セット</h4>
                <div className="opt-subtitle">Kuromoji from Kyoto</div>
                <p className="opt-desc">
                  京都の綺麗な水で育ったクロモジの木を、贅沢に 3つの工程で使用するスペシャルエステ。
                </p>
                <ul className="opt-items">
                  <li><span className="step-mini">1</span>クロモジの木を薬湯にて使用</li>
                  <li><span className="step-mini">2</span>クロモジ蒸留水をコートにスプレー</li>
                  <li><span className="step-mini">3</span>クロモジ肉球ジェルでパッドケア</li>
                </ul>
              </div>
            </div>

            <div className="option-card opt-herb">
              <div className="opt-banner">
                <img className="bg-photo" src="assets/herb.jpg" alt="オーガニックハーブパック"/>
              </div>
              <div className="opt-body">
                <span className="opt-tag">人気</span>
                <h4>オーガニックハーブパック</h4>
                <div className="opt-subtitle">Organic Herb from India</div>
                <p className="opt-desc">
                  インドのオーガニックハーブを使用したスキン＆ヘアケア。<br/>
                  皮膚と被毛をいたわる、定番人気のエステコースです。
                </p>
                <ul className="opt-items">
                  <li><span className="step-mini">1</span>肌荒れ予防</li>
                  <li><span className="step-mini">2</span>お肌を清潔に、におい対策</li>
                  <li><span className="step-mini">3</span>乾燥トラブル対策</li>
                  <li><span className="step-mini">4</span>美しい毛並みの維持</li>
                </ul>
              </div>
            </div>
          </div>
          <div style={{marginTop:24, paddingTop:24, borderTop:'1px solid var(--border)'}}>
            <ul style={{listStyle:'none', padding:0, margin:0, fontSize:15}}>
              <li style={{display:'flex', justifyContent:'space-between', paddingBottom:12, borderBottom:'1px solid var(--border-light)'}}>
                <strong>泥パック</strong>
                <span style={{color:'var(--pink-500)', fontWeight:600}}>￥2,500</span>
              </li>
              <li style={{display:'flex', justifyContent:'space-between', paddingBottom:12, borderBottom:'1px solid var(--border-light)', paddingTop:12}}>
                <strong>HARUクレイパック</strong>
                <span style={{color:'var(--pink-500)', fontWeight:600}}>￥2,500</span>
              </li>
              <li style={{display:'flex', justifyContent:'space-between', paddingBottom:12, borderBottom:'1px solid var(--border-light)', paddingTop:12}}>
                <strong>炭酸泉</strong>
                <span style={{color:'var(--pink-500)', fontWeight:600}}>￥1,500</span>
              </li>
              <li style={{display:'flex', justifyContent:'space-between', paddingTop:12, paddingBottom:12, borderBottom:'1px solid var(--border-light)'}}>
                <strong>マシュマロ泡パック</strong>
                <span style={{color:'var(--pink-500)', fontWeight:600}}>￥2,500</span>
              </li>
            </ul>
            <ul style={{listStyle:'none', padding:0, margin:0, fontSize:15}}>
              <li style={{display:'flex', justifyContent:'space-between', paddingTop:12, paddingBottom:12}}>
                <strong>トリートメント</strong>
                <span style={{color:'var(--pink-500)', fontWeight:600}}>各種￥500</span>
              </li>
            </ul>
            <ul style={{listStyle:'none', padding:0, margin:0, fontSize:14, color:'var(--ink-2)', textAlign:'left'}}>
              <li style={{paddingLeft:16, paddingTop:6, paddingBottom:4}}>ケラチントリートメント</li>
              <li style={{paddingLeft:16, paddingBottom:4}}>セラミドトリートメント</li>
              <li style={{paddingLeft:16, paddingBottom:32}}>プロテイントリートメント</li>
            </ul>
            <div style={{position:'relative', width:'100%', maxWidth:560, margin:'32px auto 0', aspectRatio:'1600 / 1135', backgroundImage:'url(assets/birthday-bg.png?v=6)', backgroundSize:'contain', backgroundRepeat:'no-repeat', backgroundPosition:'center'}}>
              <div style={{position:'absolute', top:'61%', left:'50%', transform:'translate(-50%, -50%)', width:'90%', textAlign:'center'}}>
                <div style={{color:'var(--ink)', fontWeight:500, lineHeight:1.6, margin:'0 auto', fontFamily:'"Noto Sans JP", sans-serif'}}>
                  <span style={{fontWeight:700, fontSize:'clamp(8.5px, 2.6vw, 14.5px)', color:'var(--ink)'}}>お誕生日月にご予約いただいた方に</span><br/>
                  <span style={{fontWeight:700, fontSize:'clamp(8.5px, 2.6vw, 14.5px)', color:'var(--pink-600)'}}>メニューの中からお好きなオプションをおひとつ</span><br/>
                  <span style={{fontWeight:700, fontSize:'clamp(8.5px, 2.6vw, 14px)', color:'var(--ink)'}}>半額にてプレゼントいたします♡</span>
                  <span style={{display:'block', marginTop:6, fontSize:'clamp(7px, 2vw, 11px)', fontWeight:400, lineHeight:1.5, color:'var(--ink-2)'}}>※お誕生日月以外の利用はできません。<br/>ご希望の方は施術前にお知らせください。</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Gallery = () => {
  const cells = [
    { src: 'assets/gallery/g1.jpg', alt: 'もじゃもじゃビションフリーゼ' },
    { src: 'assets/gallery/g2.jpg', alt: 'お正月スタイル' },
    { src: 'assets/gallery/g4.jpg', alt: 'シャンプータイム' },
    { src: 'assets/gallery/g7.jpg', alt: 'まんまるカット' },
    { src: 'assets/gallery/g8.jpg', alt: 'トイプードル レッド' },
    { src: 'assets/gallery/g5.jpg', alt: 'ハロウィン × フラワー' },
    { src: 'assets/gallery/g6.jpg', alt: 'カット風景' },
    { src: 'assets/gallery/g3.jpg', alt: 'もこもこ仕上がり' },
  ];
  return (
    <section id="gallery" className="gallery">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>GALLERY</div>
            <h2>もじゃもじゃ <span className="accent">アーカイブ</span></h2>
          </div>
          <a
            href="https://www.instagram.com/moja_runrun/"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
              padding: '10px 18px',
              borderRadius: 999,
              background: 'linear-gradient(135deg, #f5a4b8, #e89aaf 60%, #d9b890)',
              color: 'white',
              fontSize: 13,
              fontWeight: 700,
              letterSpacing: '0.08em',
              boxShadow: '0 6px 16px rgba(184,99,124,0.25)',
              textDecoration: 'none'
            }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
            </svg>
            Instagram で見る
          </a>
        </div>
        <div className="gallery-grid">
          {cells.map((c, i) => (
            <div key={i} className="gallery-cell">
              <img src={c.src} alt={c.alt} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Flow = () => {
  const steps = [
    ['01', 'LINE でご連絡', '公式 LINE よりご希望日・コース・気になることをお知らせください。'],
    ['02', 'ご予約確定', '日程を調整のうえ、LINE で予約日時をご返信いたします。'],
    ['03', 'ご来店', '駐車場あり。施術前にその日の体調や毛のお悩みをお伺いします。'],
    ['04', 'トリミング', 'その子に合わせたプランで丁寧に施術。おトイレ休憩や、リラックスできる時間も大切に。'],
    ['05', 'お迎え', '仕上がりの写真は翌日までにお送りします。次回のご予約承ります。'],
  ];
  return (
    <section id="flow" className="flow">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>FLOW</div>
            <h2>ご来店までの<br/><span className="accent">5ステップ</span>。</h2>
            <p style={{fontSize:13, color:'var(--muted)', marginTop:12, maxWidth:520}}>
              ※ ご予約・お問い合わせはすべて<strong style={{color:'#06c755'}}>公式 LINE</strong> にて承っております。<br/>
              ※ 現在ご新規のお客様の受付は停止しております。<br/>
              再開時は LINE / Instagram にてお知らせいたします。
            </p>
          </div>
        </div>
        <div className="flow-steps">
          {steps.map(([n, t, d]) => (
            <div key={n} className="flow-step">
              <div className="num en">{n}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Access = () => (
  <section id="access" className="access">
    <div className="wrap">
      <div className="section-head">
        <div style={{textAlign:'center', flex:1}}>
          <div style={{fontFamily:'"Quicksand", sans-serif', fontStyle:'normal', fontSize:13, fontWeight:600, color:'var(--pink-600)', letterSpacing:'0.35em', marginBottom:8, textTransform:'uppercase'}}>— access & info —</div>
          <h2 style={{fontFamily:'"Cormorant Garamond", "Noto Serif JP", serif', fontWeight:500, fontSize:54, letterSpacing:'0.25em', margin:0, color:'var(--ink)'}}>ACCESS</h2>
          <div style={{width:60, height:2, background:'var(--pink-400)', margin:'14px auto 0'}}></div>
        </div>
      </div>
      <div className="access-grid">
        <div className="access-map">
          <iframe
            src="https://www.google.com/maps?q=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E8%97%A4%E6%B2%A2%E5%B8%82%E8%8F%96%E8%92%B2%E6%B2%A21192-5&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="moja_run run 地図 — 神奈川県藤沢市菖蒲沢 1192-5"
            allowFullScreen></iframe>
        </div>
        <div className="access-info">
          <div className="info-row">
            <div className="k">SHOP</div>
            <div className="v">moja_run run<br/><span style={{color:'var(--muted)', fontSize:12}}>private dog salon</span></div>
          </div>
          <div className="info-row">
            <div className="k">ADDRESS</div>
            <div className="v">
              神奈川県藤沢市菖蒲沢 1192-5
              <br/>
              <a className="map-link"
                 href="https://www.google.com/maps/search/?api=1&query=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E8%97%A4%E6%B2%A2%E5%B8%82%E8%8F%96%E8%92%B2%E6%B2%A21192-5"
                 target="_blank" rel="noopener noreferrer">
                Google マップで開く →
              </a>
            </div>
          </div>
          <div className="info-row">
            <div className="k">CONTACT</div>
            <div className="v">公式 LINE のみで承っております<br/><a href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer" style={{color:'#06c755', fontWeight:700, fontSize:13}}>→ LINE で友だち追加</a></div>
          </div>
          <div className="info-row">
            <div className="k">PARKING</div>
            <div className="v">近隣に駐車スペース 2台分</div>
          </div>
          <div className="info-row" style={{gridTemplateColumns: '96px 1fr', alignItems:'start'}}>
            <div className="k">HOURS</div>
            <div className="v">
              <div style={{fontSize:14, fontWeight:600, marginBottom:6}}>9:00 — 18:00</div>
              <div style={{fontSize:13, color:'var(--ink-2)'}}>定休日：<strong>金曜・日曜</strong></div>
              <div style={{fontSize:11, color:'var(--muted)', marginTop:8}}>※ご予約時に営業日をご確認ください</div>
            </div>
          </div>
          <div className="info-row">
            <div className="k">LICENSE</div>
            <div className="v" style={{fontSize:13}}>
              動物取扱責任者番号<br/>
              <span style={{fontFamily:'Quicksand', fontWeight:600, letterSpacing:'0.05em'}}>保管：210159</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const NEWS_FALLBACK = [
  { date: '2026.05.18', cat: 'お知らせ', cls: '', title: '夏季の毛玉トラブル相談 受付中（無料カウンセリング）', detail: '暑くなり、毛玉やムレによる皮ふトラブルが増える季節です。\n気になる箇所がある方は、無料カウンセリングを受付中です。ご予約の際にお気軽にお申し付けください。' },
  { date: '2026.05.02', cat: '休業', cls: 'holiday', title: '5月のお休みのお知らせ（5/14・5/21）', detail: '5月14日（水）・21日（水）は、お休みをいただきます。\nご予約・お問い合わせへのお返事は翌営業日以降となります。ご了承ください。' },
  { date: '2026.04.20', cat: 'メニュー', cls: 'info', title: '新メニュー「うるおいSPA」スタートしました', detail: '保湿効果の高い炭酸泉とトリートメントを組み合わせた新メニューです。\n乾燥やニオイが気になる子におすすめ。詳しくはスタッフまで。' },
  { date: '2026.04.05', cat: 'お知らせ', cls: '', title: 'インスタグラム フォロワー1,000名突破！ありがとうございます', detail: 'いつも応援ありがとうございます。これからも、かわいい仕上がりやお店の様子を発信していきます。' },
  { date: '2026.03.15', cat: 'メニュー', cls: 'info', title: 'シニアケアコースの内容を改定しました', detail: '体に負担の少ない短時間ケアを中心に、内容を見直しました。高齢のワンちゃんも安心してご利用ください。' },
];

// 「色」列の言葉 → 表示クラスへの変換表
const NEWS_COLOR_MAP = {
  'ピンク':'', 'お知らせ':'', 'pink':'', '':'',
  'オレンジ':'holiday', '休業':'holiday', 'orange':'holiday',
  'グリーン':'info', '緑':'info', 'メニュー':'info', 'green':'info',
  'ブルー':'blue', '青':'blue', 'イベント':'blue', 'blue':'blue',
  'パープル':'purple', '紫':'purple', 'キャンペーン':'purple', 'purple':'purple',
};

// かんたんCSVパーサー（"で囲まれたカンマ・改行に対応）
function parseCSV(text) {
  const rows = []; let row = []; let val = ''; let q = false;
  for (let i = 0; i < text.length; i++) {
    const c = text[i];
    if (q) {
      if (c === '"') { if (text[i+1] === '"') { val += '"'; i++; } else q = false; }
      else val += c;
    } else {
      if (c === '"') q = true;
      else if (c === ',') { row.push(val); val = ''; }
      else if (c === '\n') { row.push(val); rows.push(row); row = []; val = ''; }
      else if (c === '\r') { /* skip */ }
      else val += c;
    }
  }
  if (val.length || row.length) { row.push(val); rows.push(row); }
  return rows;
}

// 画像URLを「直接表示できる形」に整える
// （Googleドライブの共有リンクは、そのままでは画像表示できないため変換する）
function normalizeImageUrl(url) {
  if (!url) return '';
  url = url.trim();
  // GoogleドライブのファイルID を取り出す
  let id = '';
  let m = url.match(/drive\.google\.com\/file\/d\/([^/]+)/);
  if (m) id = m[1];
  if (!id) { m = url.match(/drive\.google\.com\/(?:open|uc|thumbnail)\?[^]*?id=([^&]+)/); if (m) id = m[1]; }
  // ID が取れたら、PC・スマホ両方で表示できる形式に変換
  if (id) return `https://lh3.googleusercontent.com/d/${id}=w1200`;
  return url;
}

// スプレッドシート（公開CSV）→ お知らせ配列
function newsFromCSV(text) {
  const rows = parseCSV(text).filter(r => r.some(c => (c||'').trim() !== ''));
  if (!rows.length) return [];
  // 1行目が見出し（「日付」等）なら飛ばす
  const head = rows[0].map(c => (c||'').trim());
  const isHeader = /日付|date|カテゴリ|内容|title/i.test(head.join(','));
  const body = isHeader ? rows.slice(1) : rows;
  return body.map(r => {
    const date = (r[0]||'').trim();
    const cat  = (r[1]||'').trim();
    const colorWord = (r[2]||'').trim();
    const title = (r[3]||'').trim();
    const detail = (r[4]||'').trim(); // E列：詳しい内容（任意）
    const image = normalizeImageUrl(r[5]||'');  // F列：画像URL（任意）
    const cls = (colorWord in NEWS_COLOR_MAP) ? NEWS_COLOR_MAP[colorWord]
              : (cat in NEWS_COLOR_MAP ? NEWS_COLOR_MAP[cat] : '');
    return { date, cat, cls, title, detail, image };
  }).filter(n => n.date || n.cat || n.title);
}

// お知らせ詳細ポップアップ
const NewsModal = ({ item, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  if (!item) return null;
  return (
    <div className="news-modal-backdrop" onClick={onClose}>
      <div className="news-modal" onClick={e => e.stopPropagation()}>
        <button className="news-modal-close" onClick={onClose} aria-label="閉じる">×</button>
        <div className="nm-meta">
          <span className="nm-date en">{item.date}</span>
          <span className={`cat ${item.cls || ''}`}>{item.cat}</span>
        </div>
        <h3 className="nm-title">{item.title}</h3>
        {item.image ? (
          <div className="nm-image">
            <img src={item.image} alt={item.title} loading="lazy"
                 onError={(e) => { e.target.parentNode.style.display = 'none'; }}/>
          </div>
        ) : null}
        <div className="nm-body">
          {(item.detail || 'くわしい内容は、スタッフまでお気軽におたずねください。')
            .split('\n').map((line, i) => <p key={i}>{line || '\u00A0'}</p>)}
        </div>
      </div>
    </div>
  );
};

const News = () => {
  const [items, setItems] = React.useState(NEWS_FALLBACK);
  const [selected, setSelected] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    const apply = (data) => { if (alive && Array.isArray(data) && data.length) setItems(data); };
    const loadJson = () => fetch('news.json', { cache: 'no-store' })
        .then(r => r.ok ? r.json() : null).then(apply).catch(() => {});
    const sheet = (window.NEWS_SHEET_CSV || '').trim();
    if (sheet) {
      // ① Googleスプレッドシート（公開CSV）から読み込む
      const ctrl = new AbortController();
      const timer = setTimeout(() => ctrl.abort(), 8000);
      fetch(sheet, { cache: 'no-store', signal: ctrl.signal })
        .then(r => r.ok ? r.text() : null)
        .then(text => {
          clearTimeout(timer);
          const data = text ? newsFromCSV(text) : [];
          if (data.length) apply(data); else loadJson();
        })
        .catch(() => { clearTimeout(timer); loadJson(); });
    } else {
      // ② スプレッドシート未設定なら news.json を読み込む
      loadJson();
    }
    return () => { alive = false; };
  }, []);
  return (
    <section id="news" className="news">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>NEWS</div>
            <h2>お知らせ</h2>
          </div>
        </div>
        <div className="news-list">
          {items.map((n, i) => (
            <div key={i} className="news-row">
              <div className="date">{n.date}</div>
              <div className={`cat ${n.cls || ''}`}>{n.cat}</div>
              <button type="button" className="title title-link" onClick={() => setSelected(n)}>{n.title}</button>
            </div>
          ))}
        </div>

        <NewsModal item={selected} onClose={() => setSelected(null)}/>
      </div>
    </section>
  );
};

const Footer = () => {
  const go = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
  <footer>
    <div className="footer-grid">
      <div className="brand-block">
        <Brand inverse/>
        <p style={{fontSize:13, opacity:0.7, marginTop:18, maxWidth:280}}>
          もじゃもじゃも、まんまるも。 ぜんぶ可愛い<br/>
          完全予約制のプライベート ドッグ サロン。
        </p>
      </div>
      <div>
        <h5>MENU</h5>
        <ul>
          <li><a href="#course-shampoo" onClick={go('course-shampoo')}>シャンプーコース</a></li>
          <li><a href="#course-trimming" onClick={go('course-trimming')}>トリミングコース</a></li>
          <li><a href="#menu" onClick={go('menu')}>オプション一覧</a></li>
        </ul>
      </div>
      <div>
        <h5>ABOUT</h5>
        <ul>
          <li><a href="#concept" onClick={go('concept')}>サロンについて</a></li>
          <li><a href="#flow" onClick={go('flow')}>はじめての方へ</a></li>
          <li><a href="#faq" onClick={go('faq')}>よくあるご質問</a></li>
          <li><a href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer">お問い合わせ</a></li>
        </ul>
      </div>
      <div>
        <h5>CONTACT</h5>
        <ul>
          <li><a href="#access" onClick={go('access')}>神奈川県藤沢市菖蒲沢 1192-5</a></li>
          <li>営業 9:00 — 18:00 / 定休 金・日</li>
          <li><a href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer">公式 LINE で連絡</a></li>
          <li><a href={window.INSTAGRAM_PROFILE || "https://www.instagram.com/moja_runrun/"} target="_blank" rel="noopener noreferrer">Instagram @moja_runrun</a></li>
          <li>動物取扱責任者番号　保管：210159</li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 MOJA_RUN RUN</span>
      <span>PRIVATE DOG SALON · FUJISAWA</span>
    </div>
  </footer>
  );
};

const FloatCTA = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > window.innerHeight * 0.7);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`float-cta ${visible ? 'visible' : ''}`}>
      <a href={window.INSTAGRAM_PROFILE || "https://www.instagram.com/moja_runrun/"} target="_blank" rel="noopener noreferrer" title="Instagram">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="1" fill="currentColor"/></svg>
      </a>
      <a className="main" href={window.LINE_URL || "https://lin.ee/hm4bJdp"} target="_blank" rel="noopener noreferrer" style={{background:'#06c755', color:'white'}}>
        LINE
      </a>
    </div>
  );
};

Object.assign(window, { Topbar, Hero, Concept, Statement, Strengths, Recommend, Groomer, SkincareBand, Courses, Menu, Gallery, Flow, Access, FAQ, News, Footer, FloatCTA });