// Contact page

function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };
  return (
    <div className="page shell">
      <div className="sec-head" style={{ marginTop: 24 }}>
        <div className="sec-label"><span className="sec-label-num">06</span>聯絡我們 / CONTACT</div>
        <div>
          <h2 className="sec-title">
            <span className="zh">跟我們聊聊你的演出</span>
            <span className="en">LET'S DESIGN THE SIGNAL CHAIN</span>
          </h2>
        </div>
      </div>

      <div className="contact-grid">
        <div className="contact-left">
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.12em', marginBottom: 24 }}>
            DIRECT LINE · 直接聯繫
          </div>
          <div className="contact-item">
            <span className="k">PHONE</span>
            <span className="v">+886 931-040-560</span>
          </div>
          <div className="contact-item">
            <span className="k">EMAIL</span>
            <span className="v">contact@feblow.co</span>
          </div>
          <div className="contact-item">
            <span className="k">STUDIO</span>
            <span className="v">臺北市 · Taipei, TW</span>
          </div>
          <div className="contact-item">
            <span className="k">HOURS</span>
            <span className="v">MON – FRI · 10:00 – 19:00</span>
          </div>
          <div className="contact-item">
            <span className="k">RESPONSE</span>
            <span className="v" style={{ color: 'var(--green)' }}>&lt; 24 H · 一般案件</span>
          </div>
          <div style={{ marginTop: 40, padding: 20, border: '1px solid var(--line)', background: 'rgba(218, 165, 32, 0.03)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em', marginBottom: 10 }}>
              ⚠ 急件 / URGENT
            </div>
            <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.7 }}>
              若為緊急製作需求（72 小時內進場），請直接來電並註明「急件」，我們會優先回覆。
            </p>
          </div>
        </div>
        <div className="contact-right">
          {sent && (
            <div style={{ padding: 16, border: '1px solid var(--green)', color: 'var(--green)', fontFamily: 'var(--mono)', fontSize: 12, marginBottom: 24 }}>
              ● SIGNAL RECEIVED — 我們會在 24 小時內回覆你。
            </div>
          )}
          <form onSubmit={submit}>
            <div className="form-row">
              <label>單位 / NAME OR ORG</label>
              <input type="text" placeholder="例：某某製作有限公司" required />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div className="form-row">
                <label>PHONE · 電話</label>
                <input type="tel" placeholder="09XX-XXX-XXX" required />
              </div>
              <div className="form-row">
                <label>EMAIL</label>
                <input type="email" placeholder="you@domain.com" required />
              </div>
            </div>
            <div className="form-row">
              <label>EVENT TYPE · 活動類型</label>
              <select>
                <option>演唱會 · CONCERT</option>
                <option>音樂節 · FESTIVAL</option>
                <option>劇場演出 · THEATRE</option>
                <option>會議活動 · CORPORATE</option>
                <option>技術講座 · WORKSHOP</option>
                <option>其他 · OTHER</option>
              </select>
            </div>
            <div className="form-row">
              <label>DATE / VENUE · 日期／場地</label>
              <input type="text" placeholder="例：2026.06.15 · 臺北流行音樂中心" />
            </div>
            <div className="form-row">
              <label>BRIEF · 案件說明</label>
              <textarea placeholder="告訴我們活動規模、觀眾人數、你目前遇到的問題..." rows={5} required />
            </div>
            <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>SIGNAL READY · SEND TO FOH</span>
              <button type="submit" className="btn btn-primary">TRANSMIT <span className="arr">→</span></button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage });