// Section 11 — Contact (refresh / light variant) // Off-white + sky bloom backdrop. White form card with airy spacing. The // CTA carries the weight with a deep navy + amber arrow. const ContactSection = () => { const [form, setForm] = React.useState({ company: '', name: '', role: '', email: '', phone: '', message: '' }); const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error const [agreed, setAgreed] = React.useState(true); const set = (k) => (e) => setForm({ ...form, [k]: e.target.value }); // Power Automate (HTTP request received) endpoint. const ENDPOINT = 'https://default8e2e8d535c3148448e372cda826570.59.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/66ba9e83a2944e9092fb637b1a4acc74/triggers/manual/paths/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=n_bEfl18JmJegflMW7fGdmvv8EHbFE-_E7sE1AD2HT0'; const handleSubmit = async (e) => { if (e) e.preventDefault(); if (status === 'sending') return; if (!form.company.trim() || !form.name.trim() || !form.email.trim() || !form.message.trim()) { setStatus('missing'); return; } if (!agreed) { setStatus('noconsent'); return; } setStatus('sending'); try { await fetch(ENDPOINT, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=UTF-8' }, body: JSON.stringify(form) }); setStatus('sent'); setForm({ company: '', name: '', role: '', email: '', phone: '', message: '' }); } catch (err) { setStatus('error'); } }; const field = ({ id, label, en, type = 'text', required = true, placeholder, full = false }) => {label} {required && REQUIRED } {en} {type === 'textarea' ?

}
    </label>;

const fields = [
  { id: 'company', label: '会社名', en: 'COMPANY', placeholder: '株式会社○○' },
  { id: 'name', label: 'お名前', en: 'NAME', placeholder: '山田 太郎' },
  { id: 'role', label: 'お役職', en: 'ROLE', required: false, placeholder: '代表取締役 / 経営企画部長 など' },
  { id: 'email', label: 'メールアドレス', en: 'EMAIL', type: 'email', placeholder: 'name@company.co.jp' },
  { id: 'phone', label: 'お電話番号', en: 'PHONE', required: false, type: 'tel', placeholder: '03-XXXX-XXXX' },
  { id: 'message', label: 'ご相談内容', en: 'MESSAGE', type: 'textarea', full: true, placeholder: '現在の業務での課題感や、AIで実現したいことを自由にお書きください。' }];

return (
    <section
      id="contact"
      data-screen-label="11 Contact"
      className="ej-root"
      style={{
        width: 1440,
        padding: '180px 64px',
        background: 'var(--paper)',
        position: 'relative',
        overflow: 'hidden'
      }}>
      
      {/* Sky bloom decoration */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
          'radial-gradient(ellipse 60% 50% at 90% 0%, rgba(186,230,253,0.80), transparent 60%),' +
          ' radial-gradient(ellipse 50% 45% at 10% 100%, rgba(125,211,252,0.18), transparent 60%)',
          pointerEvents: 'none'
        }}>
      </div>

{/* Decorative oversized type, very faint */}
      <div
        aria-hidden
        className="ej-en"
        style={{
          position: 'absolute',
          right: -40,
          bottom: -80,
          fontSize: 360,
          fontWeight: 400,
          color: 'rgba(11, 62, 111, 0.035)',
          letterSpacing: '-0.05em',
          lineHeight: 0.85,
          pointerEvents: 'none'
        }}>
        
        CONTACT
      </div>

