/* global React */
const { useState: useS_b } = React;

function Gallery() {
  const tiles = [
    { c: 't-a', tag: '帯 ／ OBI', n: '01' },
    { c: 't-b', tag: '小物 ／ ACCESSORY', n: '02' },
    { c: 't-c', tag: '足元 ／ FEET', n: '03' },
    { c: 't-d', tag: '後ろ姿 ／ BACK', n: '04' },
    { c: 't-e', tag: '帯結び ／ KNOT', n: '05' },
    { c: 't-f', tag: '七五三 ／ 753', n: '06' },
    { c: 't-g', tag: '袴 ／ HAKAMA', n: '07' },
  ];
  return (
    <section id="gallery" className="scene gallery">
      <div className="header">
        <div>
          <span className="eyebrow">GALLERY ／ N° 04</span>
          <h2>言葉にしきれない、<br/>ハレの日のディテール。</h2>
        </div>
        <a className="btn ghost" href="#contact">作例の続きを見る <span className="arrow">→</span></a>
      </div>
      <div className="grid">
        {tiles.map((t, i) => (
          <div key={i} className={`tile ${t.c}`}>
            <span className="tile-num mincho">{t.n}</span>
            <span className="tile-meta">{t.tag}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

const POSTS = [
  { tag: '豆知識', date: '2026.04.18', title: '帯締めと帯揚げの色合わせ、迷ったら「半歩外す」がちょうどいい。', read: '5 MIN READ', feat: true },
  { tag: '裏側', date: '2026.04.05', title: '副業着付け師の朝6時——結婚式当日のリアルな流れ。', read: '7 MIN READ' },
  { tag: '小物', date: '2026.03.22', title: '足袋ってどこで買う？コスパと履き心地で選ぶ4ブランド。', read: '4 MIN READ' },
  { tag: 'tips', date: '2026.03.10', title: '七五三の前日、お子さんと一緒にやっておきたい3つのこと。', read: '6 MIN READ' },
  { tag: '事例', date: '2026.02.28', title: '「私らしい」訪問着——お客さまと一緒に決めた、白×テラコッタの組み合わせ。', read: '5 MIN READ' },
];

function Blog() {
  return (
    <section id="blog" className="scene blog">
      <div className="header">
        <div>
          <span className="eyebrow">JOURNAL ／ N° 05</span>
          <h2>豆知識と、<br/>仕事の裏側のはなし。</h2>
        </div>
        <a className="btn ghost" href="#">記事一覧へ <span className="arrow">→</span></a>
      </div>
      <div className="posts">
        {POSTS.slice(0, 3).map((p, i) => (
          <article key={i} className={`post-card ${p.feat ? 'feature' : ''}`}>
            <div className="img"><span className="lbl">IMG · {String(i+1).padStart(2,'0')}</span></div>
            <div className="meta">
              <span className="tag">{p.tag}</span>
              <span>{p.date}</span>
              <span>·</span>
              <span>{p.read}</span>
            </div>
            <h3>{p.title}</h3>
            <span className="read-more">READ MORE →</span>
          </article>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  const [picked, setPicked] = useS_b(['結婚式']);
  const [submitted, setSubmitted] = useS_b(false);
  const [name, setName] = useS_b('');
  const [email, setEmail] = useS_b('');
  const [date, setDate] = useS_b('');
  const [msg, setMsg] = useS_b('');

  const togglePick = (t) => {
    setPicked(picked.includes(t) ? picked.filter(x => x !== t) : [...picked, t]);
  };

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="contact" className="scene contact">
      <div className="left">
        <span className="eyebrow">CONTACT ／ N° 06</span>
        <h2>
          ご予約・<br/>
          お問い合わせ。
        </h2>
        <p>
          まずは気軽にメッセージから。<br/>
          シーンや日付が決まっていなくても大丈夫。
          「こんなことできる？」のひとことから、お話ししましょう。
        </p>
        <div className="info-row">
          <span className="lbl">EMAIL</span>
          <span className="val">hello@hare-no-hi.jp</span>
        </div>
        <div className="info-row">
          <span className="lbl">LINE</span>
          <span className="val">@harenohi-neesan</span>
        </div>
        <div className="info-row">
          <span className="lbl">RESPONSE</span>
          <span className="val">通常 24時間以内</span>
        </div>
        <div className="info-row">
          <span className="lbl">AREA</span>
          <span className="val">東京・神奈川・埼玉・千葉<br/>（その他応相談）</span>
        </div>
      </div>

      {submitted ? (
        <div className="form-success">
          <div className="check">✓</div>
          <h3>お問い合わせ、受け取りました。</h3>
          <p>
            {name || 'お客様'} さま、ありがとうございます。<br/>
            24時間以内に <b>{email || 'ご記入のメール'}</b> へお返事します。<br/>
            少しお待ちくださいね。
          </p>
        </div>
      ) : (
      <form className="form" onSubmit={submit}>
        <div className="row two">
          <div className="row">
            <label>お名前 <span className="req">*</span></label>
            <input type="text" required value={name} onChange={e => setName(e.target.value)} placeholder="山田 はな" />
          </div>
          <div className="row">
            <label>メールアドレス <span className="req">*</span></label>
            <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="hana@example.com" />
          </div>
        </div>
        <div className="row">
          <label>ご希望のシーン <span className="req">*</span>（複数選択可）</label>
          <div className="service-pick">
            {['結婚式','七五三','卒業式','入学式','小物相談','その他'].map(t => (
              <button type="button" key={t} className={picked.includes(t) ? 'on' : ''} onClick={() => togglePick(t)}>
                {t}
              </button>
            ))}
          </div>
        </div>
        <div className="row two">
          <div className="row">
            <label>ご希望の日付</label>
            <input type="text" value={date} onChange={e => setDate(e.target.value)} placeholder="2026年6月15日 ／ 未定でもOK" />
          </div>
          <div className="row">
            <label>場所・エリア</label>
            <input type="text" placeholder="東京都渋谷区 ／ 式場名 など" />
          </div>
        </div>
        <div className="row">
          <label>メッセージ</label>
          <textarea value={msg} onChange={e => setMsg(e.target.value)} placeholder="着物はあるけれど小物がない、急ぎで相談したい——なんでもOKです。" />
        </div>
        <div className="submit-row">
          <p className="note">送信後、24時間以内にご返信します。<br/>お急ぎの場合はLINEがおすすめです。</p>
          <button type="submit" className="btn">
            送信する <span className="arrow">→</span>
          </button>
        </div>
      </form>
      )}
    </section>
  );
}

window.Gallery = Gallery;
window.Blog = Blog;
window.Contact = Contact;