// shared.jsx — header, footer, pricing, faq, finalcta, hero pieces

const FAQ_ITEMS = [
  {
    q: "月15万円のAI顧問ライトだけでも依頼できますか？",
    a: "はい、可能です。AI活用の方向性整理や、推進担当者との壁打ちから始めたい企業向けです。業務設計・導入を本格的に進める段階になったら、上位プランへの移行をご提案します。"
  },
  {
    q: "社内にエンジニアがいなくても大丈夫ですか？",
    a: "問題ありません。現場業務を理解している非エンジニアの担当者をAI推進者として育成することを重視しています。"
  },
  {
    q: "開発だけ依頼できますか？",
    a: "可能です。ただし、業務要件が不明確な場合は、先にAI業務再設計パッケージまたは業務AI化スターターで要件整理を行うことをおすすめします。"
  },
  {
    q: "Slack や Googleチャット、Chatwork、LINE WORKS で相談できますか？",
    a: "はい。支援期間中の連絡手段は、原則として Slack / Googleチャット / Chatwork / LINE WORKS のいずれかを使用します。御社で既にお使いのツールに合わせます。"
  },
  {
    q: "成果保証はありますか？",
    a: "成果保証は行っていません。ただし、改善対象業務とKPIを設定し、削減時間、対応件数、作業スピード、手戻り削減などの指標をもとに改善効果を可視化します。"
  },
  {
    q: "セキュリティは大丈夫ですか？",
    a: "AI活用における情報の扱い、権限、入力してよい情報・避けるべき情報については、支援内で整理します。高度なセキュリティ診断や監査が必要な場合は、専門会社との連携をおすすめします。"
  }
];

const NAV_INDUSTRY_LINKS = [
  { id: "beauty_clinic", label: "美容クリニック", desc: "問い合わせ・カウンセリング・施術後フォロー" },
  { id: "realestate_investment", label: "不動産投資会社", desc: "案件比較・投資家対応・追客" },
  { id: "recruitment", label: "人材紹介会社", desc: "面談メモ・推薦文・マッチング" },
  { id: "salesrep", label: "売買仲介会社", desc: "Web反響・追客・内見後フォロー" },
  { id: "saas_partner", label: "SaaS販売代理店", desc: "商談メモ・提案文・CS引き継ぎ" },
  { id: "is_company", label: "インサイドセールス会社", desc: "リードスコア・架電メモ・FS引き継ぎ" },
  { id: "sales_outsourcing", label: "営業代行会社", desc: "活動ログ・改善提案・月次報告" },
  { id: "accounting", label: "税理士事務所・会計事務所", desc: "証憑回収・月次報告・インボイス" },
  { id: "seo", label: "SEO会社", desc: "検索意図・E-E-A-T・既存記事改善" },
  { id: "ad_ops", label: "広告運用会社", desc: "媒体横断レポート・改善仮説" },
  { id: "law", label: "弁護士事務所", desc: "相談メモ・時系列化・依頼者対応" },
  { id: "web_studio", label: "Web制作会社", desc: "要件整理・原稿回収・修正指示" },
  { id: "web_ad", label: "Web制作・広告代理店", desc: "提案書・レポート・改善提案" },
  { id: "content_prod", label: "コンテンツ制作会社", desc: "企画・編集・取材メモ・校正" },
  { id: "sns_agency", label: "SNS運用代行会社", desc: "投稿企画・トンマナ・月次レポート" },
  { id: "recruit_outsourcing", label: "採用代行会社", desc: "求人票・スカウト文・面談メモ" },
  { id: "recruit_ad", label: "求人広告代理店", desc: "求人原稿・訴求軸・効果レポート" },
  { id: "haken", label: "派遣会社", desc: "登録者・推薦文・契約更新" },
  { id: "housing", label: "住宅販売会社", desc: "商談メモ・次回提案・施工事例" },
  { id: "rental_mgmt", label: "賃貸管理会社", desc: "問い合わせ分類・修繕・オーナー報告" }
];

const ArrowRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Check = ({ size = 11 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2.5 6.5L5 9l4.5-5.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function Header({ page, navigate }) {
  const [drawer, setDrawer] = React.useState(false);
  React.useEffect(() => { setDrawer(false); }, [page]);
  return (
    <>
      <header className="site-header">
        <div className="site-header__inner">
          <a className="brand" href="#" onClick={(e) => { e.preventDefault(); navigate("top"); }}>
            <span className="brand__mark">AE</span>
            <span className="brand__name">
              AIエージェント・パートナーズ
              <small>AI導入コンサルティング</small>
            </span>
          </a>
          <nav className="nav">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("top"); }} className={`nav__link ${page === "top" ? "is-active" : ""}`}>サービス</a>
            <a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }} className="nav__link">プロセス</a>
            <div className="nav__dropdown">
              <a href="#" onClick={(e) => { e.preventDefault(); navigate("industries"); }} className={`nav__link ${page !== "top" ? "is-active" : ""}`}>業種別事例・ロードマップ ▾</a>
              <div className="nav__dropdown-menu">
                {NAV_INDUSTRY_LINKS.map(l => (
                  <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); navigate(l.id); }} className="nav__dropdown-item">
                    {l.label}
                    <small>{l.desc}</small>
                  </a>
                ))}
                <div style={{ borderTop: "1px solid var(--line)", marginTop: 6, paddingTop: 6 }}>
                  <a href="#" onClick={(e) => { e.preventDefault(); navigate("industries"); }} className="nav__dropdown-item" style={{ color: "var(--blue)", fontWeight: 600 }}>
                    すべての業種を見る（{NAV_INDUSTRY_LINKS.length}業種）→
                  </a>
                </div>
              </div>
            </div>
            <a href="#pricing" onClick={(e) => { e.preventDefault(); navigate(page, "pricing"); }} className="nav__link">料金</a>
            <a href="#faq" onClick={(e) => { e.preventDefault(); navigate(page, "faq"); }} className="nav__link">FAQ</a>
          </nav>
          <a href="#final-cta" onClick={(e) => { e.preventDefault(); navigate(page, "final-cta"); }} className="header-cta">
            無料相談を申し込む <ArrowRight />
          </a>
          <button className="menu-toggle" aria-label="menu" onClick={() => setDrawer(v => !v)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d={drawer ? "M6 6l12 12M6 18L18 6" : "M4 7h16M4 12h16M4 17h16"} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </header>
      {drawer && (
        <div className="nav-drawer is-open">
          <div className="nav-drawer__group">
            <div className="nav-drawer__group-title">Pages</div>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("top"); }} className="nav-drawer__link">トップページ</a>
          </div>
          <div className="nav-drawer__group">
            <div className="nav-drawer__group-title">業種別事例・ロードマップ</div>
            {NAV_INDUSTRY_LINKS.map(l => (
              <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); navigate(l.id); }} className="nav-drawer__link">{l.label}</a>
            ))}
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("industries"); }} className="nav-drawer__link" style={{ color: "var(--blue)", fontWeight: 600 }}>すべての業種を見る →</a>
          </div>
          <div className="nav-drawer__group">
            <div className="nav-drawer__group-title">Contact</div>
            <a href="#final-cta" onClick={(e) => { e.preventDefault(); navigate(page, "final-cta"); }} className="nav-drawer__link" style={{ background: "var(--ink)", color: "white" }}>無料相談を申し込む →</a>
          </div>
        </div>
      )}
    </>
  );
}

function Pricing({ accent = "AI業務再設計パッケージ" }) {
  const rows = [
    { name: "無料相談", tag: "Step 01", price: "無料", hours: "約 30分", desc: "現状確認・サービス説明" },
    { name: "AI顧問ライト", tag: "Step 02", price: "月 15万円〜", hours: "月6時間", desc: "月 2回 MTG、AI利活用相談、簡易プロンプト" },
    { name: "業務AI化スターター", tag: "Step 03", price: "月 30万円〜", hours: "月12時間", desc: "1業務の棚卸し、簡易自動化、推進者研修" },
    { name: "AI業務再設計パッケージ", tag: "Step 04", price: "月 60万円〜", hours: "月20時間", desc: "業務設計・試作・導入・KPI測定" },
    { name: "AI推進責任者代行", tag: "Step 05", price: "月 120万円〜", hours: "月32時間", desc: "複数業務・複数部署にまたがるAI推進をチームとして代行" },
    { name: "AI業務アプリ開発", tag: "Step 06", price: "別見積もり", hours: "案件別", desc: "業務アプリ・AIツール開発" }
  ];
  return (
    <section className="section section--soft" id="pricing">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Pricing</div>
          <h2 className="section-title">月額×月間稼働時間で選ぶ、4プラン＋開発オプション</h2>
          <p className="section-lede">入口は月 15万円（6時間）、主力は AI業務再設計パッケージ（月20時間 / 60万円〜）。月間稼働時間 × 月額のシンプルな料金で、必要なフェーズだけ進められます。</p>
        </div>
        <div className="pricing">
          {rows.map((r, i) => (
            <div key={r.name} className={`pricing__row ${r.name === accent ? "is-entry" : ""}`}>
              <div className="pricing__name">
                <small>{r.tag} · {r.hours}</small>
                {r.name}
              </div>
              <div className="pricing__price">{r.price}</div>
              <div className="pricing__desc">{r.desc}</div>
              <a href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth", block: "start" }); }} className="pricing__cta">
                {r.name === "無料相談" ? "無料で相談する" : "相談する"} →
              </a>
            </div>
          ))}
        </div>
        <p className="pricing__note">
          記載の金額は税別・月額です。月間稼働時間は目安であり、業務内容・支援範囲・開発規模により変動します。AI業務アプリ開発は別途要件定義・お見積もりのうえ対応します。
        </p>
      </div>
    </section>
  );
}

