/* Interactive sections: Pricing, Simulation, Flow, Doctors, FAQ, Clinic, Final CTA */
const { useState, useEffect, useMemo } = React;

/* ---------- small icon set ---------- */
const Ico = {
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 12l5 5L20 7" /></svg>,
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>,
  sparkle: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" /></svg>,
  phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" /></svg>,
  cal: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M8 3v4M16 3v4M3 11h18" /></svg>,
  plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 5v14M5 12h14" /></svg>
};

/* ============================================================
   PRICING
   ============================================================ */
function Pricing() {
  const plans = [
  {
    cls: 'plain',
    tag: 'PETIT CASE',
    name: 'プチ症例',
    forWhom: '前歯のちょっとした気になりを整えたい方',
    price: '400,000',
    loan: '5,700',
    bullets: [
    '軽度のガタつき・部分矯正レベル',
    '短期間・費用をおさえて整えたい方に',
    '前歯のみの仕上がりを重視'],

    beforeLabel: 'BEFORE（軽度）',
    afterLabel: 'AFTER',
    beforeImg: 'assets/puti-before.jpg',
    afterImg: 'assets/puti-after.jpg'
  },
  {
    cls: 'featured',
    tag: '人気プラン — LIGHT CASE',
    name: 'ライト症例',
    forWhom: '一般的な歯並びの乱れを整えたい方（抜歯を伴う症例も含む）',
    price: '800,000',
    loan: '11,500',
    bullets: [
    '八重歯・中程度の叢生など',
    '症例により抜歯を伴う治療にも対応',
    'バランスの取れた仕上がりに'],

    beforeLabel: 'BEFORE（中等度）',
    afterLabel: 'AFTER',
    beforeImg: 'assets/light-before-v2.jpg',
    afterImg: 'assets/light-after.jpg'
  },
  {
    cls: 'plain',
    tag: 'FULL CASE',
    name: 'フル症例',
    forWhom: '全体的な歯並び・噛み合わせをしっかり改善したい方',
    price: '900,000〜1,000,000',
    loan: '13,000',
    bullets: [
    '大きな叢生・噛み合わせ改善など',
    '全顎的にしっかり治療',
    '長期的な安定とフィット感'],

    beforeLabel: 'BEFORE（重度）',
    afterLabel: 'AFTER',
    beforeImg: 'assets/full-before.jpg',
    afterImg: 'assets/full-after.jpg'
  }];

  return (
    <section className="pricing" id="pricing">
      <div className="wrap">
        <div className="eyebrow">
          <span className="ensans">Pricing</span>
          <h2>料金プラン</h2>
          <div className="rule"></div>
        </div>
        <div className="plan-grid">
          {plans.map((p, i) =>
          <div key={i} className={`plan ${p.cls}`}>
              <div className="ribbon">{p.tag}</div>
              <div className="plan-head">
                <div className="en">Case {['Petit', 'Light', 'Full'][i]}</div>
                <h3>{p.name}</h3>
                <div className="for">{p.forWhom}</div>
              </div>
              <div className="plan-ba">
                <div className="split">
                  <div className="side b">
                    <span className="caption b">BEFORE</span>
                    {p.beforeImg ? (
                      <img src={p.beforeImg} alt={p.beforeLabel} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                    ) : (
                      <div style={{ textAlign: 'center', lineHeight: 1.5 }}>
                        [ 症例写真 ]<br />{p.beforeLabel}
                      </div>
                    )}
                  </div>
                  <div className="side a">
                    <span className="caption a">AFTER</span>
                    {p.afterImg ? (
                      <img src={p.afterImg} alt={p.afterLabel} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                    ) : (
                      <div style={{ textAlign: 'center', lineHeight: 1.5 }}>
                        [ 症例写真 ]<br />{p.afterLabel}
                      </div>
                    )}
                  </div>
                </div>
                <div className="arrow"><Ico.arrow width="16" height="16" /></div>
              </div>
              <div className="plan-body">
                <div className="price-row">
                  <span className="yen">¥{p.price}</span>
                  <span className="tax">（税別）総額</span>
                </div>
                <div className="loan">
                  デンタルローン <b>月々 {p.loan}円〜</b>
                </div>
                <ul>
                  {p.bullets.map((b, j) =>
                <li key={j}><Ico.check /> <span>{b}</span></li>
                )}
                </ul>
                <a href="#reserve" className="btn btn-primary btn-block" style={{ marginTop: 'auto' }}>
                  このプランで相談する
                </a>
              </div>
            </div>
          )}
        </div>
        <p className="pricing-note">
          ※ 表示は税別。別途、精密検査・処置料等が必要な場合があります。最終的な総額は診断後に明確にご提示いたします。
        </p>
      </div>
    </section>);

}

