// imagery.jsx — image sources, persona/stats/consultant/workflow components

// Unsplash photo IDs (stable, hot-linkable, royalty-free)
// Format: const PHOTO = id; usage: u(PHOTO, 800)
const u = (id, w = 800, h) => {
  const base = `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=80`;
  return h ? `${base}&h=${h}` : base;
};

const PHOTOS = {
  // Hero / general business
  heroMain: "photo-1556761175-5973dc0f32e7",       // (unused now — illustration)
  heroSub: "photo-1552581234-26160f608093",        // (unused now — illustration)
  team1: "photo-1497032628192-86f99bcd76bc",       // clean desk objects
  meeting1: "photo-1497032628192-86f99bcd76bc",    // (unused; illustration replaces)
  meeting2: "photo-1497032628192-86f99bcd76bc",    // (unused; illustration replaces)
  handshake: "photo-1497032628192-86f99bcd76bc",
  workshop: "photo-1497032628192-86f99bcd76bc",

  // Industries (all object/scene photos — no foreign-looking people)
  accounting: "photo-1554224155-6726b3ff858f",     // calculator + pen
  accounting2: "photo-1554224154-26032ffc0d07",    // books/binders
  accounting3: "photo-1450101499163-c8848c66ca85", // financial chart

  rental: "photo-1560518883-ce09059eeffa",         // building exterior
  rental2: "photo-1564013799919-ab600027ffc6",     // house keys
  rental3: "photo-1545324418-cc1a3fa10c00",        // apartment buildings

  construction: "photo-1487958449943-2429e8be8625",   // modern architecture
  construction2: "photo-1486406146926-c627a92ad1ab",  // building exterior
  construction3: "photo-1581094794329-c8112a89af12",  // construction site (objects)

  // Care — use object/environment photos only
  care: "photo-1576091160550-2173dba999ef",        // hospital interior corridor
  care2: "photo-1584515933487-779824d29309",       // medical/care workspace
  care3: "photo-1505751172876-fa1923c5c528",       // documents/planning

  web: "photo-1460925895917-afdab827c52f",         // analytics dashboard
  web2: "photo-1517694712202-14dd9538aa97",        // code editor screen
  web3: "photo-1499951360447-b19be8fe80f5",        // flat lay workspace

  workspace: "photo-1497032628192-86f99bcd76bc",
};

// Sized helpers
const Img = (id, w = 1200, h) => u(id, w, h);

