var { Card, Button, Input, Select, Checkbox, Toast, Icon, Tag } = window.GloryWaveDesignSystem_1a6704;

function Contact() {
  const [sent, setSent] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const formRef = React.useRef(null);
  const submit = async (e) => {
    e.preventDefault();
    const f = formRef.current;
    if (!f.reportValidity()) return;
    setBusy(true);
    const data = new FormData(f);
    data.append('洽詢類型', type);
    data.append('_subject', 'GloryWave 合作洽詢：' + type);
    try {
      const r = await fetch('https://formspree.io/f/xrpbnwpk', { method: 'POST', body: data, headers: { Accept: 'application/json' } });
      if (!r.ok) throw new Error();
      f.reset(); setAgree(false); setSent('ok');
    } catch (err) { setSent('fault'); }
    setBusy(false);
  };
  const [agree, setAgree] = React.useState(false);
  const [type, setType] = React.useState('Test Kit');
  return (
    <div style={{ ...WRAP, padding: 'var(--section-y-tight) var(--gutter) 0', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 340px), 1fr))', gap: 'var(--space-10)', alignItems: 'start' }}>
      <div>
        <Eyebrow>Contact</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-display-2)', fontWeight: 700, lineHeight: 1.3, margin: '14px 0 8px' }}>合作洽詢</h1>
        <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', lineHeight: 1.75, color: 'var(--text-secondary)', maxWidth: 520, margin: '0 0 var(--space-7)' }}>
          索取 Test Kit、洽談系統整合或技術移轉，或預約台灣能源展現場參觀。
        </p>
        <div style={{ display: 'flex', gap: 8, marginBottom: 'var(--space-5)', flexWrap: 'wrap' }}>
          {[['Test Kit', 'package'], ['系統整合', 'cpu'], ['技術移轉', 'factory'], ['展會參觀', 'calendar']].map(([t, i]) => (
            <Tag key={t} selectable selected={type === t} onClick={() => setType(t)} icon={i}>{t}</Tag>
          ))}
        </div>
        <Card>
          <form ref={formRef} onSubmit={submit} noValidate={false}>
          <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 200px), 1fr))', gap: 'var(--space-5)' }}>
            <Input name="公司名稱" required label="公司名稱 Company" placeholder="株式会社／股份有限公司" />
            <Input name="聯絡人" required label="聯絡人 Contact" placeholder="王小明" />
            <Input name="email" type="email" required label="Email" placeholder="name@company.co.jp" />
            <Input name="電話" type="tel" label="電話 Phone" placeholder="+81 / +886" />
            <Select name="所在地" label="所在地 Region" placeholder="請選擇" options={['日本 Japan', '台灣 Taiwan', '其他 Other']} />
            <Select name="應用場景" label="應用場景 Application" placeholder="請選擇" options={['建物立面 Façade', '立面欄杆 Balustrade', '窗戶 BIPV Window', '其他 Other']} />
          </div>
          <div style={{ marginTop: 'var(--space-5)' }}>
            <Input name="需求說明" label="需求說明 Notes" multiline rows={3} placeholder="建物類型、立面面積、儲能需求、預計時程…" />
          </div>
          <div style={{ marginTop: 'var(--space-6)', display: 'flex', alignItems: 'center', gap: 'var(--space-7)' }}>
            <Checkbox checked={agree} onChange={(e) => setAgree(e.target.checked)} label="我同意個資使用條款" />
            <Button type="submit" variant="primary" disabled={!agree || busy} style={{ marginLeft: 'auto' }} iconRight="send">{busy ? '送出中…' : '送出'}</Button>
          </div>
          </form>
        </Card>
      </div>
      <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
        <Card variant="ink">
          <Eyebrow inverse>Upcoming</Eyebrow>
          {[['2026/10/14–16', '台灣能源展', '魔方 Demo Kit＋SPB、立面欄杆'], ['2027/3', '日本能源展', '筑波示範線同步啟用']].map(([d, t, s]) => (
            <div key={t} style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '120px 1fr', gap: 12 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-body-sm)', color: 'var(--amber-400)' }}>{d}</span>
              <div style={{ fontFamily: 'var(--font-cjk)' }}><div style={{ fontWeight: 700, color: 'var(--white)', fontSize: 'var(--size-body-sm)' }}>{t}</div><div style={{ fontSize: 'var(--size-caption)', color: 'var(--ink-300)', marginTop: 2 }}>{s}</div></div>
            </div>
          ))}
        </Card>
        <Card>
          <div style={{ fontSize: 'var(--size-label)', fontWeight: 600, letterSpacing: 'var(--track-label)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Locations</div>
          {[['台灣 Taiwan', '研發・產線・系統組裝'], ['日本・筑波 Tsukuba', 'CPS 模組暨系統示範線（2027/3）']].map(([a, b]) => (
            <div key={a} style={{ marginTop: 14, display: 'flex', gap: 10 }}>
              <span style={{ color: 'var(--accent-hover)', display: 'inline-flex', marginTop: 2 }}><Icon name="map-pin" size={16} /></span>
              <div><div style={{ fontSize: 'var(--size-body-sm)', fontWeight: 600, fontFamily: 'var(--font-cjk)' }}>{a}</div><div style={{ fontSize: 'var(--size-caption)', color: 'var(--text-muted)', fontFamily: 'var(--font-cjk)' }}>{b}</div></div>
            </div>
          ))}
        </Card>
      </div>
      {sent && (
        <div style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 40 }}>
          {sent === 'ok'
            ? <Toast tone="ok" title="已送出" message={(() => { const L = window.gwGetLang ? window.gwGetLang() : 'zh'; const t = window.gwT ? window.gwT(type) : type; return L === 'en' ? `We received your “${t}” inquiry and will reply by email.` : L === 'ja' ? `「${t}」のお問い合わせを受け付けました。メールでご返信します。` : `已收到「${type}」洽詢，我們會以 Email 回覆。`; })()} onDismiss={() => setSent(null)} />
            : <Toast tone="fault" title="送出失敗" message="請稍後再試，或直接來信 kuohawk@gmail.com。" onDismiss={() => setSent(null)} />}
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Contact });