/* ============================================================
   REASSURANCE (trust block after pricing)
   ============================================================ */
function Reassurance() {
  return (
    <section className="reassure" id="reassure">
      <div className="wrap">
        <div className="eyebrow">
          <span className="ensans">Price Policy</span>
          <h2>明朗会計</h2>
          <div className="rule"></div>
          <p className="reassure-sub">「治療費総額提示」方式。ご契約後に追加費用は発生しません。</p>
        </div>

        {/* concerns → answer */}
        <div className="reassure-top">
          <div className="concerns">
            <p className="concern-lead">よくあるご不安</p>
            <ul>
              <li><span className="chk">✓</span>結局、総額がいくらになるのか分からない……</li>
              <li><span className="chk">✓</span>調整料がかかると、合計額がどんどん増えていく……</li>
              <li><span className="chk">✓</span>様々なオプションがついて、想像より費用が高くなった……</li>
            </ul>
          </div>
          <div className="answer">
            <span className="aletter">A.</span>
            <p>
              当院では治療前に治療費の<strong className="mk">「総額」</strong>をお伝えしています。<br />
              それ以上の費用は掛かりません。<br />
              これは<strong className="u">治療期間が延びた場合でも同様</strong>です。
            </p>
          </div>
        </div>

        {/* zero-yen headline */}
        <div className="zero-block">
          <div className="zero-tag">
            <div className="zero-tag-inner">
              <span className="zt-en">Flat Price</span>
              <span className="zt-jp">治療費定額制</span>
            </div>
          </div>
          <div className="zero-items">
            <div className="zero-item">
              <span className="zi-num">01</span>
              <span className="zi-label">毎月の<br />調整料</span>
            </div>
            <div className="zero-item">
              <span className="zi-num">02</span>
              <span className="zi-label">保定<br />管理料</span>
            </div>
          </div>
          <div className="zero-big">
            <span className="zb-all">すべて</span>
            <span className="zb-num">0</span>
            <span className="zb-yen">円</span>
          </div>
          <p className="zero-foot">途中で<span className="u">追加費用は発生しません</span></p>
        </div>

        {/* three chips */}
        <div className="reassure-chips">
          <div className="rchip">
            <div className="rchip-head">各種クレジットカード対応</div>
            <div className="rchip-body">
              <div className="cards">
                <span className="card">VISA</span>
                <span className="card">Master</span>
                <span className="card">JCB</span>
                <span className="card">AMEX</span>
                <span className="card">Diners</span>
                <span className="card">UFJ</span>
              </div>
            </div>
          </div>

          <div className="rchip">
            <div className="rchip-head">デンタルローンに対応</div>
            <div className="rchip-body">
              <div className="loan">
                <svg viewBox="0 0 64 64" fill="none" stroke="#4FA3C7" strokeWidth="1.8" width="56" height="56" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="8" y="18" width="48" height="32" rx="4"/>
                  <path d="M8 28h48"/>
                  <circle cx="44" cy="40" r="4"/>
                  <path d="M16 40h10"/>
                </svg>
                <span>月々 5,700円〜</span>
              </div>
            </div>
          </div>

          <div className="rchip">
            <div className="rchip-head">後戻り「保証」</div>
            <div className="rchip-body">
              <div className="guarantee">
                <span className="g-num">2</span>
                <span className="g-unit">年間</span>
              </div>
              <p className="g-note">※保定期間中、歯が後戻りした場合でも2年間無料で対応する保証</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   SIMULATION
   ============================================================ */
function Simulation() {
  const [t, setT] = useState(0); // 0..100
  const [tab, setTab] = useState('front');

  // interpolate rotation + vertical offset per-tooth by t
  const teethB = [0, -6, 0, 4, -3, 0, 6];
  const teethVY = [0, -3, 0, 2, -2, 0, 3];
  const frac = 1 - t / 100; // 0 = after, 1 = before

  return (
    <section className="simulation" id="simulation">
      <div className="wrap">
        <div className="sim-grid">
          <div className="sim-left">
            <span className="ensans">iTero Simulation</span>
            <h2 style={{ marginTop: 8 }}>その場で、未来の<br />歯並びに出会う。</h2>
            <p>
              iTero（3Dスキャナー）で歯型をスキャンすると、矯正後のイメージをモニター上でご確認いただけます。「どう変わるのか」を初回の来院時に、視覚的にご納得いただけます。
            </p>
            <ul className="sim-points">
              <li><Ico.check /> <span>歯型取り不要。数分のスキャンで完了。</span></li>
              <li><Ico.check /> <span>矯正前／矯正後を画面上で比較。</span></li>
              <li><Ico.check /> <span>治療期間のおおよその目安もご提示。</span></li>
            </ul>
          </div>

          <div className="sim-viewer">
            <div className="sim-screen">
              <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'var(--teal)', letterSpacing: '.15em' }}>iTero · LIVE</div>
              <div style={{ position: 'absolute', top: 12, right: 12, fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'var(--muted)', letterSpacing: '.15em' }}>{tab.toUpperCase()} VIEW</div>
              <div className="teeth">
                {teethB.map((b, i) =>
                <div key={i} className="tooth" style={{
                  transform: `translateY(${teethVY[i] * frac}px) rotate(${b * frac}deg)`,
                  transition: 'transform .15s linear'
                }} />
                )}
              </div>
              <div className="sim-caption" style={{ position: 'absolute', bottom: 14, left: 0, right: 0 }}>
                {t < 10 ? 'BEFORE' : t > 90 ? 'AFTER' : `TRANSITION · ${t}%`}
              </div>
            </div>
            <div className="sim-tabs">
              {['front', 'upper', 'lower'].map((v) =>
              <button key={v} className={tab === v ? 'active' : ''} onClick={() => setTab(v)}>
                  {v === 'front' ? '正面' : v === 'upper' ? '上顎' : '下顎'}
                </button>
              )}
            </div>
            <div className="sim-slider">
              <input type="range" min="0" max="100" value={t} onChange={(e) => setT(+e.target.value)} />
              <div className="sim-labels"><span>BEFORE</span><span>AFTER</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FLOW
   ============================================================ */
function Flow() {
  const free = [
  { n: '01', title: '無料カウンセリング予約', body: 'Web・お電話より、ご都合の良い日時をお選びください。ご相談のみでもお気軽に。' },
  { n: '02', title: 'iTeroスキャン＆シミュレーション', body: '数分の3Dスキャン。矯正後のイメージをその場でご確認いただけます。' }];

  const paid = [
  { n: '03', title: '治療計画・お見積のご提示', body: '治療期間・費用・治療範囲を、分かりやすくご説明します。ご納得のうえ開始します。' },
  { n: '04', title: 'マウスピース装着・治療開始', body: 'お一人おひとりに合わせたカスタムメイドのアライナーを装着し、治療を開始します。' },
  { n: '05', title: '保定・アフターケア', body: '後戻りを防ぐリテーナー装着と、定期メンテナンス。治療後も末長くサポート。' }];

  return (
    <section className="flow" id="flow">
      <div className="wrap">
        <div className="eyebrow">
          <span className="ensans">Treatment Flow</span>
          <h2>矯正治療の流れ</h2>
          <div className="rule"></div>
          <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 10 }}>
            <span className="chip chip-free" style={{ marginRight: 8 }}>FREE 無料</span>は、ご相談・シミュレーションまで。
            <span className="chip chip-paid" style={{ margin: '0 8px' }}>PAID 自費診療</span>は、ご納得のうえで開始します。
          </p>
        </div>

        <div className="steps">
          {free.map((s) =>
          <div className="step free" key={s.n}>
              <div className="stepnum">{s.n}</div>
              <div>
                <h4>{s.title} <span className="chip chip-free">FREE · 無料</span></h4>
                <p>{s.body}</p>
              </div>
            </div>
          )}
          <div className="divider-row">ここから自費診療（有料）</div>
          {paid.map((s) =>
          <div className="step paid" key={s.n}>
              <div className="stepnum">{s.n}</div>
              <div>
                <h4>{s.title} <span className="chip chip-paid">PAID · 自費診療</span></h4>
                <p>{s.body}</p>
              </div>
            </div>
          )}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#reserve" className="btn btn-primary">
            <Ico.cal className="ico" /> 無料カウンセリングを予約する
          </a>
        </div>
      </div>
    </section>);

}

