// Shared primitives for 京橋ライフスタイル・ハートクリニック website kit
const toPascal = (n) => n.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');

function Icon({ name, size = 20, color = 'currentColor', stroke = 1.75, style }) {
  const lib = window.lucide && window.lucide.icons;
  let node = lib && (lib[toPascal(name)] || lib[name]);
  if (node && !Array.isArray(node[0]) && Array.isArray(node[2])) node = node[2]; // old format
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', ...style }}>
      {(node || []).map(([tag, attrs], i) => React.createElement(tag, { key: i, ...attrs }))}
    </svg>
  );
}

function Button({ variant = 'primary', size = 'md', children, icon = 'chevron-right', onClick, style, type }) {
  const [h, setH] = React.useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontWeight: 700, letterSpacing: '.06em',
    fontSize: size === 'lg' ? 17 : size === 'sm' ? 13 : 15,
    padding: size === 'lg' ? '18px 36px' : size === 'sm' ? '8px 16px' : '14px 28px',
    borderRadius: 8, border: '1.5px solid transparent', cursor: 'pointer',
    transition: 'background .15s var(--ease), color .15s', whiteSpace: 'nowrap',
  };
  const v = {
    primary: { background: h ? 'var(--primary-hover)' : 'var(--primary)', color: '#fff' },
    accent: { background: h ? 'var(--pink-700)' : 'var(--accent)', color: '#fff' },
    outline: { background: h ? 'var(--blue-50)' : '#fff', color: 'var(--primary)', borderColor: 'var(--primary)' },
    white: { background: h ? 'var(--blue-50)' : '#fff', color: 'var(--primary)' },
    ghost: { background: 'transparent', color: 'var(--primary)', padding: '8px 2px', textDecoration: h ? 'underline' : 'none', textUnderlineOffset: 4 },
  }[variant];
  return (
    <button type={type} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ ...base, ...v, ...style }}>
      {children}{icon && <Icon name={icon} size={16} stroke={2.25} />}
    </button>
  );
}

function VesselLine({ width = 48, center, style }) {
  return <span style={{ display: 'block', width, height: 6, margin: center ? '14px auto 0' : '14px 0 0',
    background: 'linear-gradient(var(--pink-600) 0 2px, transparent 2px 4px, var(--blue-600) 4px 6px)', ...style }} />;
}

function SectionTitle({ en, jp, center = true, light }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 48 }}>
      <div className="kc-eyebrow" style={{ color: light ? 'var(--blue-300)' : undefined }}>{en}</div>
      <h2 className="kc-h2" style={{ margin: '6px 0 0', color: light ? '#fff' : undefined }}>{jp}</h2>
      <VesselLine center={center} />
    </div>
  );
}

