メッセージ

</div>
      <div style={{ textAlign: 'center', marginTop: 24 }}>
        <button type="submit" className="btn-red" style={{ fontSize: '1rem', padding: '14px 48px' }} disabled={status === 'sending'}>
          {status === 'sending' ? '送信中...' : '送信する →'}
        </button>
      </div>
      {status === 'error' && (
        <div style={{ textAlign: 'center', color: 'var(--hibiscus)', marginTop: 12 }}>
          送信に失敗したさぁ。直接 <a href="mailto:info@rp-connection.com" style={{ color: 'var(--hibiscus)' }}>info@rp-connection.com</a> へ連絡してね。
        </div>
      )}
    </form>
  );
}

function ObaaLP() {
  useReveal();
  const [service, setService] = React.useState('');
  const chooseService = key => {
    setService(key);
    const el = document.getElementById('sec-contact');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

return (
    <div id="obaa-root">

{/* ── NAV ── */}
      <nav className="obaa-nav">
        <div className="nav-logo">
          <img className="nav-hib" src="assets/logo-nav.png" alt="大城ツル（88）ファミリー ロゴ" />
          <div>
            <div className="nav-logo-name">大城ツル（88）</div>
            <div className="nav-logo-sub">公式サイト</div>
          </div>
        </div>
        <nav className="nav-links">
          {NAV_LINKS.map(l => <a key={l.label} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="nav-socials">
          {SNS_LINKS.map(s => (
            <a key={s.type} href={s.href} className="nav-social-btn" aria-label={s.type} target="_blank" rel="noopener noreferrer">
              <SocialIcon type={s.type} size={18} />
            </a>
          ))}
        </div>
      </nav>

{/* ── HERO ── */}
      <section id="sec-home" className="obaa-hero">
        {/* 動画を全画面背景に */}
        <video
          className="hero-bg-video"
          autoPlay
          loop
          muted
          playsInline
          aria-hidden="true"
        >
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>
        <div className="hero-overlay" />

<div className="hero-content">
          <div className="hero-left reveal">
            <div className="hero-desc">沖縄唯一のおばぁAIインフルエンサー</div>
            <div className="hero-catch f-disp">大城ツル <span className="hero-age">(88)</span></div>
          </div>
        </div>

</section>

{/* ── プロフィール ── */}
      <section id="sec-profile" className="profile-section">
        <div className="section-header reveal" style={{ justifyContent: 'center', marginBottom: 16 }}>
          <span className="f-disp section-title">ツルの経歴</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.05rem', color: 'var(--ink-soft)', margin: '0 auto 36px', maxWidth: 720, lineHeight: 1.9 }}>
          沖縄唯一のおばぁAIインフルエンサー。<br />
          大城流沖縄料理研究所の初代所長をはじめ数々の経歴を持ち、<br />
          現在は映像制作・アプリ開発・AI研修など、AI時代に新しい価値を生む活動を行っている。
        </p>
        <div className="profile-grid reveal">
          {/* 左：大きな写真 */}
          <div>
            <div className="profile-photo-frame">
              <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                <source src="assets/ph-tsuru-cooking.mp4" type="video/mp4" />
              </video>
            </div>
          </div>

{/* 中央：テキスト */}
          <div>
            <div className="profile-en-label">Profile</div>
            <h2 className="profile-heading f-disp">
              初代大城流沖縄料理研究所　<span style={{ whiteSpace: 'nowrap' }}>所長</span>
            </h2>
            <ul className="profile-checklist">
              {PROFILE_FACTS.map((f, i) => (
                <li key={i}>
                  <span className="check-mark">✓</span>
                  <span>{f.text}</span>
                </li>
              ))}
            </ul>
            <p className="profile-note">※すべて本人調べ</p>
          </div>

</div>

{/* 下：Vimeoグリッド */}
        <div className="profile-videos reveal">
          {PROFILE_YOUTUBE.map((v, i) => (
            <div key={i} className="yt-wrap">
              <div className="yt-card">
                <iframe
                  src={`https://player.vimeo.com/video/${v.id}?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479`}
                  title={v.title}
                  frameBorder="0"
                  allow="autoplay; fullscreen; picture-in-picture"
                  referrerPolicy="strict-origin-when-cross-origin"
                  sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                  allowFullScreen
                />
              </div>
              <div className="content-info">
                <div className="content-title">{v.title}</div>
                <div className="content-sub">{v.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

{/* ── できること3本柱 ── */}
      <section id="sec-pillars" className="pillars-section">
        <div className="section-header reveal" style={{ justifyContent: 'center' }}>
          <span className="f-disp section-title">ツルにできること</span>
        </div>
        <div className="pillars-grid reveal">
          {[
            { title: '映像制作', desc: 'PR動画・会社紹介・人生アニメIPを制作', href: '#sec-services' },
            { title: 'アプリ開発', desc: '書類作成からゲームまでアプリを制作', href: '#sec-apps' },
            { title: 'AI研修', desc: '企業・団体向けにAIの使い方を講座で提供', href: '#sec-terakoya' },
            { title: '商品プロデュース', desc: 'ツルのブランドで商品を共同開発', href: '#sec-produce' },
          ].map(p => (
            <a key={p.title} href={p.href} className="pillar-card">
              <div className="pillar-title f-disp">{p.title}</div>
              <div className="pillar-desc">{p.desc}</div>
              <div className="pillar-link">詳しく見る →</div>
            </a>
          ))}
        </div>
      </section>

{/* ── サービス（ツル映像製作所） ── */}
      <section id="sec-services" className="services-section">
        <div className="section-header reveal" style={{ justifyContent: 'center' }}>
          <span className="f-disp section-title">映像製作所「TSURU」</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.05rem', color: 'var(--ink-soft)', margin: '16px auto 0', maxWidth: 720, lineHeight: 1.9 }}>
          最新AIを使った映像制作を、大城ツル（88）がまるごとプロデュース。<br />
          商品PRから会社・店舗紹介、人生のアニメIP化まで。
        </p>
        <div className="reveal" style={{ maxWidth: 760, margin: '32px auto 0' }}>
          <div className="yt-wrap">
            <div className="yt-card">
              <iframe
                src="https://player.vimeo.com/video/1192159985?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479"
                title="ツル映像製作所"
                frameBorder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                referrerPolicy="strict-origin-when-cross-origin"
                sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                allowFullScreen
              />
            </div>
          </div>
        </div>
        <div className="services-grid reveal">
          {SERVICES.map(s => (
            <div key={s.key} className="service-card">
              <span className="service-badge" style={{ background: s.badgeColor }}>{s.badge}</span>
              <div className="service-catch">{s.catch}</div>
              <div className="service-desc">{s.desc}</div>
              {s.plans.map((p, i) => (
                <div key={i} className="service-plan">
                  <div className="service-plan-name">{p.name}</div>
                  <div>
                    {p.old && <span className="service-price-old">{p.old}</span>}
                    <span className="service-price" style={{ color: s.accent }}>{p.price}</span>
                    {p.note && <span className="service-price-note">{p.note}</span>}
                  </div>
                  {p.includes && <div className="service-plan-includes">{p.includes}</div>}
                </div>
              ))}
              <div className="service-target">{s.target}</div>
              <div className="service-fit-title">{s.fitTitle}</div>
              <ul className="service-fit-list">
                {s.fits.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              {s.footnote && <div className="service-footnote">{s.footnote}</div>}
              <div className="service-video">
                {s.video ? (
                  <div className="yt-wrap">
                    <div className="yt-card">
                      <iframe
                        src={`https://player.vimeo.com/video/${s.video}?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479`}
                        title={`${s.badge} 参考動画`}
                        frameBorder="0"
                        allow="autoplay; fullscreen; picture-in-picture"
                        referrerPolicy="strict-origin-when-cross-origin"
                        sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                        allowFullScreen
                      />
                    </div>
                  </div>
                ) : (
                  <div className="service-video-placeholder">参考動画：近日公開</div>
                )}
              </div>
              <div className="service-cta">
                <button type="button" className="btn-red" onClick={() => chooseService(s.key)}>
                  このプランを相談する →
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

{/* ── ツルアプリ工房 ── */}
      <section id="sec-apps" className="services-section apps-section">
        <div className="section-header reveal" style={{ justifyContent: 'center', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8 }}>
          <span className="f-disp section-title">ツルアプリ工房</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.05rem', color: 'var(--ink-soft)', margin: '16px auto 0', maxWidth: 720, lineHeight: 1.9 }}>
          業務に必要なツール、アイディアをツル工房がアプリに仕立てます。<br />
          ※このアプリは無料で使えるから遊んでさぁ
        </p>
        <div className="apps-grid reveal">
          {APPS.map(app => (
            <div key={app.name} className="app-card">
              {app.video ? (
                <div className="yt-wrap">
                  <div className="yt-card">
                    <iframe
                      src={`https://player.vimeo.com/video/${app.video}?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479`}
                      title={`${app.name} 紹介動画`}
                      frameBorder="0"
                      allow="autoplay; fullscreen; picture-in-picture"
                      referrerPolicy="strict-origin-when-cross-origin"
                      sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                      allowFullScreen
                    />
                  </div>
                </div>
              ) : (
                <div className="service-video-placeholder" style={{ width: '100%', alignSelf: 'stretch', display: 'grid', placeItems: 'center', aspectRatio: '16/9' }}>
                  紹介動画：近日公開
                </div>
              )}
              <div className="app-card-name f-disp">{app.name}</div>
              <div className="app-card-desc">{app.desc}</div>
              <a href={app.url} target="_blank" rel="noopener noreferrer" className="btn-red app-card-link">
                アプリを見る →
              </a>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ textAlign: 'center', marginTop: 32 }}>
          <button type="button" className="btn-red" onClick={() => chooseService('ツルアプリ工房（アプリ開発）')}>
            アプリ開発を相談する →
          </button>
        </div>
      </section>

{/* ── ツルのAI寺子屋（AI研修） ── */}
      <section id="sec-terakoya" className="services-section terakoya-section">
        <div className="section-header reveal" style={{ justifyContent: 'center', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8 }}>
          <span className="f-disp section-title">ツルのAI寺子屋</span>
          <span style={{ fontSize: '0.95rem', color: 'var(--ink-mute)', fontWeight: 700 }}>企業・団体向けAI研修</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.05rem', color: 'var(--ink-soft)', margin: '16px auto 0', maxWidth: 720, lineHeight: 1.9 }}>
          AIの基礎から「Claude Code」の使い方、<br />
          画像生成、ホームページ、アプリ制作など学べるAI研修。<br />
          むずかしい話も、おばぁと一緒なら「なんくるないさー」。
        </p>
        <div className="reveal" style={{ maxWidth: 640, margin: '32px auto 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="service-target">
            対象：AIを業務に取り入れたい企業／職員研修をしたい団体
          </div>
          <div className="service-plan" style={{ textAlign: 'center' }}>
            <div className="service-plan-name">料金プラン</div>
            <div className="service-price" style={{ color: 'var(--hibiscus)', fontSize: 20 }}>準備中</div>
            <div className="service-plan-target">内容・料金は現在準備中です。まずはお気軽にご相談ください。</div>
          </div>
          <div className="service-footnote" style={{ textAlign: 'center' }}>
            教材例：<a href="https://okinawa-ai-school.vercel.app/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--hibiscus)' }}>沖縄AI村 寺子屋（無料学習サイト）</a>
          </div>
          <div style={{ textAlign: 'center', marginTop: 8 }}>
            <button type="button" className="btn-red" onClick={() => chooseService('ツルのAI寺子屋（AI研修）')}>
              AI研修を相談する →
            </button>
          </div>
        </div>
      </section>

{/* ── ツルプロデュース ── */}
      <section id="sec-produce" className="philosophy-section">
        <div className="section-header reveal" style={{ justifyContent: 'center' }}>
          <span className="f-disp section-title">ツルプロデュース</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.05rem', color: 'var(--ink-soft)', margin: '16px auto 32px', maxWidth: 720, lineHeight: 1.9 }}>
          ツルと一緒に商品の共同開発を行います。<br />
          ツルのブランドと世界観で、あなたの商品に「物語」を乗せます。
        </p>

{/* プロフィール風イントロ */}
        <div className="profile-grid reveal" style={{ marginBottom: 48 }}>
          <div>
            <div className="profile-photo-frame">
              <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                <source src="assets/producer.mp4" type="video/mp4" />
              </video>
            </div>
          </div>
          <div>
            <div className="profile-en-label">プロデュース商品</div>
            <ul className="profile-checklist">
              {[
                'ウエディングドレス「にーびち」',
                'やっけーしーじゃーアイス「あちこーこー」',
                'エナジードリンク「ちばりよー」',
                'オフィシャルフレグランス「加齢の香り」',
                'スポーツウェア「かめぇかめぇ」',
              ].map((item, i) => (
                <li key={i}>
                  <span className="check-mark">✓</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

<div className="produce-grid reveal">
          {PRODUCE_VIDEOS.map((v, i) => (
            <div key={i} className="yt-wrap">
              <div className="yt-card" style={v.aspect ? { paddingTop: v.aspect } : undefined}>
                <iframe
                  src={`https://player.vimeo.com/video/${v.id}?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479`}
                  title={v.title}
                  frameBorder="0"
                  allow="autoplay; fullscreen; picture-in-picture"
                  referrerPolicy="strict-origin-when-cross-origin"
                  sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
                  allowFullScreen
                />
              </div>
              <div className="content-info">
                <div className="content-title">{v.title}</div>
                <div className="content-sub">{v.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ textAlign: 'center', marginTop: 36 }}>
          <p style={{ fontSize: '0.95rem', color: 'var(--ink-soft)', marginBottom: 14, lineHeight: 1.8 }}>
            ツルのブランドと一緒に、あなたの商品を共同開発しませんか？
          </p>
          <button type="button" className="btn-red" onClick={() => chooseService('ツルプロデュース（商品共同開発）')}>
            商品開発を相談する →
          </button>
        </div>
      </section>

{/* ── 今後の展開（ロードマップ） ── */}
      <section id="sec-roadmap" className="roadmap-section">
        <div className="section-header reveal" style={{ justifyContent: 'center', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8 }}>
          <span className="f-disp section-title">今後の展開</span>
          <span style={{ fontSize: '0.95rem', color: 'var(--ink-mute)', fontWeight: 700 }}>ツルの向かう先</span>
        </div>
        <div className="reveal roadmap-list">
          {[
            { state: '稼働中', tone: 'now',  title: 'おばぁAIインフルエンサー', desc: 'SNS・キャラクターIPとして活動中' },
            { state: '受付中', tone: 'now',  title: '映像制作・アプリ開発・AI研修・商品プロデュース', desc: '4つの事業として受注受付中' },
            { state: '構想中', tone: 'next', title: '大城ツルの実店舗ブランド', desc: '「大城ツルの沖縄そば屋」など、ツルの世界観を体験できる実店舗を計画中' },
          ].map((r, i) => (
            <div key={i} className="roadmap-row">
              <span className={`roadmap-badge roadmap-badge-${r.tone}`}>{r.state}</span>
              <div>
                <div className="roadmap-title">{r.title}</div>
                <div className="roadmap-desc">{r.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

{/* ── 大城ファミリー ── */}
      <section id="sec-family" className="contents-section">
        <div className="section-header reveal" style={{ justifyContent: 'center' }}>
          <span className="f-disp section-title">大城ツルファミリー</span>
          <span className="section-en">Family</span>
        </div>
        <div className="family-video-wrap reveal">
          <video autoPlay loop muted playsInline style={{ width: '100%', borderRadius: 16, display: 'block' }}>
            <source src="assets/family.mp4" type="video/mp4" />
          </video>
        </div>

{/* 左：大城ヒモ吉 */}
          <div className="profile-grid family-grid reveal" style={{ gap: 20 }}>
            <div>
              <div className="profile-photo-frame" style={{ height: 270 }}>
                <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                  <source src="assets/himokichi.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
            <div>
              <div className="profile-en-label">Family</div>
              <h3 className="f-disp" style={{ fontSize: '1.8rem', marginBottom: 12, color: 'var(--brown)' }}>大城ヒモ吉（78）</h3>
              <ul className="profile-checklist" style={{ fontSize: '0.85em' }}>
                {[
                  { label: '肩　書', value: 'おばぁに絶対服従するおじい' },
                  { label: '生息地', value: '沖縄の某共同売店のベンチ' },
                  { label: '口　癖', value: 'おばぁが正しい' },
                  { label: '特　技', value: '泡盛のコップを見るだけで水と泡盛の比率が分かる' },
                  { label: '夢', value: 'おばぁと結婚すること（現在は内縁関係。いわゆるヒモ）' },
                ].map((row, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--red)', minWidth: 72, fontWeight: 700, whiteSpace: 'nowrap' }}>{row.label}：</span>
                    <span>{row.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* 右：大城ぽち */}
          <div className="profile-grid family-grid reveal" style={{ gap: 20 }}>
            <div>
              <div className="profile-photo-frame" style={{ height: 270 }}>
                <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                  <source src="assets/pochi.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
            <div>
              <div className="profile-en-label">Family</div>
              <h3 className="f-disp" style={{ fontSize: '1.8rem', marginBottom: 12, color: 'var(--brown)' }}>大城ぽち（38）</h3>
              <ul className="profile-checklist" style={{ fontSize: '0.85em' }}>
                {[
                  { label: '性　格', value: '甘えん坊で人懐っこい。よくスリスリして甘えてくる。寂しがり屋で、そばにいると安心する' },
                  { label: '鳴き声', value: 'かめぇかめぇ' },
                  { label: '性　能', value: '郵便物を自動で受け取り、持ち主に届けてくれる' },
                  { label: '注意点', value: '生ものの場合、そのまま食べる癖がある。食べられないよう注意しよう！' },
                ].map((row, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--red)', minWidth: 72, fontWeight: 700, whiteSpace: 'nowrap' }}>{row.label}：</span>
                    <span>{row.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* ── 比嘉家（お隣のライバル一家） ── */}
          <div className="reveal" style={{ textAlign: 'center', marginTop: 24 }}>
            <div className="f-disp" style={{ fontSize: '1.6rem', color: 'var(--brown)' }}>比嘉家</div>
            <div style={{ fontSize: '0.85rem', color: 'var(--ink-mute)', marginTop: 4 }}>
              お隣のライバル一家（ライバル視しているのは向こうだけ）
            </div>
          </div>

{/* 比嘉カメ */}
          <div className="profile-grid family-grid reveal" style={{ gap: 20 }}>
            <div>
              <div className="profile-photo-frame" style={{ height: 270 }}>
                <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                  <source src="assets/higakame.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
            <div>
              <div className="profile-en-label">Family</div>
              <h3 className="f-disp" style={{ fontSize: '1.8rem', marginBottom: 12, color: 'var(--brown)' }}>比嘉カメ（77）</h3>
              <ul className="profile-checklist" style={{ fontSize: '0.85em' }}>
                {[
                  { label: '肩　書', value: 'ナベラー農家／嫉妬の守り人' },
                  { label: '関　係', value: 'ヒモ吉の幼なじみ。ヒモ吉がツルに惹かれたため、勝手にツルをライバル視している（ツル側は認識していない）' },
                  { label: '口　癖', value: '「ツルより長生きするのはカメさ！」' },
                  { label: '特　技', value: '亀の甲羅を見ただけでその亀の年齢を当てられる' },
                  { label: '変　身', value: '嫉妬が爆発すると亀甲羅パワードスーツ「KAME SHELL ARMOR」に変身。動きは亀なみ、防御は最強' },
                ].map((row, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--red)', minWidth: 72, fontWeight: 700, whiteSpace: 'nowrap' }}>{row.label}：</span>
                    <span>{row.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* 比嘉がんじゅ */}
          <div className="profile-grid family-grid reveal" style={{ gap: 20 }}>
            <div>
              <div className="profile-photo-frame" style={{ height: 270 }}>
                <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                  <source src="assets/higaganju.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
            <div>
              <div className="profile-en-label">Family</div>
              <h3 className="f-disp" style={{ fontSize: '1.8rem', marginBottom: 12, color: 'var(--brown)' }}>比嘉がんじゅ（66）</h3>
              <ul className="profile-checklist" style={{ fontSize: '0.85em' }}>
                {[
                  { label: '職　業', value: 'ナベラー農家／比嘉カメのパートナー' },
                  { label: '性　格', value: '頑固、働き者、昔気質のマッチョ。実は繊細で不安を抱えている' },
                  { label: '口　癖', value: '「がんじゅーが一番さ！」' },
                  { label: '変　身', value: 'カメの口からヒモ吉の名前が出た瞬間、嫉妬と悔しさが爆発して黄金の「GANJUU HOST ARMOR」に変身。「お前もキラキラさせてやる」' },
                ].map((row, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--red)', minWidth: 72, fontWeight: 700, whiteSpace: 'nowrap' }}>{row.label}：</span>
                    <span>{row.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* 比嘉くいな */}
          <div className="profile-grid family-grid reveal" style={{ gap: 20 }}>
            <div>
              <div className="profile-photo-frame" style={{ height: 270 }}>
                <video autoPlay loop muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
                  <source src="assets/higakuina.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
            <div>
              <div className="profile-en-label">Family</div>
              <h3 className="f-disp" style={{ fontSize: '1.8rem', marginBottom: 12, color: 'var(--brown)' }}>比嘉くいな（11）</h3>
              <ul className="profile-checklist" style={{ fontSize: '0.85em' }}>
                {[
                  { label: '種　族', value: 'ヤンバルクイナ（比嘉がんじゅ＆比嘉カメのペット）' },
                  { label: 'サイズ', value: '身長 約25cm／体重 約400g' },
                  { label: '口　癖', value: '「にぃーびち！」（沖縄方言で結婚式・婚礼のこと）' },
                  { label: '性　格', value: '婚礼に異常な執着を持つお節介焼き。誰かと誰かが少しでも近づくと「にぃーびち！」と叫び出す' },
                  { label: '変　身', value: '誰かの愛情の気配を感じ取ると、寡黙で厳かな「にぃーびち神父」に変身。両思いには祝福を、片思いには稲妻の裁きを下す' },
                ].map((row, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--red)', minWidth: 72, fontWeight: 700, whiteSpace: 'nowrap' }}>{row.label}：</span>
                    <span>{row.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

</div>
      </section>

{/* ── グッズ ── */}
      <section id="sec-goods" className="goods-section">
        <div className="section-header reveal" style={{ justifyContent: 'center' }}>
          <span className="f-disp section-title">大城共同売店</span>
        </div>
        <p className="reveal" style={{ textAlign: 'center', fontSize: '1.1rem', color: 'var(--ink-soft)', marginBottom: 32 }}>
          オフィシャルグッズ販売中！大赤字で売店が倒産します。助けてください。
        </p>
        <div className="reveal" style={{ maxWidth: 900, margin: '0 auto' }}>
          <div className="yt-wrap">
            <div className="yt-card">
              <iframe
                src="https://player.vimeo.com/video/1190677041?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479"
                title="大城共同売店"
                frameBorder="0"
                allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              />
            </div>
          </div>
        </div>
        <div className="reveal" style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
          {[
            { href: 'https://suzuri.jp/okinawanoobaa/19977372/t-shirt/m/white?utm_source=others&utm_medium=social&utm_campaign=item_detail_share', img: 'assets/tshirt-back.png',  name: 'てーげー見えてるよ？ スタンダードTシャツ', price: '¥4,851' },
            { href: 'https://suzuri.jp/okinawanoobaa/19977370/t-shirt/m/indigo?utm_source=others&utm_medium=social&utm_campaign=item_detail_share', img: 'assets/tshirt-back2.png', name: 'てーげー見えてるよ？（カラー） スタンダードTシャツ', price: '¥5,588' },
            { href: 'https://store.line.me/stickershop/author/6396397/ja', img: 'assets/line-stamp.png', name: '大城ツル（88）ファミリー LINEスタンプ 全6種', price: '各¥190' },
          ].map((item, i) => (
            <a key={i} href={item.href} target="_blank" rel="noopener noreferrer"
              style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: 180, flexShrink: 0 }}
            >
              <div style={{ background: '#fff', borderRadius: 16, overflow: 'hidden', boxShadow: '0 4px 20px rgba(80,30,0,0.12)', transition: 'transform .2s, box-shadow .2s', cursor: 'pointer' }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 10px 32px rgba(80,30,0,0.18)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 4px 20px rgba(80,30,0,0.12)'; }}
              >
                <img src={item.img} alt={item.name} style={{ width: '100%', display: 'block', aspectRatio: '1/1', objectFit: 'cover' }} />
                <div style={{ padding: '12px 14px 16px' }}>
                  <div style={{ fontSize: '0.75rem', color: 'var(--ink-mute)', marginBottom: 4 }}>大城共同売店</div>
                  <div style={{ fontSize: '0.85rem', fontWeight: 700, color: 'var(--ink)', marginBottom: 8, lineHeight: 1.4 }}>{item.name}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--hibiscus)' }}>{item.price}</span>
                    <span style={{ fontSize: '0.75rem', background: 'var(--hibiscus)', color: '#fff', padding: '3px 10px', borderRadius: 999, fontWeight: 700 }}>購入する</span>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

{/* ── お問い合わせ ── */}
      <section id="sec-contact" className="contact-section">
        <div className="section-header reveal" style={{ justifyContent: 'center', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8 }}>
          <span className="f-disp section-title">お問い合わせ</span>
          <span style={{ fontSize: '0.95rem', color: 'var(--ink-mute)' }}>お仕事のご依頼・メディア取材・その他のお問い合わせはこちら</span>
        </div>
        <div style={{ maxWidth: 680, margin: '0 auto' }}>
          <ContactForm service={service} onServiceChange={setService} />
          <div style={{ textAlign: 'center', marginTop: 16, color: 'var(--ink-mute)', fontSize: '0.85rem' }}>
            直接メールの場合は <a href="mailto:info@rp-connection.com" style={{ color: 'var(--hibiscus)' }}>info@rp-connection.com</a> まで
          </div>
        </div>
      </section>

{/* ── FOOTER ── */}
      <footer className="obaa-footer">
        <img src="assets/ph-okinawa-sea.png" alt="" className="footer-bg-img" aria-hidden="true" />
        <div className="footer-overlay" />
        <div className="footer-inner">
          <div>
            <div className="footer-quote f-disp">
              <span style={{ fontSize: '1.4em', display: 'block' }}>どんな料理も、オリオンビールを飲めば、味は分からん。</span>
              <span style={{ fontSize: '0.9em', display: 'block', marginTop: 12, opacity: 0.85, textAlign: 'right' }}>大城流沖縄料理研究所　初代所長 大城ツル（88）</span>
            </div>
          </div>
          <div>
            <div className="footer-follow">Follow Me!</div>
            <div className="footer-socials">
              {SNS_LINKS.map(s => (
                <a key={s.type} href={s.href} className="footer-social-btn" aria-label={s.type} target="_blank" rel="noopener noreferrer">
                  <SocialIcon type={s.type} size={20} />
                </a>
              ))}
            </div>
          </div>
        </div>{/* /footer-inner */}
        <div className="footer-copyright">
          © {new Date().getFullYear()} 株式会社琉球パフォーマーズコネクション All Rights Reserved.
        </div>
      </footer>

</div>
  );
}

const obaaRoot = ReactDOM.createRoot(document.getElementById('obaa-mount'));
obaaRoot.render(React.createElement(ObaaLP));