/* MEXYFOR — Contact (お問い合わせ) Page Design Comp ／ Plan A direction */

const ContactComp = () => {
  const T = window.TOKENS;

  const initialForm = {
    inquiryType: '事業・サービスに関するお問い合わせ',
    name: '',
    company: '',
    email: '',
    message: '',
    privacyAgreed: false,
  };
  const [formData, setFormData] = React.useState(initialForm);
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const update = (key) => (e) => setFormData((p) => ({ ...p, [key]: e.target.value }));

  const ENDPOINT = 'https://script.google.com/macros/s/AKfycbxNs1sey8O6Y4PkIxH7nvio78v0SOael3Zb4lbVB1w97uwVuMxN6e9jCJOD3Rn8Dm-w/exec';

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    if (!formData.privacyAgreed) {
      alert('プライバシーポリシーへの同意が必要です。');
      return;
    }
    setStatus('sending');
    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        body: JSON.stringify({
          inquiryType: formData.inquiryType,
          name: formData.name,
          company: formData.company,
          email: formData.email,
          message: formData.message || '記載なし',
        }),
      });
      const data = await res.json().catch(() => ({}));
      console.log('[Contact] response:', res.status, data);
      if (!res.ok || data.success !== true) {
        throw new Error(data.error || `HTTP ${res.status}`);
      }
      setStatus('success');
      setFormData(initialForm);
    } catch (err) {
      console.error('[Contact] submission failed:', err);
      setStatus('error');
    }
  };

  const wrap = {
    width: '100%',
    maxWidth: 1440,
    margin: '0 auto',
    background: T.paper,
    color: T.ink,
    fontFamily: T.sans,
  };
  const lbl = { fontFamily: T.mono, fontSize: 10, letterSpacing: '0.28em', color: T.ink3, textTransform: 'uppercase' };

  const fieldLabel = { fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em', color: T.ink3, textTransform: 'uppercase' };
  const fieldInput = {
    width: '100%',
    padding: '14px 0',
    fontSize: 16,
    fontFamily: T.serif,
    color: T.ink,
    background: 'transparent',
    border: 'none',
    borderBottom: `1px solid ${T.rule}`,
    outline: 'none',
    boxSizing: 'border-box',
  };

  return (
    <div style={wrap}>
      {/* ---------- Header ---------- */}
      <header style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        padding: '24px 96px',
        borderBottom: `1px solid ${T.rule}`,
        background: T.paper,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '14px 14px', gridTemplateRows: '14px 14px', gap: 2 }}>
            <div style={{ background: T.orange }}></div>
            <div style={{ background: T.navy }}></div>
            <div style={{ background: T.navy }}></div>
            <div style={{ background: T.orange }}></div>
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 19, letterSpacing: '0.18em', color: T.ink }}>MEXYFOR</div>
        </div>
        <nav style={{ display: 'flex', gap: 32, fontSize: 13, color: T.ink2, letterSpacing: '0.04em' }}>
          <span>Business</span>
          <span>Company</span>
          <span>Message</span>
          <span>News</span>
          <span style={{ color: T.ink, borderBottom: `1px solid ${T.ink}`, paddingBottom: 4 }}>Contact</span>
        </nav>
        <div></div>
      </header>

      {/* ---------- Breadcrumb ---------- */}
      <div style={{ ...lbl, padding: '20px 96px', borderBottom: `1px solid ${T.rule}`, letterSpacing: '0.08em', textTransform: 'none' }}>
        <a href="index.html" style={{ color: 'inherit', textDecoration: 'none' }}>Top</a>
        <span style={{ margin: '0 16px', color: T.rule }}>／</span>
        <span style={{ color: T.ink }}>お問い合わせ</span>
      </div>

      {/* ---------- HERO ---------- */}
      <section style={{ padding: '140px 96px 100px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'flex-end', gap: 64 }}>
          <div>

            <div style={{ marginTop: 32, fontFamily: T.en, fontSize: 22, fontStyle: 'italic', color: T.ink3, letterSpacing: '0.04em' }}>
              Get in <span style={{ color: T.orange }}>touch</span>.
            </div>
            <h1 style={{
              marginTop: 28,
              fontFamily: T.serif,
              fontWeight: 500,
              fontSize: 64,
              lineHeight: 1.25,
              letterSpacing: '0.04em',
              color: T.ink,
              margin: 0,
            }}>
              Contact
            </h1>
          </div>
          <div style={{ paddingBottom: 24 }}>
            <div style={{ fontSize: 14, lineHeight: 2.2, color: T.ink2, maxWidth: 460, letterSpacing: '0.04em' }}>
              事業・サービスに関するご相談、ご提携やアライアンスのご相談など、
              下記フォームよりお気軽にお問い合わせください。
            </div>
          </div>
        </div>
      </section>

      {/* ---------- FORM ---------- */}
      <section style={{ borderTop: `1px solid ${T.rule}`, padding: '100px 96px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 96 }}>
          <div>

            <div style={{ marginTop: 16, fontFamily: T.serif, fontSize: 28, color: T.ink }}>フォーム</div>
            <div style={{ marginTop: 8, fontFamily: T.en, fontStyle: 'italic', color: T.ink3, fontSize: 16 }}>Inquiry form</div>
            <div style={{ marginTop: 40, fontSize: 12, color: T.ink2, lineHeight: 2, maxWidth: 240 }}>
              <span style={{ color: T.orange, fontFamily: T.mono, marginRight: 6 }}>*</span>
              印は必須項目です。
              いただいた情報は、お問い合わせへの対応のみに使用します。
            </div>
          </div>

          <form onSubmit={handleSubmit} data-mxf-bound="1" style={{ maxWidth: 720 }}>
            {/* Inquiry type — segmented */}
            <div style={{ marginBottom: 56 }}>
              <div style={fieldLabel}>用件区分 <span style={{ color: T.orange }}>*</span></div>
              <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${T.rule}` }}>
                {[
                  '事業・サービスに関するお問い合わせ',
                  '提携・アライアンスご相談',
                ].map((t, i) => {
                  const sel = formData.inquiryType === t;
                  return (
                    <div
                      key={i}
                      onClick={() => setFormData((p) => ({ ...p, inquiryType: t }))}
                      style={{
                        padding: '24px 28px',
                        background: sel ? T.ink : 'transparent',
                        color: sel ? T.paper : T.ink2,
                        borderRight: i === 0 ? `1px solid ${T.rule}` : 'none',
                        cursor: 'pointer',
                        fontSize: 13,
                        fontFamily: T.serif,
                        letterSpacing: '0.04em',
                        display: 'flex',
                        alignItems: 'center',
                        gap: 12,
                        userSelect: 'none',
                      }}
                    >
                      <span style={{
                        display: 'inline-block',
                        width: 14,
                        height: 14,
                        borderRadius: '50%',
                        border: `1.5px solid ${sel ? T.orange : T.rule}`,
                        background: sel ? T.orange : 'transparent',
                        flexShrink: 0,
                      }}></span>
                      {t}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Name + Company */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 48 }}>
              <div>
                <div style={fieldLabel}>お名前 <span style={{ color: T.orange }}>*</span></div>
                <input style={fieldInput} placeholder="山田 太郎" required value={formData.name} onChange={update('name')} />
              </div>
              <div>
                <div style={fieldLabel}>会社名・組織名 <span style={{ color: T.orange }}>*</span></div>
                <input style={fieldInput} placeholder="株式会社○○○" required value={formData.company} onChange={update('company')} />
              </div>
            </div>

            {/* Email */}
            <div style={{ marginBottom: 48 }}>
              <div style={fieldLabel}>メールアドレス <span style={{ color: T.orange }}>*</span></div>
              <input type="email" style={fieldInput} placeholder="name@example.com" required value={formData.email} onChange={update('email')} />
            </div>

            {/* Body */}
            <div style={{ marginBottom: 56 }}>
              <div style={fieldLabel}>お問い合わせ内容 <span style={{ color: T.orange }}>*</span></div>
              <textarea
                style={{
                  ...fieldInput,
                  resize: 'none',
                  minHeight: 200,
                  padding: '20px 0',
                  lineHeight: 2,
                }}
                placeholder="お問い合わせ内容をご記入ください。&#10;ご相談の背景や、ご検討中の取り組みなどがあれば、あわせてお聞かせください。"
                required
                value={formData.message}
                onChange={update('message')}
              ></textarea>
            </div>

            {/* Privacy */}
            <div
              onClick={() => setFormData((p) => ({ ...p, privacyAgreed: !p.privacyAgreed }))}
              style={{
                marginBottom: 24,
                padding: '24px 28px',
                background: T.paperDeep,
                border: `1px solid ${formData.privacyAgreed ? T.orange : T.rule}`,
                fontSize: 12,
                color: T.ink2,
                lineHeight: 2,
                display: 'flex',
                alignItems: 'flex-start',
                gap: 16,
                cursor: 'pointer',
                userSelect: 'none',
              }}
            >
              <span style={{
                display: 'inline-block',
                width: 16,
                height: 16,
                border: `1.5px solid ${T.orange}`,
                background: formData.privacyAgreed ? T.orange : 'transparent',
                position: 'relative',
                flexShrink: 0,
                marginTop: 2,
              }}>
                {formData.privacyAgreed && (
                  <span style={{ position: 'absolute', top: 1, left: 4, color: T.paper, fontSize: 12, lineHeight: 1 }}>✓</span>
                )}
              </span>
              <span>
                <a
                  href="pp.html"
                  target="_blank"
                  rel="noopener"
                  onClick={(e) => e.stopPropagation()}
                  style={{ color: T.ink, borderBottom: `1px solid ${T.ink2}`, textDecoration: 'none' }}
                >プライバシーポリシー</a>
                に同意のうえ、送信します。
              </span>
            </div>

            {/* Status message */}
            {status === 'success' && (
              <div style={{
                marginBottom: 24,
                padding: '20px 24px',
                borderLeft: `3px solid ${T.orange}`,
                background: T.paperDeep,
                fontSize: 13,
                color: T.ink,
                lineHeight: 1.8,
              }}>
                お問い合わせを受け付けました。担当者よりご返信いたします。
              </div>
            )}
            {status === 'error' && (
              <div style={{
                marginBottom: 24,
                padding: '20px 24px',
                borderLeft: '3px solid #c5443a',
                background: T.paperDeep,
                fontSize: 13,
                color: T.ink,
                lineHeight: 1.8,
              }}>
                送信に失敗しました。時間をおいて再度お試しいただくか、kanai@mexyfor.co.jp まで直接ご連絡ください。
              </div>
            )}

            {/* Submit */}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <button
                type="submit"
                disabled={status === 'sending'}
                style={{
                  background: T.ink,
                  color: T.paper,
                  padding: '22px 56px',
                  border: 'none',
                  fontFamily: T.mono,
                  fontSize: 12,
                  letterSpacing: '0.24em',
                  cursor: status === 'sending' ? 'default' : 'pointer',
                  opacity: status === 'sending' ? 0.6 : 1,
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 16,
                }}
              >
                {status === 'sending'
                  ? 'SENDING…'
                  : <span>SEND MESSAGE <span style={{ color: T.orange }}>↗</span></span>}
              </button>
            </div>
          </form>
        </div>
      </section>

      {/* ---------- Footer ---------- */}
      <footer style={{ background: T.dark, color: T.paper, padding: '80px 80px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <svg width="120" height="22" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg">
              <g>
                <rect x="0" y="0" width="20" height="20" fill={T.orange} />
                <rect x="20" y="0" width="20" height="20" fill={T.navy} />
                <rect x="0" y="20" width="20" height="20" fill={T.navy} />
                <rect x="20" y="20" width="20" height="20" fill={T.orange} />
              </g>
              <text x="50" y="29" fontFamily={T.sans} fontSize="22" fontWeight="700" fill={T.paper} letterSpacing="2">MEXYFOR</text>
            </svg>
          </div>
          {[
            ['EXPLORE', ['Business', 'Company', 'Message', 'News']],
            ['JOIN', ['Contact']],
            ['SERVICES', ['LifeAware ↗']],
          ].map(([label, items]) => (
            <div key={label}>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: '#7a7a7a', letterSpacing: '0.2em', marginBottom: 24 }}>{label}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13, color: T.paper }}>
                {items.map(it => it === 'LifeAware ↗' ? (
                  <a key={it} href="https://lifeaware.jp/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>{it}</a>
                ) : (
                  <span key={it}>{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 80,
          paddingTop: 24,
          borderTop: '1px solid #2a2a30',
          display: 'flex',
          justifyContent: 'space-between',
          fontFamily: T.mono,
          fontSize: 10,
          color: '#7a7a7a',
          letterSpacing: '0.14em',
        }}>
          <span>© 2026 MEXYFOR INC. ALL RIGHTS RESERVED.</span>
          <span style={{ display: 'flex', gap: 24 }}>
            <a href="pp.html" style={{ color: 'inherit', textDecoration: 'none' }}>PrivacyPolicy</a>
          </span>
        </div>
      </footer>
    </div>
  );
};

window.ContactComp = ContactComp;