// =============================================================
// LP デモを見るページ専用セクション
// 2026/5/16 仕様：「テンプレ一覧・写真付き・デモが見られる素敵なページ」
// =============================================================

// 2026/5/19 仕様「集客サイトから実際のデモページに飛ぶの危険・集客サイトにコピー」
//   旧：const LP_PRO_URL = 'https://mirais-lp-prod.netlify.app';
//   新：集客サイト内 /demos/ にコピー済み・自サイト内完結
const LP_PRO_URL = '';  // 空にして相対パス /demos/... を使う

// 本格 LP テンプレート一覧
// 2026/5/19 仕様「3つだけならバラエティ重視で・和浪曼・クラフト・芸術系で揃える」
//   朱印・白磁を一旦削除し、桜衣（和浪曼）・無頼（クラフト）・エトワール（芸術系）の3枚に厳選
//   他テンプレ（朱印5色・白磁・アトリエ・匠・フローラル・マカロン・エグゼクティブ等）は
//   下部の「随時追加中」セクションで予告
const PREMIUM_TEMPLATES = [
  {
    id: 'sakuragoromo',
    name: '桜衣',
    reading: 'さくらごろも',
    eyebrow: 'JAPANESE ROMANCE',
    catch: '和浪漫の世界観で、女性らしさを纏う',
    description: '桜の儚さと和の品位を、現代的に表現。桜の花びらが優しく舞う演出も。サロン・お教室・女性事業・着付け・茶道・ブライダルに最適です。',
    industries: ['サロン', 'お教室', '着付け', '茶道', 'ブライダル'],
    color: { bg: '#FBE9EB', accent: '#C6798C', dark: '#5C2935' },
    demoUrl: `/demos/sakuragoromo_premium.html`,
    thumb: `/demos/images/showcase/showcase-sakuragoromo.jpg`,
    thumbAlt: '桜衣テンプレート LP 全体イメージ（桜の花びらが舞う瞬間）',
  },
  {
    id: 'burai',
    name: '無頼',
    reading: 'ぶらい',
    eyebrow: 'CRAFT & VINTAGE',
    catch: '男のクラフト精神・アメリカンヴィンテージ',
    description: '黒×銅色の深い世界観で、職人気質を演出。カスタムショップ・革製品・バーバー・タトゥースタジオ・写真スタジオに最適です。',
    industries: ['バーバー', '革製品', 'タトゥー', '写真スタジオ', 'カスタムショップ'],
    color: { bg: '#1A1410', accent: '#C97D4C', dark: '#0E0A0A' },
    demoUrl: `/demos/burai-craft.html`,
    thumb: `/demos/images/showcase/showcase-burai.jpg`,
    thumbAlt: '無頼テンプレート LP 全体イメージ（赤いバイク・ALL HAND BUILT）',
  },
  {
    id: 'etoile-prima',
    name: 'エトワール プリマ',
    reading: 'えとわーる・ぷりま',
    eyebrow: 'ELEGANCE & ART',
    catch: '上品×編集者風混植・優雅で芸術的',
    description: '上品なモーヴとクリーム色で、優雅な芸術性を表現。バレエ・社交ダンス・声楽・ボイトレ・競技ダンス・芸術系に最適です。',
    industries: ['バレエ', '社交ダンス', '声楽', 'ボイトレ', '芸術系'],
    color: { bg: '#F5EFEC', accent: '#A88588', dark: '#6B4A4C' },
    demoUrl: `/demos/etoile-prima.html`,
    thumb: `/demos/images/showcase/showcase-etoile-prima.jpg`,
    thumbAlt: 'エトワール プリマ LP 全体イメージ（モノクロダンサー）',
  },
];