<div style={{ position: 'relative' }}>
        <FadeIn>
          <SectionHead
            num="07"
            titleEn="LET'S TALK."
            titleJp=""
            lead={<>ご相談は<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>30分のオンライン</strong>から。<br />ご相談内容に応じて、後日その場で資料をお送りします。</>} />
          
        </FadeIn>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          {/* Left — illustrative copy (TIMELINE & DIRECT removed per feedback) */}
          <FadeIn>
            <div>
              <div className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)', marginBottom: 24 }}>
                ／ FREE CONSULTATION
              </div>
              <div className="ej-jp" style={{ fontSize: 20, color: 'var(--navy)', fontWeight: 600, lineHeight: 1.7 }}>
                まずは30分の<br />
                オンライン相談から。
              </div>
              <p className="ej-jp" style={{ marginTop: 24, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)' }}>
                現在の業務でのお困りごとや、AIで実現したいことを<br />
                自由にお書きください。1営業日内にご返信いたします。
              </p>
              <div className="ej-mono" style={{ marginTop: 36, fontSize: 12, color: 'var(--ink-60)' }}>
                ／ RESPONSE WITHIN 1 BUSINESS DAY
              </div>
            </div>
          </FadeIn>

{/* Right — form */}
          <FadeIn delay={100}>
            <div style={{
              background: 'white',
              color: 'var(--ink)',
              padding: 56,
              borderRadius: 6,
              border: '1px solid var(--rule)',
              boxShadow: '0 1px 0 rgba(11,62,111,0.02), 0 30px 80px -40px rgba(11,62,111,0.25)'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
                <span className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)' }}>
                  ／ INQUIRY FORM
                </span>
                <span className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)' }}>
                  SECURE — TLS / NO TRACKING
                </span>
              </div>

<form
                onSubmit={handleSubmit}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '1fr 1fr',
                  gap: '36px 32px'
                }}>
                
                {fields.map((f) => field(f))}
              </form>

{status === 'sent' &&
              <div className="ej-jp" style={{ marginTop: 28, padding: '16px 20px', background: 'var(--teal-50)', borderLeft: '3px solid var(--teal)', fontSize: 13, color: 'var(--navy)', fontWeight: 600 }}>
                送信が完了しました。1営業日内にご返信いたします。
              </div>}
              {status === 'missing' &&
              <div className="ej-jp" style={{ marginTop: 28, padding: '16px 20px', background: '#FEF3C7', borderLeft: '3px solid var(--amber-deep)', fontSize: 13, color: 'var(--navy)', fontWeight: 600 }}>
                会社名・お名前・メールアドレス・ご相談内容は必須項目です。
              </div>}
              {status === 'noconsent' &&
              <div className="ej-jp" style={{ marginTop: 28, padding: '16px 20px', background: '#FEF3C7', borderLeft: '3px solid var(--amber-deep)', fontSize: 13, color: 'var(--navy)', fontWeight: 600 }}>
                個人情報の取り扱いにご同意ください。
              </div>}
              {status === 'error' &&
              <div className="ej-jp" style={{ marginTop: 28, padding: '16px 20px', background: '#FEE2E2', borderLeft: '3px solid #DC2626', fontSize: 13, color: 'var(--navy)', fontWeight: 600 }}>
                送信に失敗しました。お手数ですが時間をおいて再度お試しください。
              </div>}

<div
                style={{
                  marginTop: 44,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  gap: 24
                }}>
                
                <label className="ej-jp" style={{ fontSize: 12, color: 'var(--ink-60)', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} style={{ width: 14, height: 14 }} />
                  <span>個人情報の取り扱いに同意します</span>
                </label>

<button
                  type="button"
                  onClick={handleSubmit}
                  disabled={status === 'sending'}
                  style={{
                    background: 'var(--navy)',
                    color: 'white',
                    border: 'none',
                    padding: '20px 32px',
                    borderRadius: 6,
                    fontFamily: 'var(--font-ui)',
                    fontSize: 14,
                    fontWeight: 500,
                    cursor: status === 'sending' ? 'default' : 'pointer',
                    opacity: status === 'sending' ? 0.6 : 1,
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 14
                  }}>
                  
                  {status === 'sending' ? '送信中…' : '無料相談を申し込む'}
                  <span
                    style={{
                      width: 28,
                      height: 28,
                      borderRadius: '50%',
                      background: 'white',
                      color: 'var(--navy)',
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: 14
                    }}>
                    
                    →
                  </span>
                </button>
              </div>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

};

window.ContactSection = ContactSection;