function Container({ children, narrow, style }) {
  return <div style={{ maxWidth: narrow ? 800 : 1120, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Placeholder({ label, h = 240, r = 12, style }) {
  return <div style={{ height: h, borderRadius: r, border: '1px solid var(--blue-100)',
    background: 'repeating-linear-gradient(135deg, var(--blue-50) 0 10px, #fff 10px 20px)',
    display: 'flex', alignItems: 'flex-end', padding: 14, fontFamily: 'ui-monospace, monospace',
    fontSize: 11, color: 'var(--blue-500)', boxSizing: 'border-box', ...style }}>{label}</div>;
}

function Tag({ kind = 'info', children }) {
  const m = { info: ['var(--blue-100)', 'var(--blue-700)'], closed: ['var(--pink-100)', 'var(--pink-700)'],
    exam: ['var(--aqua-100)', 'var(--aqua-700)'], warn: ['var(--warning-bg)', 'var(--warning)'] }[kind];
  return <span style={{ background: m[0], color: m[1], fontSize: 11, fontWeight: 700, padding: '2px 10px',
    borderRadius: 4, minWidth: 56, textAlign: 'center', display: 'inline-block', letterSpacing: '.06em' }}>{children}</span>;
}

function HoursTable({ compact }) {
  // 1=診療, 2=時間変更（水曜 9:00–12:00）, 0=休診
  const rows = [['午前　9:30 – 13:00', [1, 1, 2, 1, 1, 1, 0]], ['午後　14:30 – 18:30', [1, 1, 0, 1, 1, 0, 0]]];
  const days = ['月', '火', '水', '木', '金', '土', '日・祝'];
  const cell = { borderBottom: '1px solid var(--border)', padding: compact ? '9px 4px' : '13px 4px', textAlign: 'center' };
  return (
    <div>
      <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: 14, background: '#fff' }}>
        <thead><tr>{['診療時間', ...days].map((d, i) => (
          <th key={d} style={{ ...cell, background: 'var(--primary)', color: '#fff', fontWeight: 500, borderBottom: 0,
            borderRadius: i === 0 ? '6px 0 0 0' : i === 7 ? '0 6px 0 0' : 0 }}>{d}</th>))}</tr></thead>
        <tbody>{rows.map(([t, v]) => (
          <tr key={t}><td style={{ ...cell, textAlign: 'left', paddingLeft: 14, fontFamily: 'var(--font-latin)', whiteSpace: 'nowrap' }}>{t}</td>
            {v.map((o, i) => <td key={i} style={{ ...cell, color: o === 2 ? 'var(--pink-600)' : o ? 'var(--primary)' : 'var(--gray-400)', fontSize: o ? 16 : 14 }}>{o === 2 ? '▲' : o ? '●' : '—'}</td>)}</tr>))}
        </tbody>
      </table>
      <p style={{ fontSize: 12, color: 'var(--fg3)', margin: '10px 0 0', lineHeight: 1.8 }}>
        <span style={{ color: 'var(--pink-600)', fontWeight: 700 }}>▲</span> 水曜日は 9:00 – 12:00（午後休診）　／　土曜日は午前のみ　／　休診日：水曜午後・土曜午後・日曜・祝日
      </p>
    </div>
  );
}



const ASSET = 'img/';
const RESERVE_URL = 'https://klhc.reserve.ne.jp/sp/index.php?';
const SITE_URL = 'https://klh-clinic.com/';
function SiteHeader() {
  return <header style={{ position: 'sticky', top: 0, zIndex: 40, background: 'rgba(255,255,255,.96)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border)' }}>
    <div className="cp-head" style={{ maxWidth: 1240, margin: '0 auto', padding: '12px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
      <a href={SITE_URL}><img src={ASSET + 'logo/klhc-lockup.png'} alt="医療法人飛翔みらい会 京橋ライフスタイル・ハートクリニック" style={{ height: 52, display: 'block' }} /></a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <a className="cp-tel" href="tel:0335610223" style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--primary)' }}>
          <Icon name="phone" size={20} /><span><span className="kc-num" style={{ fontSize: 22, fontWeight: 600, display: 'block', lineHeight: 1.2 }}>03-3561-0223</span><span className="cp-hours" style={{ fontSize: 11, color: 'var(--fg2)' }}>月・火・木・金 9:30 – 18:30／水 9:00 – 12:00／土 9:30 – 13:00</span></span></a>
        <Button variant="accent" icon="calendar-check" onClick={() => go('reserve')}>Web予約</Button>
      </div>
    </div>
  </header>;
}
function SiteFooter() {
  return <footer style={{ background: 'var(--blue-900)', color: 'var(--blue-100)', padding: '48px 0 24px', fontSize: 13 }}>
    <Container>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ width: 52, height: 52, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><img src={ASSET + 'logo/klhc-mark.png'} alt="KLHC" style={{ height: 36 }} /></span>
        <div><div style={{ fontSize: 11, letterSpacing: '.12em', color: 'var(--blue-300)' }}>医療法人飛翔みらい会</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 19, color: '#fff' }}>京橋ライフスタイル・ハートクリニック</div></div>
      </div>
      <p style={{ margin: '20px 0 0', lineHeight: 2 }}>〒104-0031 東京都中央区京橋2-11-5 パインセントラルビル5F<br />TEL 03-3561-0223　FAX 03-3561-0224<br />東京メトロ銀座線「京橋駅」4番出口 徒歩3分、都営浅草線「宝町駅」A7番出口 徒歩1分</p>
      <div style={{ display: 'flex', gap: 24, marginTop: 16, flexWrap: 'wrap' }}>
        <a href={SITE_URL} style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="chevron-right" size={14} />ホーム</a>
        <a href={RESERVE_URL} target="_blank" rel="noopener" style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="chevron-right" size={14} />Web予約</a>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,.12)', marginTop: 32, paddingTop: 20, fontFamily: 'var(--font-latin)', fontSize: 11, letterSpacing: '.1em', color: 'var(--blue-300)' }}>© 2026 Kyobashi Lifestyle Heart Clinic.</div>
    </Container>
  </footer>;
}
function go(p) {
  if (p === 'reserve') { window.open(RESERVE_URL, '_blank', 'noopener'); return; }
  if (p === 'vascular') { window.location.href = VASCULAR_URL; return; }
  window.location.href = SITE_URL;
}
const VASCULAR_URL = '../kekkan-marugoto/';

function Reveal({ children, delay = 0, style }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const check = () => { if (ref.current && ref.current.getBoundingClientRect().top < window.innerHeight * 0.92) setOn(true); };
    check();
    let io;
    try { io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setOn(true); }, { threshold: 0.01 }); ref.current && io.observe(ref.current); } catch (e) {}
    window.addEventListener('scroll', check, { passive: true });
    const t = setTimeout(() => setOn(true), 1200); // safety: never stay hidden
    return () => { io && io.disconnect(); window.removeEventListener('scroll', check); clearTimeout(t); };
  }, []);
  return <div ref={ref} style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(20px)', transition: `opacity .7s var(--ease) ${delay}ms, transform .7s var(--ease) ${delay}ms`, ...style }}>{children}</div>;
}