// 2026/5/19 仕様「随時追加中・期待感を持たせる」
// 集客サイトには3枚のみ厳選表示・他テンプレは「準備中」リストで予告
const UPCOMING_TEMPLATES = [
  { name: '朱印', reading: 'しゅいん', sub: '専門家向け・5色のカラーパレット' },
  { name: '白磁', reading: 'はくじ', sub: 'コーチング・成功塾・著者向け' },
  { name: 'アトリエ ルーチェ', reading: 'あとりえ・るーちぇ', sub: '美容院・フリーランス向けWebページ' },
  { name: '匠', reading: 'たくみ', sub: '中小企業・職人・士業向け' },
  { name: 'エトワール（4色）', reading: 'えとわーる', sub: 'プリマ・グラン・ノクターン・ブリュム' },
  { name: 'フローラル', reading: 'ふろーらる', sub: '花を主役にした女性向け高級系' },
  { name: 'マカロン', reading: 'まかろん', sub: '甘く優しいパステル系' },
  { name: 'エグゼクティブ', reading: 'えぐぜくてぃぶ', sub: '士業・経営者向け重厚系' },
];

/* ============================================
   Hero
   ============================================ */
function DemosHero() {
  return (
    <section className="section demos-hero">
      <div className="container demos-hero-inner">
        <span className="eyebrow reveal">LP テンプレートデモ</span>
        <h1 className="h-display reveal" style={{ marginTop: 20 }}>
          あなたのビジネスに、<br />
          <span className="accent">ぴったり</span>のテンプレートを。
        </h1>
        {/* 2026/5/19 仕様「現在 ◯◯個 公開中とかボリューム感を出す」 */}
        <div className="reveal" style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 10,
          marginTop: 22,
          padding: '10px 22px',
          background: 'linear-gradient(135deg, rgba(212,180,58,0.12) 0%, rgba(232,203,122,0.18) 100%)',
          border: '1px solid rgba(212,180,58,0.45)',
          borderRadius: 26,
          fontSize: 13.5,
          color: '#5C4A1A',
          fontWeight: 600,
          letterSpacing: 1.5,
          boxShadow: '0 2px 10px rgba(212,180,58,0.12)',
        }}>
          <span style={{ fontSize: 16 }}>✨</span>
          現在 <strong style={{ fontSize: 17, color: '#8B6F35', margin: '0 4px' }}>30 種類以上</strong> のテンプレートを準備中
        </div>
        <p className="demos-hero-sub reveal" style={{ marginTop: 24 }}>
          Miraisには 3 つのタイプのテンプレートがあります。<br />
          雰囲気・業種・用途に合わせてお選びいただけます。<br />
          機能が追加されるたびに、新しい型も増えていきます。
        </p>
      </div>
    </section>
  );
}

/* ============================================
   シンプル LP（3分でできる）
   ============================================ */