/* ============================================================
   DOCTORS
   ============================================================ */
function Doctors() {
  return (
    <section className="doctors" id="doctors">
      <div className="wrap">
        <div className="eyebrow">
          <span className="ensans">Our Doctors</span>
          <h2>医師紹介</h2>
          <div className="rule"></div>
        </div>

        <div className="doc-grid">
          {/* Director */}
          <div className="doc">
            <div className="portrait">
              <img src="assets/oota.png" alt="院長 太田 拓哉" style={{objectPosition:'center 15%'}} />
              <div className="badges">
                <span className="badge teal">院長 / DIRECTOR</span>
              </div>
            </div>
            <div className="doc-body">
              <div className="doc-role">Director</div>
              <h3>太田 拓哉
                <span className="kana">Ota Takuya ／ おおた たくや</span>
              </h3>
              <p className="bio">東京八重洲デンタルクリニック院長。
患者様お一人おひとりのご希望に寄り添いながら、長く安心して通える診療を大切にしています。
              </p>
              <h5>— 略歴</h5>
              <ul className="hist">
                <li><span className="yr">—</span><span>東京歯科大学 卒業</span></li>
                <li><span className="yr">平成 8〜12</span><span>新潟大学医学部 細菌学研究生</span></li>
                <li><span className="yr">平成 13</span><span>東京八重洲デンタルクリニック 開業</span></li>
                <li><span className="yr">令和 2〜</span><span>東京歯科大学クラウンブリッジ補綴学講座 特別専修科</span></li>
              </ul>
            </div>
          </div>

          {/* Mikami */}
          <div className="doc">
            <div className="portrait">
              <img src="assets/mikami.jpg" alt="三上 智彦 先生" style={{objectPosition:'center 30%'}} />
              <div className="badges">
                <span className="badge teal">日本矯正歯科学会 認定医</span>
                <span className="badge gold">Invisalign 認定ドクター</span>
              </div>
            </div>
            <div className="doc-body">
              <div className="doc-role">Orthodontist</div>
              <h3>三上 智彦
                <span className="kana">Mikami Tomohiko ／ みかみ ともひこ</span>
              </h3>
              <p className="bio">東京歯科大学卒。
同大学院の矯正歯科専攻生課程修了。認定医／インビザライン認定ドクターとしての知識と、数千症例にのぼる治療経験から、患者様一人ひとりに最適な治療をご提案し、理想のゴールへ近づけるお手伝いをしています。
爽やかで安心感のある診療スタイルから、ご指名でお越しになる方も多数。</p>
              <h5>— 経歴</h5>
              <ul className="hist">
                <li><span className="yr">2008</span><span>東京歯科大学歯学部 卒業</span></li>
                <li><span className="yr">2009</span><span>東京歯科大学歯学部附属病院 臨床研修修了</span></li>
                <li><span className="yr">2012</span><span>東京医科歯科大学大学院 顎顔面矯正学分野 矯正歯科専攻生課程修了</span></li>
                <li><span className="yr">2012〜</span><span>千葉県内矯正歯科医院勤務／医療法人社団佑健会 勤務</span></li>
                <li><span className="yr">現在</span><span>柏KT矯正歯科 院長</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ() {
  const items = [
  { q: 'マウスピース矯正の費用はどのくらいですか？', a: '症例の程度により異なります。プチ／ライト／フルの3プランをご用意しており、プチ症例は40万円（税別）〜、フル症例は90〜100万円（税別）となります。デンタルローンもご利用いただけます。' },
  { q: '治療にはどのくらいの期間がかかりますか？', a: '部分矯正で約半年〜、全体矯正で1年半〜3年程度が目安です。iTeroシミュレーション時におおよその期間をご提示しますので、ご予定と照らしてご検討いただけます。' },
  { q: '痛みはありますか？', a: 'アライナーの交換直後に数日間、歯が締めつけられるような感覚を覚える方がいらっしゃいますが、ワイヤー矯正と比較して痛みは穏やかな傾向です。ご不安な点は担当の歯科衛生士が丁寧にフォローします。' },
  { q: '通院頻度はどのくらいですか？', a: 'おおむね1〜2ヶ月に1回のペースでご来院いただきます。お仕事やご予定に合わせて柔軟に調整いたします。' },
  { q: 'iTeroで「不適合」と判断された場合はどうなりますか？', a: '診断の結果、マウスピース矯正では十分な効果が見込めないと判断した場合は、別途ワイヤー矯正など最適な方法を無理なくご提案いたします。その場でご契約いただく必要はございません。' },
  { q: '相談だけでも予約できますか？', a: 'もちろん可能です。無料カウンセリングでは、現在のお悩み・ご希望をお伺いした上で、治療の必要性や選択肢をご説明します。ご契約を前提とせず、お気軽にご相談ください。' }];

  return (
    <section className="faq" id="faq">
      <div className="wrap-narrow">
        <div className="eyebrow">
          <span className="ensans">FAQ</span>
          <h2>よくあるご質問</h2>
          <div className="rule"></div>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div className="faq-item" key={i}>
              <button className="faq-q">
                <span className="q">Q.</span>
                <span className="text">{it.q}</span>
                <Ico.plus className="plus" />
              </button>
              <div className="faq-a">
                <div className="inner">
                  <span className="a">A.</span>
                  <p>{it.a}</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   CLINIC INFO
   ============================================================ */
function Clinic() {
  return (
    <section className="clinic" id="clinic">
      <div className="wrap">
        <div className="eyebrow">
          <span className="ensans">Clinic Info</span>
          <h2>クリニック情報</h2>
          <div className="rule"></div>
        </div>

        <div className="clinic-grid">
          <div>
            <div className="info-table">
              <div className="row"><div className="k">NAME</div><div className="v">東京八重洲デンタルクリニック</div></div>
              <div className="row"><div className="k">ADDRESS</div><div className="v">〒103-0027<br />東京都中央区日本橋3-1-17 &nbsp;日本橋ヒロセビル9F</div></div>
              <div className="row"><div className="k">ACCESS</div><div className="v">JR線「東京駅」八重洲北口 徒歩3分<br />銀座線・東西線「日本橋駅」 徒歩2分</div></div>
              <div className="row"><div className="k">PHONE</div><div className="v" style={{ fontFamily: 'Lato,sans-serif', fontSize: 22, fontWeight: 500, letterSpacing: '.02em', color: 'var(--ink)' }}>03-5205-1351</div></div>
              <div className="row"><div className="k">HOURS</div><div className="v">
                <div className="hours-table hours-table-2row">
                  <div className="hd hd-title">診療時間</div>
                  <div className="hd">月</div><div className="hd">火</div><div className="hd">水</div><div className="hd">木</div><div className="hd">金</div><div className="hd">土</div><div className="hd">日</div><div className="hd">祝</div>
                  <div className="hd hd-time">10:00〜20:00</div>
                  <div>●</div><div>●</div><div>●</div><div>●</div><div>●</div><div>—</div><div>—</div><div>—</div>
                  <div className="hd hd-time">10:00〜18:00</div>
                  <div>—</div><div>—</div><div>—</div><div>—</div><div>—</div><div>●</div><div>—</div><div>—</div>
                </div>
                <p className="hours-holiday">休診日：日曜日・祝日<span className="hours-holiday-note">（学術大会開催スケジュールにより診療をおこなうこともあります）</span></p>
                <div className="hours-doctors">
                  <p><span className="hd-label">外来担当医</span></p>
                  <ul>
                    <li><span className="day">火〜土</span>院長 太田 拓哉（咬合、審美、矯正、インプラント、歯周病）</li>
                    <li><span className="day">月</span>太田 彩子（歯内治療、一般歯科）</li>
                    <li><span className="day">木</span>小貫 暁美（矯正）</li>
                  </ul>
                </div>
              </div></div>
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 16, flexWrap: 'wrap' }}>
              <a href="#reserve" className="btn btn-primary"><Ico.cal className="ico" /> Web予約</a>
              <a href="tel:0352051351" className="btn btn-ghost"><Ico.phone className="ico" /> 03-5205-1351</a>
            </div>
          </div>
          <div>
            <div className="map">
              <iframe
                src="https://maps.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E5%85%AB%E9%87%8D%E6%B4%B2%E3%83%87%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%AF%E3%83%AA%E3%83%8B%E3%83%83%E3%82%AF&hl=ja&z=17&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: 'block' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="東京八重洲デンタルクリニック 地図" />
              
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FINAL CTA
   ============================================================ */
function Finale() {
  return (
    <section className="finale" id="reserve">
      <div className="wrap-narrow">
        <div className="ornament-lg">— reserve —</div>
        <h2>まずは、お話を<br />聞かせてください。</h2>
        <p>
          ご相談のみ・他院との比較検討の段階でも歓迎です。<br />
          無料カウンセリング＋iTeroシミュレーションで、「自分に合うかどうか」から一緒に考えます。
        </p>
        <div className="finale-ctas">
          <a href="#" className="btn btn-primary" style={{ padding: '22px 36px', fontSize: 16 }}>
            <Ico.cal className="ico" /> Web予約（24時間受付）
          </a>
          <a href="tel:0352051351" className="btn btn-ghost" style={{ padding: '22px 36px', fontSize: 16 }}>
            <Ico.phone className="ico" /> お電話で予約
          </a>
        </div>
        <div className="phone-big phone-panel">
          <div className="phone-panel-head">
            <span className="phone-panel-title">お電話でのご予約・ご相談</span>
            <span className="phone-panel-sub">平日 10:00〜20:00 / 土 10:00〜18:00</span>
          </div>
          <div className="phone-panel-list">
            <a href="tel:0120468078" className="phone-row phone-row-primary">
              <span className="phone-row-label">
                <span className="tag">フリーダイヤル</span>
                <span className="phone-row-note">通話料無料</span>
              </span>
              <span className="phone-row-num">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="20" height="20" className="phone-ico"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" /></svg>
                <span className="num">0120-468-078</span>
              </span>
            </a>
            <a href="tel:0352051351" className="phone-row">
              <span className="phone-row-label">
                <span className="tag tag-light">一般電話</span>
              </span>
              <span className="phone-row-num">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width="20" height="20" className="phone-ico"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" /></svg>
                <span className="num">03-5205-1351</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   ROOT
   ============================================================ */
function App() {
  return (
    <>
      <Pricing />
      <Reassurance />
      <Simulation />
      <Flow />
      <Doctors />
      <Clinic />
      <Finale />
    </>);

}

ReactDOM.createRoot(document.getElementById('prototype-root')).render(<App />);