// ==========================================================
// Persona section — geometric business role pictograms (no faces)
// ==========================================================
function PersonaSection() {
  const items = [
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="4" y="8" width="16" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.6" />
          <path d="M9 8V6a1.5 1.5 0 011.5-1.5h3A1.5 1.5 0 0115 6v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <path d="M4 13h16" stroke="currentColor" strokeWidth="1.6" />
        </svg>
      ),
      tone: "ink",
      tag: "経営者",
      quote: "AIを使いたいが、社内で進められる人がいない。",
      attr: "従業員数 30〜100名規模 / 代表取締役",
      check: "AI業務再設計パッケージをチームで伴走します"
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="5" width="18" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.6" />
          <path d="M8 21h8M12 17v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <circle cx="12" cy="11" r="2" stroke="currentColor" strokeWidth="1.6" />
          <path d="M15.5 14.5l1.8 1.8M8.5 14.5l-1.8 1.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
      ),
      tone: "blue",
      tag: "情シス・推進担当",
      quote: "AIツール導入は済んだが、現場で使われていない。",
      attr: "情報システム / DX推進担当者",
      check: "業務AI化スターターで現場展開を支援"
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="6" r="2.4" stroke="currentColor" strokeWidth="1.6" />
          <circle cx="5" cy="14" r="2.4" stroke="currentColor" strokeWidth="1.6" />
          <circle cx="19" cy="14" r="2.4" stroke="currentColor" strokeWidth="1.6" />
          <path d="M12 8.5v4M10 13l-3 0.5M14 13l3 0.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      ),
      tone: "green",
      tag: "事業部マネージャ",
      quote: "業務改善のアイデアはあるが、実行する人がいない。",
      attr: "事業部長 / 部門マネージャ",
      check: "1業務に絞った業務AI化スターターから開始"
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M5 3h10l4 4v14H5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
          <path d="M15 3v4h4" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
          <path d="M9 14l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
      tone: "purple",
      tag: "経営企画・IT責任者",
      quote: "高額なAI開発の前に、要件を整理しておきたい。",
      attr: "経営企画 / 開発責任者",
      check: "AI顧問ライトで要件定義に進む準備を整えます"
    }
  ];
  return (
    <section className="section" id="persona">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Who it's for</div>
          <h2 className="section-title">こんな課題をお持ちの方に</h2>
          <p className="section-lede">業種・規模・職種を問わず、AI導入を「研修やツール導入で終わらせたくない」企業の方が、私たちの主なお客様です。</p>
        </div>
        <div className="personas">
          {items.map((p, i) => (
            <div className="persona" key={i}>
              <div className={`role-pict role-pict--${p.tone}`}>
                {p.icon}
              </div>
              <span className="persona__tag">{p.tag}</span>
              <p className="persona__quote">「{p.quote}」</p>
              <div className="persona__check">
                <svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8l3.5 3.5L13 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                {p.check}
              </div>
              <div className="persona__attr">想定読者：{p.attr}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Stats section
// ==========================================================
function StatsSection() {
  const stats = [
    { label: "Entry Plan", value: "15", unit: "万円〜 / 月", sub: "AI顧問ライト。月6時間で方向性整理" },
    { label: "Main Plan", value: "60", unit: "万円〜 / 月", sub: "AI業務再設計パッケージ。月20時間で試作・KPI測定まで" },
    { label: "Focus Themes", value: "1–2", unit: "業務", sub: "一気に全業務ではなく、絞って試して成功体験を作る" },
    { label: "Daily Contact", value: "4", unit: "tools", sub: "Slack / Googleチャット / Chatwork / LINE WORKS で日常的に相談" }
  ];
  return (
    <section className="section section--tight bg-dots" id="stats">
      <div className="container">
        <div className="stats">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat__label">{s.label}</div>
              <div className="stat__value">{s.value}<span className="unit">{s.unit}</span></div>
              <div className="stat__sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Comparison: 研修だけ vs 当社
// ==========================================================
function CompareSection() {
  const bad = [
    "全社員向けのAI研修を一斉実施",
    "ツール導入後は現場任せ",
    "成果は『個人の意欲』に依存",
    "業務改善は別プロジェクトで",
    "開発はベンダーに丸投げ",
    "3か月後に利用率が10%以下に戻る"
  ];
  const good = [
    "現場の業務に合わせた1on1育成",
    "Slack / Googleチャット / Chatwork / LINE WORKSで日常伴走",
    "推進者がプロセスとして定着させる",
    "AI活用 = 業務改善として一体化",
    "業務要件を整理してから開発判断",
    "改善が継続的に回り続ける状態へ"
  ];
  return (
    <section className="section section--soft" id="compare">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Our Difference</div>
          <h2 className="section-title">「研修だけのAI導入」と何が違うのか</h2>
          <p className="section-lede">全社員研修と単発のツール導入は、3か月後にほぼ100%元に戻ります。私たちは "進める人と仕組み" を残すアプローチです。</p>
        </div>
        <div className="compare">
          <div className="compare__col compare__col--bad">
            <div className="compare__head">
              <span className="compare__head-tag">よくある進め方</span>
              <h3>AI研修だけで終わるパターン</h3>
            </div>
            <ul className="compare__list">
              {bad.map((t, i) => (
                <li key={i}>
                  <span className="mark">×</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="compare__col compare__col--good">
            <div className="compare__head">
              <span className="compare__head-tag">当社アプローチ</span>
              <h3>AIエージェント・パートナーズ の進め方</h3>
            </div>
            <ul className="compare__list">
              {good.map((t, i) => (
                <li key={i}>
                  <span className="mark">✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Consultant section — role tiles with mini UI mocks (what they actually deliver)
// ==========================================================
function ConsultantSection() {
  const team = [
    {
      mock: <MockStrategy />,
      role: "Lead Consultant",
      name: "業務改善コンサルタント",
      enName: "AI Adoption Lead",
      bio: "現場業務の棚卸し、AI活用テーマの優先順位整理、推進者育成プログラム設計を担当。Obsidian上で業務改善テーマMAPを構築し、定例で進捗管理します。",
      tags: ["業務改善設計", "業務AI化スターター", "AI業務再設計パッケージ"]
    },
    {
      mock: <MockCode />,
      role: "Solutions Engineer",
      name: "AIエンジニア",
      enName: "AI Engineering",
      bio: "Claude Codeで業務アプリ・社内ツールの開発を担当。Google Workspace（Drive / Sheets / Gmail）と連携した業務フローを構築します。",
      tags: ["Claude Code", "Cortex", "業務アプリ開発"]
    },
    {
      mock: <MockKnowledge />,
      role: "Workflow Architect",
      name: "ナレッジアーキテクト",
      enName: "Process Designer",
      bio: "Obsidian / Cortexを活用し、属人化していた業務知識を会社のナレッジ資産に再構成。AIで横断検索できる仕組みとプロンプト集を整備します。",
      tags: ["Obsidian", "ナレッジ整備", "プロンプト設計"]
    }
  ];
  return (
    <section className="section" id="team">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Team</div>
          <h2 className="section-title">担当チーム（想定体制）</h2>
          <p className="section-lede">業務改善コンサルタント、AIエンジニア、ナレッジアーキテクトが連携し、御社のAI推進担当者を支援します。下の図は各メンバーの担当領域のアウトプット例です。</p>
        </div>
        <div className="consultants">
          {team.map((t, i) => (
            <div className="consultant" key={i}>
              <div className="consultant__photo consultant__photo--mock">
                {t.mock}
              </div>
              <div className="consultant__body">
                <div className="consultant__role">{t.role}</div>
                <div className="consultant__name">{t.name}<small>{t.enName}</small></div>
                <p className="consultant__bio">{t.bio}</p>
                <div className="consultant__tags">
                  {t.tags.map(tag => <span className="consultant__tag" key={tag}>{tag}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20, fontSize: 12, color: "var(--muted)", textAlign: "center" }}>
          ※ 上記は担当領域別のアウトプットイメージです。実際のプロジェクト体制は、企業ごとに最適な編成でご提案します。
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Workflow / 業務フローの図解
// ==========================================================
function WorkflowSection() {
  const lanes = [
    {
      icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="3" stroke="currentColor" strokeWidth="1.6"/><path d="M2 14c1-3 4-4 6-4s5 1 6 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
      label: "現場担当者",
      flow: ["顧客対応・現場業務", "→", { ai: false, text: "メモ・記録" }, "→", { ai: true, text: "AIで要約・下書き" }, "→", { ai: false, text: "確認・送信" }]
    },
    {
      icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><path d="M5 7h6M5 10h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
      label: "推進担当者",
      flow: ["業務テーマ設定", "→", { ai: true, text: "AIプロンプト整備" }, "→", { ai: false, text: "現場展開・教育" }, "→", { ai: false, text: "改善測定" }]
    },
    {
      icon: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 13l4-8 3 5 3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
      label: "経営層",
      flow: ["業務改善KPI設定", "→", { ai: false, text: "月次レビュー" }, "→", { ai: false, text: "次テーマ判断" }, "→", { ai: false, text: "開発判断" }]
    }
  ];
  return (
    <section className="section section--soft" id="workflow">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Workflow</div>
          <h2 className="section-title">AI活用が定着する、役割別の業務フロー</h2>
          <p className="section-lede">現場・推進担当・経営の3レイヤーで役割を分け、AIを業務に組み込みます。AIに任せる部分と人が判断する部分を明確に分けるのがポイントです。</p>
        </div>
        <div className="workflow">
          <div className="workflow__lanes">
            {lanes.map((lane, i) => (
              <React.Fragment key={i}>
                <div className="workflow__lane-head">
                  <span className="icon">{lane.icon}</span>
                  {lane.label}
                </div>
                <div className="workflow__lane-row">
                  {lane.flow.map((f, j) => {
                    if (typeof f === "string" && f === "→") {
                      return <span className="workflow__arrow" key={j}>→</span>;
                    }
                    if (typeof f === "string") {
                      return <span className="workflow__chip" key={j}>{f}</span>;
                    }
                    return <span className={`workflow__chip ${f.ai ? "is-ai" : ""}`} key={j}>{f.ai ? "🤖 " : ""}{f.text}</span>;
                  })}
                </div>
              </React.Fragment>
            ))}
          </div>
          <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)", display: "flex", gap: 20, fontSize: 12.5, color: "var(--muted)", flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 12, height: 12, borderRadius: 4, background: "var(--blue-soft)", border: "1px solid var(--blue-line)" }}></span>
              AIが担当する工程
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 12, height: 12, borderRadius: 4, background: "var(--bg-soft)", border: "1px solid var(--line)" }}></span>
              人が判断・実行する工程
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Pull-quote banner — uses Chat UI mock (shows daily 伴走 experience)
// ==========================================================
function BannerQuote() {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="banner-quote banner-quote--mock">
          <div className="banner-quote__photo banner-quote__photo--mock">
            <MockChat />
          </div>
          <div className="banner-quote__body">
            <div className="banner-quote__mark">"</div>
            <p>AIを入れたかったのではなく、業務改善が止まらない状態を作りたかった。AI業務再設計パッケージに進む前に、顧問ライトで方向性を整理できたのがよかったです。</p>
            <div className="banner-quote__attr">想定：建設業 営業企画責任者 / 従業員80名</div>
            <div style={{ marginTop: 16, fontSize: 12, color: "var(--muted)", lineHeight: 1.7 }}>
              Slack / Googleチャット / Chatwork / LINE WORKS のいずれかで、担当コンサルが毎営業日に相談対応。月次MTGの間も改善が止まらない仕組みです。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// CTA mid-page banner — clean dark, no illustration
// ==========================================================
function CTABanner() {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="cta-banner cta-banner--clean">
          <div className="cta-banner__inner">
            <div className="eyebrow" style={{ color: "oklch(85% 0.10 252)" }}>Try It First</div>
            <h3>まずは30分の無料相談から。<br />営業強要はありません。</h3>
            <p>現状の業務課題、AI導入で迷っているポイントを伺い、最短の進め方をその場でご提案します。秘密保持契約（NDA）の事前締結も可能です。</p>
            <a className="btn btn--primary btn--lg" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>
              無料相談を申し込む <ArrowRight />
            </a>
          </div>
          <div className="cta-banner__decor">
            <svg viewBox="0 0 200 200" width="200" height="200">
              <circle cx="100" cy="100" r="80" stroke="oklch(60% 0.18 252 / 0.4)" strokeWidth="1" fill="none" />
              <circle cx="100" cy="100" r="56" stroke="oklch(60% 0.18 252 / 0.5)" strokeWidth="1" fill="none" />
              <circle cx="100" cy="100" r="32" fill="oklch(60% 0.18 252 / 0.15)" stroke="oklch(60% 0.18 252 / 0.6)" strokeWidth="1" />
              <circle cx="100" cy="100" r="6" fill="oklch(85% 0.10 252)" />
              <circle cx="156" cy="56" r="3" fill="oklch(85% 0.10 252)" />
              <circle cx="44" cy="148" r="3" fill="oklch(85% 0.10 252)" />
              <circle cx="172" cy="120" r="2" fill="oklch(85% 0.10 252)" />
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

// ==========================================================
// Scene strip (3 industry-specific scenes)
// ==========================================================
function SceneStrip({ scenes }) {
  return (
    <div className="scene-strip">
      {scenes.map((s, i) => (
        <div key={i} className="scene" style={{ backgroundImage: `url(${Img(s.photo, 600)})` }}>
          <div className="scene__label">
            <small>{s.label}</small>
            {s.title}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  PHOTOS, Img, u,
  PersonaSection, StatsSection, CompareSection, ConsultantSection,
  WorkflowSection, BannerQuote, CTABanner, SceneStrip
});