/* CONTACT page — 誇KIMONO */

const { useState: useStateC } = React;

function ContactHero() {
  return (
    <section className="page-hero" data-screen-label="01 Contact Hero">
      <div className="page-hero__bg-kanji">問</div>
      <div className="page-hero__content">
        <span className="page-hero__eyebrow reveal">Get in Touch</span>
        <h1 className="page-hero__title reveal delay-1">
          誇りを、<br/>あなたの手に。
        </h1>
        <p className="page-hero__lead reveal delay-2">
          採寸・ご相談は、すべて無料です。<br/>
          完全オーダーメイドの和装について、<br/>
          どうぞお気軽にお問い合わせください。
        </p>
        <div className="page-hero__crumbs reveal delay-3">
          <a href="HOKORI KIMONO - Men.html">PRODUCT</a>
          <span>/</span>
          <a href="about.html">ABOUT</a>
          <span>/</span>
          <span className="page-hero__crumbs-current">CONTACT</span>
        </div>
      </div>
    </section>
  );
}

function ContactChannels() {
  return (
    <section className="contact-channels" id="line" data-screen-label="02 Channels">
      <div className="container">
        <div className="contact-channels__head">
          <span className="eyebrow reveal">The One Channel</span>
          <h2 className="contact-channels__title reveal delay-1">
            ご相談の、入り口。
          </h2>
          <p className="contact-channels__lead reveal delay-2">
            お問い合わせ・採寸予約・生地サンプルのご請求 —<br/>
            すべて、<strong>LINE公式</strong>からご相談いただけます。
          </p>
        </div>
        <div className="contact-line reveal delay-2">
          <div className="contact-line__inner">
            <div className="contact-line__left">
              <span className="contact-line__tag">// LINE OFFICIAL</span>
              <div className="contact-line__en"><em>The Single Door.</em></div>
              <h3 className="contact-line__jp">LINEで、すべて完結。</h3>
              <p className="contact-line__body">
                着物のご相談、採寸のご予約、生地サンプルのご請求、<br/>
                法人・プレス・コラボレーションまで —<br/>
                すべて<strong>LINE公式</strong>から承っております。<br/>
                誇高の受講生・MUSUBI会員の方も、こちらから。
              </p>
              <ul className="contact-line__list">
                <li><span className="contact-line__list-num">01</span>友だち追加</li>
                <li><span className="contact-line__list-num">02</span>ご希望をトークでお伝えください</li>
                <li><span className="contact-line__list-num">03</span>担当者より24時間以内にご返信</li>
              </ul>
              <a href="https://line.me/" target="_blank" rel="noopener" className="contact-line__cta">
                <span>LINEで友だち追加</span>
                <span className="cta__arrow"></span>
              </a>
              <div className="contact-line__note">
                — メールでのご相談をご希望の方は <a href="mailto:info@kokoh.co.jp">info@kokoh.co.jp</a> まで
              </div>
            </div>
            <div className="contact-line__right">
              <div className="contact-line__qr">
                <div className="contact-line__qr-frame">
                  <img src="assets/line-qr.png" alt="LINE公式アカウント QRコード" className="contact-line__qr-img" />
                </div>
                <div className="contact-line__qr-label">SCAN TO CHAT</div>
              </div>
              <div className="contact-line__id">
                <span className="contact-line__id-label">E-MAIL</span>
                <span className="contact-line__id-value">info@kokoh.co.jp</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [form, setForm] = useStateC({
    name: "", kana: "", email: "", tel: "",
    kind: "men", interest: [], where: "tokyo", body: "",
    agree: false,
  });
  const [submitted, setSubmitted] = useStateC(false);

  const upd = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const toggleInterest = (v) => {
    setForm(s => ({
      ...s,
      interest: s.interest.includes(v)
        ? s.interest.filter(x => x !== v)
        : [...s.interest, v]
    }));
  };
  const submit = (e) => {
    e.preventDefault();
    if (!form.agree) return;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section className="contact-form" id="form" data-screen-label="03 Form">
        <div className="container-narrow">
          <div className="contact-form__thanks reveal">
            <span className="eyebrow">Thank You</span>
            <h2 className="contact-form__thanks-title">
              お問い合わせ、<br/>承りました。
            </h2>
            <p className="contact-form__thanks-body">
              ご入力いただいた内容をもとに、<br/>
              担当者より<strong>2営業日以内</strong>にご連絡いたします。<br/>
              お急ぎの場合は LINE公式 からもご相談いただけます。
            </p>
            <a href="HOKORI KIMONO - Men.html" className="cta">
              <span>商品をもう一度見る</span>
              <span className="cta__arrow"></span>
            </a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="contact-form" id="form" data-screen-label="03 Form">
      <div className="container-narrow">
        <div className="contact-form__head">
          <span className="eyebrow reveal">Order Inquiry Form</span>
          <h2 className="contact-form__title reveal delay-1">
            オーダー相談フォーム
          </h2>
          <p className="contact-form__lead reveal delay-2">
            入力は1分ほどで完了します。<br/>
            お急ぎの方は LINE公式 からご連絡ください。
          </p>
        </div>

        <form className="form reveal delay-3" onSubmit={submit}>
          <div className="form__row">
            <label className="form__field">
              <span className="form__label">お名前 <em>必須</em></span>
              <input type="text" required value={form.name}
                onChange={e => upd('name', e.target.value)}
                placeholder="山田 太郎" />
            </label>
            <label className="form__field">
              <span className="form__label">フリガナ</span>
              <input type="text" value={form.kana}
                onChange={e => upd('kana', e.target.value)}
                placeholder="ヤマダ タロウ" />
            </label>
          </div>

          <div className="form__row">
            <label className="form__field">
              <span className="form__label">メールアドレス <em>必須</em></span>
              <input type="email" required value={form.email}
                onChange={e => upd('email', e.target.value)}
                placeholder="name@example.com" />
            </label>
            <label className="form__field">
              <span className="form__label">お電話番号</span>
              <input type="tel" value={form.tel}
                onChange={e => upd('tel', e.target.value)}
                placeholder="090-0000-0000" />
            </label>
          </div>

          <fieldset className="form__group">
            <legend className="form__label">ご希望のライン <em>必須</em></legend>
            <div className="form__radios">
              {[
                { v: "men",   l: "紳士の和装 — Men" },
                { v: "women", l: "大和撫子の装い — Women" },
                { v: "both",  l: "両方、相談したい" },
              ].map(o => (
                <label key={o.v} className={`radio ${form.kind === o.v ? "radio--on" : ""}`}>
                  <input type="radio" name="kind" value={o.v}
                    checked={form.kind === o.v}
                    onChange={() => upd('kind', o.v)} />
                  <span>{o.l}</span>
                </label>
              ))}
            </div>
          </fieldset>

          <fieldset className="form__group">
            <legend className="form__label">ご興味 <span className="form__hint">（複数選択可）</span></legend>
            <div className="form__checks">
              {[
                "フルセット（着物一式）",
                "生地の詳細",
                "オーダーメイドの流れ",
                "ビジネスシーンでの着こなし",
                "誇高ビジネストレーニング",
                "ギフト・記念日",
              ].map(v => (
                <label key={v} className={`check ${form.interest.includes(v) ? "check--on" : ""}`}>
                  <input type="checkbox"
                    checked={form.interest.includes(v)}
                    onChange={() => toggleInterest(v)} />
                  <span>{v}</span>
                </label>
              ))}
            </div>
          </fieldset>

          <fieldset className="form__group">
            <legend className="form__label">ご希望の採寸方法</legend>
            <div className="form__radios">
              {[
                { v: "honsha", l: "本社採寸（千葉県市川市）" },
                { v: "online", l: "オンライン" },
                { v: "other",  l: "その他エリア" },
              ].map(o => (
                <label key={o.v} className={`radio ${form.where === o.v ? "radio--on" : ""}`}>
                  <input type="radio" name="where" value={o.v}
                    checked={form.where === o.v}
                    onChange={() => upd('where', o.v)} />
                  <span>{o.l}</span>
                </label>
              ))}
            </div>
          </fieldset>

          <label className="form__field">
            <span className="form__label">ご相談内容 <span className="form__hint">（自由記述）</span></span>
            <textarea rows="5" value={form.body}
              onChange={e => upd('body', e.target.value)}
              placeholder="例）結婚式で着たい / 登壇の場で使いたい / 既にある着物と合わせたい等、ご自由にご記入ください。"></textarea>
          </label>

          <label className={`agree ${form.agree ? "agree--on" : ""}`}>
            <input type="checkbox" checked={form.agree}
              onChange={e => upd('agree', e.target.checked)} />
            <span>
              <a href="#legal">プライバシーポリシー</a>に同意の上、送信します。
            </span>
          </label>

          <button type="submit" className={`form__submit ${!form.agree ? "form__submit--disabled" : ""}`}
            disabled={!form.agree}>
            <span>内容を確認して送信</span>
            <span className="cta__arrow"></span>
          </button>
        </form>
      </div>
    </section>
  );
}

function ContactFaq() {
  const [open, setOpen] = useStateC(0);
  const faqs = [
    { q: "初めてのオーダーメイドです。どんな流れになりますか？",
      a: "LINEまたはフォームからご連絡いただいたのち、対面またはオンラインで採寸・生地選びを行います。制作期間は約2〜3ヶ月で、完成後にお手元にお届けします。" },
    { q: "着付けができません。本当に1分で着られますか？",
      a: "はい。着物ベルトと独自の構造により、着付け教室に通う必要はありません。商品には着用方法の動画も付属します。" },
    { q: "価格帯を教えてください。",
      a: "紳士の和装はフルセット（上衣・羽織・袴・羽織紐・長襦袢Tシャツ・着物ベルト）で30万〜40万円、大和撫子の装いは長着＋帯ベルトのセットで15万〜20万円です。すべて完全オーダーメイド・税込です。" },
    { q: "遠方に住んでいます。対応してもらえますか？",
      a: "オンライン採寸に対応しております。また、ご希望に応じて出張採寸の相談も承ります。詳しくはフォームからご連絡ください。" },
    { q: "納期はどのくらいですか？",
      a: "ご相談・採寸から納品まで、おおむね2〜3ヶ月を頂戴しております。お急ぎの場合は、ご相談時にお知らせください。" },
    { q: "メンテナンスはどうすればよいですか？",
      a: "紳士の和装はスーツ生地を採用しているため、スーツと同様、数ヶ月に一度のドライクリーニングをおすすめしております。大和撫子の装いは、生地によって自宅で洗えるものと、ドライクリーニングが必要なものがございます。生地ごとのお手入れ方法は納品時に詳しくご案内いたします。" },
    { q: "誇高ビジネストレーニングについて知りたいです。",
      a: "和装ブランド「誇KIMONO」と並ぶ、株式会社誇高のもう一つの事業です。受講生の方は専用のLINEからご相談いただけます。" },
  ];
  return (
    <section className="contact-faq" id="faq" data-screen-label="04 FAQ">
      <div className="container-narrow">
        <div className="contact-faq__head">
          <span className="eyebrow reveal">Frequently Asked</span>
          <h2 className="contact-faq__title reveal delay-1">
            よくある、ご質問。
          </h2>
        </div>
        <div className="contact-faq__list reveal delay-2">
          {faqs.map((f, i) => (
            <div key={i} className={`faq ${open === i ? "faq--open" : ""}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq__q-num">{String(i+1).padStart(2,"0")}</span>
                <span className="faq__q-text">{f.q}</span>
                <span className="faq__q-toggle" aria-hidden="true">{open === i ? "−" : "+"}</span>
              </button>
              <div className="faq__a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactLegal() {
  const rows = [
    { label: "販売事業者", value: "株式会社誇高（KOKOH Inc.）" },
    { label: "代表者",     value: "小倉 瑞季" },
    { label: "事業内容",   value: "和装ブランド「誇KIMONO」の企画・製造・販売 / ビジネストレーニング事業「誇高」の運営" },
    { label: "所在地",     value: "千葉県市川市（誇高 本社・採寸スタジオ）" },
    { label: "連絡先",     value: "本ページ上部のオーダー相談フォーム、または LINE公式" },
    { label: "販売価格",   value: "紳士の和装フルセット：¥300,000〜¥400,000（税込） / 大和撫子の装い：¥150,000〜¥200,000（税込）" },
    { label: "支払方法",   value: "銀行振込（※クレジットカードはご利用いただけません）" },
    { label: "支払時期",   value: "採寸・生地確定後、ご請求書発行日より14日以内" },
    { label: "商品引渡時期", value: "ご注文確定後、約2〜3ヶ月" },
    { label: "返品・交換", value: "完全オーダーメイド商品のため、お客様都合による返品・交換はお受けできません。初期不良の場合は商品到着後7日以内にご連絡ください。" },
  ];
  return (
    <section className="contact-legal" id="legal" data-screen-label="05 Legal">
      <div className="container">
        <div className="contact-legal__head">
          <span className="eyebrow on-dark reveal">Legal Notice</span>
          <h2 className="contact-legal__title reveal delay-1">特定商取引法に基づく表記</h2>
        </div>
        <div className="contact-legal__table reveal delay-2">
          {rows.map((r, i) => (
            <div key={i} className="contact-legal__row">
              <div className="contact-legal__row-label">{r.label}</div>
              <div className="contact-legal__row-value">{r.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactClosing() {
  return (
    <section className="contact-closing" data-screen-label="06 Closing">
      <div className="contact-closing__bg-kanji">誇</div>
      <div className="contact-closing__content">
        <h2 className="contact-closing__title reveal">
          誇りを、<br/>身に纏う。
        </h2>
        <p className="contact-closing__body reveal delay-1">
          ※ 誇高の受講生・MUSUBI会員の方は、<br/>
          LINE公式 からお気軽にご相談ください。
        </p>
      </div>
    </section>
  );
}

function ContactApp() {
  useReveal();
  return (
    <>
      <Nav variant="men" current="contact" ctaLabel="LINE相談" />
      <ContactHero />
      <ContactChannels />
      <ContactForm />
      <ContactFaq />
      <ContactLegal />
      <ContactClosing />
      <Footer variant="men" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ContactApp />);