// Top-level page sections for Mirais LP
// Sections: Header, Hero, Persona, Features, How, Pricing, Voices, FAQ, Blog, FinalCTA, Footer

const { useState, useEffect, useRef } = React;

/* ============================================
   3 サイト連携 URL（環境別に切替可能）
   本番切替時は index.html の window.MIRAIS_URLS で上書き
   ============================================ */
const URLS = (typeof window !== 'undefined' && window.MIRAIS_URLS) || {
  app: 'https://app-mirais.com',                   // Mirais 本体（アプリ）2026/5/23 staging → 本番
  lp:  'https://lp.app-mirais.com',                // LP プロ（LP制作ツール）2026/5/23 prod → 本番ドメイン
  web: 'https://mirais-style.com',                  // 集客サイト（このサイト）
};

// ご紹介コードを localStorage から取得して URL に付ける（紐付け維持）
function withRef(baseUrl) {
  try {
    const raw = typeof window !== 'undefined' ? localStorage.getItem('mirais_ref') : null;
    if (!raw) return baseUrl;
    const s = JSON.parse(raw);
    if (!s?.code) return baseUrl;
    const sep = baseUrl.includes('?') ? '&' : '?';
    return `${baseUrl}${sep}ref=${encodeURIComponent(s.code)}`;
  } catch { return baseUrl; }
}

const onboardingUrl = withRef(`${URLS.app}/welcome`);
const loginUrl      = withRef(`${URLS.app}/?login=1`);
const lpDemoUrl     = '/demos.html';   // 集客サイト内のデモ一覧ページ
const contactUrl    = `${URLS.app}/contact`;
const referralUrl   = '/referral.html';   // ご紹介プログラム説明ページ
// 2026/5/20 仕様「LPのリンク動かない・全てのリンクが入っていないとリリースできない」
//   ヘッダー/フッターの #features 等のアンカーは「トップページ内アンカー」なので
//   他ページ（demos.html / referral.html）から押しても動かない問題があった。
//   絶対パスに変えて「トップに飛んでアンカーへ」動作にする。
//
//   2026/5/20 夜 仕様「一度公開して確認・後で COMING SOON に戻す」
//   index.html を preview.html の内容に置き換えたため、TOP_URL を '/' に切り替え。
//   COMING SOON に戻す時はこの値を '/preview.html' に戻し、index.html も元に戻す。
//   2026/5/20 夜・確認完了 → COMING SOON に戻したため TOP_URL も /preview.html に復元
const TOP_URL       = '/preview.html';

/* ============================================
   Reveal hook — fades elements in on scroll
   ============================================ */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-visible");
            io.unobserve(e.target);
          }
        });
      },
      { rootMargin: "0px 0px -10% 0px", threshold: 0.05 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ============================================
   useHashScroll
   ============================================
   2026/5/20 仕様変更「LP/ブログのヘッダー『料金/機能/FAQ』を押してもトップに戻るだけ」
   原因：React + Babel Standalone はレンダリングに 1-2 秒かかる。
         ブラウザのハッシュスクロールは「page load 直後」に動くため、その時点では
         React が <section id="features"> 等をまだ DOM に作っていない → スクロール不発。
   解決：React レンダリング完了後に window.location.hash を読んで自分でスクロール。
*/
function useHashScroll() {
  useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.substring(1);
    if (!id) return;
    // レンダリングと画像ロード後に確実にスクロールするため少し待つ
    let attempts = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
        return;
      }
      attempts++;
      if (attempts < 20) setTimeout(tryScroll, 150);
    };
    setTimeout(tryScroll, 100);
  }, []);
}

/* ============================================
   Logo
   ============================================ */
const Logo = ({ className = "" }) => (
  <a href="/" className={`logo ${className}`}>
    <span className="logo-mark">
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M3 16V6l4 6 4-6v10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="16.5" cy="7" r="2" fill="currentColor" />
      </svg>
    </span>
    Mirais
  </a>
);

/* ============================================
   Header
   ============================================ */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav">
        <Logo />
        <ul className="nav-links">
          <li><a href={`${TOP_URL}#features`}>機能</a></li>
          <li><a href={lpDemoUrl}>LP 例</a></li>
          <li><a href={`${TOP_URL}#pricing`}>料金</a></li>
          <li><a href="/blog.html">ブログ</a></li>
          {/* 2026/5/19 仕様再確認「ヘッダーに『ご紹介』はNG・フッター品位の正解」
              memory: feedback_partner_program_subtle_placement.md
              ヘッダーから『ご紹介』を削除（フッターには残す） */}
          <li><a href={`${TOP_URL}#faq`}>よくある質問</a></li>
        </ul>
        <div className="nav-cta">
          <a href={loginUrl} className="nav-login">ログイン</a>
          <a href="/signup.html" className="btn btn-primary btn-nav">はじめる</a>
          <button className="menu-toggle btn-ghost btn-nav" onClick={() => setOpen(!open)} aria-label="メニュー">
            <IconMenu size={20} />
          </button>
        </div>
      </div>
    </header>
  );
}

