// Merged variant — Hero from A, everything else from B
// Keeps single artboard / full page layout (not on canvas)

const Merged = () => (
  <div style={{ background: "#fff" }}>
    <Nav />

    {/* ============ A: Hero ============ */}
    <section style={{ padding: "80px 0 64px", background: "linear-gradient(180deg, #fff 0%, var(--paper) 100%)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 56, alignItems: "center" }}>
        <div>
          <span className="eyebrow">AI HR ANALYTICS</span>
          <h1 style={{ fontSize: "clamp(36px, 4.6vw, 56px)", marginTop: 16, fontWeight: 800 }}>
            「優秀さ」を、<br />コードに変える。
          </h1>
          <p style={{ marginTop: 20, fontSize: 17, color: "var(--ink-3)", maxWidth: 480 }}>
            日々の日報を AI が解析し、従業員のスキルをコード化・スコア化。
            組織の強みと弱み、離職予兆まで、データで可視化する人材分析プラットフォーム。
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
            <a href="/register" className="btn btn-primary btn-lg">無料で始める</a>
            <a href="mailto:support@trustcode.jp?subject=%E8%B3%87%E6%96%99%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AE%E3%81%94%E4%BE%9D%E9%A0%BC" className="btn btn-ghost btn-lg">資料ダウンロード</a>
          </div>
          <div style={{ display: "flex", gap: 24, marginTop: 28, fontSize: 13, color: "var(--ink-3)", flexWrap: "wrap" }}>
            <span>✓ 最低10名から</span>
            <span>✓ 既存CRM連携</span>
            <span>✓ 30日無料トライアル</span>
          </div>
        </div>
        <div>
          <Browser height={420}><AppMock /></Browser>
        </div>
      </div>
    </section>

    {/* ============ B: About (narrative) ============ */}
    <section id="about" className="section section--paper">
      <div className="container" style={{ maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
        <span className="eyebrow">trustcode とは</span>
        <h2 style={{ fontSize: "clamp(28px, 3.6vw, 44px)", marginTop: 16 }}>
          人の力を、誤魔化さず計る。
        </h2>
        <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-3)", lineHeight: 1.9 }}>
          人事評価は、長らく「面談」と「成果指標」に頼ってきた。<br />
          しかし日々の仕事の質、その積み重ねこそが、本当の実力だ。<br />
          trustcode は日報をAIで解析し、スキルを<b style={{ color: "var(--ink)" }}>code（コード）</b>として抽出。<br />
          組織のあらゆる「優秀さ」に、再現可能な根拠を与える。
        </p>
      </div>
    </section>

    {/* ============ B: Before / After splitscreen ============ */}
    <section id="value" style={{ padding: 0 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 560 }}>
        <div style={{ background: "var(--paper)", padding: "72px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="pill" style={{ alignSelf: "flex-start", marginBottom: 16 }}>BEFORE</div>
          <h3 style={{ fontSize: 32, color: "var(--ink-3)", marginBottom: 24, fontWeight: 700 }}>勘で人を、見ていた。</h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 18 }}>
            {[
              ["優秀さが言語化できない", "“なんとなく頼れる人”止まり"],
              ["評価のばらつき", "上司ごとに基準が違う"],
              ["離職の前触れが見えない", "退職届で初めて気づく"],
              ["コーチングが属人的", "再現も横展開もできない"],
            ].map(([t, d], i) => (
              <li key={i} style={{ borderLeft: "2px solid var(--ink-4)", paddingLeft: 16 }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink-2)" }}>{t}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{d}</div>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ background: "var(--ink)", color: "#E2E8F0", padding: "72px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="pill pill-green" style={{ alignSelf: "flex-start", marginBottom: 16 }}>AFTER trustcode</div>
          <h3 style={{ fontSize: 32, color: "#fff", marginBottom: 24, fontWeight: 700 }}>データで、人を活かす。</h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 18 }}>
            {[
              ["スキルがコードで見える", "誰の何が強いか、可視化"],
              ["AIがフラットに評価", "全社で評価基準が揃う"],
              ["退職予兆を早期検知", "離脱前にフォロー可能"],
              ["コーチングがスケール", "AIが一人ひとりに最適化"],
            ].map(([t, d], i) => (
              <li key={i} style={{ borderLeft: "2px solid var(--code)", paddingLeft: 16 }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: "#fff" }}>{t}</div>
                <div style={{ fontSize: 13, color: "#94A3B8", marginTop: 2 }}>{d}</div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>

    {/* ============ B: Features zigzag ============ */}
    <section id="features" className="section">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", marginInline: "auto" }}>
          <span className="eyebrow">FEATURES</span>
          <h2>機能</h2>
        </div>
        {[
          {
            n: "01", cat: "INPUT", t: "日々の活動が、データになる。",
            d: "手動の日報入力に加え、CRMやSlackと連携して活動ログから日報を自動生成。書くストレスなく、データが貯まる。",
            bullets: ["日報の登録（手動／連携）", "AI日報生成（CRM連携）"],
          },
          {
            n: "02", cat: "ANALYZE", t: "AIが、スキルを抽出する。",
            d: "LLMが日報の文脈を読み解き、200種以上のスキルタグから該当を抽出。根拠付きで毎日スコアリングし、推移を残す。",
            bullets: ["従業員のスキル判定", "毎日のスコアリング（根拠付き）"],
          },
          {
            n: "03", cat: "ORGANIZE", t: "組織のスキル分布が、わかる。",
            d: "全社・部門単位でスキルマップを生成。「何が強くて何が足りないか」が俯瞰でき、採用や配置の意思決定に直結する。",
            bullets: ["スキルサマリー（組織俯瞰）"],
          },
          {
            n: "04", cat: "SUPPORT", t: "育成と離脱防止を、自動で。",
            d: "メンバーごとに最適なコーチング内容をAIが提案。日報の変化から退職予兆を検知し、マネージャーに早期通知。",
            bullets: ["AIコーチング", "退職予兆アラート"],
          },
        ].map((f, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 56, alignItems: "center",
            padding: "48px 0",
            borderTop: i > 0 ? "1px solid var(--line-2)" : "none",
          }}>
            <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                <span style={{ fontSize: 56, fontWeight: 800, color: "var(--code)", lineHeight: 1 }}>{f.n}</span>
                <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", color: "var(--ink-3)" }}>{f.cat}</span>
              </div>
              <h3 style={{ fontSize: 28 }}>{f.t}</h3>
              <p style={{ marginTop: 14, fontSize: 15, color: "var(--ink-3)" }}>{f.d}</p>
              <ul style={{ listStyle: "none", padding: 0, marginTop: 20, display: "grid", gap: 8 }}>
                {f.bullets.map((b, j) => (
                  <li key={j} style={{ fontSize: 14, display: "flex", gap: 8 }}>
                    <span style={{ color: "var(--code)" }}>●</span>{b}
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ order: i % 2 === 0 ? 2 : 1 }}>
              <div className="placeholder" style={{ aspectRatio: "4/3" }}>機能 {f.n} のキャプチャ／図解</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* ============ B: Use cases ============ */}
    <section id="usecase" className="section section--paper">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">USE CASES</span>
          <h2>こんなシーンで、効く。</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { tag: "経営会議", t: "今期の組織は強くなったのか？", d: "全社スキル分布の推移を3ヶ月単位でレビュー。事業計画の前提を、感覚から数値へ。", who: "経営・人事" },
            { tag: "1on1直前", t: "部下の何を話せばいいか", d: "メンバー別レポートとAIコーチング提案で、5分で1on1の準備が完了。", who: "マネージャー" },
            { tag: "退職予兆検知", t: "辞める前に、気づけたら", d: "日報トーンの変化、スキルスコアの停滞をAIが検知し、マネージャーに通知。", who: "マネージャー" },
            { tag: "採用ターゲット設計", t: "次に必要なのは誰か", d: "組織に足りないスキルが見えるから、採用要件が言語化できる。", who: "人事・採用" },
            { tag: "セルフ成長", t: "今日の自分はどれくらい伸びた？", d: "日報を書くだけでスキルレポートとAIフィードバックが返る。", who: "現場メンバー" },
            { tag: "新人立ち上がり", t: "オンボーディングを定量化", d: "想定スキル習得カーブとの差分を可視化。早期の打ち手につながる。", who: "マネージャー" },
          ].map((c, i) => (
            <div key={i} style={{ padding: 24, background: "#fff", borderRadius: 12, border: "1px solid var(--line-2)" }}>
              <div className="pill pill-blue" style={{ marginBottom: 14 }}>{c.tag}</div>
              <h4 style={{ fontSize: 17, marginBottom: 8 }}>{c.t}</h4>
              <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.65 }}>{c.d}</p>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px dashed var(--line-2)", fontSize: 11, color: "var(--ink-4)" }}>
                対象: {c.who}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ============ B: Pricing comparison table ============ */}
    <section id="price" className="section">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", marginInline: "auto" }}>
          <span className="eyebrow">PRICING</span>
          <h2>料金</h2>
          <p style={{ margin: "16px auto 0" }}>すべてのプラン、30日無料トライアル付き。月額・税抜・ユーザー単価。</p>
        </div>
        <PricingTable />
      </div>
    </section>

    {/* ============ Final CTA ============ */}
    <section style={{ padding: "100px 0", background: "var(--ink)", color: "#fff", textAlign: "center" }}>
      <div className="container">
        <h2 style={{ color: "#fff", fontSize: "clamp(32px, 4vw, 48px)" }}>
          まずは、自社の<span style={{ color: "var(--code)" }}>スキルコード</span>を見てみよう。
        </h2>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 32 }}>
          <a href="/register" className="btn btn-primary btn-lg">新規登録</a>
          <a href="/login" className="btn btn-ghost btn-lg" style={{ color: "#fff", borderColor: "#1E293B" }}>ログイン</a>
        </div>
      </div>
    </section>

    <Footer />
  </div>
);

window.Merged = Merged;