/* global React, ReactDOM */

const SUBNAV = [
  { en: "DIAGNOSTIC", ja: "診断コンテンツ", href: "#top", active: true },
  { en: "FEATURES",   ja: "サービスの特徴", href: "#features" },
  { en: "CASES",      ja: "事例紹介",       href: "#cases" },
  { en: "BENEFITS",   ja: "メリット",       href: "#benefits" },
  { en: "PROCESS",    ja: "ご依頼の流れ",   href: "#process" },
  { en: "FAQ",        ja: "よくあるご質問", href: "#faq" },
];

function Header() {
  return (
    <header className="site-header">
      <div className="inner">
        <a href="index.html" className="logo" aria-label="CATORCE"><img src="assets/catorce-logo.png" alt="CATORCE" /></a>
        <nav className="nav">
          <div className="nav-svc"><a href="local-meeting-ai.html" className="nav-svc-trigger has-sub">サービス</a><div className="nav-svc-menu" role="menu"><div className="menu-label">SERVICE</div><a href="local-meeting-ai.html" className="nav-svc-item" role="menuitem"><span className="nt">ローカルAI議事録</span><span className="nd">クラウドに出せない会議を端末内で議事録化</span></a><a href="ai-level-check.html" className="nav-svc-item" role="menuitem"><span className="nt">生成AI活用レベル診断</span><span className="nd">10問で個人と組織の現在地がわかる無料診断</span></a></div></div>
          <a href="training-lp.html">AI研修</a>
          <a href="development-cases.html">AI開発事例</a>
          <a href="ai-advisor.html">AI顧問</a>
          <a href="knowledge.html">AI記事</a>
          <a href="news.html">お知らせ</a>
          <a href="company-outline.html">会社概要</a>
          <a href="recruit/index.html" target="_blank" rel="noopener">採用サイト</a>
          <a href="contact.html" className="nav-cta" style={{ color: "#fff" }}>お問い合わせ <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

function SubNav() {
  return (
    <nav className="subnav">
      <div className="inner">
        {SUBNAV.map((s, i) => (
          <a key={i} href={s.href} className={s.active ? "active" : ""}>
            <span className="en">{s.en}</span>
            <span className="ja">{s.ja}</span>
          </a>
        ))}
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="shindan-hero" id="top">
      <div className="wrap">
        <div className="crumb">
          <a href="index.html">HOME</a><span style={{opacity:0.5}}>／</span>
          <a href="index.html#services">SERVICES</a><span style={{opacity:0.5}}>／</span>
          <a href="marketing.html">SALES & MARKETING</a><span style={{opacity:0.5}}>／</span>
          <span>DIAGNOSTIC CONTENT</span>
        </div>
        <div className="layout">
          <div>
            <div className="eyebrow"><span className="line"></span>SERVICE 01 / DIAGNOSTIC CONTENT</div>
            <h1>「診断」で、<br/>顧客が<em>自分から動きたくなる</em><br/>マーケティングへ。</h1>
            <p className="lede">
              数問の質問に答えるだけで、訪問者一人ひとりに最適化された提案やコンテンツを返す
              「診断コンテンツ」。問い合わせフォームの離脱を防ぎ、SNSでの拡散・話題化につなげ、
              さらに回答データから顧客理解を深めて商品開発・マーケに還元します。
            </p>
            <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
              <a className="btn btn-primary" href="contact.html">無料で相談する <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="#cases">事例を見る <span className="arr">↓</span></a>
            </div>
          </div>
          <div className="visual">
            <div className="mock-diag">
              <div className="hdr"><h5>あなたの収納タイプ診断</h5><div className="step">Q.3 / 5</div></div>
              <div className="q">普段、よく使うアイテムは どこに置いておきたいですか？</div>
              <div className="opts">
                <div className="opt"><span className="dot"></span>すぐ手の届くオープン棚</div>
                <div className="opt sel"><span className="dot"></span>取り出しやすい引き出しの中</div>
                <div className="opt"><span className="dot"></span>扉付きで隠せる収納</div>
                <div className="opt"><span className="dot"></span>使う場所ごとに分散</div>
              </div>
              <div className="progress"><div></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const ISSUES = [
  { n: "01", h: "新しいマーケティング手法を探している", p: "従来の広告・LP最適化に頭打ちを感じており、エンゲージメントを高める新しい打ち手が欲しい。" },
  { n: "02", h: "面白いコンテンツでSNSでの拡散・認知を広げたい", p: "「自分の結果をシェアしたくなる」体験で、自然な拡散・口コミ・指名検索を増やしたい。" },
  { n: "03", h: "ユーザーの回答データを商品開発に活かしたい", p: "顧客が何に悩み、何を求めているかを定量で把握し、商品開発やコンテンツ企画に還元したい。" },
  { n: "04", h: "商品の売上を向上させたい", p: "個別最適なレコメンドで、検討中ユーザーの背中を押し、購入率・問い合わせ率を高めたい。" },
  { n: "05", h: "サイトの訪問者数・回遊率を増やしたい", p: "SEO・SNS流入の入口として機能する話題性のあるコンテンツで、サイト全体の指標を底上げしたい。" },
  { n: "06", h: "広告出稿の効果を最大化したい", p: "広告クリエイティブと連動した診断LPで、CPAを下げ、ROASを最大化したい。" },
  { n: "07", h: "ユーザーとのエンゲージメントを高めたい", p: "一方通行の情報発信ではなく、対話型の体験でブランド・サービスへの好意を醸成したい。" },
  { n: "08", h: "リード獲得単価を下げたい", p: "フォーム離脱を防ぎ、診断完了をフックにメール獲得・LINE登録までスムーズに繋げたい。" },
];

function Issues() {
  return (
    <section className="s-issues">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em', color:'var(--teal-deep)'}}>
            ISSUES
          </div>
          <h2>こんな課題、<em>ありませんか？</em></h2>
          <p style={{color:'var(--ink-2)', fontSize:14, lineHeight:1.9}}>
            ひとつでも当てはまる場合、診断コンテンツによる解決の余地があります。
          </p>
        </div>
        <div className="grid">
          {ISSUES.map((it, i) => (
            <div className="issue-card" key={i}>
              <div className="num">{it.n}</div>
              <div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  { num:"01", icon:"PANORAMA\nTOUR", h:"パノラマツアー連携", p:"自社開発のパノラマツアーと診断結果を連動。住宅・店舗・施設など空間ビジネスで、診断結果に応じた事例パノラマを表示し、検討の解像度を一気に引き上げます。" },
  { num:"02", icon:"SNS\nDIFFUSION", h:"SNS拡散の設計まで一気通貫", p:"SNSのトレンドに精通したチームが、診断結果のシェアUI・OGP設計・バイラル導線を設計。話題化・指名検索増・新規顧客獲得まで運用ベースで支援します。" },
  { num:"03", icon:"SYSTEM\nINTEGRATION", h:"基幹システム連携", p:"社内の見積／管理システム、CRM、ショールーム予約、ECなど、既存システムへの結果連携を実装。診断完了が即・営業オペレーションに繋がる設計です。" },
  { num:"04", icon:"FULL\nSTACK", h:"効果の最大化を一貫支援", p:"企画・設計・診断ロジック・ライティング・デザイン・実装・運用改善まで、ワンチームで一気通貫対応。施策のスピードと再現性を最大化します。" },
];

function Features() {
  return (
    <section className="s-features" id="features">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em', color:'var(--orange)'}}>
            4 PILLARS
          </div>
          <h2>サービス4つの特徴</h2>
          <p style={{color:'var(--ink-2)', fontSize:14, lineHeight:1.9}}>
            企画・拡散・連携・改善 — 診断コンテンツを「作って終わり」にしない、運用伴走型のサービス設計です。
          </p>
        </div>
        <div className="feat-grid">
          {FEATURES.map((f, i) => (
            <div className="feat-pillar" key={i}>
              <div className="icon">
                <span className="num">{f.num}</span>
                {f.icon.split("\n").map((l, j) => <div key={j}>{l}</div>)}
              </div>
              <div>
                <h4>{f.h}</h4>
                <p>{f.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Cases() {
  return (
    <section className="s-cases" id="cases">
      <div className="wrap">
        <div className="head">
          <div>
            <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em', color:'var(--teal-deep)'}}>
              CASE STUDY
            </div>
            <h2>事例紹介</h2>
          </div>
          <p>
            住宅・インテリア領域のオウンドメディアでの診断コンテンツ制作実績。
            ユーザーが「自分の結果」をシェアしたくなる仕掛けで、SNS拡散と指名検索を獲得しました。
          </p>
        </div>

        <div className="case-card">
          <div className="info">
            <div className="tag">CASE 01 / 住宅・インテリア領域</div>
            <h3>住宅・インテリアのオウンドメディア「RE（アールイー）」<br/>収納タイプ診断コンテンツ</h3>
            <p>
              簡単な質問に答えるだけで、ユーザー一人ひとりの「収納タイプ」を診断。
              結果は7タイプに分類され、タイプの特徴・おすすめの収納方法・関連事例が
              パーソナライズされて表示されます。バーチャルルームと連動し、
              実際の収納のヒントを視覚的に確認できる体験を提供。
            </p>
            <ul>
              <li>7タイプ分類のロジック設計と結果コンテンツの執筆</li>
              <li>バーチャルルーム（パノラマ）と診断結果の連動</li>
              <li>SNSシェアUI・OGP設計でバイラル化</li>
              <li>収納商材ECへの送客導線まで一気通貫設計</li>
            </ul>
            <a className="btn btn-ghost" href="https://r-e.jp/tool" target="_blank" rel="noopener">
              実際の診断を見る <span className="arr">↗</span>
            </a>
          </div>
          <div className="visual">
            <div className="placeholder">
              CASE VISUAL<br/>
              <b>収納タイプ診断 / RE</b>
            </div>
            <div className="url">r-e.jp/tool</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const BENEFITS = [
  { n:"01", stat:"3.2", unit:"x", h:"CVRの向上",        p:"通常LPに比べ、診断完了後の問い合わせ・申込CVRが平均3.2倍に。" },
  { n:"02", stat:"1/3", unit:"",  h:"獲得単価の圧縮",   p:"診断フォーマットによる離脱抑制で、リード獲得単価を約1/3に。" },
  { n:"03", stat:"42",  unit:"%", h:"SNSシェア率",      p:"結果シェア導線の設計で、診断完了者の42%が結果をSNSへ拡散。" },
  { n:"04", stat:"5",   unit:"分", h:"完了までの時間",  p:"平均5分で完了する設計。離脱せず最後まで回答してもらえます。" },
  { n:"05", stat:"7",   unit:"日", h:"最短スタート",    p:"既存テンプレートをベースに、最短7日でローンチ可能です。" },
  { n:"06", stat:"100", unit:"%", h:"スマホ最適化",     p:"スマホ完結。タップ操作のみで完了する負担の少ない体験。" },
  { n:"07", stat:"全",  unit:"",  h:"主要CRM連携",     p:"HubSpot／Salesforce／kintone／Mautic などへの結果連携が標準。" },
  { n:"08", stat:"∞",   unit:"",  h:"継続改善",         p:"質問・結果・導線をA/Bテストで継続改善し、月次で指標を伸ばします。" },
];

function Benefits() {
  return (
    <section className="s-benefits" id="benefits">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em'}}>
            BENEFITS
          </div>
          <h2>診断コンテンツの<em>メリット</em></h2>
          <p className="sub">
            計測されたKPIを見ると、診断コンテンツがもたらす効果は明確です。
          </p>
        </div>
        <div className="grid">
          {BENEFITS.map((b, i) => (
            <div className="benefit" key={i}>
              <div className="num">BENEFIT {b.n}</div>
              <div className="stat">{b.stat}<span>{b.unit}</span></div>
              <h4>{b.h}</h4>
              <p>{b.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const PROCESS = [
  { n:"STEP 01", ic:"INQUIRY",  h:"お問い合わせ",   p:"まずはお気軽にご相談ください。サービス資料もお送りします。" },
  { n:"STEP 02", ic:"HEARING",  h:"ヒアリング",     p:"目的・KPI・既存システム・ターゲットなど、要件を整理します。" },
  { n:"STEP 03", ic:"PROPOSAL", h:"企画・お見積り", p:"診断コンセプト・質問構成・結果ロジックの企画をご提案。" },
  { n:"STEP 04", ic:"DESIGN",   h:"設計・制作",     p:"UI/UXデザイン、結果コンテンツ執筆、システム連携を実装。" },
  { n:"STEP 05", ic:"LAUNCH",   h:"公開・運用",     p:"テスト後にリリース。SNS連携・広告連動も含めて運用開始。" },
  { n:"STEP 06", ic:"IMPROVE",  h:"効果測定・改善", p:"月次でKPIモニタリング、A/Bテストで継続的にCVRを改善。" },
];

function Process() {
  return (
    <section className="s-process" id="process">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em', color:'var(--teal-deep)'}}>
            PROCESS
          </div>
          <h2>ご依頼の流れ</h2>
          <p style={{color:'var(--ink-2)', fontSize:14, lineHeight:1.9}}>
            お問い合わせから公開・改善まで、最短でリリースを目指す6ステップ。
          </p>
        </div>
        <div className="steps">
          {PROCESS.map((s, i) => (
            <div className="p-step" key={i}>
              <div className="n">{s.n}</div>
              <div className="ic">{s.ic}</div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQ = [
  { q:"診断コンテンツの制作期間はどのくらいですか？", a:"既存テンプレートをベースに最短7日、フルスクラッチでも約4〜8週間が目安です。要件によって前後しますので、お気軽にご相談ください。" },
  { q:"質問数や結果パターンは何問・何タイプまで対応可能ですか？", a:"質問数は5〜20問、結果は2〜16タイプまで柔軟に対応可能です。設計時に最適なバランスをご提案します。" },
  { q:"既存のCRM／MAツールと連携できますか？", a:"HubSpot・Salesforce・kintone・Mautic など主要ツールへの連携実績があります。診断完了と同時にリードがCRMへ登録され、即フォロー体制を構築できます。" },
  { q:"自社の見積システム・ECシステムと連携可能ですか？", a:"はい。API連携を前提に設計しますので、社内見積／ショールーム予約／EC／会員管理など、既存システムへの結果連携も対応可能です。" },
  { q:"SNSでの拡散も支援してもらえますか？", a:"診断結果のシェアUI・OGP設計はもちろん、SNSキャンペーン企画・広告運用までワンストップでご支援可能です。" },
  { q:"公開後の運用や改善も依頼できますか？", a:"はい。月次でのKPIモニタリング、A/Bテストによる質問・結果ページの改善など、運用伴走型のプランをご用意しています。" },
];

function Faq() {
  return (
    <section className="s-faq" id="faq">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow" style={{fontSize:12, fontWeight:800, letterSpacing:'.18em', color:'var(--orange)'}}>
            FAQ
          </div>
          <h2>よくあるご質問</h2>
        </div>
        <div className="list">
          {FAQ.map((f, i) => (
            <div className="faq-item" key={i}>
              <div className="q"><span className="mark">Q</span><span>{f.q}</span></div>
              <div className="a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta-band">
      <div className="wrap grid">
        <div>
          <div className="eyebrow">FREE CONSULTATION</div>
          <h2>診断コンテンツで、<br/>マーケを次のステージへ。</h2>
          <p>無料相談では、貴社のターゲット・既存KPIをもとに、最適な診断コンセプトをその場でご提案します。</p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="contact.html" style={{background:"var(--orange)", color:"var(--ink)"}}>
              お問い合わせ <span className="arr" style={{background:"var(--ink)", color:"#fff"}}>→</span>
            </a>
            <a className="btn btn-ghost" href="marketing.html" style={{background:"transparent", color:"#fff", borderColor:"rgba(255,255,255,0.4)"}}>
              <span className="arr">←</span> マーケティングTOPへ
            </a>
          </div>
        </div>
        <div className="cta-card">
          <div className="label">CONTACT MENU</div>
          <div className="item"><div className="ic">💬</div><div><h5>無料相談（45分・オンライン）</h5><p>診断コンセプトの整理</p></div></div>
          <div className="item"><div className="ic o">📄</div><div><h5>サービス資料ダウンロード</h5><p>診断コンテンツ事例集</p></div></div>
          <div className="item"><div className="ic">🎯</div><div><h5>診断UI サンプル体験</h5><p>実際の診断UIをデモ環境で体験</p></div></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="top">
          <div className="brand">
            <div className="logo"><img src="assets/catorce-logo-white.png" alt="CATORCE" /></div>
            <p>株式会社カトルセ<br/>生成AIを業務に溶け込ませる、研修・開発・顧問のプロフェッショナルチーム。</p>
          </div>
          <div><h5>SERVICES</h5><ul><li><a href="training-lp.html">生成AI研修</a></li><li><a href="index.html#services">生成AI開発</a></li><li><a href="index.html#services">AI顧問</a></li><li><a href="ai-level-check.html">生成AI活用レベル診断</a></li><li><a href="marketing.html">営業・マーケティング</a></li></ul></div>
          <div><h5>KNOWLEDGE</h5><ul><li><a href="index.html#hub">AIニュース解説</a></li><li><a href="index.html#hub">使ってみた</a></li><li><a href="index.html#hub">専門家解説</a></li><li><a href="knowledge-ai-glossary.html">AI用語集</a></li></ul></div>
          <div><h5>COMPANY</h5><ul><li><a href="company-outline.html">会社概要</a></li><li><a href="contact.html">お問い合わせ</a></li></ul></div>
        </div>
        <div className="bottom">
          <div>© 2026 CATORCE Inc. All rights reserved.</div>
          <div className="links"><a href="#">プライバシーポリシー</a><a href="#">利用規約</a></div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Header />
      <SubNav />
      <Hero />
      <Issues />
      <Features />
      <Cases />
      <Benefits />
      <Process />
      <Faq />
      <CTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);