/* ============================================
   Hero
   ============================================ */
function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="hero-grain" />
      </div>
      <div className="container hero-inner">
        <div className="hero-copy reveal">
          <span className="eyebrow">AIと、自分の言葉で</span>
          <h1 className="h-display">
            発信が苦手でも、<br />
            <span className="accent">自分の言葉</span>で<br />
            届けられる。
          </h1>
          <p className="hero-sub">
            SNSの投稿、ランディングページ、LINE公式アカウント。<br />
            一人でこなしていた発信を、AIがそっと支えます。<br />
            ITが苦手でも大丈夫。あなたのペースで、はじめましょう。
          </p>
          <div className="hero-cta">
            <a href="/signup.html" className="btn btn-primary btn-lg">
              スタートダッシュではじめる
              <IconArrow size={18} />
            </a>
            <a href={lpDemoUrl} className="btn btn-ghost btn-lg">
              <IconPlay size={16} />
              LP デモを見る
            </a>
          </div>
          <div className="hero-trust">
            <span>7 日間 / 20 回まで 無料お試し</span>
            <span className="trust-divider" />
            <span>カード登録なし</span>
            <span className="trust-divider" />
            <span>いつでも解約OK</span>
          </div>
        </div>

        <div className="hero-art reveal">
          <div className="hero-art-blob" />
          {/* Card: SNS */}
          <div className="hero-art-card card-sns">
            <div className="mock-row" style={{ marginBottom: 14 }}>
              <span className="mock-tag">SNS投稿AI</span>
            </div>
            <div className="mock-line full" style={{ marginBottom: 8 }} />
            <div className="mock-line med" style={{ marginBottom: 8 }} />
            <div className="mock-line short gold" />
          </div>
          {/* Card: LP */}
          <div className="hero-art-card card-lp">
            <div className="mock-row" style={{ marginBottom: 12 }}>
              <span className="mock-tag" style={{ background: "var(--color-secondary-light)", color: "var(--color-secondary)" }}>LP</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
              <div style={{ height: 36, background: "linear-gradient(135deg, #FFFEF7, #F5EBC4)", borderRadius: 6 }} />
              <div style={{ height: 36, background: "linear-gradient(135deg, #F0F4F8, #D6E0EC)", borderRadius: 6 }} />
              <div style={{ height: 36, background: "linear-gradient(135deg, #FDF5F3, #F2CFC8)", borderRadius: 6 }} />
              <div style={{ height: 36, background: "linear-gradient(135deg, #1A1A1A, #3A3026)", borderRadius: 6 }} />
            </div>
          </div>
          {/* Card: LINE */}
          <div className="hero-art-card card-line">
            <div className="mock-row" style={{ marginBottom: 12 }}>
              <div className="mock-avatar" />
              <div style={{ flex: 1 }}>
                <div className="mock-line med" style={{ marginBottom: 6 }} />
                <div className="mock-line short" />
              </div>
              <span className="mock-tag line">LINE</span>
            </div>
            <div className="mock-bubble">こんにちは、ご予約承りました。</div>
            <div style={{ height: 8 }} />
            <div className="mock-typing">
              <span /><span /><span />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Persona / Pain points
   ============================================ */
