// Contact page — static form (submission not implemented in this phase)
// Real company info. No phone number, no fabricated figures.

function ContactHero() {
  return (
    <section className="page-hero" data-screen-label="01 ContactHero">
      <div className="ph-grid-bg" aria-hidden="true" />
      <div className="ph-glow ph-glow-touch" aria-hidden="true" />
      <div className="ph-inner">
        <nav className="ph-crumb">
          <a href="index.html">HOME</a>
          <span>/</span>
          <span className="is-current">CONTACT</span>
        </nav>
        <div className="ph-eyebrow">
          <span className="line-deco" />CONTACT<span className="line-deco" />
        </div>
        <h1 className="ph-title">
          <span className="ph-title-en">Contact</span>
          <span className="ph-title-jp">お問い合わせ・無料相談</span>
        </h1>
        <p className="ph-lead">
          以下のフォームよりお問い合わせください。3営業日以内にご返信いたします。初回のご相談は無料です。
        </p>
      </div>
    </section>
  );
}

function ContactForm() {
  return (
    <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
      <p className="contact-form-note">※こちらはリニューアル確認用の仮ページです。送信機能は本番化フェーズで実装します。</p>

      <div className="cf-field">
        <label htmlFor="cf-name">お名前<span className="cf-req">必須</span></label>
        <input id="cf-name" type="text" placeholder="例：山田 太郎" required />
      </div>

      <div className="cf-field">
        <label htmlFor="cf-company">会社名<span className="cf-opt">任意</span></label>
        <input id="cf-company" type="text" placeholder="例：株式会社〇〇" />
      </div>

      <div className="cf-field">
        <label htmlFor="cf-email">メールアドレス<span className="cf-req">必須</span></label>
        <input id="cf-email" type="email" placeholder="例：info@example.com" required />
      </div>

      <div className="cf-field">
        <label htmlFor="cf-topic">お問い合わせ内容<span className="cf-req">必須</span></label>
        <select id="cf-topic" required defaultValue="">
          <option value="" disabled>選択してください</option>
          <option>補助金・助成金について</option>
          <option>生成AI導入・活用について</option>
          <option>DX推進・IT導入について</option>
          <option>Webサイト制作について</option>
          <option>研修・トレーニングについて</option>
          <option>その他</option>
        </select>
      </div>

      <div className="cf-field">
        <label htmlFor="cf-message">メッセージ<span className="cf-req">必須</span></label>
        <textarea id="cf-message" rows="6" placeholder="お問い合わせ内容をご記入ください。" required />
      </div>

      <div className="cf-field cf-field-check">
        <label>
          <input type="checkbox" required />
          <span>
            <a href="privacy.html" target="_blank" rel="noopener">プライバシーポリシー</a>に同意します
            <span className="cf-req">必須</span>
          </span>
        </label>
      </div>

      <button type="submit" className="btn btn-touch cf-submit">
        上記の内容で送信する
        <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>
      </button>
    </form>
  );
}

function ContactSidebar() {
  const topics = [
    "生成AI（ChatGPT等）の導入・活用",
    "補助金・助成金の申請支援",
    "DX推進・IT導入サポート",
    "Webサイト・ECサイト制作",
    "業務管理システム開発",
  ];
  return (
    <aside className="contact-aside">
      <div className="contact-aside-block">
        <h3 className="contact-aside-head">会社情報</h3>
        <p className="contact-aside-body">
          株式会社樫乃屋<br />
          Kashinoya Inc.<br />
          〒222-0002<br />
          神奈川県横浜市港北区師岡町1148-116<br />
          <a href="https://kashinoya.co.jp/" target="_blank" rel="noopener">https://kashinoya.co.jp/</a>
        </p>
      </div>
      <div className="contact-aside-block">
        <h3 className="contact-aside-head">ご相談いただける内容</h3>
        <ul className="contact-aside-list">
          {topics.map((t) => <li key={t}>{t}</li>)}
        </ul>
      </div>
    </aside>
  );
}

function ContactApp() {
  return (
    <>
      <ContactHero />
      <section className="contact-page-body" data-screen-label="02 Form">
        <div className="contact-page-inner">
          <ContactForm />
          <ContactSidebar />
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ContactApp });