// お問い合わせフォーム
function ContactForm() {
  const { Button, Card, SectionHeading, Field, Input, Textarea, Select, Checkbox, Radio, Badge, Alert } = window.DesignSystem_36acde;
  const [sent, setSent] = React.useState(false);
  const [method, setMethod] = React.useState('email');
  const [agree, setAgree] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const [form, setForm] = React.useState({ name: '', email: '', area: '', kind: '', body: '' });

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'お名前をご入力ください';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = 'メールアドレスの形式が正しくありません';
    if (!form.kind) er.kind = 'お問い合わせ種別を選択してください';
    if (!agree) er.agree = '個人情報の取り扱いへの同意が必要です';
    setErrors(er);
    if (Object.keys(er).length === 0) { setSent(true); window.scrollTo({ top: 0, behavior: 'smooth' }); }
  };

  return (
    <main>
      <section style={{ background: 'var(--green-50)', borderBottom: '1px solid var(--green-100)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '56px 24px' }}>
          <Badge variant="brand">CONTACT</Badge>
          <h1 style={{ margin: '14px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, color: 'var(--text-primary)' }}>お問い合わせ</h1>
          <p style={{ margin: '12px 0 0', fontSize: 17, color: 'var(--text-secondary)' }}>リユースのご相談、報酬について、その他なんでもお気軽にどうぞ。</p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px 24px 96px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, alignItems: 'start' }}>
        <Card variant="elevated" padding="lg">
          {sent ? (
            <div>
              <Alert variant="success" title="送信が完了しました">担当者より2営業日以内にご連絡いたします。お急ぎの場合はLINE（smilefactory001）もご利用ください。</Alert>
              <div style={{ marginTop: 24 }}>
                <Button variant="secondary" onClick={() => { setSent(false); setForm({ name: '', email: '', area: '', kind: '', body: '' }); setAgree(false); }}>続けて入力する</Button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              {Object.keys(errors).length > 0 && (
                <Alert variant="danger" title="入力をご確認ください">未入力・形式エラーの項目があります。</Alert>
              )}
              <Field label="お名前" htmlFor="name" required error={errors.name}>
                <Input id="name" placeholder="山田 太郎" value={form.name} onChange={set('name')} invalid={!!errors.name} />
              </Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
                <Field label="メールアドレス" htmlFor="email" required error={errors.email}>
                  <Input id="email" type="email" placeholder="taro@example.com" value={form.email} onChange={set('email')} invalid={!!errors.email} />
                </Field>
                <Field label="お住まいのエリア" htmlFor="area" hint="対応エリア確認のため">
                  <Input id="area" placeholder="例：高津区久本" value={form.area} onChange={set('area')} />
                </Field>
              </div>
              <Field label="お問い合わせ種別" htmlFor="kind" required error={errors.kind}>
                <Select id="kind" value={form.kind} onChange={set('kind')} invalid={!!errors.kind}>
                  <option value="" disabled>選択してください</option>
                  <option>リユース品を預けたい</option>
                  <option>報酬について知りたい</option>
                  <option>実績について</option>
                  <option>地域・社会貢献について</option>
                  <option>その他</option>
                </Select>
              </Field>
              <Field label="ご希望の連絡方法">
                <div style={{ display: 'flex', gap: 24 }}>
                  <Radio name="method" value="email" label="メール" checked={method === 'email'} onChange={() => setMethod('email')} />
                  <Radio name="method" value="phone" label="電話" checked={method === 'phone'} onChange={() => setMethod('phone')} />
                  <Radio name="method" value="line" label="LINE" checked={method === 'line'} onChange={() => setMethod('line')} />
                </div>
              </Field>
              <Field label="お問い合わせ内容" htmlFor="body" hint="お預かり希望の品物・点数など、わかる範囲でご記入ください">
                <Textarea id="body" rows={5} placeholder="ご相談内容をご記入ください" value={form.body} onChange={set('body')} />
              </Field>
              <div>
                <Checkbox checked={agree} onChange={(e) => setAgree(e.target.checked)} label="個人情報の取り扱いに同意する" />
                {errors.agree && <div style={{ marginTop: 6, fontSize: 13, color: 'var(--color-danger)' }}>{errors.agree}</div>}
              </div>
              <div style={{ display: 'flex', gap: 14, marginTop: 4 }}>
                <Button type="submit" variant="primary" size="lg">送信する</Button>
                <Button type="button" variant="ghost" size="lg">入力をリセット</Button>
              </div>
            </form>
          )}
        </Card>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Card variant="soft">
            <h3 style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--green-800)' }}>お電話・LINE</h3>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
              LINE：smilefactory001<br />
              Email：admin@smilefactory-reuse.com
            </p>
          </Card>
          <Card variant="outlined">
            <h3 style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-primary)' }}>対応エリア</h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.85, color: 'var(--text-secondary)' }}>
              川崎市高津区<br />溝口1丁目／久本1〜3丁目／坂戸1丁目・3丁目<br />
              <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>※ 顔が見えるお取引のためエリアを限定しています</span>
            </p>
          </Card>
          <Card variant="elevated" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 46, height: 46, flexShrink: 0, borderRadius: '50%', background: 'var(--sun-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>😊</span>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: 'var(--text-secondary)' }}>はじめての方も、まずはお気軽にご相談ください。</p>
          </Card>
        </aside>
      </section>
    </main>
  );
}
window.ContactForm = ContactForm;