// wire-e.jsx — Option E: リファレンス準拠案 (本コピー流し込み版)
// All copy is verbatim from A site_design.md. Placeholders use 【...】.

function WireE({ showNotes, mobile, isProd }) {
  // ─── デプロイ前に置換 (PLACEHOLDER GUIDE参照) ───
  const LINE_URL = 'https://lin.ee/Ttjp2F8';
  const HEAVEN_URL = 'https://www.cityheaven.net/osaka/A2701/A270101/rannnyuchijo_club/girlid-52300118/';
  // ───────────────────────────────────────────────
  const N = (p) => showNotes ? <Note {...p} /> : null;
  const { ink, dim, gold, pink, fade } = WF;

  // ─── shared ornaments ───
  const Ornament = ({ w = 320, c = gold }) =>
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    gap: 10, width: w, margin: '0 auto'
  }}>
      <div style={{ flex: 1, height: 1, background: c }} />
      <div style={{ width: 7, height: 7, transform: 'rotate(45deg)', background: c }} />
      <div style={{ flex: 1, height: 1, background: c }} />
    </div>;


  const SecTitle = ({ kicker, title, accent = '#f5f5f5' }) =>
  <div style={{ textAlign: 'center', marginBottom: 32 }}>
      <div style={{
      fontFamily: "'Cormorant Garamond', serif",
      letterSpacing: '.3em', color: gold, fontSize: 12
    }}>{kicker}</div>
      <div style={{ height: 10 }} />
      <Ornament w={220} />
      <div style={{ height: 18 }} />
      <H size={28} c={accent} font="'Noto Serif JP', serif" weight={800} lh={1.6}>
        {title}
      </H>
    </div>;


  const DarkCard = ({ children, pad = 24, accent }) =>
  <div style={{
    border: `1px solid ${accent || '#3a3a3a'}`,
    background: '#141414', padding: pad, color: '#e8e3d4',
    position: 'relative'
  }}>{children}</div>;


  const Laurel = ({ children }) =>
  <div style={{ position: 'relative', padding: '14px 32px', minWidth: 200, textAlign: 'center' }}>
      {[0, 1].map((side) =>
    <svg key={side} width="22" height="56" viewBox="0 0 22 56" style={{
      position: 'absolute', top: 0,
      ...(side ? { right: 0, transform: 'scaleX(-1)' } : { left: 0 })
    }}>
          <path d="M14 4 C 6 14, 6 26, 14 36 C 6 42, 6 50, 14 54" stroke={gold} strokeWidth="1.2" fill="none" />
          <path d="M14 8 Q 8 12, 10 18" stroke={gold} strokeWidth=".8" fill="none" />
          <path d="M14 18 Q 8 22, 10 28" stroke={gold} strokeWidth=".8" fill="none" />
          <path d="M14 28 Q 8 32, 10 38" stroke={gold} strokeWidth=".8" fill="none" />
          <path d="M14 42 Q 8 46, 10 50" stroke={gold} strokeWidth=".8" fill="none" />
        </svg>
    )}
      <div style={{
      fontFamily: "'Noto Serif JP', serif", color: '#f5e5b8',
      fontSize: 13, fontWeight: 700, lineHeight: 1.7
    }}>{children}</div>
    </div>;


  const Stars = ({ rating = 5 }) => {
    const pct = Math.max(0, Math.min(100, (rating / 5) * 100));
    const sty = {
      letterSpacing: '.15em', fontSize: 13,
      fontFamily: "'Noto Serif JP', serif",
    };
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span style={{ position: 'relative', display: 'inline-block', lineHeight: 1 }}>
          <span style={{ ...sty, color: '#3a3a3a' }}>★ ★ ★ ★ ★</span>
          <span style={{
            ...sty, color: gold,
            position: 'absolute', top: 0, left: 0,
            width: `${pct}%`, overflow: 'hidden', whiteSpace: 'nowrap',
          }}>★ ★ ★ ★ ★</span>
        </span>
        <span style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 12, color: gold, letterSpacing: '.05em',
        }}>{rating.toFixed(1)}</span>
      </span>
    );
  };

  // 主CTA: LINE誘導ピンクボタン
  const MainCTA = ({ label = '予約・問い合わせはLINEから' }) =>
  <a
    href={LINE_URL}
    target="_blank"
    rel="noopener noreferrer"
    style={{
      display: 'inline-flex', alignItems: 'center', gap: 14,
      padding: '14px 30px', background: pink, color: '#fff',
      fontFamily: "'Noto Serif JP', serif", fontSize: 15, letterSpacing: '.15em',
      boxShadow: `0 6px 20px rgba(230,25,107,.35)`, fontWeight: 700,
      textDecoration: 'none', cursor: 'pointer',
    }}>
      {label}<span style={{ marginLeft: 4 }}>›</span>
    </a>;

  // 副CTA: ゴールド枠ゴーストボタン
  const GhostCTA = ({ label }) =>
  <a
    href={LINE_URL}
    target="_blank"
    rel="noopener noreferrer"
    style={{
      display: 'inline-flex', padding: '13px 26px',
      border: `1px solid ${gold}`, color: gold,
      fontFamily: "'Noto Serif JP', serif", fontSize: 13, letterSpacing: '.15em',
      textDecoration: 'none', cursor: 'pointer',
    }}>
      {label} &nbsp;›
    </a>;


  return (
    <div style={{ background: '#0a0a0a', color: '#f5f5f5' }}>

      {/* ─── Header ─── */}
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 32px', borderBottom: `1px solid #1f1f1f`,
        ...(isProd ? {
          position: 'sticky', top: 0, zIndex: 50,
          background: 'rgba(10,10,10,.88)',
          backdropFilter: 'blur(14px)',
          WebkitBackdropFilter: 'blur(14px)'
        } : {})
      }}>
        <a href={isProd ? '#top' : undefined} style={{
          fontFamily: "'Noto Serif JP', serif", letterSpacing: '.15em',
          fontSize: 14, color: '#e8e3d4', textDecoration: 'none'
        }}>
          ありか
        </a>
        <nav style={{
          fontFamily: "'Noto Serif JP', serif", fontSize: 12,
          color: '#888', letterSpacing: '.2em',
          display: 'flex', gap: mobile ? 10 : 18, alignItems: 'center'
        }}>
          {[
            ['#about', '自己紹介'],
            ['#voices', 'お客様の声'],
            ['#qa', 'Q&A'],
            ['#info', '出勤・店舗']
          ].map(([href, label]) =>
            <a key={href} href={href} style={{
              color: '#888', textDecoration: 'none', transition: 'color .2s'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = gold}
            onMouseLeave={(e) => e.currentTarget.style.color = '#888'}
            >{label}</a>
          )}
        </nav>
      </header>

      {!isProd && <Cushion />}

      {/* ═══════════════════════════════════════════════════ */}
      {/* S1 — ファーストビュー (asymmetric split: text|photo) */}
      {/* ═══════════════════════════════════════════════════ */}
      <section id="top" style={{
        position: 'relative', background: '#0a0a0a',
        borderBottom: `1px solid ${gold}`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.15fr',
          minHeight: mobile ? 'auto' : 820, alignItems: 'stretch'
        }}>
          {/* ─── LEFT: text panel ─── */}
          <div style={{
            padding: mobile ? '40px 24px 48px' : '72px 56px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            position: 'relative',
            order: mobile ? 2 : 1
          }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif", letterSpacing: '.35em',
              color: gold, fontSize: 11
            }}>— A DEVELOPMENT OF MIND —</div>
            <div style={{ height: 14 }} />
            <div style={{ width: 56, height: 1, background: gold }} />
            <div style={{ height: 28 }} />

            <H size={mobile ? 32 : 48} c="#f5f5f5" font="'Noto Serif JP', serif" weight={800} lh={1.4}>
              開発されるのは<br />
              あなたの体じゃなくて<br />
              <span style={{ color: gold }}>脳</span>。
            </H>

            <div style={{ height: 28 }} />

            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 15,
              color: '#dcd6c4', lineHeight: 2.1, letterSpacing: '.05em'
            }}>
              攻められて「あんま感じなかった」で終わってる人へ。<br />
              それは、攻める側が分かってなかっただけ。<br />
              <span style={{ color: '#f5e5b8' }}>
                私の言うこと聞ける子は、<br />
                戻れないとこまで連れて行ってあげる。
              </span>
            </div>

            <div style={{ height: 32 }} />

            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 24, height: 1, background: gold }} />
              <div style={{
                fontFamily: "'Noto Serif JP', serif", fontSize: 11,
                color: '#a89868', letterSpacing: '.3em', whiteSpace: 'nowrap'
              }}>M性感歴 5年 ／ 1,000人以上 開発</div>
              <div style={{ flex: 1, height: 1, background: gold, opacity: .4 }} />
            </div>

            <div style={{ height: 32 }} />

            <div><MainCTA /></div>
          </div>

          {/* ─── RIGHT: photo ─── */}
          <div style={{
            position: 'relative', overflow: 'hidden', background: '#1a1018',
            minHeight: mobile ? 520 : 'auto',
            order: mobile ? 1 : 2
          }}>
            <img
              src="assets/fv-hero.jpg"
              alt=""
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                objectPosition: mobile ? '50% 78%' : '50% 75%'
              }} />
            
            <div style={{
              position: 'absolute', inset: 0,
              background: mobile
                ? 'linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.85) 100%)'
                : 'linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.25) 14%, rgba(10,10,10,0) 28%)',
              pointerEvents: 'none'
            }} />
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0, height: 120,
              background: 'linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.6) 100%)',
              pointerEvents: 'none'
            }} />
            <div style={{
              position: 'absolute', right: 20, bottom: 20,
              fontFamily: "'Cormorant Garamond', serif",
              letterSpacing: '.3em', color: 'rgba(245,229,184,.7)',
              fontSize: 10,
              textShadow: '0 1px 4px rgba(0,0,0,.8)'
            }}>NO. 01 — PORTRAIT</div>
          </div>
        </div>

        {showNotes && <Note top={32} side="right" w={220}>
          縦長ポートレートに合わせた<br />
          左右非対称スプリット型。<br />
          ・左: テキストパネル (黒+金)<br />
          ・右: 写真フルブリード<br />
          ・境目はグラデで自然にブレンド
        </Note>}
      </section>

      {/* ─── 共感の1文 (FV直下) ─── */}
      <section style={{ padding: '64px 32px', background: '#0a0a0a', textAlign: 'center' }}>
        <div style={{
          fontFamily: "'Noto Serif JP', serif", fontSize: 18,
          color: '#dcd6c4', lineHeight: 2.1, letterSpacing: '.05em', maxWidth: 680, margin: '0 auto'
        }}>
          「M性感に行ったけど物足りなかった」<br />
          「自分には合わないのかもしれない」<br />
          <span style={{ color: '#888' }}>
            ─ そう思っている男性のうち、何割かは<span style={{ color: pink }}>勘違いをしている</span>。
          </span>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S2 — 共感パート                                    */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{ padding: '88px 32px' }}>
        <SecTitle kicker="EMPATHY · 02" title="こんなこと、思ったことない？" />
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: 20,
          maxWidth: 880, margin: '0 auto'
        }}>
          {[
          '攻められても、いまいち感じきれない',
          '自分は感度が低いんじゃないか',
          'M性感に行ったけど、想像してたのと違った',
          '本気で「あ、これか」って思える体験がない'].
          map((q, i) =>
          <div key={i} style={{
            borderLeft: `1px solid ${gold}`, paddingLeft: 24, paddingTop: 6, paddingBottom: 6
          }}>
              <div style={{ color: gold, fontFamily: "'Cormorant Garamond', serif", fontSize: 14, letterSpacing: '.15em' }}>
                NO. 0{i + 1}
              </div>
              <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 18,
              color: '#e8e3d4', lineHeight: 1.8, marginTop: 6
            }}>「{q}」</div>
            </div>
          )}
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S3 — 理想の未来描写                                */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{ position: 'relative', overflow: 'hidden', minHeight: 460 }}>
        <img
          src="assets/s3-bedroom.jpg"
          alt=""
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center center'
          }} />
        
        <div style={{
          position: 'relative',
          background: 'linear-gradient(90deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.2) 45%, rgba(10,10,10,.88) 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
          padding: '80px 64px 80px 32px', minHeight: 460
        }}>
          <div style={{ maxWidth: 520 }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif", letterSpacing: '.3em',
              color: gold, fontSize: 12
            }}>FUTURE · 03</div>
            <div style={{ height: 10 }} />
            <H size={32} c="#f5f5f5" font="'Noto Serif JP', serif" weight={700} lh={1.6}>
              開発されたら、<br />何が起きるか。
            </H>
            <div style={{ height: 14 }} />
            <Ornament w={120} />
            <div style={{ height: 18 }} />
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 15,
              color: '#dcd6c4', lineHeight: 2.1, letterSpacing: '.05em'
            }}>
              ・自分でも知らなかった感覚に出会う<br />
              ・「俺は感じない」が覆る瞬間がある<br />
              ・頭が真っ白になって、何も考えられなくなる<br />
              ・戻れないところまで連れて行かれる
            </div>
          </div>
        </div>
      </section>

      {/* S3 補足: 約束の引用ブロック */}
      <section style={{ padding: '80px 32px', textAlign: 'center', background: '#0a0a0a' }}>
        <Ornament w={80} />
        <div style={{ height: 22 }} />
        <div style={{
          fontFamily: "'Noto Serif JP', serif", fontSize: 17,
          color: '#e8e3d4', lineHeight: 2.2, maxWidth: 660, margin: '0 auto', letterSpacing: '.05em'
        }}>
          1回で完全に気持ちよくさせると断言はできません。<br />
          どこまで連れて行けるかは、あなたの素直さや体質によって変わる。<br />
          <span style={{ color: gold }}>
            でも、私の言うこと聞ける子なら、<br />
            今より一歩先には確実に連れて行く。
          </span>
        </div>
        <div style={{ height: 22 }} />
        <Ornament w={80} />
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S4 — 未来を奪う (損失強調)                         */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{ padding: '96px 32px', textAlign: 'center', background: '#070707' }}>
        <div style={{
          fontFamily: "'Cormorant Garamond', serif", letterSpacing: '.3em',
          color: gold, fontSize: 12, marginBottom: 16
        }}>LOSS · 04</div>
        <H size={36} c="#f5f5f5" font="'Noto Serif JP', serif" weight={800} lh={1.8}>
          このまま知らずに生きると、<br />
          <span style={{ color: pink }}>ずっと今のまま。</span>
        </H>
        <div style={{
          marginTop: 28, fontFamily: "'Noto Serif JP', serif",
          fontSize: 16, color: '#bbb', lineHeight: 2.2, letterSpacing: '.05em'
        }}>
          「俺は感じない」って思い込んだまま、<br />
          いつまで抜くだけの風俗で満足してるの？<br />
          自分の体の可能性を、自分で潰してる。
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S5 — 解決策の提示 (自分の存在)                     */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{
        position: 'relative', overflow: 'hidden',
        padding: '96px 32px', textAlign: 'center', background: '#0a0a0a'
      }}>
        {/* smoke background */}
        <img
          src="assets/smoke.jpg"
          alt=""
          aria-hidden="true"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center center',
            opacity: 0.85, pointerEvents: 'none'
          }} />
        
        {/* center darkening so text reads */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at center, rgba(10,10,10,.72) 0%, rgba(10,10,10,.45) 50%, rgba(10,10,10,.2) 100%)',
          pointerEvents: 'none'
        }} />
        <div style={{ position: 'relative' }}>
        <div style={{
            fontFamily: "'Cormorant Garamond', serif", letterSpacing: '.3em',
            color: gold, fontSize: 12, marginBottom: 16
          }}>ANSWER · 05</div>
        <H size={mobile ? 26 : 36} c="#f5f5f5" font="'Noto Serif JP', serif" weight={800} lh={1.7}>
          だから、<span style={{ color: gold }}>開発</span>が必要。
        </H>
        <div style={{ marginTop: 18 }}><Ornament w={100} /></div>
        <div style={{
            marginTop: 22, fontFamily: "'Noto Serif JP', serif",
            fontSize: 15, color: '#dcd6c4', lineHeight: 2.2, letterSpacing: '.05em',
            maxWidth: 620, margin: '22px auto 0'
          }}>
          思い込みを壊すのは、自分一人では難しい。<br />
          マインドから変える開発は、分かってる人間にしかできない。<br />
          <span style={{ color: '#f5f5f5', fontWeight: 700 }}>私なら、あなたを開発できる。</span>
        </div>
        <div style={{ marginTop: 36 }}>
          <GhostCTA label="LINEで詳しく話を聞いてみる" />
        </div>
        {showNotes && <Note top={32} side="right" w={210}>
          CTA②: 中程度の負荷<br />
          (解決策提示の直後に置く)
        </Note>}
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S6 — 自己紹介                                      */}
      {/* ═══════════════════════════════════════════════════ */}
      <section id="about" style={{ padding: '88px 32px', scrollMarginTop: 80 }}>
        <SecTitle kicker="ABOUT · 06" title="ありかについて" />
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : '280px 1fr', gap: mobile ? 28 : 48,
          maxWidth: 960, margin: '0 auto', alignItems: 'center'
        }}>
          <div style={{
            border: `1px solid ${gold}`, padding: 6, background: '#0a0a0a'
          }}>
            <img
              src="assets/profile.jpg"
              alt=""
              style={{
                display: 'block', width: '100%', height: 380,
                objectFit: 'cover', objectPosition: '50% 25%'
              }} />
            
          </div>
          <div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
              <Laurel>M性感歴<br />5年</Laurel>
              <Laurel>1,000人以上<br />を開発</Laurel>
            </div>
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 13, color: '#a89868',
              letterSpacing: '.2em', marginBottom: 6
            }}>動機 ─</div>
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 17,
              color: '#e8e3d4', lineHeight: 2.0, letterSpacing: '.05em'
            }}>
              M性感を始めた理由。 男を鳴かせてみたかった。<br />
              男性のアナルを開発してみたかった。<br />
              <span style={{ color: '#f5f5f5', fontWeight: 700 }}>それだけ。</span>
            </div>
            <div style={{
              marginTop: 22, paddingTop: 18, borderTop: `1px solid #2a2a2a`,
              fontFamily: "'Noto Serif JP', serif", fontSize: 13,
              color: '#bbb', lineHeight: 1.9, letterSpacing: '.05em'
            }}>
              <span style={{ color: '#888' }}>与えられるもの:</span>
              &nbsp; 開発 ─ あなたの中に眠る感覚を、引き出すこと。
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S7 — 向いている人 / 向いていない人                 */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{ padding: '32px 32px 96px' }}>
        <SecTitle kicker="FIT · 07" title="合う人にだけ、刺さればいい。" />
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 28,
          maxWidth: 1040, margin: '0 auto'
        }}>
          {/* 向いている */}
          <DarkCard pad={32} accent={gold}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ color: gold, fontFamily: "'Cormorant Garamond', serif", fontSize: 13, letterSpacing: '.25em' }}>
                FOR YOU
              </div>
              <H size={22} c="#f5e5b8" font="'Noto Serif JP', serif" weight={700}>
                向いている男性
              </H>
              <Ornament w={80} />
            </div>
            <div style={{ height: 18 }} />
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 14,
              lineHeight: 2.1, color: '#e8e3d4', letterSpacing: '.04em'
            }}>
              <div>◎ &nbsp;自分の限界を、誰かに壊してほしい人</div>
              <div>◎ &nbsp;「俺は感じない」って思い込みを覆されたい人</div>
              <div>◎ &nbsp;体じゃなく脳で気持ちよくなりたい人</div>
              <div>◎ &nbsp;素直に言うこと聞ける人</div>
              <div>◎ &nbsp;信頼して委ねることができる人</div>
            </div>
          </DarkCard>

          {/* 向いていない */}
          <DarkCard pad={32} accent="#3a3a3a">
            <div style={{ textAlign: 'center' }}>
              <div style={{ color: '#888', fontFamily: "'Cormorant Garamond', serif", fontSize: 13, letterSpacing: '.25em' }}>
                NOT FOR YOU
              </div>
              <H size={22} c="#bbb" font="'Noto Serif JP', serif" weight={700}>
                向いていない男性
              </H>
              <Ornament w={80} c="#3a3a3a" />
            </div>
            <div style={{ height: 18 }} />
            <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 13,
              lineHeight: 1.9, color: '#999', letterSpacing: '.04em'
            }}>
              {[
              ['キス・フェラ・イチャラブを求めてる人', '当店は粘膜接触禁止です。いわゆる普通の性体験なら他のお店へ。'],
              ['女性の体を触りたいだけの人', '当店は女の子へのお触り禁止です。他のお店へ。'],
              ['自分の好きなように責めてほしい人', '素直な子ほど、しっかり開発してあげられる。'],
              ['女性に上から喋られるとイラッとくる人', 'プライドを一度手放した先に、知らない世界があるんだけどね。']].
              map(([t, sub], i) =>
              <div key={i} style={{ marginBottom: 10 }}>
                  <div>✕ &nbsp;{t}</div>
                  <div style={{ paddingLeft: 22, fontSize: 11, lineHeight: "1", color: "rgb(130, 130, 130)" }}>→ {sub}</div>
                </div>
              )}
            </div>
          </DarkCard>
        </div>
        {showNotes && <Note top={32} side="right" w={210}>
          ミスマッチ防止＋希少性演出。<br />
          NOT側に "なぜ" の補足を付けて誠実さを担保。
        </Note>}
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S8 — 社会的証明                                    */}
      {/* ═══════════════════════════════════════════════════ */}
      <section id="voices" style={{ padding: '32px 32px 96px', background: '#070707', scrollMarginTop: 80 }}>
        <SecTitle kicker="VOICE · 08" title="お客様の声" />

        {/* 数字 */}
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 18,
          maxWidth: 880, margin: '0 auto 36px'
        }}>
          {[
          ['5', '年', 'M性感歴'],
          ['1,000+', '人', '開発実績'],
          ['98', '%', 'アンケート満足度']].
          map(([n, u, l], i) =>
          <div key={i} style={{
            textAlign: 'center', padding: '24px 12px',
            borderTop: `1px solid ${gold}`, borderBottom: `1px solid ${gold}`
          }}>
              <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 48, color: gold, lineHeight: 1, fontWeight: 600
            }}>
                {n}<span style={{ fontSize: 18, marginLeft: 4 }}>{u}</span>
              </div>
              <div style={{
              marginTop: 8, fontFamily: "'Noto Serif JP', serif",
              fontSize: 12, color: '#a89868', letterSpacing: '.2em'
            }}>{l}</div>
            </div>
          )}
        </div>

        {/* 口コミ */}
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 18,
          maxWidth: 1040, margin: '0 auto'
        }}>
          {[
            ['「おもちゃも手技も申し分なしで、何回もいってしまいました。恥ずかしい限りです」', 4.6],
            ['「気持ちいいところをすぐ見つけてくれたので満足度が高くなりました。」', 4.6],
            ['「自分でもこんなにしてしまうとは思えませんでした。終始イってる感覚があり、初めての体験で満足です。」', 5.0],
          ].map(([quote, rating], i) =>
          <DarkCard key={i} pad={22}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Stars rating={rating} />
                <span style={{ fontFamily: "'Zen Kurenaido', sans-serif", fontSize: 11, color: '#888' }}>

              </span>
              </div>
              <div style={{ height: 12 }} />
              <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 14,
              color: '#e8e3d4', lineHeight: 2.0
            }}>
                {quote}
              </div>
              <div style={{ height: 10 }} />
              <div style={{ fontFamily: "'Zen Kurenaido', sans-serif", fontSize: 11, color: '#666' }}>
                — HEAVEN口コミより抜粋
              </div>
            </DarkCard>
          )}
        </div>

        <div style={{
          textAlign: 'center', marginTop: 22,
          fontFamily: "'Noto Serif JP', serif", fontSize: 12, color: '#666', letterSpacing: '.05em'
        }}>
          詳しい口コミは &nbsp;<a href={HEAVEN_URL} target="_blank" rel="noopener noreferrer" style={{ color: gold, borderBottom: `1px solid ${gold}`, textDecoration: 'none' }}>HEAVEN</a>&nbsp; でご覧いただけます。
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S9 — Q&A                                           */}
      {/* ═══════════════════════════════════════════════════ */}
      <section id="qa" style={{ padding: '0 32px 96px', scrollMarginTop: 80 }}>
        <SecTitle kicker="Q&A · 09" title="よくあるご質問" />
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {[
          ['粘膜接触はありますか？', 'ありません。キス・フェラ・本番、いずれも不可です。そんなことしなくても、どこまでも気持ちよくなれるよ。'],
          ['M性感は初めてですが大丈夫ですか？', '大丈夫。プレイ前にちゃんと話して、不安がない状態で始めます。'],
          ['お尻初めてですが、痛くないですか？', '99%痛くない。痛いと思っている人ほど「あれ?」となる。万一痛みを感じたら、すぐ言ってもらえれば対応します。'],
          ['感度が低い気がするんですが、それでも開発できますか？', '「感度が低い」と思い込んでいる人ほど、開発の余地が大きい。感じることに脳が慣れていないだけ。'],
          ['過去にM性感に行ったけど物足りなかった。今回も同じ？', '物足りなかった原因がどこにあるのかによります。私の言うことを素直に聞いて受け入れてくれる人なら、一歩先へ連れて行ってあげられる。'],
          ['プレイ中に「無理」「やめて」と言ったら止まりますか？', 'もちろん止まります。本気で嫌な時の「やめて」は絶対尊重する。'],
          ['写真と違ったらどうしますか？', 'パネル写真は本人です。アンケートでも「写真通り」という声をもらっています。'],
          ['予約のキャンセルや変更はできますか？', 'キャンセルや変更は可能です。急な変更の場合はご希望に添えない場合があります。また、無断キャンセルはご遠慮ください。次回以降のご予約をお受けできなくなります。'],
          ['LINEに登録したら何が届きますか？', '出勤情報、空き状況、その他更新情報をお届けする予定です。'],
          ['何時間のコースがおすすめですか？', '初めての方は60分を推奨。経験者は自分のやりたい時間で。']].
          map(([q, a], i) =>
          <details key={i} style={{
            borderBottom: `1px solid #1f1f1f`, padding: '14px 4px'
          }}>
              <summary style={{
              display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
              gap: 14, cursor: 'pointer', listStyle: 'none',
              fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: '#e8e3d4', lineHeight: 1.7
            }}>
                <span>
                  <span style={{ color: gold, fontFamily: "'Cormorant Garamond', serif", marginRight: 10 }}>Q.{String(i + 1).padStart(2, '0')}</span>
                  {q}
                </span>
                <span style={{ color: '#666', fontSize: 16, flexShrink: 0 }}>＋</span>
              </summary>
              <div style={{
              padding: '12px 32px 4px',
              fontFamily: "'Noto Serif JP', serif", fontSize: 13,
              color: '#bbb', lineHeight: 1.9, letterSpacing: '.04em'
            }}>
                <span style={{ color: gold, fontFamily: "'Cormorant Garamond', serif", marginRight: 10 }}>A.</span>
                {a}
              </div>
            </details>
          )}
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S10 — 出勤情報 / お店情報                          */}
      {/* ═══════════════════════════════════════════════════ */}
      <section id="info" style={{ padding: '0 32px 96px', scrollMarginTop: 80 }}>
        <SecTitle kicker="INFO · 10" title="出勤情報 / お店について" />
        <div style={{ maxWidth: 880, margin: '0 auto' }}>

          {/* 出勤情報バナー */}
          <DarkCard pad={28} accent={gold}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              gap: 20, flexWrap: 'wrap'
            }}>
              <div>
                <div style={{
                  fontFamily: "'Noto Serif JP', serif", fontSize: 13,
                  color: '#a89868', marginTop: 6, letterSpacing: '.05em'
                }}>最新の出勤情報は LINE で確認してね

                </div>
              </div>
              <GhostCTA label="出勤情報をLINEで受け取る" />
            </div>
          </DarkCard>

          {/* 店舗情報 */}
          <div style={{
            marginTop: 28, padding: 28, border: `1px solid #2a2a2a`
          }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif", letterSpacing: '.3em',
              color: gold, fontSize: 12, marginBottom: 14, textAlign: 'center'
            }}>SHOP INFO</div>
            <div style={{
              display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? '8px 0' : '12px 32px',
              fontFamily: "'Noto Serif JP', serif", fontSize: 14, color: '#dcd6c4'
            }}>
              {[
              ['在籍店舗', '乱入痴女倶楽部'],
              ['店舗営業時間', '06:00-23:50'],
              ['店舗住所', '大阪府大阪市北区兎我野町13番11号 相互レジャービル5F'],
              ['店舗電話番号', '06-6311-7354'],
              ['店舗公式サイト', 'https://chijo-club.com/top'],
              ['HEAVENページ', 'https://www.cityheaven.net/osaka/A2701/A270101/rannnyuchijo_club/girlid-52300118/']].
              map(([k, v], i) =>
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between',
                borderBottom: `1px dashed #2a2a2a`, padding: '10px 0'
              }}>
                  <span style={{ color: '#888', letterSpacing: '.05em' }}>{k}</span>
                  <span style={{ letterSpacing: '.05em' }}>{v}</span>
                </div>
              )}
            </div>
            <div style={{
              marginTop: 20, textAlign: 'center',
              fontFamily: "'Noto Serif JP', serif", fontSize: 13, color: '#888'
            }}>
              その他詳細は &nbsp;<span style={{ color: gold }}>LINEへ</span>。
            </div>
          </div>

        </div>
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* S11 — 最終CTA + P.S.                               */}
      {/* ═══════════════════════════════════════════════════ */}
      <section style={{ position: 'relative' }}>
        {/* P.S. ブロック */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          padding: '88px 32px 72px', textAlign: 'center', background: '#0a0a0a'
        }}>
          <img
            src="assets/wine-bed.jpg"
            alt=""
            aria-hidden="true"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center center',
              opacity: 0.55, pointerEvents: 'none'
            }} />
          
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse at center, rgba(10,10,10,.78) 0%, rgba(10,10,10,.5) 60%, rgba(10,10,10,.9) 100%)',
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative' }}>
          <Ornament w={80} />
          <div style={{ height: 22 }} />
          <H size={mobile ? 18 : 26} c="#f5f5f5" font="'Noto Serif JP', serif" weight={700} lh={1.8}>
            「やっぱりやめとこう」で閉じれば、<br />
            あなたは明日もきっと、{mobile && <br />}<span style={{ color: gold }}>同じあなたのまま。</span>
          </H>
          <div style={{ height: 22 }} />
          <div style={{
              fontFamily: "'Noto Serif JP', serif", fontSize: 13,
              color: '#888', letterSpacing: '.2em'
            }}>— P.S. —</div>
          </div>
        </div>

        {/* ピンクCTAバナー */}
        <a
          href={LINE_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'block', textDecoration: 'none',
            padding: '44px 32px', textAlign: 'center',
            background: `linear-gradient(180deg, ${pink} 0%, #b81560 100%)`,
            position: 'relative', overflow: 'hidden',
            color: '#fff'
          }}>
          <div style={{
            position: 'absolute', inset: 0, opacity: .12,
            backgroundImage: `repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.5) 12px 13px)`
          }} />
          <div style={{ position: 'relative' }}>
            <H size={32} c="#fff" font="'Noto Serif JP', serif" weight={800} lh={1.5}>
              予約・問い合わせは<br />
              <span style={{ borderBottom: '2px solid #fff', paddingBottom: 4 }}>LINE</span> から
              <span style={{ marginLeft: 8 }}>›</span>
            </H>
            <div style={{
              marginTop: 18, fontFamily: "'Noto Serif JP', serif",
              fontSize: 13, color: 'rgba(255,255,255,.85)', letterSpacing: '.15em'
            }}> 18歳以上対象

            </div>
          </div>
        </a>
        {showNotes && <Note top={32} side="right" w={210}>
          最終CTA: ピンクの大バナー。<br />
          P.S.で締めの一押し。
        </Note>}
      </section>

      {/* ═══════════════════════════════════════════════════ */}
      {/* Footer                                             */}
      {/* ═══════════════════════════════════════════════════ */}
      <footer style={{
        padding: '48px 32px 32px', background: '#050505', color: '#777',
        fontFamily: "'Noto Serif JP', serif", fontSize: 12,
        borderTop: `1px solid #1a1a1a`
      }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <Ornament w={160} c="#3a3a3a" />
          <div style={{ height: 24 }} />
          <div style={{ textAlign: 'center', color: '#e8e3d4', letterSpacing: '.2em', fontSize: 15 }}>
            ありか
          </div>
          <div style={{ height: 20 }} />
          <div style={{
            display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? '4px 0' : '8px 32px',
            lineHeight: 2.0, letterSpacing: '.04em'
          }}>
            {[
            ['在籍店舗', '乱入痴女倶楽部'],
            ['店舗所在地', '大阪府大阪市北区兎我野町13番11号 相互レジャービル5F'],
            ['店舗電話番号', '06-6311-7354'],
            ['店舗営業時間', '06:00-23:50'],
            ['対応エリア', '大阪・梅田'],
            ['店舗公式サイト', 'https://chijo-club.com/top'],
            ['HEAVENページ', 'https://www.cityheaven.net/osaka/A2701/A270101/rannnyuchijo_club/girlid-52300118/'],
            ['写メ日記', 'https://www.cityheaven.net/osaka/A2701/A270101/rannnyuchijo_club/girlid-52300118/diary/#menus']].
            map(([k, v], i) =>
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: '#666' }}>{k}</span>
                <span>{v}</span>
              </div>
            )}
          </div>
          <div style={{ height: 24 }} />
          <div style={{ textAlign: 'center' }}>
            <a href={LINE_URL} target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-block', padding: '10px 20px',
              border: `1px solid ${gold}`, color: gold,
              fontFamily: "'Noto Serif JP', serif", fontSize: 13, letterSpacing: '.15em',
              textDecoration: 'none'
            }}>LINE登録 &nbsp;›</a>
          </div>
          <div style={{
            height: 24
          }} />
          <div style={{
            textAlign: 'center', color: '#555', fontSize: 11, letterSpacing: '.1em',
            paddingTop: 16, borderTop: `1px solid #1a1a1a`
          }}>
            18歳未満閲覧不可
          </div>
        </div>
      </footer>
    </div>);

}

window.WireE = WireE;