function DemosSimpleLP() {
  return (
    <section className="section demos-simple">
      <div className="container">
        <div className="demos-typehead reveal">
          <div className="demos-type-tag">🌸 タイプ 01</div>
          <h2 className="h1" style={{ marginTop: 12 }}>
            シンプル LP
            <span className="demos-type-min">／ 3 分でできる</span>
          </h2>
          <p style={{ marginTop: 10 }}>
            写真と文章を入れるだけ。<br />
            ブロックを足し引きして、ぴったりの 1 枚に整えられます。
          </p>
        </div>

        <div className="demos-simple-grid">
          {/* プロフィール
              2026/5/19 仕様「シンプルLPの写真バランスが悪い」→ Mirais 世界観で統一
              アトリエルーチェのスタイリスト写真（Gemini AI 生成）に差し替え */}
          <div className="demos-simple-card reveal">
            <div style={{
              height: 200,
              backgroundImage: `url(/demos/images/atelier-luce/stylist1.jpg)`,
              backgroundSize: 'cover',
              backgroundPosition: 'center top',
              borderTopLeftRadius: 18,
              borderTopRightRadius: 18,
            }} />
            <div className="demos-simple-body">
              <h3 className="h3">プロフィール公開ページ</h3>
              <p>あなたのお仕事・想い・SNS リンクを 1 枚にまとめます。お客様にお見せする「名刺」のような 1 枚に。</p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={16} stroke={2} />写真を 1 枚アップロード</li>
                <li><IconCheckCircle size={16} stroke={2} />お名前・お仕事・想いを記入</li>
                <li><IconCheckCircle size={16} stroke={2} />公開ボタンを押して完成</li>
              </ul>
              <p className="demos-simple-note">
                <IconSparkle size={14} stroke={2} />
                AI があなたらしい文章の下書きを用意します
              </p>
              <div style={{
                marginTop: 14, padding: '10px 12px',
                background: '#FBF7F2', border: '1px dashed #D4B43A',
                borderRadius: 8, fontSize: 12, color: '#5C4A1A', lineHeight: 1.7,
              }}>
                <strong style={{ color: '#8B6F35' }}>こんなページが作れる：</strong> <br />
                Mirais の <strong>「プロフィール」テンプレート</strong>（13 種）から、お好きな世界観をお選びいただけます。
              </div>
            </div>
          </div>

          {/* テーマカラーで雰囲気作り
              2026/5/19 仕様変更「商品写真を入れる場所はない・嘘がある」
              → 顔写真+商品紹介表現を消し、シンプルLPの実態「テーマカラーで雰囲気作り」訴求に変更 */}
          <div className="demos-simple-card reveal">
            <div style={{
              height: 200,
              backgroundImage: `url(/demos/images/showcase/showcase-simple-themes.jpg)`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              borderTopLeftRadius: 18,
              borderTopRightRadius: 18,
            }} />
            <div className="demos-simple-body">
              <h3 className="h3">テーマカラーで雰囲気作り</h3>
              <p>6 つのテーマカラー（サンド・スカイ・マリン・モーヴ・ピオニー・ノクターン）から、お仕事の雰囲気に合うものをワンクリックで選べます。</p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={16} stroke={2} />6 つのテーマから1つ選ぶだけ</li>
                <li><IconCheckCircle size={16} stroke={2} />配色・フォントが自動で整う</li>
                <li><IconCheckCircle size={16} stroke={2} />あとから何度でも変更可</li>
              </ul>
              <div style={{
                marginTop: 14, padding: '10px 12px',
                background: '#FBF7F2', border: '1px dashed #D4B43A',
                borderRadius: 8, fontSize: 12, color: '#5C4A1A', lineHeight: 1.7,
              }}>
                <strong style={{ color: '#8B6F35' }}>こんなページが作れる：</strong><br />
                Mirais の <strong>「シンプル LP」</strong>は文章中心・写真は 1〜3 枚で十分。短時間で公開できます。
              </div>
            </div>
          </div>

          {/* お問い合わせ・予約フォーム
              2026/5/19 仕様変更「フォーム単体配布は嘘・実態は LP に埋め込む」修正
              → 「LP に組み込めるフォーム機能」訴求に変更 */}
          <div className="demos-simple-card reveal">
            <div style={{
              height: 200,
              backgroundImage: 'url(https://images.unsplash.com/photo-1455390582262-044cdead277a?w=900&q=80)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              borderTopLeftRadius: 18,
              borderTopRightRadius: 18,
            }} />
            <div className="demos-simple-body">
              <h3 className="h3">お問い合わせ・予約フォーム</h3>
              <p>LP に組み込んでお使いいただける、お問い合わせ・予約受付・アンケート用のフォーム機能。回答はメールで受け取れます。</p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={16} stroke={2} />フォーム項目を自由に設計</li>
                <li><IconCheckCircle size={16} stroke={2} />回答メールが自動で届く</li>
                <li><IconCheckCircle size={16} stroke={2} />LP に組み込んで公開</li>
              </ul>
              <div style={{
                marginTop: 14, padding: '10px 12px',
                background: '#FBF7F2', border: '1px dashed #D4B43A',
                borderRadius: 8, fontSize: 12, color: '#5C4A1A', lineHeight: 1.7,
              }}>
                <strong style={{ color: '#8B6F35' }}>こんなページが作れる：</strong><br />
                シンプル LP・本格 LP のどちらにも組み込めるフォーム機能。プロフィール公開ページにも追加できます。
              </div>
            </div>
          </div>
        </div>

        <p className="demos-simple-foot reveal">
          シンプル LP は<strong>複数枚作成できます</strong>。<br />
          <small>※ 作成可能な枚数はご利用プランにより異なります（<a href="/" style={{ color: '#8B6F35', textDecoration: 'underline' }}>料金ページ</a>をご覧ください）。ブロックを足し引きして、用途に合わせて自由に整えられます。</small>
        </p>
      </div>
    </section>
  );
}