function LPStickyCta({ go }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => { const f = () => setShow(window.scrollY > 700); window.addEventListener('scroll', f); f(); return () => window.removeEventListener('scroll', f); }, []);
  return (
    <div style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 30, display: 'flex', flexDirection: 'column', gap: 10, transform: show ? 'none' : 'translateY(140%)', opacity: show ? 1 : 0, transition: 'all .35s var(--ease)' }}>
      <button onClick={() => go('reserve')} style={{ font: 'inherit', cursor: 'pointer', border: 0, borderRadius: 999, background: 'var(--pink-600)', color: '#fff', fontWeight: 700, fontSize: 15, padding: '16px 26px', display: 'flex', gap: 8, alignItems: 'center', boxShadow: 'var(--shadow-lg)' }}>
        <Icon name="calendar-check" size={20} />Web予約</button>
      <a href="tel:0335610223" style={{ borderRadius: 999, background: '#fff', color: 'var(--primary)', fontWeight: 700, padding: '12px 22px', display: 'flex', gap: 8, alignItems: 'center', boxShadow: 'var(--shadow-md)', border: '1.5px solid var(--primary)' }}>
        <Icon name="phone" size={18} /><span className="kc-num">03-3561-0223</span></a>
    </div>
  );
}


const LP_WARM = {
  '--w-cream': '#FFF9F2', '--w-peach': '#FCEEE6', '--w-line': '#F1DFD2',
  '--w-ink': '#3E3431', '--w-ink-2': '#6B5D57',
  '--w-shadow': '0 8px 24px rgba(160, 90, 70, .10)', '--w-shadow-lg': '0 20px 48px rgba(160, 90, 70, .16)',
  '--fg1': '#3E3431', '--fg2': '#6B5D57', '--blue-700': '#3E3431',
  background: 'var(--w-cream)',
};

// CPAP外来（睡眠時無呼吸症候群）— landing page. Shares the warm LP tokens (LP_WARM) and Reveal from VascularLP.jsx.
const CP_A = ASSET + 'cpap/';

function CpHead({ en, title, sub }) {
  return <div style={{ textAlign: 'center', marginBottom: 48 }}>
    <div className="kc-eyebrow">{en}</div>
    <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 32, color: 'var(--w-ink)', margin: '8px 0 0', letterSpacing: '.06em', lineHeight: 1.5 }}>{title}</h2>
    {sub && <p style={{ color: 'var(--w-ink-2)', fontSize: 16, margin: '10px 0 0', lineHeight: 1.9 }}>{sub}</p>}
    <span style={{ display: 'block', width: 56, height: 6, margin: '16px auto 0', borderRadius: 3, background: 'linear-gradient(90deg, var(--pink-300), #F7C59F)' }} />
  </div>;
}

function CpHero({ go }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, var(--w-cream) 0%, var(--w-peach) 100%)' }}>
      <span style={{ position: 'absolute', right: '-6%', top: '-25%', width: 720, height: 720, borderRadius: '50%', background: 'radial-gradient(circle, rgba(249,169,203,.32), transparent 65%)' }} />
      <span style={{ position: 'absolute', left: '-10%', bottom: '-35%', width: 640, height: 640, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,214,170,.38), transparent 65%)' }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '72px 32px 120px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal><span style={{ display: 'inline-block', background: 'var(--pink-600)', color: '#fff', fontWeight: 700, fontSize: 14, padding: '6px 18px', borderRadius: 999, letterSpacing: '.1em' }}>CPAP外来</span></Reveal>
          <Reveal delay={100}><p className="kc-script" style={{ fontSize: 24, margin: '24px 0 0' }}>ぐっすり眠って、心臓と血管を守る</p></Reveal>
          <Reveal delay={200}><h1 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 56, lineHeight: 1.3, letterSpacing: '.02em', margin: '14px 0 0', color: 'var(--w-ink)' }}>
            <span style={{ color: 'var(--pink-600)' }}>睡眠時無呼吸</span>の<br />検査と治療</h1></Reveal>
          <Reveal delay={300}><p style={{ fontSize: 17, lineHeight: 1.9, color: 'var(--w-ink-2)', margin: '22px 0 0' }}>
            いびき・日中の眠気が気になる方へ。<br />循環器専門医が、簡易検査からCPAP治療まで一貫して診ます。</p></Reveal>
          <Reveal delay={400}><div style={{ display: 'flex', gap: 12, marginTop: 36, alignItems: 'center' }}>
            <Button variant="accent" size="lg" icon="calendar-check" onClick={() => go('reserve')}>Web予約（24時間受付）</Button>
            <a href="#cp-flow" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--primary)', fontWeight: 700, padding: '0 12px' }}>検査から治療の流れ<Icon name="chevron-down" size={18} /></a>
          </div></Reveal>
        </div>
        <Reveal delay={200}><div style={{ position: 'relative' }}>
          <img src={CP_A + 'cpap-wearing.jpg'} alt="CPAPを装着して眠る様子" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', objectPosition: '40% 50%', borderRadius: '200px 200px 32px 32px', border: '8px solid #fff', boxShadow: 'var(--w-shadow-lg)', display: 'block' }} />
          <div style={{ position: 'absolute', left: -28, bottom: -28, background: '#fff', borderRadius: 24, padding: '16px 22px', boxShadow: 'var(--w-shadow)', display: 'flex', gap: 12, alignItems: 'center' }}>
            <span style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--pink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="moon" size={22} color="var(--pink-600)" /></span>
            <div><div style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 17, color: 'var(--w-ink)' }}>簡易検査は院内ですぐに解析</div>
              <div style={{ fontSize: 12, color: 'var(--w-ink-2)' }}>結果をその場でご説明します</div></div>
          </div>
        </div></Reveal>
      </div>
    </section>
  );
}