function Persona() {
  const pains = [
    { quote: "投稿のネタが浮かばない。書いても“宣伝っぽく”なってしまう。", who: "サロンオーナー / 52歳" },
    { quote: "LP制作を頼むと10万円以上。自分で作ろうにも難しすぎる。", who: "ヨガインストラクター / 47歳" },
    { quote: "LINEの返信が追いつかない。でも個別の対応はやめたくない。", who: "個人事業主 / 58歳" },
  ];
  return (
    <section className="section persona">
      <div className="container persona-inner">
        <span className="eyebrow" style={{ color: "var(--color-primary-soft)" }}>こんなお悩み、ありませんか？</span>
        <h2 className="h-display reveal" style={{ marginTop: 24 }}>
          「発信」って、<br />
          <span className="accent">こんなに大変だっけ？</span>
        </h2>
        <p className="persona-sub reveal">
          一人で全部こなしていると、つい後回しになる発信業務。<br />
          時間も体力も、限られています。
        </p>

        <div className="pain-grid">
          {pains.map((p, i) => (
            <div key={i} className="pain-card reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <p className="pain-quote">{p.quote}</p>
              <div className="pain-meta">
                <div className="pain-avatar" />
                <span>{p.who}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Features
   ============================================ */
function Features() {
  return (
    <section id="features" className="section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">3つの機能、ひとつのMirais</span>
          <h2 className="h1">発信業務の“全部”を、<br />一つにまとめました。</h2>
          <p>SNS、LP、LINE。バラバラに使っていたツールを、AIがやさしくつないでくれます。</p>
        </div>

        <div className="features-grid" style={{ marginTop: 80 }}>
          {/* Feature 1: SNS */}
          <div className="feature-row reveal">
            <div className="feature-copy">
              <div className="feature-num"><strong>01</strong> SNS POSTING</div>
              <h2 className="h1">あなたらしい投稿を、<br />AIと一緒に書く。</h2>
              <p>
                「今日のレッスンのこと、書きたいな」と話しかけるだけ。
                AIがあなたの言葉づかいを覚えて、Instagram・X・Facebookそれぞれに合った投稿に整えます。
                宣伝っぽさはゼロ。お客様の心に届く、温かい文章が生まれます。
              </p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={18} stroke={2} />キーワードを伝えるだけで複数案を生成</li>
                <li><IconCheckCircle size={18} stroke={2} />SNSごとの最適な文字数・形式に自動調整</li>
                <li><IconCheckCircle size={18} stroke={2} />ハッシュタグの提案・予約投稿にも対応</li>
              </ul>
            </div>
            <div className="feature-visual">
              <div className="sns-mock">
                <div className="sns-prompt">
                  今日のヨガレッスン、初参加のお客様が3人。緊張されていたけど終わるころには笑顔に。
                </div>
                <div className="sns-output">
                  <div className="sns-line med" />
                  <div className="sns-line" />
                  <div className="sns-line short" />
                  <div className="sns-tags">
                    <span className="sns-tag">#ヨガ</span>
                    <span className="sns-tag">#初心者歓迎</span>
                    <span className="sns-tag">#今日のレッスン</span>
                  </div>
                </div>
                <div className="sns-platforms">
                  <div className="sns-platform"><IconInstagram size={16} />Instagram</div>
                  <div className="sns-platform"><IconX size={14} />X (Twitter)</div>
                  <div className="sns-platform"><IconFacebook size={16} />Facebook</div>
                </div>
              </div>
            </div>
          </div>

          {/* Feature 2: LP */}
          <div className="feature-row reverse reveal">
            <div className="feature-copy">
              <div className="feature-num"><strong>02</strong> LP BUILDER</div>
              <h2 className="h1">あなたの“想い”を、<br />一枚のページに。</h2>
              <p>
                サービスの想いや特徴を伝えるだけで、AI が構成・コピー・デザインを提案。
                「朱印」「桜衣」「白磁」「エトワール」など、和洋幅広いテンプレートから
                雰囲気を選ぶだけで、外注しなくても、本格的なランディングページがすぐに完成します。
              </p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={18} stroke={2} />和・洋・モダンの幅広いテンプレートでブランドに合わせて</li>
                <li><IconCheckCircle size={18} stroke={2} />スマホ表示も自動で美しく</li>
                <li><IconCheckCircle size={18} stroke={2} />独自ドメインのお預かりにも対応（+¥500/月）</li>
              </ul>
            </div>
            <div className="feature-visual">
              <div className="lp-stack">
                <a href="/demos.html" className="lp-preset lp-pearl" style={{
                  backgroundImage: `url(${URLS.lp}/demos/images/shuin/director_speaking.png)`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center top',
                  textDecoration: 'none',
                }}>
                  <div className="lp-preset-name">朱印</div>
                </a>
                <a href="/demos.html" className="lp-preset lp-ocean" style={{
                  backgroundImage: `url(${URLS.lp}/demos/images/sakuragoromo/founder1.png)`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center top',
                  textDecoration: 'none',
                }}>
                  <div className="lp-preset-name">桜衣</div>
                </a>
                <a href="/demos.html" className="lp-preset lp-noir" style={{
                  backgroundImage: `url(${URLS.lp}/demos/images/hakuji/founder_portrait.png)`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center top',
                  textDecoration: 'none',
                }}>
                  <div className="lp-preset-name">白磁</div>
                </a>
                <div className="lp-preset lp-linen" style={{
                  backgroundImage: 'url(https://images.unsplash.com/photo-1518611012118-696072aa579a?w=600&q=80)',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}>
                  <div className="lp-preset-name">エトワール <span style={{ fontSize: 9, fontWeight: 400, opacity: 0.7 }}>準備中</span></div>
                </div>
                <div className="lp-preset lp-rose" style={{
                  backgroundImage: 'url(https://images.unsplash.com/photo-1452860606245-08befc0ff44b?w=600&q=80)',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}>
                  <div className="lp-preset-name">無頼 <span style={{ fontSize: 9, fontWeight: 400, opacity: 0.7 }}>準備中</span></div>
                </div>
                <div className="lp-preset lp-wa" style={{
                  backgroundImage: 'url(https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=600&q=80)',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}>
                  <div className="lp-preset-name">ミニマル <span style={{ fontSize: 9, fontWeight: 400, opacity: 0.7 }}>準備中</span></div>
                </div>
              </div>
            </div>
          </div>

          {/* Feature 3: LINE */}
          <div className="feature-row reveal">
            <div className="feature-copy">
              <div className="feature-num"><strong>03</strong> LINE OFFICIAL <span className="feature-coming">順次リリース予定</span></div>
              <h2 className="h1">LINEの返信、<br />“あなたらしさ”を残したまま。</h2>
              <p>
                よく聞かれる質問への返信は、AIが下書きを用意。
                予約や問い合わせも自動でさばきつつ、最後の一言はあなたの言葉で。
                個別対応の温かさを失わずに、運用がぐっと楽になります。
              </p>
              <ul className="feature-bullets">
                <li><IconCheckCircle size={18} stroke={2} />FAQの自動応答テンプレートを学習</li>
                <li><IconCheckCircle size={18} stroke={2} />配信メッセージもAIが下書き</li>
                <li><IconCheckCircle size={18} stroke={2} />タグ・セグメント配信にも対応</li>
              </ul>
            </div>
            <div className="feature-visual">
              <div className="line-mock">
                <div className="line-bubble">
                  <small>お客様</small>
                  来週の土曜、空いてますか？
                </div>
                <div className="line-bubble user">
                  <small>あなた</small>
                  土曜は10時と15時にお席ご用意できます。
                </div>
                <div className="line-bubble ai">
                  <small style={{ color: "var(--color-primary)" }}>Mirais AI 下書き</small>
                  ありがとうございます！来週土曜は…
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   How It Works
   ============================================ */
function HowItWorks() {
  const steps = [
    {
      n: "01", title: "話しかける",
      body: "「今日のレッスンのこと、投稿したい」と話しかけるだけ。難しい設定はいりません。",
      svg: (
        <svg viewBox="0 0 64 64" fill="none" stroke="var(--color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 18h36a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H32l-10 8v-8H14a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4z" />
          <line x1="20" y1="28" x2="44" y2="28" opacity="0.5" />
          <line x1="20" y1="34" x2="38" y2="34" opacity="0.5" />
        </svg>
      ),
    },
    {
      n: "02", title: "選ぶ・整える",
      body: "AIが3つの案を提案します。気に入ったものを選んで、少しだけ手直しを。",
      svg: (
        <svg viewBox="0 0 64 64" fill="none" stroke="var(--color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="12" y="14" width="40" height="14" rx="2" />
          <rect x="12" y="32" width="40" height="14" rx="2" />
          <polyline points="20,21 24,25 32,17" />
          <line x1="20" y1="39" x2="40" y2="39" opacity="0.5" />
          <line x1="14" y1="52" x2="50" y2="52" opacity="0.3" />
        </svg>
      ),
    },
    {
      n: "03", title: "届ける",
      body: "投稿、配信、公開。すべてMiraisから。お客様への“最初の一歩”が動き出します。",
      svg: (
        <svg viewBox="0 0 64 64" fill="none" stroke="var(--color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M52 12 L12 28 L26 34 L32 52 L52 12 Z" />
          <line x1="26" y1="34" x2="38" y2="22" opacity="0.5" />
        </svg>
      ),
    },
  ];
  return (
    <section id="how" className="section how">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">3ステップで、はじめられる</span>
          <h2 className="h1">難しい操作は、ありません。</h2>
          <p>パソコンが苦手でも、スマホひとつで使えます。お電話でのサポートもご用意しています。</p>
        </div>
        <div className="how-steps">
          {steps.map((s, i) => (
            <div key={s.n} className="step reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="step-num">{s.n}</div>
              <h3 className="h3">{s.title}</h3>
              <p>{s.body}</p>
              <div className="step-illustration" style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "16px 0", height: 88 }}>
                <div style={{ width: 72, height: 72 }}>{s.svg}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Pricing — Standard only + start dash campaign
   ============================================ */
function Pricing() {
  return (
    <section id="pricing" className="section">
      <div className="container container-narrow">
        <div className="section-head reveal">
          <span className="eyebrow">START DASH キャンペーン実施中</span>
          <h2 className="h1">シンプルな、ひとつのプラン。</h2>
          <p>使う方も、選ぶ方も、迷わない。<br />Miraisの想いを詰め込んだ、たったひとつのスタンダードプランです。</p>
        </div>

        <div className="pricing-single reveal">
          <div className="pricing-single-inner">
            <div className="pricing-left">
              <div className="campaign-tag">
                <span className="campaign-dot"></span>
                7月末まで・スタートダッシュキャンペーン実施中
              </div>
              <h3 className="plan-name-lg">Standard プラン</h3>
              <p className="plan-tag" style={{ marginBottom: 32 }}>個人事業主・インストラクター・サロン運営の方へ</p>

              <div className="price-hero">
                <div className="price-hero-original">
                  <span className="price-hero-orig-label">通常価格</span>
                  <span className="price-hero-orig-amount">¥4,480<span>/月</span></span>
                </div>
                <div className="price-hero-arrow">
                  <svg width="40" height="20" viewBox="0 0 40 20" fill="none">
                    <path d="M2 10h34m0 0l-7-7m7 7l-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span className="price-hero-arrow-label">キャンペーン適用で</span>
                </div>
                <div className="price-hero-discounted">
                  <span className="price-hero-disc-label">2ヶ月目以降ずっと</span>
                  <div className="price-hero-disc-amount">
                    <span className="amount-num">¥3,480</span>
                    <span className="amount-unit">/月</span>
                  </div>
                  <span className="price-hero-savings-badge">毎月1,000円おトク</span>
                </div>
              </div>

              <div className="price-firstmonth-banner">
                <div className="firstmonth-icon">
                  <IconSparkle size={20} stroke={2} />
                </div>
                <div className="firstmonth-text">
                  <strong>初月はさらに半額</strong>
                  <span>1ヶ月目だけ、特別価格 <b>¥2,240</b>（通常の半額）でお試しいただけます</span>
                </div>
              </div>

              <div className="price-howitworks">
                <div className="howit-row">
                  <span className="howit-step">1ヶ月目</span>
                  <span className="howit-arrow">→</span>
                  <span className="howit-price">¥2,240</span>
                  <span className="howit-note">初月限定の半額</span>
                </div>
                <div className="howit-row highlight">
                  <span className="howit-step">2ヶ月目〜</span>
                  <span className="howit-arrow">→</span>
                  <span className="howit-price">¥3,480</span>
                  <span className="howit-note">解約するまでずっと</span>
                </div>
                <div className="howit-row faded">
                  <span className="howit-step">通常</span>
                  <span className="howit-arrow">→</span>
                  <span className="howit-price"><s>¥4,480</s></span>
                  <span className="howit-note">キャンペーン対象外</span>
                </div>
              </div>
            </div>

            <div className="pricing-right">
              <h4 className="plan-features-title">プランに含まれるもの</h4>
              <ul className="plan-features">
                <li><IconCheck size={18} stroke={2.4} /><span><strong>SNS投稿AI</strong>：月 200 回・何度でも下書きを生成</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span>Instagram・X・Facebook 各SNS最適化</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span>過去の投稿からあなたの言葉づかいを学習</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span><strong>ミライ秘書</strong>：月 100 対話・日々の業務をやさしくサポート</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span><strong>LP 作成機能</strong>：シンプル LP 5枚 + 本格 LP・EC など 5枚<br /><small style={{ color: '#999' }}>※ 簡易EC は本格 LP 枠から 4枚消化</small></span></li>
                <li><IconCheck size={18} stroke={2.4} /><span><strong>プロフィールページ</strong>・<strong>リンクページ</strong></span></li>
                <li><IconCheck size={18} stroke={2.4} /><span><strong>メモ・記録</strong>：無制限</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span>独自ドメインお預かり（アドオン +¥500/月）</span></li>
                <li><IconCheck size={18} stroke={2.4} /><span>メール・チャットサポート</span></li>
                <li className="upcoming">
                  <span className="upcoming-icon"><IconSparkle size={16} stroke={2} /></span>
                  <span><strong>LP 用画像生成</strong>（順次リリース予定）<br /><small>同じ料金で、リリース後すぐにご利用いただけます</small></span>
                </li>
                <li className="upcoming">
                  <span className="upcoming-icon"><IconSparkle size={16} stroke={2} /></span>
                  <span><strong>LINE 公式アカウント連携</strong>（順次リリース予定）<br /><small>外部拡張機能とともにアップデート</small></span>
                </li>
                <li className="upcoming">
                  <span className="upcoming-icon"><IconSparkle size={16} stroke={2} /></span>
                  <span><strong>シンプル EC サイト ショップ</strong>（順次リリース予定）<br /><small>商品 30 個まで・カート・注文管理を一体化（本格 EC ではありません）</small></span>
                </li>
              </ul>

              <a href="/signup.html" className="btn btn-primary btn-lg" style={{ width: "100%", marginTop: 28 }}>
                スタートダッシュではじめる
                <IconArrow size={18} />
              </a>
              <p className="trial-note">
                <IconShield size={14} stroke={2} />
                初月半額 ¥2,240・最低利用期間なし・いつでも解約OK
              </p>
              <p style={{ marginTop: 12, padding: '10px 14px', background: '#FFF8E7', border: '1px solid #F5D77E', borderRadius: 8, fontSize: 12, color: '#5C4A00', lineHeight: 1.7, textAlign: 'center' }}>
                ✨ <strong>7 日間 / 20 回まで無料お試し</strong><br />
                クレジットカード登録不要・気に入ったらお申込みください
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Campaigns ── 対外公開 LP への動線（紹介専用 LP は載せない）
   ============================================ */
function Campaigns() {
  useReveal();
  // 対外公開する LP のみ掲載。紹介専用 LP は載せない
  const campaigns = [
    {
      lbl: 'CAMPAIGN',
      tag: '期間限定',
      title: 'スタートダッシュキャンペーン',
      body: '初月半額 ¥2,240。Mirais をはじめての方の最初の一歩を応援します。',
      href: '/lp_startdash.html',
      cover: 'https://images.unsplash.com/photo-1490818387583-1baba5e638af?w=900&q=80',
      cta: 'スタートダッシュ詳細',
    },
  ];
  return (
    <section id="campaigns" className="section" style={{ background: '#FAFAF7' }}>
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: 'center', marginBottom: 36 }}>
          <span className="eyebrow">Special Plans</span>
          <h2 className="h1" style={{ marginTop: 16 }}>今、はじめる方への<br/>特別なご案内。</h2>
          <p style={{ marginTop: 14, color: '#666', fontSize: 14, lineHeight: 1.95 }}>
            Mirais を最初に手に取ってくださる方への、限定プランをご用意しました。
          </p>
        </div>
        <div className="campaigns-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 20,
        }}>
          {campaigns.map((c, i) => (
            <a key={i} href={c.href} className="campaign-card reveal" style={{
              display: 'flex', flexDirection: 'column',
              background: '#FFF', borderRadius: 12,
              overflow: 'hidden', textDecoration: 'none',
              border: '1px solid rgba(201,169,106,0.18)',
              transition: 'all .25s ease',
              transitionDelay: `${i * 0.08}s`,
              color: 'inherit',
            }}>
              <div style={{
                height: 180,
                background: `linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url(${c.cover}) center/cover`,
                position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', top: 14, right: 14,
                  background: 'rgba(255,255,255,0.92)', color: '#8B6F35',
                  padding: '4px 12px', borderRadius: 999,
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                }}>{c.tag}</span>
              </div>
              <div style={{ padding: '22px 24px 24px' }}>
                <div style={{
                  fontSize: 10, color: '#8B6F35',
                  letterSpacing: '0.4em', fontFamily: "'Italiana', serif",
                  marginBottom: 8,
                }}>{c.lbl}</div>
                <h3 style={{
                  fontSize: 19, fontWeight: 600, color: '#1A1410',
                  marginBottom: 10, lineHeight: 1.6,
                  fontFamily: "'Shippori Mincho B1','Noto Serif JP',serif",
                }}>{c.title}</h3>
                <p style={{ fontSize: 13.5, color: '#5A5450', lineHeight: 1.95, marginBottom: 16 }}>{c.body}</p>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 13, fontWeight: 500, color: '#1A1410',
                  borderBottom: '1px solid #C9A96A', paddingBottom: 2,
                }}>{c.cta} →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Referral ── ご紹介プログラムへの導線
   ============================================ */
function Referral() {
  useReveal();
  return (
    <section id="referral-promo" className="section" style={{
      background: 'linear-gradient(135deg, #FFFCF5 0%, #FAF3E0 100%)',
    }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 760 }}>
        <span className="eyebrow reveal">Referral Program</span>
        <h2 className="h1 reveal" style={{ marginTop: 16 }}>
          Mirais のことを<br/>大切な方にお伝えくださる方へ。
        </h2>
        <p className="reveal" style={{ marginTop: 18, color: '#5A5450', fontSize: 14.5, lineHeight: 2.0 }}>
          ご紹介いただいた方が Mirais をご契約されたとき、<br/>
          毎月のご契約額の <strong style={{ color: '#8B6F35' }}>15%</strong> を、御礼として還元しています。
        </p>
        <div className="reveal" style={{ marginTop: 28 }}>
          <a href={referralUrl} className="btn btn-primary btn-lg">
            ご紹介プログラムの詳細を見る →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Voices
   ============================================ */
function Voices() {
  // Mirais クレドの 5 ペルソナに沿った「想定されるお声」
  const voices = [
    {
      // ペルソナ①：発信が続かない人
      quote: "ブログも SNS も、ネタが浮かばなくて続かなかった。インタビューで自分の言葉を整理してもらってから、毎日の投稿が苦じゃなくなりました。",
      name: "M さん", role: "整体院オーナー", initial: "M",
    },
    {
      // ペルソナ②：Web ページがうまく作れない人
      quote: "他のツールで作った Web サイトは、なんとなく自分の世界観が出ない。Mirais の本格 LP は、最低限の入力で、ちゃんと「らしさ」が出ました。",
      name: "K さん", role: "カウンセラー", initial: "K",
    },
    {
      // ペルソナ⑤：「ごちゃごちゃ事業者」
      quote: "LP・LINE・メール・会員管理…ツールが点在して頭がパンクしていました。Mirais 一つにまとめてから、お客様への対応がぐっと丁寧になりました。",
      name: "S さん", role: "起業塾主宰", initial: "S",
    },
  ];
  return (
    <section id="voices" className="section voices">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">お客さまの声</span>
          <h2 className="h1">Mirais を使うと、<br />こんなふうに変わります。</h2>
        </div>
        <div className="voices-grid">
          {voices.map((v, i) => (
            <div key={i} className="voice reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <p className="voice-quote">{v.quote}</p>
              <div className="voice-author">
                <div className="voice-avatar">{v.initial}</div>
                <div>
                  <div className="voice-name">{v.name}</div>
                  <div className="voice-role">{v.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   FAQ
   ============================================ */
function FAQ() {
  const items = [
    { q: "パソコンが苦手でも使えますか？", a: "はい、大丈夫です。スマートフォンひとつで、お話しするように操作できます。電話・メールでのサポートもご用意していますので、わからないことがあればいつでもお問い合わせください。" },
    { q: "AIが書いた投稿、本当に“自分らしさ”が出るんですか？", a: "Miraisは、あなたの過去の投稿や言葉づかいを学習します。最初の数回は少し調整が必要ですが、使ううちに、まるであなた本人が書いたような文章になっていきます。" },
    { q: "解約はいつでもできますか？", a: "はい、いつでも解約可能です。最低利用期間や違約金はありません。スタートダッシュキャンペーンご利用の場合も、いつでも解約OK・追加費用はかかりません。" },
    { q: "作ったLPはMiraisを解約しても残りますか？", a: "LP のデータはお客様のものです。解約時にはエクスポートして他のサービスでもご利用いただけます。データのポータビリティを大切にしています。" },
    { q: "LINE公式アカウントは別に契約が必要ですか？", a: "LINE公式アカウントの開設はLINE社で行っていただく必要があります（無料プランあり）。Miraisは、開設済みのアカウントと連携してご利用いただけます。連携の手順もガイドでサポートします。" },
    { q: "個人情報やお客様データは安全ですか？", a: "国内法に準拠した管理体制で運用しています。SSL通信・データ暗号化・定期バックアップを実施し、第三者への提供は一切行いません。詳細はプライバシーポリシーをご覧ください。" },
  ];
  const [openSet, setOpenSet] = useState(new Set([0]));
  const toggle = (i) => {
    setOpenSet((prev) => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i);
      else next.add(i);
      return next;
    });
  };
  return (
    <section id="faq" className="section">
      <div className="container container-narrow">
        <div className="section-head reveal">
          <span className="eyebrow">よくあるご質問</span>
          <h2 className="h1">気になることは、<br />ここで解決。</h2>
        </div>
        <div className="faq-list">
          {items.map((item, i) => (
            // 2026/5/20 仕様変更「Q を押したら読む暇もなく消える」バグ修正
            //   .reveal クラスを React の className に混ぜると、setState 再レンダリング時に
            //   useReveal が classList.add で付けた .is-visible が上書きで消える → opacity 0 に戻る。
            //   .reveal を削除して回避（FAQ にはフェードイン演出を使わない）
            <div key={i} className={`faq-item ${openSet.has(i) ? "is-open" : ""}`}>
              <button className="faq-q" onClick={() => toggle(i)} aria-expanded={openSet.has(i)}>
                <span className="faq-q-icon">Q</span>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-toggle"><IconPlus size={16} stroke={2.4} /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{item.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Blog
   ============================================ */
function Blog() {
  const posts = [
    {
      cat: "お仕事の整え方", date: "2026.05.17",
      title: "領収書、ためこんでいませんか。",
      slug: "receipt-organize",
      author: "黒田",
      color: "linear-gradient(135deg, #F0E8E5, #B89888)",
      image: "https://images.unsplash.com/photo-1554224155-1696413565d3?w=900&q=80",
    },
    {
      cat: "Mirais について", date: "2026.05.16",
      title: "Mirais の想い",
      slug: "mirais-omoi",
      author: "桜井",
      color: "linear-gradient(135deg, #EBE3D6, #C9A96E)",
      image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=900&q=80",
    },
    {
      cat: "ホームページの基本", date: "2026.05.16",
      title: "URL の鍵マーク、ついていますか。",
      slug: "https-key",
      author: "風間",
      color: "linear-gradient(135deg, #DDE5F0, #8DA8C8)",
      image: "https://images.unsplash.com/photo-1614064548237-096f735f344f?w=900&q=80",
    },
  ];
  return (
    <section id="blog" className="section" style={{ background: "#FFF" }}>
      <div className="container">
        <div className="section-head reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", textAlign: "left", marginBottom: 0 }}>
          <div>
            <span className="eyebrow">Mirais Journal</span>
            {/* 2026/5/20 仕様「中の人の声って？ Mirais 公式ブログでは？」 */}
            <h2 className="h1" style={{ marginTop: 18 }}>Mirais 公式ブログ</h2>
            <p style={{ marginTop: 10, fontSize: 15, color: '#666', lineHeight: 1.85 }}>
              ちょっと学べるブログを、毎日配信しています。
            </p>
          </div>
          <a href="/blog.html" className="btn btn-ghost" style={{ minHeight: 48 }}>
            すべての記事を見る →
          </a>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a href={`/blog/${p.slug}.html`} key={i} className="blog-card reveal" style={{ transitionDelay: `${i * 0.08}s`, textDecoration: 'none' }}>
              <div className="blog-cover" style={{
                background: p.color,
                backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 100%), url(${p.image})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }} />
              <div className="blog-meta">
                <span className="blog-cat">{p.cat}</span>
                <span>{p.date}</span>
              </div>
              <h3 className="blog-title">{p.title}</h3>
              <small style={{ display: 'block', marginTop: 8, fontSize: 11, color: '#8B6F35' }}>Mirais チーム ／ {p.author}</small>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Final CTA
   ============================================ */
function FinalCTA() {
  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 />
          “自分の言葉”で届けよう。
        </h2>
        <p className="reveal">
          スタートダッシュキャンペーン実施中。<br />
          初月半額 ¥2,240・2ヶ月目以降 ¥3,480／月。最低利用期間なし、いつでも解約OK。
        </p>
        <div className="final-cta-buttons reveal">
          <a href="/signup.html" className="btn btn-primary btn-lg">
            はじめる <IconArrow size={18} />
          </a>
          <a href={lpDemoUrl} className="btn btn-ghost btn-lg">
            LP デモを見る
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Footer
   ============================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <Logo className="footer-logo" />
            <p className="footer-tagline">
              発信が苦手な人でも、AIと一緒なら自分の言葉で届けられる。
            </p>
          </div>
          <div className="footer-col">
            <h4>製品・サービス</h4>
            <ul>
              <li><a href={`${TOP_URL}#features`}>機能紹介</a></li>
              <li><a href={lpDemoUrl}>LP デモを見る</a></li>
              <li><a href={`${TOP_URL}#pricing`}>料金プラン</a></li>
              <li><a href={`${TOP_URL}#how`}>使い方</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>学ぶ・つながる</h4>
            <ul>
              <li><a href="/blog.html">ブログ</a></li>
              <li><a href={`${TOP_URL}#voices`}>お客様の声</a></li>
              <li><a href={`${TOP_URL}#faq`}>よくある質問</a></li>
            </ul>
            {/* 2026/5/20 仕様「紹介プログラム入口を少なくして欲しいのに2箇所もある」
                メインフッターから削除・サブフッター（紺色・統一フッター）のみに集約 */}
          </div>
          <div className="footer-col">
            <h4>運営・サポート</h4>
            <ul>
              <li><a href={loginUrl}>ログイン</a></li>
              <li><a href="/signup.html">はじめる</a></li>
              <li><a href="mailto:support@app-mirais.com">お問い合わせ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Mirais. All rights reserved.</span>
          <span>Made with care in Japan</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  useReveal, useHashScroll, Header, Hero, Persona, Features, HowItWorks,
  Pricing, Campaigns, Referral, Voices, FAQ, Blog, FinalCTA, Footer, Logo,
});