// CTA — 오렌지 배경, 좌측 카피 + 우측 폼 카드
const CTA = ({ formRef }) => {
  return (
    <section ref={formRef} id="cta" style={{
      background: 'var(--orange-500)',
      position: 'relative',
      overflow: 'hidden',
      padding: 'var(--space-3xl) 0'
    }}>
      {/* 배경 텍스처 */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'radial-gradient(circle at 20% 10%, rgba(255,255,255,.18) 0%, transparent 40%), radial-gradient(circle at 90% 90%, rgba(10,31,68,.15) 0%, transparent 50%)',
        pointerEvents: 'none'
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="rsp-stack" style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: '4rem',
          alignItems: 'center'
        }}>
          <div>
            <h2 className="sec-title rsp-display" style={{ color: '#fff' }}>
              한 달 먼저<br className="br-desktop" /><span className="sp-m"> </span>겪어보고<br />결정하세요.
            </h2>

            <p className="sec-lead rsp-body" style={{
              color: 'rgba(255,255,255,0.92)',
              wordBreak: 'keep-all',
              overflowWrap: 'break-word'
            }}>
              대행 수수료 첫 달은 100% 무료입니다.
              싱크온이 맞는 파트너인지, 직접 겪어보고 판단하세요.
            </p>

            <div className="rsp-bullets" style={{
              marginTop: '2.5rem', display: 'flex', gap: '2.25rem', flexWrap: 'wrap',
              color: 'rgba(255,255,255,0.95)'
            }}>
              <Bullet text="대행 수수료 1개월 100% 무료" />
              <Bullet text="진단 후 맞춤 전략 제안" />
              <Bullet text="부담 없이 한 달 뒤 결정" />
            </div>
          </div>

          <ContactCard />
        </div>
      </div>
    </section>);
};

const Bullet = ({ text }) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', fontSize: '0.875rem', fontWeight: 500 }}>
    <svg width="1.125rem" height="1.125rem" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0 }}>
      <circle cx="9" cy="9" r="9" fill="#fff" />
      <path d="M5 9 L8 12 L13 6" stroke="var(--orange-500)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
    {text}
  </div>;

const ContactCard = () => {
  const [form, setForm] = React.useState({ name: '', brand: '', phone: '', revenue: '', adspend: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);

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

  const onSubmit = async (e) => {
    e.preventDefault();

    // 중복 제거용 고유 ID
    const event_id = 'lead_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8);

    // Meta 픽셀 쿠키
    const getCookie = (name) => {
      const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      return match ? match[2] : null;
    };
    const fbp = getCookie('_fbp');
    const fbc = getCookie('_fbc');

    // 브라우저 이벤트
    if (typeof fbq !== 'undefined') {
      fbq('track', 'Lead', {}, { eventID: event_id });
    }

    // 서버 사이드 이벤트 (CAPI)
    try {
      await fetch('/capi_send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          event_id, user_name: form.name, user_phone: form.phone, fbp, fbc
        })
      });
    } catch (err) {
      console.error('CAPI 전송 오류:', err);
    }

    // 이메일 전송
    try {
      await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key:   '085fa558-7912-4b0f-b468-87d94695ef9e',
          subject:      '[싱크온] 새로운 무료 상담 신청이 도착했습니다',
          from_name:    '싱크온 홈페이지',
          이름:          form.name,
          브랜드:        form.brand,
          연락처:        form.phone,
          연간매출:      form.revenue,
          연간마케팅비:   form.adspend,
          추가문의:      form.message
        })
      });
    } catch (err) {
      console.error('Web3Forms 전송 오류:', err);
    }

    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };

  const fieldBase = {
    width: '100%',
    border: '1.5px solid var(--line-200)',
    borderRadius: '0.625rem',
    padding: '1rem 1.125rem',
    fontSize: '0.9375rem',
    fontFamily: 'var(--font-sans)',
    background: '#fff',
    color: 'var(--navy-800)',
    transition: 'border-color .15s ease, box-shadow .15s ease',
    outline: 'none'
  };

  return (
    <form onSubmit={onSubmit} action="javascript:void(0)" style={{
      background: '#fff',
      borderRadius: '1.25rem',
      padding: '2.5rem',
      width: '100%',
      boxShadow: '0 32px 60px rgba(10,31,68,.18), 0 8px 16px rgba(10,31,68,.08)'
    }}>
      <h3 style={{
        fontWeight: 700, fontSize: '1.25rem', color: 'var(--navy-800)',
        margin: '0 0 1.75rem', letterSpacing: '-0.015em'
      }}>
        1개월 무료 대행 신청
      </h3>

      <div style={{ display: 'grid', gap: '0.875rem' }}>
        <FormRow label="성함">
          <input style={fieldBase} placeholder="홍길동" value={form.name} onChange={onChange('name')} required />
        </FormRow>
        <FormRow label="브랜드 / 쇼핑몰">
          <input style={fieldBase} placeholder="예) 코튼하우스" value={form.brand} onChange={onChange('brand')} required />
        </FormRow>
        <FormRow label="연락처">
          <input style={fieldBase} placeholder="010-0000-0000" value={form.phone} onChange={onChange('phone')} required />
        </FormRow>
        <FormRow label="연간 매출 규모">
          <input style={fieldBase} placeholder="예) 5억원" value={form.revenue} onChange={onChange('revenue')} />
        </FormRow>
        <FormRow label="연간 마케팅비 규모">
          <input style={fieldBase} placeholder="예) 5천만원" value={form.adspend} onChange={onChange('adspend')} />
        </FormRow>
        <FormRow label="추가 문의사항">
          <textarea
            style={{ ...fieldBase, minHeight: '6rem', resize: 'vertical', lineHeight: 1.6 }}
            placeholder="궁금하신 점이나 현재 상황을 자유롭게 적어주세요. (선택)"
            value={form.message} onChange={onChange('message')} />
        </FormRow>
      </div>

      <button type="submit" className="btn btn-orange btn-submit" style={{
        width: '100%', marginTop: '1.75rem',
        background: submitted ? '#1A8C7A' : 'var(--navy-800)',
        boxShadow: 'none',
        transition: 'background-color .2s ease'
      }}
      onMouseEnter={(e) => { if (!submitted) e.currentTarget.style.background = 'var(--navy-700)'; }}
      onMouseLeave={(e) => { if (!submitted) e.currentTarget.style.background = 'var(--navy-800)'; }}>
        {submitted ? '✓ 신청이 접수되었습니다' : '1개월 무료 대행 신청'}
      </button>

      <p style={{
        fontSize: '0.75rem', color: 'var(--ink-500)', textAlign: 'center',
        marginTop: '1rem', lineHeight: 1.6
      }}>
        영업일 기준 24시간 내 직접 연락드립니다.<br />
        제출된 정보는 <a href="privacy.html" target="_blank" style={{ textDecoration: 'underline', color: 'var(--ink-500)' }}>개인정보처리방침</a>에 따라 처리됩니다.
      </p>
    </form>);
};

const FormRow = ({ label, children }) =>
  <label style={{ display: 'grid', gap: '0.5rem' }}>
    <span style={{
      fontSize: '0.75rem', fontWeight: 600, color: 'var(--ink-700)',
      letterSpacing: '0.01em'
    }}>{label}</span>
    {children}
  </label>;

window.CTA = CTA;