function CpSigns() {
  const signs = ['大きないびきをかく', '睡眠中に呼吸が止まると言われた', '日中に強い眠気がある', '起床時に頭痛がある'];
  const bases = ['高血圧', '脂質異常症', '糖尿病', '心臓・脳血管の病気', '肥満（BMIが高い）'];
  return (
    <section style={{ padding: '88px 0 96px', background: '#fff', borderRadius: '56px 56px 0 0', marginTop: -56, position: 'relative' }}>
      <Container>
        <Reveal><CpHead en="Check" title={<>こんな<span className="kc-em">サイン</span>はありませんか？</>} /></Reveal>
        <Reveal delay={100}><div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, maxWidth: 1000, margin: '0 auto' }}>
          {signs.map(s => <div key={s} style={{ display: 'flex', gap: 12, alignItems: 'center', background: 'var(--w-cream)', border: '1.5px solid var(--w-line)', borderRadius: 999, padding: '14px 20px', fontSize: 15, fontWeight: 700, color: 'var(--w-ink)' }}>
            <span style={{ width: 28, height: 28, flex: 'none', borderRadius: '50%', background: 'var(--pink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={16} color="var(--pink-600)" stroke={3} /></span>{s}</div>)}
        </div></Reveal>
        <Reveal delay={200}><div style={{ maxWidth: 1000, margin: '28px auto 0', background: 'var(--w-peach)', borderRadius: 32, padding: '24px 32px', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <b style={{ fontFamily: 'var(--font-heading)', fontSize: 17, color: 'var(--w-ink)' }}>こんな持病がある方も要注意</b>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{bases.map(b => <span key={b} style={{ background: '#fff', borderRadius: 999, padding: '6px 16px', fontSize: 14, color: 'var(--w-ink)', border: '1px solid var(--w-line)' }}>{b}</span>)}</div>
        </div></Reveal>
      </Container>
    </section>
  );
}

function CpWhy() {
  return (
    <section style={{ padding: '96px 0', background: 'var(--w-peach)', borderRadius: 56, margin: '0 24px' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <Reveal><div>
          <div className="kc-eyebrow">Why Cardiology</div>
          <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 32, color: 'var(--w-ink)', margin: '8px 0 20px', lineHeight: 1.5 }}>睡眠中の無呼吸は、<br /><span style={{ color: 'var(--pink-600)' }}>心臓と血管</span>の負担に。</h2>
          <p className="kc-p" style={{ margin: '0 0 16px' }}>眠っている間にのどの奥（気道）がふさがり、呼吸が止まったり浅くなったりするのが睡眠時無呼吸症候群（SAS）です。体の酸素が足りなくなるたびに、血圧や心臓に負担がかかります。</p>
          <p className="kc-p" style={{ margin: 0 }}>当院は循環器・血管の専門クリニックです。睡眠の検査だけでなく、血圧や心臓・血管の状態もあわせて診ていきます。</p>
        </div></Reveal>
        <Reveal delay={120}><div style={{ background: '#fff', borderRadius: 40, padding: 24, boxShadow: 'var(--w-shadow)' }}>
          <img src={CP_A + 'cpap-illust.png'} alt="閉塞時の気道とCPAP療法時の気道" style={{ width: '100%', display: 'block', borderRadius: 24 }} />
        </div></Reveal>
      </Container>
    </section>
  );
}

// 有病率・合併症リスク — 代表的な疫学研究の値（要・院長確認）
const CP_PREV = [
  { num: '約940', unit: '万人', label: '日本の中等症以上の推定患者数', note: 'AHI 15以上（Benjafield 2019）' },
  { num: '約2,200', unit: '万人', label: '軽症を含めた推定患者数', note: 'AHI 5以上（同上）' },
  { num: '9割以上', unit: '', label: '治療を受けていないと考えられる方', note: '多くの方が未診断のまま' },
];
const IL = ASSET + 'illust/';
const CP_RISK = [
  { name: '高血圧', x: 2.9, src: 'Peppard 2000', img: IL + 'organ-heart-c.png', icon: 'gauge' },
  { name: '心房細動', x: 4.0, src: 'Mehra 2006', img: IL + 'heart-c.png', icon: 'heart-pulse' },
  { name: '脳卒中', x: 2.0, src: 'Yaggi 2005', img: IL + 'organ-brain-c.png' },
  { name: '心血管死', x: 2.9, src: 'Marin 2005（重症・未治療）', img: IL + 'organ-heart-c.png', icon: 'activity' },
  { name: '交通事故', x: 2.4, src: 'Tregear 2009', icon: 'car' },
];
const CP_COMORB = [['治療抵抗性高血圧', 80, IL + 'organ-heart-c.png'], ['心房細動', 50, IL + 'heart-c.png'], ['心不全', 50, IL + 'organ-heart-c.png'], ['肥満（BMI 30以上）', 40, null]];

function CpRiskIcon({ r, size = 76 }) {
  return <div style={{ position: 'relative', width: size, height: size, flex: 'none', borderRadius: '50%', background: '#fff', boxShadow: 'var(--w-shadow)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    {r.img ? <img src={r.img} alt="" style={{ width: '78%', height: '78%', objectFit: 'contain', objectPosition: 'center', mixBlendMode: 'multiply' }} /> : <Icon name={r.icon} size={size * .46} color="var(--pink-600)" />}
    {r.img && r.icon && <span style={{ position: 'absolute', right: -4, bottom: -4, width: 30, height: 30, borderRadius: '50%', background: 'var(--pink-600)', border: '3px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={r.icon} size={15} color="#fff" /></span>}
  </div>;
}

function CpRisk() {
  return (
    <section style={{ padding: '96px 0', background: '#fff' }}>
      <Container>
        <Reveal><CpHead en="Risk" title={<>睡眠時無呼吸症候群の<span className="kc-em">リスク</span></>} sub="決してめずらしい病気ではありません。放っておくと、心臓や血管の病気につながります。" /></Reveal>

        <Reveal delay={80}><div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 64 }}>
          {CP_PREV.map((p, i) => <div key={p.label} style={{ background: i === 0 ? 'var(--pink-600)' : 'var(--w-cream)', color: i === 0 ? '#fff' : 'var(--w-ink)', border: i === 0 ? 0 : '1.5px solid var(--w-line)', borderRadius: 36, padding: '32px 28px', textAlign: 'center', boxShadow: i === 0 ? '0 14px 32px rgba(230,32,111,.25)' : 'none' }}>
            <div style={{ fontSize: 15, fontWeight: 700, opacity: i === 0 ? .92 : 1 }}>{p.label}</div>
            <div style={{ margin: '10px 0 6px', lineHeight: 1 }}><span className="kc-num" style={{ fontSize: 56, fontWeight: 700, color: i === 0 ? '#fff' : 'var(--pink-600)' }}>{p.num}</span><span style={{ fontSize: 20, fontWeight: 700, marginLeft: 4 }}>{p.unit}</span></div>
            <div style={{ fontSize: 12, opacity: .8 }}>{p.note}</div></div>)}
        </div></Reveal>

        {/* 合併症リスク：イラスト付きカード */}
        <Reveal><div style={{ background: 'var(--w-peach)', borderRadius: 48, padding: '44px 44px 40px' }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 26, color: 'var(--w-ink)', margin: 0 }}>合併症のリスク</h3>
            <p style={{ fontSize: 15, color: 'var(--w-ink-2)', margin: '6px 0 0' }}>無呼吸のない方と比べて、病気になるリスクが<b style={{ color: 'var(--pink-600)' }}>約2〜4倍</b>に</p></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {CP_RISK.map((r, i) => <Reveal key={r.name} delay={i * 80}><div style={{ background: '#fff', borderRadius: 32, padding: '28px 12px 22px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', boxSizing: 'border-box' }}>
              <CpRiskIcon r={r} size={92} />
              <b style={{ fontFamily: 'var(--font-heading)', fontSize: 18, color: 'var(--w-ink)', marginTop: 18 }}>{r.name}</b>
              <div style={{ margin: '8px 0 4px', lineHeight: 1 }}><span style={{ fontSize: 15, fontWeight: 700, color: 'var(--pink-600)' }}>約</span><span className="kc-num" style={{ fontSize: 46, fontWeight: 700, color: 'var(--pink-600)' }}>{r.x.toFixed(1)}</span><span style={{ fontSize: 17, fontWeight: 700, color: 'var(--pink-600)' }}>倍</span></div>
              <div style={{ display: 'flex', gap: 3, margin: '10px 0 10px' }}>{[1, 2, 3, 4].map(n => <span key={n} style={{ width: 18, height: 6, borderRadius: 3, background: n <= Math.round(r.x) ? 'var(--pink-600)' : 'var(--pink-100)' }} />)}</div>
              <div style={{ fontSize: 11, color: 'var(--w-ink-2)', marginTop: 'auto' }}>{r.src}</div>
            </div></Reveal>)}
          </div>
        </div></Reveal>

        {/* 合併割合 + 肥満 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 32, marginTop: 32, alignItems: 'stretch' }}>
          <Reveal><div style={{ background: 'var(--w-cream)', border: '1.5px solid var(--w-line)', borderRadius: 40, padding: '36px', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
            <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 22, color: 'var(--w-ink)', margin: '0 0 6px' }}>この病気がある方に多い</h3>
            <p style={{ fontSize: 14, color: 'var(--w-ink-2)', margin: '0 0 24px' }}>それぞれの病気の方のうち、睡眠時無呼吸を合併している割合</p>
            <div style={{ display: 'grid', gap: 16 }}>
              {CP_COMORB.map(([n, v, img]) => <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 56, height: 56, flex: 'none', borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--w-shadow)' }}>
                  {img ? <img src={img} alt="" style={{ width: 42, height: 42, objectFit: 'contain', objectPosition: 'center', mixBlendMode: 'multiply' }} /> : <Icon name="scale" size={26} color="var(--pink-600)" />}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}><b style={{ fontSize: 16, color: 'var(--w-ink)' }}>{n}</b>
                    <span className="kc-num" style={{ fontSize: 24, fontWeight: 700, color: 'var(--pink-600)' }}>約{v / 10}割</span></div>
                  <div style={{ height: 10, background: '#fff', borderRadius: 999, overflow: 'hidden', marginTop: 6 }}><div style={{ width: v + '%', height: '100%', borderRadius: 999, background: 'linear-gradient(90deg, var(--pink-300), var(--pink-600))' }} /></div>
                </div></div>)}
            </div>
            <p style={{ marginTop: 'auto', paddingTop: 24, fontSize: 15, lineHeight: 1.8, color: 'var(--w-ink)' }}>循環器の病気で通院中の方こそ、<b style={{ color: 'var(--pink-600)' }}>一度は睡眠の検査を</b>おすすめします。</p>
          </div></Reveal>

          <Reveal delay={120}><div style={{ background: '#fff', border: '2px solid var(--pink-100)', borderRadius: 40, overflow: 'hidden', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
            <img src={CP_A + 'simple-wearing-illust.jpg'} alt="体格のよい男性が眠っているイラスト" style={{ width: '100%', height: 190, objectFit: 'cover', objectPosition: '60% 35%', display: 'block', flex: 'none' }} />
            <div style={{ padding: '24px 32px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
              <span style={{ alignSelf: 'flex-start', background: 'var(--pink-600)', color: '#fff', fontWeight: 700, fontSize: 13, padding: '4px 14px', borderRadius: 999 }}>肥満の方は特に注意</span>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 22, color: 'var(--w-ink)', margin: '14px 0 10px', lineHeight: 1.5 }}>首まわりや舌の脂肪が、のどを狭くします</h3>
              <div style={{ display: 'grid', gap: 10 }}>
                {[['約4割', '肥満（BMI 30以上）の方のうち、睡眠時無呼吸を合併'], ['約7割', '睡眠時無呼吸の方のうち、肥満がある'], ['約6倍', '体重が10%増えると、中等症以上になるリスク']].map(([v, t]) => <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', background: 'var(--w-cream)', borderRadius: 20, padding: '10px 16px' }}>
                  <span className="kc-num" style={{ fontSize: 24, fontWeight: 700, color: 'var(--pink-600)', minWidth: 72, whiteSpace: 'nowrap' }}>{v}</span>
                  <span style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--w-ink)' }}>{t}</span></div>)}
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.8, color: 'var(--w-ink-2)', margin: '14px 0 0' }}>日本人はあごが小さい方が多く、<b style={{ color: 'var(--w-ink)' }}>肥満でなくても</b>起こることがあります。減量はいびき・無呼吸の改善にもつながります。</p>
            </div>
          </div></Reveal>
        </div>
        <p style={{ fontSize: 12, color: 'var(--w-ink-2)', margin: '24px 0 0', lineHeight: 1.8 }}>※数値は国内外の代表的な研究報告（Peppard 2000、Young 2002 ほか）にもとづく目安です。研究により値は異なります。<br />※AHI（無呼吸低呼吸指数）：1時間あたりの無呼吸・低呼吸の回数。</p>
      </Container>
    </section>
  );
}

function CpTests() {
  const card = (o) => (
    <div style={{ background: '#fff', borderRadius: 40, padding: 32, boxShadow: 'var(--w-shadow)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <span style={{ background: o.tagBg, color: '#fff', fontWeight: 700, fontSize: 13, padding: '4px 14px', borderRadius: 999 }}>{o.tag}</span>
        <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 26, color: 'var(--w-ink)', margin: 0 }}>{o.title}</h3></div>
      <div style={{ display: 'grid', gridTemplateColumns: o.imgs.length > 1 ? '1fr 1fr' : '1fr', gap: 12, marginBottom: 20 }}>
        {o.imgs.map(([src, alt, fit]) => <img key={src} src={CP_A + src} alt={alt} style={{ width: '100%', aspectRatio: '1 / 1', objectFit: fit || 'cover', borderRadius: 24, background: 'var(--w-cream)', border: '1.5px solid var(--w-line)' }} />)}
      </div>
      <p className="kc-p" style={{ margin: '0 0 16px', fontSize: 16 }}>{o.lead}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
        {o.pts.map(p => <li key={p} style={{ display: 'flex', gap: 12, alignItems: 'center', background: 'var(--w-cream)', borderRadius: 999, padding: '10px 18px', fontSize: 15, color: 'var(--w-ink)' }}>
          <span style={{ width: 26, height: 26, flex: 'none', borderRadius: '50%', background: 'var(--pink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={16} color="var(--pink-600)" stroke={3} /></span>{p}</li>)}
      </ul>
    </div>);
  return (
    <section style={{ padding: '96px 0', background: 'var(--w-cream)' }}>
      <Container>
        <Reveal><CpHead en="Examination" title="2つの検査" sub="症状や持病、体型などから、どちらかの検査を選びます。どちらもご自宅で、いつものように眠るだけです。" /></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <Reveal>{card({ tag: 'まずはこちら', tagBg: 'var(--pink-600)', title: '簡易検査', imgs: [['simple-wearing-illust.jpg', '簡易検査装置を装着して眠るイラスト'], ['simple-device.jpg', '簡易検査装置', 'contain']],
            lead: '鼻の気流と、血液中の酸素の量（酸素飽和度）を測ります。胸に小さな装置、指先にセンサを付けて一晩眠るだけの検査です。',
            pts: ['装置をお返しいただいたら、院内ですぐに解析', '結果をその場でご説明します', '体への負担が少ない検査です'] })}</Reveal>
          <Reveal delay={120}>{card({ tag: 'より詳しく', tagBg: 'var(--primary)', title: '精密検査（PSG）', imgs: [['psg-illust.png', '精密検査（PSG）のイメージ']],
            lead: '脳波・呼吸・酸素などを同時に記録し、眠りの深さや無呼吸の回数を詳しく調べます。簡易検査で判断が難しい場合などに行います。',
            pts: ['ご自宅で受けられます', '眠りの質まで詳しくわかります', '治療方針をより正確に決められます'] })}</Reveal>
        </div>
      </Container>
    </section>
  );
}

function CpFlow() {
  const box = (title, body, c, icon) => <div style={{ background: '#fff', border: `2px solid ${c}`, borderRadius: 28, padding: '18px 20px', textAlign: 'center', boxShadow: 'var(--w-shadow)' }}>
    <div style={{ display: 'inline-flex', gap: 8, alignItems: 'center', fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 20, color: c }}>{icon && <Icon name={icon} size={20} color={c} />}{title}</div>
    {body && <p style={{ margin: '8px 0 0', fontSize: 14, lineHeight: 1.75, color: 'var(--w-ink-2)' }}>{body}</p>}</div>;
  const arrow = (label) => <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '10px 0' }}>
    {label && <span className="kc-num" style={{ fontSize: 15, fontWeight: 700, color: 'var(--w-ink)', background: 'var(--w-peach)', borderRadius: 999, padding: '2px 14px' }}>{label}</span>}
    <Icon name="arrow-down" size={22} color="var(--pink-300)" /></div>;
  const PINK = 'var(--pink-600)', BLUE = 'var(--primary)', ORANGE = '#E08A3C', GREEN = '#4E9A6B';
  return (
    <section id="cp-flow" style={{ padding: '96px 0', background: '#fff', scrollMarginTop: 120 }}>
      <Container>
        <Reveal><CpHead en="Flow" title="検査から治療までの流れ" /></Reveal>
        <Reveal><div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <div style={{ maxWidth: 560, margin: '0 auto' }}>{box('問診・診察', '症状（いびき・無呼吸・日中の眠気・起床時の頭痛）、持病（高血圧・脂質異常症・糖尿病・心臓や脳血管の病気）、体重（BMI）を伺います。', BLUE, 'clipboard-list')}</div>
          {arrow()}
          <div style={{ maxWidth: 560, margin: '0 auto' }}>{box('簡易検査', 'ご自宅で一晩。院内ですぐに解析し、結果をご説明します。', PINK, 'moon')}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 4 }}>
            <div>{arrow('AHI 15未満')}{box('経過観察・生活改善', '必要に応じてマウスピース（歯科へご紹介）', GREEN, 'smile')}</div>
            <div>{arrow('AHI 15〜29')}{box('精密検査（PSG）', '脳波・呼吸・酸素を詳しく調べます', BLUE, 'activity')}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>{arrow('15以上')}{box('CPAP', null, ORANGE)}</div>
                <div>{arrow('15未満')}{box('マウスピース', null, GREEN)}</div></div></div>
            <div>{arrow('AHI 30以上')}{box('CPAP治療', '当院で導入・継続管理を行います', ORANGE, 'wind')}</div>
          </div>
          <p style={{ fontSize: 13, color: 'var(--w-ink-2)', margin: '28px 0 0', lineHeight: 1.8 }}>※AHI（無呼吸低呼吸指数）：1時間あたりの無呼吸・低呼吸の回数を示す指標です。<br />※マウスピースは歯科での作製となります。</p>
        </div></Reveal>
      </Container>
    </section>
  );
}

function CpTreatment() {
  const devices = [['dreamstation.png', 'DreamStation', 'フィリップス'], ['airsense11.png', 'スリープメイト11（AirSense 11）', '帝人ファーマ']];
  return (
    <section style={{ padding: '96px 0', background: 'var(--w-peach)', borderRadius: 56, margin: '0 24px' }}>
      <Container>
        <Reveal><CpHead en="Treatment" title="CPAP（シーパップ）治療" sub="眠るときに鼻にマスクを付け、装置から空気を送ります。空気の圧で気道が広がり、のどがふさがらなくなります。" /></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
          <Reveal><img src={CP_A + 'cpap-wearing.jpg'} alt="CPAPを装着して眠る様子" style={{ width: '100%', aspectRatio: '3 / 2', objectFit: 'cover', borderRadius: 40, border: '8px solid #fff', boxShadow: 'var(--w-shadow-lg)', display: 'block' }} /></Reveal>
          <Reveal delay={120}><div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'grid', gap: 10 }}>
              {['毎晩、眠るときに使います', '睡眠中の無呼吸を減らし、ぐっすり眠れるようにします', '月に1回の通院で、使用状況や体調を確認します'].map(p => <li key={p} style={{ display: 'flex', gap: 12, alignItems: 'center', background: '#fff', borderRadius: 999, padding: '12px 20px', fontSize: 15, color: 'var(--w-ink)' }}>
                <span style={{ width: 26, height: 26, flex: 'none', borderRadius: '50%', background: 'var(--pink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={16} color="var(--pink-600)" stroke={3} /></span>{p}</li>)}
            </ul>
            <b style={{ display: 'block', fontFamily: 'var(--font-heading)', fontSize: 17, color: 'var(--w-ink)', marginBottom: 12 }}>当院で取り扱っている装置</b>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {devices.map(([src, name, maker]) => <div key={src} style={{ background: '#fff', borderRadius: 28, padding: 16, textAlign: 'center', boxShadow: 'var(--w-shadow)' }}>
                <img src={CP_A + src} alt={name} style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'contain', display: 'block', borderRadius: 16 }} />
                <div style={{ fontSize: 12, color: 'var(--w-ink-2)', marginTop: 8 }}>{maker}</div>
                <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--w-ink)' }}>{name}</div></div>)}
            </div>
          </div></Reveal>
        </div>
      </Container>
    </section>
  );
}

function CpDoctor() {
  return (
    <section style={{ padding: '96px 0', background: 'var(--w-cream)' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'center' }}>
        <Reveal><img src={ASSET + 'photo/director-suit.jpg'} alt="院長 上原裕規" style={{ width: '100%', aspectRatio: '4 / 5', objectFit: 'cover', objectPosition: '50% 20%', borderRadius: '200px 200px 32px 32px', boxShadow: 'var(--w-shadow-lg)', border: '8px solid #fff', display: 'block' }} /></Reveal>
        <Reveal delay={150}><div>
          <div className="kc-eyebrow">Message</div>
          <p className="kc-script" style={{ fontSize: 28, margin: '12px 0 0', lineHeight: 1.6 }}>よい眠りは、<br />心臓と血管の健康につながります。</p>
          <p className="kc-p" style={{ margin: '24px 0' }}>睡眠時無呼吸症候群は、ご本人が気づきにくい病気です。ご家族からいびきや呼吸の停止を指摘された方、高血圧などの持病がある方は、一度検査を受けてみてください。循環器の専門医として、眠りと心臓・血管の両面からサポートします。</p>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span style={{ fontSize: 13, color: 'var(--fg3)' }}>院長</span>
            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 30, color: 'var(--w-ink)', letterSpacing: '.12em' }}>上原 裕規</span>
            <span style={{ fontSize: 13, color: 'var(--fg2)' }}>（うえはら ひろき）</span>
            <span style={{ background: 'var(--pink-50)', color: 'var(--pink-600)', border: '1px solid var(--pink-100)', borderRadius: 999, padding: '2px 12px', fontSize: 13, fontWeight: 700 }}>医学博士</span></div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
            {['日本循環器学会専門医', '日本心血管インターベンション治療学会専門医', '日本脈管学会専門医', '日本高血圧学会指導医'].map(t => <span key={t} style={{ fontSize: 13, padding: '4px 14px', borderRadius: 999, background: '#fff', border: '1px solid var(--w-line)', color: 'var(--w-ink)' }}>{t}</span>)}</div>
        </div></Reveal>
      </Container>
    </section>
  );
}

function CpFinalCta({ go }) {
  return (
    <section style={{ padding: '88px 0', background: 'linear-gradient(135deg, #E6206F, #F2789F 55%, #F7A88A)', color: '#fff', borderRadius: '56px 56px 0 0' }}>
      <Container style={{ textAlign: 'center' }}>
        <p className="kc-script" style={{ color: '#fff', opacity: .9, fontSize: 22, margin: 0 }}>ぐっすり眠れる毎日へ</p>
        <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 38, margin: '12px 0 8px', letterSpacing: '.06em' }}>CPAP外来のご予約</h2>
        <p style={{ color: '#fff', margin: '0 0 36px' }}>いびきや日中の眠気が気になる方は、どうぞお気軽にご相談ください。</p>
        <div style={{ display: 'flex', gap: 20, justifyContent: 'center' }}>
          <Button variant="white" size="lg" icon="calendar-check" onClick={() => go('reserve')} style={{ fontSize: 19, padding: '22px 48px', borderRadius: 999, color: 'var(--pink-600)', boxShadow: '0 10px 30px rgba(150,40,60,.25)' }}>Web予約（24時間受付）</Button>
          <div style={{ border: '1.5px solid rgba(255,255,255,.6)', borderRadius: 999, padding: '10px 32px', textAlign: 'left' }}>
            <div style={{ fontSize: 12, opacity: .85 }}>お電話でのご予約</div>
            <div className="kc-num" style={{ fontSize: 30, lineHeight: 1.3, display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="phone" size={22} />03-3561-0223</div></div>
        </div>
        <button onClick={() => go('vascular')} style={{ marginTop: 28, background: 'none', border: 0, color: '#fff', font: 'inherit', fontWeight: 700, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 4 }}>全身の血管を診る「血管まるごと外来」はこちら</button>
      </Container>
    </section>
  );
}

function CpapLP({ go }) {
  return <div style={LP_WARM}>
    <CpHero go={go} />
    <CpSigns />
    <CpWhy />
    <CpRisk />
    <CpTests />
    <CpFlow />
    <CpTreatment />
    <CpDoctor />
    <CpFinalCta go={go} />
    <LPStickyCta go={go} />
  </div>;
}



function App() {
  return <div><SiteHeader /><main><CpapLP go={go} /></main><SiteFooter /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);