// About page — company profile, values, services, message, corporate data
// Real content reflecting kashinoya-biz.com / kashinoya.co.jp. No fabricated figures.

function AboutHero() {
  return (
    <section className="page-hero" data-screen-label="01 AboutHero">
      <div className="ph-grid-bg" aria-hidden="true" />
      <div className="ph-glow ph-glow-tech" aria-hidden="true" />
      <div className="ph-inner">
        <nav className="ph-crumb">
          <a href="index.html">HOME</a>
          <span>/</span>
          <span className="is-current">ABOUT</span>
        </nav>
        <div className="ph-eyebrow">
          <span className="line-deco" />MISSION<span className="line-deco" />
        </div>
        <h1 className="ph-title">
          <span className="ph-title-en">About</span>
          <span className="ph-title-jp">技術の進化を活用し、生成AIを中小企業の戦力へ。</span>
        </h1>
        <p className="ph-lead">
          株式会社樫乃屋は、実務直結のAI実装とDX推進を通じて、お客様の「生産性」と「創造性」を高めるパートナーです。
          時間を生み出し、無駄を減らす。それが、私たちの提供する価値です。
        </p>
      </div>
    </section>
  );
}

function AboutValues() {
  const values = [
    { en: "01", title: "伴走型支援", desc: "一方的な提案ではなく、現場の課題に寄り添い、共に解決策を模索します。" },
    { en: "02", title: "スピード実装", desc: "変化の速いAI業界に対応し、検証と改善を高速で回すアジャイルな開発を提供します。" },
    { en: "03", title: "自走の促進", desc: "最終的にはお客様自身でAIを使いこなせるよう、人材育成とナレッジ移転を重視します。" },
  ];
  return (
    <section className="solutions" data-screen-label="02 Values">
      <div className="solutions-inner">
        <div className="sol-head">
          <div className="sol-eyebrow"><span className="line-deco" />VALUES<span className="line-deco" /></div>
          <h2 className="sol-title">3つのバリュー</h2>
        </div>
        <div className="al-grid">
          {values.map((v) => (
            <div key={v.en} className="sol-card sol-card-cyan" style={{ cursor: "default" }}>
              <div className="solc-num">{v.en}</div>
              <h4 className="solc-title">{v.title}</h4>
              <p className="solc-desc">{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutServices() {
  const services = [
    {
      theme: "amber",
      title: "補助金申請サポート",
      desc: "補助金・助成金の選定から申請書類の作成、採択後の報告までトータルでサポートします。事業計画策定から実績報告まで一貫対応。",
      tags: ["IT導入・ものづくり", "持続化補助金", "事業計画〜実績報告"],
    },
    {
      theme: "cyan",
      title: "AI導入・業務活用支援",
      desc: "ChatGPTなどの生成AIを業務に取り入れ、文書作成・資料作成・調査業務の効率化を支援します。業務フローへのAI組み込みまで伴走します。",
      tags: ["文書作成の効率化", "調査業務の自動化", "業務フロー組込"],
    },
    {
      theme: "blue",
      title: "AI研修・社内定着サポート",
      desc: "AIが初めての方でも安心。社員向け研修と運用ルール作りで、AI活用を社内に定着させます。",
      tags: ["プロンプト研修", "管理職向けリテラシー", "運用ルール策定"],
    },
  ];
  return (
    <section className="solutions" id="services" data-screen-label="03 Services">
      <div className="solutions-bg-deco" aria-hidden="true">
        <div className="sbd-blob sbd-blob-1" />
        <div className="sbd-blob sbd-blob-2" />
      </div>
      <div className="solutions-inner">
        <div className="sol-head">
          <div className="sol-eyebrow"><span className="line-deco" />SERVICES<span className="line-deco" /></div>
          <h2 className="sol-title">サービス</h2>
          <p className="sol-lead">補助金活用とAI・DX導入を組み合わせ、お客様の事業成長を一社で支援します。</p>
        </div>
        <div className="al-grid">
          {services.map((s) => (
            <div key={s.title} className={`sol-card sol-card-${s.theme}`} style={{ cursor: "default" }}>
              <h4 className="solc-title">{s.title}</h4>
              <p className="solc-desc">{s.desc}</p>
              <div className="solc-tags">
                {s.tags.map((t, i) => (
                  <span key={i} className="solc-tag">
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                      <circle cx="6" cy="6" r="5.5" stroke="currentColor" strokeOpacity="0.5"/>
                      <path d="M3.5 6l1.8 1.8L8.5 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    {t}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutMessage() {
  return (
    <section className="solutions" data-screen-label="04 Message">
      <div className="solutions-inner">
        <div className="sol-head">
          <div className="sol-eyebrow"><span className="line-deco" />MESSAGE<span className="line-deco" /></div>
          <h2 className="sol-title">代表メッセージ</h2>
        </div>
        <div className="about-message">
          <h3 className="about-message-lead">「時間」を生み出し、共に「価値」を創る。</h3>
          <p>
            ビジネスにおいて最も貴重な資源は「時間」です。しかし、日々の業務に追われ、本来注力すべき「創造的な仕事」や「お客様との対話」がおろそかになってはいませんか？
            また、「変革が必要なのはわかるが、何から始めればいいかわからない」という声も多く耳にします。
          </p>
          <p>
            樫乃屋のミッションは、テクノロジーの力で無駄を極限まで減らし、皆様のビジネスに余白を生み出すことです。難しい専門用語は使いません。
            お客様の現場に即した「使える」ソリューションを、わかりやすい言葉でご提案し、運用の定着まで隣で伴走し続けます。
          </p>
          <p>
            空いた時間は、会社の未来を考える時間へ。AIと補助金を組み合わせた賢い経営で、利益体質な組織づくりを全力でサポートいたします。
          </p>
          <p className="about-message-sign">代表取締役　林 尚之</p>
        </div>
      </div>
    </section>
  );
}

function AboutProfile() {
  const rows = [
    { k: "会社名", v: "株式会社樫乃屋 (Kashinoya Inc.)" },
    { k: "代表取締役", v: "林 尚之" },
    { k: "設立", v: "2020年4月1日" },
    { k: "所在地", v: "〒222-0002 神奈川県横浜市港北区師岡町1148-116" },
    { k: "事業内容", v: "1. 補助金・助成金申請サポート　2. AI導入・業務活用支援　3. AI研修・社内定着サポート" },
  ];
  return (
    <section className="solutions" data-screen-label="05 Profile">
      <div className="solutions-inner">
        <div className="sol-head">
          <div className="sol-eyebrow"><span className="line-deco" />COMPANY<span className="line-deco" /></div>
          <h2 className="sol-title">会社概要</h2>
        </div>
        <table className="about-table">
          <tbody>
            {rows.map((r) => (
              <tr key={r.k}>
                <th>{r.k}</th>
                <td>{r.v}</td>
              </tr>
            ))}
            <tr>
              <th>URL</th>
              <td><a href="https://kashinoya.co.jp/" target="_blank" rel="noopener">https://kashinoya.co.jp/</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section className="sub-cta-band">
      <div className="scb-inner">
        <div className="scb-content">
          <div className="scb-eyebrow">CONTACT</div>
          <h2 className="scb-title">未来を変える一歩を、ここから。</h2>
          <p className="scb-lead">
            「何から始めればいいかわからない」「費用対効果が不安」…そんな疑問や不安を、専門家と一緒にクリアにしていきませんか？
          </p>
          <div className="scb-actions">
            <a className="btn btn-touch" href="contact.html">
              無料相談・お問い合わせ
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
                <path d="M5 10h10M10 5l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutApp() {
  return (
    <>
      <AboutHero />
      <AboutValues />
      <AboutServices />
      <AboutMessage />
      <AboutProfile />
      <AboutCTA />
    </>
  );
}

Object.assign(window, { AboutApp });