/* ============================================
   本格 LP（朱印・桜衣・白磁・等）
   ============================================ */
function DemosPremiumLP() {
  return (
    <section className="section demos-premium">
      <div className="container">
        <div className="demos-typehead reveal">
          <div className="demos-type-tag premium">✨ タイプ 02</div>
          <h2 className="h1" style={{ marginTop: 12 }}>本格 LP</h2>
          <p style={{ marginTop: 10 }}>
            一流のデザイナーが仕立てた、世界観のあるテンプレート。<br />
            あなたの事業の世界観に合わせて、お選びいただけます。
          </p>
        </div>

        <div className="demos-premium-grid">
          {PREMIUM_TEMPLATES.map((tpl, i) => (
            <div
              key={tpl.id}
              className="demos-premium-card reveal"
              style={{ transitionDelay: `${i * 0.08}s` }}
            >
              <div
                className="demos-premium-thumb"
                style={{
                  position: 'relative',
                  background: tpl.color.bg,
                  borderTop: `4px solid ${tpl.color.accent}`,
                  height: 280,
                  overflow: 'hidden',
                }}
              >
                {tpl.thumb ? (
                  <>
                    <img
                      src={tpl.thumb}
                      alt={tpl.thumbAlt || tpl.name}
                      style={{
                        position: 'absolute', inset: 0,
                        width: '100%', height: '100%',
                        objectFit: 'cover', objectPosition: 'center top',
                        display: 'block',
                      }}
                      loading="lazy"
                    />
                    {/* 下半分にグラデでテキスト読みやすく */}
                    <div style={{
                      position: 'absolute', left: 0, right: 0, bottom: 0,
                      height: '60%',
                      background: `linear-gradient(to top, ${tpl.color.dark}EE 0%, ${tpl.color.dark}AA 40%, transparent 100%)`,
                      pointerEvents: 'none',
                    }} />
                    <div style={{
                      position: 'absolute', left: 20, right: 20, bottom: 18,
                      color: '#fff', textAlign: 'left',
                    }}>
                      <div style={{ fontSize: 10, letterSpacing: 3, fontWeight: 800, marginBottom: 6, opacity: 0.9 }}>
                        {tpl.eyebrow}
                      </div>
                      <div style={{ fontFamily: 'Noto Serif JP, serif', fontSize: 28, fontWeight: 700, letterSpacing: 4, lineHeight: 1 }}>
                        {tpl.name}
                      </div>
                      <div style={{ fontSize: 11, marginTop: 4, opacity: 0.8, letterSpacing: 2 }}>
                        {tpl.reading}
                      </div>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="demos-premium-mock">
                      <div className="mock-bar" style={{ background: tpl.color.accent }} />
                      <div className="mock-img" style={{ background: `linear-gradient(135deg, ${tpl.color.dark}, ${tpl.color.accent})` }} />
                      <div className="mock-line med" />
                      <div className="mock-line" />
                      <div className="mock-btn" style={{ background: tpl.color.accent }} />
                    </div>
                    <div className="demos-premium-name" style={{ color: tpl.color.dark }}>
                      <span className="demos-premium-eyebrow" style={{ color: tpl.color.accent }}>{tpl.eyebrow}</span>
                      <span className="demos-premium-jp">{tpl.name}</span>
                      <span className="demos-premium-reading">{tpl.reading}</span>
                    </div>
                  </>
                )}
              </div>

              <div className="demos-premium-body">
                <p className="demos-premium-catch">{tpl.catch}</p>
                <p className="demos-premium-desc">{tpl.description}</p>

                <div className="demos-premium-tags">
                  {tpl.industries.map((ind) => (
                    <span key={ind} className="demos-industry-tag">{ind}</span>
                  ))}
                </div>

                {tpl.variant && (
                  <p className="demos-premium-variant">
                    <IconSparkle size={12} stroke={2} />
                    {tpl.variant}
                  </p>
                )}

                <a
                  href={tpl.demoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                  style={{ width: '100%', marginTop: 18 }}
                >
                  デモを見る <IconArrow size={16} />
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* 2026/5/19 仕様「随時追加中・期待感を持たせる」 */}
        <div className="reveal" style={{
          marginTop: 60,
          padding: '40px 32px',
          background: 'linear-gradient(135deg, rgba(212,180,58,0.06) 0%, rgba(232,203,122,0.08) 100%)',
          border: '1px dashed rgba(212,180,58,0.35)',
          borderRadius: 18,
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontSize: 14,
            letterSpacing: 4,
            color: '#B8945E',
            marginBottom: 10,
          }}>
            ── COMING SOON ──
          </div>
          <h3 style={{
            fontFamily: 'Noto Serif JP, serif',
            fontSize: 22,
            fontWeight: 500,
            marginBottom: 14,
            color: '#3A2F1F',
            letterSpacing: 4,
          }}>
            さらに多彩なテンプレートを順次公開中
          </h3>
          <p style={{
            fontSize: 13,
            color: '#7A6A40',
            marginBottom: 28,
            lineHeight: 2,
            letterSpacing: 1,
          }}>
            業種・雰囲気・用途に合わせて、<br />
            多彩なテンプレートを随時追加しています。
          </p>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 14,
            marginTop: 24,
            textAlign: 'left',
          }}>
            {UPCOMING_TEMPLATES.map((tpl) => (
              <div key={tpl.name} style={{
                background: '#fff',
                padding: '18px 20px',
                borderRadius: 12,
                border: '1px solid rgba(212,180,58,0.18)',
                boxShadow: '0 2px 8px rgba(60,40,20,0.04)',
              }}>
                <div style={{
                  fontFamily: 'Noto Serif JP, serif',
                  fontSize: 16,
                  fontWeight: 600,
                  color: '#3A2F1F',
                  letterSpacing: 2,
                  marginBottom: 4,
                }}>
                  {tpl.name}
                </div>
                <div style={{
                  fontSize: 10,
                  color: '#9B8E78',
                  letterSpacing: 1.5,
                  marginBottom: 8,
                }}>
                  {tpl.reading}
                </div>
                <div style={{
                  fontSize: 12,
                  color: '#7A6A40',
                  lineHeight: 1.7,
                  letterSpacing: 0.5,
                }}>
                  {tpl.sub}
                </div>
              </div>
            ))}
          </div>
        </div>

        <p className="demos-simple-foot reveal">
          本格 LP も<strong>複数枚作成できます</strong>。<br />
          <small>※ 作成可能な枚数はご利用プランにより異なります（<a href="/" style={{ color: '#8B6F35', textDecoration: 'underline' }}>料金ページ</a>をご覧ください）。ご紹介したのは一例です。Mirais 内ではさらに多くのテンプレートからお選びいただけます。</small>
        </p>
      </div>
    </section>
  );
}

/* ============================================
   Final CTA
   ============================================ */
function DemosFinalCTA() {
  return (
    <section id="cta" className="section final-cta">
      <div className="container final-cta-inner">
        <span className="eyebrow reveal" style={{ color: "var(--color-primary-soft)" }}>気になるテンプレートはありましたか？</span>
        <h2 className="reveal" style={{ marginTop: 24 }}>
          そのテンプレで、<br />
          <span className="accent">今日から始めよう。</span>
        </h2>
        <p className="reveal">
          スタートダッシュキャンペーン実施中。<br />
          初月半額 ¥2,240・2ヶ月目以降 ¥3,480／月。最低利用期間なし、いつでも解約OK。
        </p>
        <div className="final-cta-buttons reveal">
          <a href={`${LP_PRO_URL.replace('-lp-prod', '-v2-staging').replace('lp-prod', 'v2-staging')}/welcome`} className="btn btn-primary btn-lg">
            はじめる <IconArrow size={18} />
          </a>
          <a href="/" className="btn btn-ghost btn-lg">
            トップへ戻る
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   EC テンプレ（2026/5/16 芙美品質チェック後・デモ写真整備中のため当面準備中表示）
   ============================================ */
function DemosECTemplates() {
  return (
    <section className="section demos-ec">
      <div className="container">
        <div className="demos-typehead reveal">
          <div className="demos-type-tag" style={{ background: 'linear-gradient(135deg,#FFC9C9,#FF8A8A)', color: '#5C0000' }}>
            🛒 タイプ 03
          </div>
          <h2 className="h1" style={{ marginTop: 12 }}>シンプル EC サイト（商品 30 種類まで）</h2>
          <p style={{ marginTop: 10 }}>
            個人事業主・作家・1点もの・少量販売の方にぴったりの EC サイト。<br />
            機能は完成しており、現在より「これは作りたい」と感じていただけるデモを準備中です。
          </p>
          <div style={{ marginTop: 18, padding: '14px 18px', background: '#F0F8F5', border: '1px solid #B8D8C5', borderRadius: 10, fontSize: 13, color: '#2A5C45', textAlign: 'left', maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
            <div style={{ fontWeight: 700, marginBottom: 6 }}>📦 シンプル EC でできること</div>
            <ul style={{ paddingLeft: 18, margin: 0, lineHeight: 1.85 }}>
              <li>商品 30 種類まで・各商品に在庫数を設定</li>
              <li>注文が入ると<strong>自動で在庫が減ります</strong>（3個売れたら 7個に）</li>
              <li>カラー・サイズなどのバリエーション無制限</li>
              <li>カート・チェックアウト・注文管理を一体化</li>
              <li>本格LP枠から 4 枚消化</li>
            </ul>
          </div>
          <div style={{ marginTop: 16, padding: '12px 16px', background: '#FFF8E7', border: '1px solid #F5D77E', borderRadius: 8, fontSize: 12, color: '#5C4A00', display: 'inline-block' }}>
            ✨ 高品質な EC デモは近日公開予定。それまでにご登録された方も、リリース時にすぐ使えます。
          </div>
        </div>
      </div>
    </section>
  )
}

// 旧 DemosECTemplates（写真整備後に再公開予定）
function _DemosECTemplatesOriginal() {
  const ecTemplates = [
    {
      id: 'ec-product',
      name: '商品 1ページ（1点もの向け）',
      eyebrow: 'SIMPLE EC',
      catch: '1 商品にフォーカス・物語性で売る',
      description: '受注生産・カスタム品・1 点もの・体験販売 など、1 つの商品をしっかり魅せる構成。問合せベースで購入につなげます。',
      industries: ['受注生産', '1点もの', 'カスタム品', '体験販売'],
      color: { bg: '#FAF6F0', accent: '#B8945E', dark: '#3A2C1F' },
      demoUrl: `${LP_PRO_URL}/demos/ec-product-demo.html`,
    },
    {
      id: 'ec-multi',
      name: '商品一覧（複数商品 Web 風）',
      eyebrow: 'MULTI EC',
      catch: '複数商品を 1 ページに集約',
      description: '小規模オンラインショップ向け。商品が縦並び+動画ポップアップで、お買い物体験をシンプルに。',
      industries: ['手作り品', 'コスメ', 'お菓子', 'アクセサリー'],
      color: { bg: '#F1E9DB', accent: '#8B7A4F', dark: '#2C2C2A' },
      demoUrl: `${LP_PRO_URL}/demos/ec-multi-demo.html`,
    },
    {
      id: 'ec-cinema',
      name: '商品 1ページ（シネマ型・動画演出）',
      eyebrow: 'CINEMA EC',
      catch: 'ヘッダー動画で世界観を見せる',
      description: 'ヘッダー動画 → 画像転換 → サイドギャラリー → 動画ポップアップ。商品の動きや使い方を本格的に見せたい商品に。',
      industries: ['本格商品', 'ブランド品', 'ガジェット', 'コスメ高級'],
      color: { bg: '#1A1208', accent: '#D4A843', dark: '#0E0A05' },
      demoUrl: `${LP_PRO_URL}/demos/ec-cinema-demo.html`,
    },
  ];

  return (
    <section className="section demos-ec">
      <div className="container">
        <div className="demos-typehead reveal">
          <div className="demos-type-tag" style={{ background: 'linear-gradient(135deg,#FFC9C9,#FF8A8A)', color: '#5C0000' }}>
            🛒 タイプ 03
          </div>
          <h2 className="h1" style={{ marginTop: 12 }}>シンプル EC サイト（商品 30 種類まで）</h2>
          <p style={{ marginTop: 10 }}>
            個人事業主・作家・1点もの・少量販売の方にぴったりの EC サイトです。<br />
            商品 30 種類まで・3 つの魅せ方からお選びいただけます。
          </p>
          <p style={{ marginTop: 14, padding: '10px 14px', background: '#FFF8E7', border: '1px solid #F5D77E', borderRadius: 8, fontSize: 12, color: '#5C4A00', display: 'inline-block' }}>
            💡 30 種類を超える方は、<strong>マルチサイト機能（順次リリース予定）</strong>でサイトを分けて運営できるようになります
          </p>
          <div style={{ marginTop: 18, padding: '14px 18px', background: '#F0F8F5', border: '1px solid #B8D8C5', borderRadius: 10, fontSize: 13, color: '#2A5C45', textAlign: 'left', maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
            <div style={{ fontWeight: 700, marginBottom: 6 }}>📦 在庫管理について</div>
            <ul style={{ paddingLeft: 18, margin: 0, lineHeight: 1.85 }}>
              <li>各商品に在庫数を設定（例：在庫 10 個）</li>
              <li>注文が入ると<strong>自動で在庫が減ります</strong>（3個売れたら 7個に）</li>
              <li>在庫 0 で「売り切れ」表示・購入ボタン無効化</li>
              <li>補充は管理画面で手動入力</li>
              <li>在庫数に上限なし（30 種類 × 各 100 個 = 3,000 個販売も可能）</li>
            </ul>
          </div>
        </div>

        <div className="demos-premium-grid">
          {ecTemplates.map((tpl, i) => (
            <div
              key={tpl.id}
              className="demos-premium-card reveal"
              style={{ transitionDelay: `${i * 0.08}s` }}
            >
              <div
                className="demos-premium-thumb"
                style={{
                  background: `linear-gradient(135deg, ${tpl.color.bg} 0%, ${tpl.color.bg} 50%, ${tpl.color.accent}22 100%)`,
                  borderTop: `4px solid ${tpl.color.accent}`,
                }}
              >
                <div className="demos-premium-mock">
                  <div className="mock-bar" style={{ background: tpl.color.accent }} />
                  <div className="mock-img" style={{ background: `linear-gradient(135deg, ${tpl.color.dark}, ${tpl.color.accent})` }} />
                  <div className="mock-line med" />
                  <div className="mock-line" />
                  <div className="mock-btn" style={{ background: tpl.color.accent }} />
                </div>
                <div className="demos-premium-name" style={{ color: tpl.color.dark }}>
                  <span className="demos-premium-eyebrow" style={{ color: tpl.color.accent }}>{tpl.eyebrow}</span>
                  <span className="demos-premium-jp" style={{ fontSize: 18 }}>{tpl.name}</span>
                </div>
              </div>

              <div className="demos-premium-body">
                <p className="demos-premium-catch">{tpl.catch}</p>
                <p className="demos-premium-desc">{tpl.description}</p>

                <div className="demos-premium-tags">
                  {tpl.industries.map((ind) => (
                    <span key={ind} className="demos-industry-tag">{ind}</span>
                  ))}
                </div>

                <a
                  href={tpl.demoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                  style={{ width: '100%', marginTop: 18 }}
                >
                  デモを見る <IconArrow size={16} />
                </a>
              </div>
            </div>
          ))}
        </div>

        <p className="demos-simple-foot reveal">
          シンプル EC サイト は<strong>商品 30 種類まで</strong>・本格LP枠から 4 枚消化（商品ページ + チェックアウト + 商品管理 + 注文管理）<br />
          <small>※ カート・お客様情報・注文管理を一体化したセット。バリエーション（色・サイズ）は無制限</small>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { DemosHero, DemosSimpleLP, DemosPremiumLP, DemosECTemplates, DemosFinalCTA });