function FAQ({ items = FAQ_ITEMS }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container container--narrow">
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow">FAQ</div>
          <h2 className="section-title">よくあるご質問</h2>
          <p className="section-lede">導入前によく寄せられるご質問にお答えします。ここに無いご質問は、無料相談にてお気軽にお問い合わせください。</p>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq__item ${open === i ? "is-open" : ""}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq__q-marker">Q</span>
                <span>{it.q}</span>
                <span className="faq__q-toggle">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="faq__a">
                <span className="faq__a-marker">A</span>
                <span>{it.a}</span>
                <span></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section" id="final-cta">
      <div className="container">
        <div className="final-cta">
          <div className="final-cta__inner">
            <div className="eyebrow" style={{ color: "oklch(85% 0.10 252)" }}>Get Started</div>
            <h2 style={{ marginTop: 14 }}>AI導入を、研修だけで終わらせない。</h2>
            <p>
              AI導入で本当に必要なのは、ツールを入れることではありません。<br />
              社内でAIを使って業務改善を進められる人と、改善を継続できる仕組みを作ることです。
              <br /><br />
              いきなり高額な開発を行う必要はありません。まずは月15万円から、AI活用の相談役を社外に置き、自社の業務にAIをどう使うべきか整理するところから始めてください。
            </p>
            <div className="final-cta__ctas">
              <a className="btn btn--primary btn--lg" href="#">無料相談を申し込む <ArrowRight /></a>
              <a className="btn btn--ghost btn--lg" href="#">AI業務再設計パッケージについて相談する <ArrowRight /></a>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 24, flexWrap: "wrap", fontSize: 12.5, color: "oklch(70% 0.01 255)" }}>
              <span>✓ 無料相談 約30分</span>
              <span>✓ オンライン対応</span>
              <span>✓ 営業強要なし</span>
              <span>✓ 秘密保持契約締結可</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__col">
            <div className="brand" style={{ marginBottom: 8 }}>
              <span className="brand__mark">AE</span>
              <span className="brand__name">
                AIエージェント・パートナーズ
                <small>AI導入コンサルティング</small>
              </span>
            </div>
            <p className="footer__about">
              AI研修で終わらせず、社内で業務改善が進む状態を作る。社内AI推進者の育成から、業務改善、AI業務アプリ開発まで伴走支援します。
            </p>
            <div className="footer__company">
              <div>運営：<strong>株式会社アソシエーションオフィス</strong></div>
              <div>〒110-0012 東京都台東区竜泉1-28-6 501</div>
              <div>TEL：03-6820-6847（平日 9:00〜19:00）</div>
              <div>Email：<a href="mailto:pake@a-off.com">pake@a-off.com</a></div>
            </div>
          </div>
          <div className="footer__col">
            <h5>Service</h5>
            <ul>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>無料相談</a></li>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>AI顧問ライト</a></li>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>業務AI化スターター</a></li>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>AI業務再設計パッケージ</a></li>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>AI推進責任者代行</a></li>
              <li><a href="#service" onClick={(e) => { e.preventDefault(); navigate("top", "service"); }}>AI業務アプリ開発</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Industries</h5>
            <ul>
              {NAV_INDUSTRY_LINKS.map(l => (
                <li key={l.id}><a href="#" onClick={(e) => { e.preventDefault(); navigate(l.id); }}>{l.label}</a></li>
              ))}
              <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("industries"); }} style={{ color: "var(--blue)", fontWeight: 600 }}>すべての業種を見る →</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Resources</h5>
            <ul>
              <li><a href="#pricing" onClick={(e) => { e.preventDefault(); navigate("top", "pricing"); }}>料金</a></li>
              <li><a href="#faq" onClick={(e) => { e.preventDefault(); navigate("top", "faq"); }}>よくある質問</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("about"); }}>会社概要</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("privacy"); }}>プライバシーポリシー</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("legal"); }}>特定商取引法</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 株式会社アソシエーションオフィス. All rights reserved.</span>
          <span>AIエージェント・パートナーズ — Built with Claude Code · Cortex · Google Workspace · Obsidian</span>
        </div>
      </div>
    </footer>
  );
}

function Breadcrumb({ items, navigate }) {
  return (
    <div className="hero__breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {it.href
            ? <a href="#" onClick={(e) => { e.preventDefault(); navigate(it.href); }}>{it.label}</a>
            : <span>{it.label}</span>}
          {i < items.length - 1 && <span className="sep">/</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function ContactTools() {
  return (
    <div className="contact-tools">
      <div>
        <h4>支援中の連絡は、毎日使っているチャットで</h4>
        <p>専用ツールの導入は不要。御社で既にお使いの Slack / Googleチャット / Chatwork / LINE WORKS にこちらが入り、日常的に相談できる体制を作ります。</p>
      </div>
      <div className="contact-tools__items">
        <span className="contact-tools__chip"><span className="dot" style={{ background: "oklch(60% 0.15 300)" }}></span>Slack</span>
        <span className="contact-tools__chip"><span className="dot" style={{ background: "oklch(60% 0.15 252)" }}></span>Googleチャット</span>
        <span className="contact-tools__chip"><span className="dot" style={{ background: "oklch(60% 0.15 30)" }}></span>Chatwork</span>
        <span className="contact-tools__chip"><span className="dot" style={{ background: "oklch(60% 0.18 145)" }}></span>LINE WORKS</span>
      </div>
    </div>
  );
}

function ToolsSection() {
  const tools = [
    { name: "Claude Code", role: "AI Coding Agent", color: "oklch(60% 0.18 30)", initials: "CC", body: "業務アプリ開発や自動化スクリプトの構築、社内ドキュメントの整理に活用。エンジニア／非エンジニアのハブとして機能します。" },
    { name: "Cortex", role: "Knowledge Layer", color: "oklch(55% 0.18 280)", initials: "CX", body: "社内ナレッジと業務知識を構造化し、AIで検索・活用できる状態に整備。属人化した情報を会社の資産に変えます。" },
    { name: "Google Workspace", role: "Source of Truth", color: "oklch(55% 0.18 252)", initials: "GW", body: "Drive・Docs・Sheets・Gmailを業務データの中心として扱い、AIで横断的に活用できるフローを設計します。" },
    { name: "Obsidian", role: "Internal Wiki", color: "oklch(50% 0.18 295)", initials: "OB", body: "社内マニュアル、業務手順、AIプロンプト集をMarkdownで一元管理。改善ナレッジが継続的に蓄積されます。" }
  ];
  return (
    <section className="section" id="tools">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Tools</div>
          <h2 className="section-title">支援で使うツールは、汎用的で持続可能なもの</h2>
          <p className="section-lede">特殊なツールは使いません。御社が日常的に使えるツール群で、AI活用と業務改善を回せる状態を作ります。</p>
        </div>
        <div className="tools-grid">
          {tools.map(t => (
            <div key={t.name} className="tool-card">
              <div className="tool-card__head">
                <div className="tool-card__logo" style={{ background: `color-mix(in oklab, ${t.color} 12%, white)`, color: t.color }}>{t.initials}</div>
                <div>
                  <div className="tool-card__name">{t.name}</div>
                  <div className="tool-card__role">{t.role}</div>
                </div>
              </div>
              <p className="tool-card__body">{t.body}</p>
            </div>
          ))}
        </div>
        <ContactTools />
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { title: "お問い合わせ・無料相談", body: "現状の業務課題、AI活用の目的、社内体制をヒアリング。約30分のオンラインMTGです。" },
    { title: "AI顧問ライトで方向性整理", body: "月6時間。AI活用の優先順位と「どの業務から手をつけるか」を明確化し、推進担当者の壁打ち相手になります。" },
    { title: "業務AI化スターターで試す", body: "月12時間。一番効果の見える1業務を棚卸しし、簡易自動化と推進者研修で社内に小さな成功体験を作ります。" },
    { title: "AI業務再設計パッケージで本番", body: "月20時間。業務設計・試作・導入・KPI測定までを伴走。成果を数値で追える状態を作ります。" },
    { title: "AI推進責任者代行で拡張", body: "月32時間。複数業務・複数部署へのAI推進を、社外AI推進責任者としてチームで代行します。" }
  ];
  return (
    <section className="section section--soft" id="process">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Process</div>
          <h2 className="section-title">導入から内製化までの5ステップ</h2>
          <p className="section-lede">最短で約30分の無料相談からスタート。段階的にAI活用を社内に定着させていきます。</p>
        </div>
        <div className="process">
          {steps.map((s, i) => (
            <div key={i} className="process__step">
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Header, Footer, Pricing, FAQ, FinalCTA, Breadcrumb, ContactTools, ToolsSection, ProcessSection,
  ArrowRight, Check, FAQ_ITEMS, NAV_INDUSTRY_LINKS
});