// FinalCTA — emotive close + contact form

const FinalCTA = () => {
  const [form, setForm] = React.useState({ name: '', church: '', email: '', size: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const handleChange = e => setForm(f => ({ ...f, [e.target.name]: e.target.value }));

  const handleSubmit = e => {
    e.preventDefault();
    // Opens mailto with form data — replace with Formspree or backend endpoint
    const body = `Name: ${form.name}\nChurch: ${form.church}\nSize: ${form.size}\n\n${form.message}`;
    window.open(`mailto:hello@marketingmediamission.com?subject=Free Call Request — ${form.church}&body=${encodeURIComponent(body)}`);
    setSent(true);
  };

  return (
    <section id="contact" style={{ background: 'var(--espresso)', padding: '100px 48px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'start' }}>

          {/* Left */}
          <div className="fade-up">
            <div className="overline" style={{ color: 'var(--brass)', marginBottom: 24 }}>Book a Free Call</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 3.5vw, 52px)', color: 'var(--cream)', marginBottom: 28, lineHeight: 1.08 }}>
              From Sanctuary<br />to Screen —<br />
              <em style={{ color: 'var(--brass)', fontStyle: 'italic' }}>Elevate Every Sunday.</em>
            </h2>
            <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 16, lineHeight: 1.7, color: 'rgba(244,237,226,0.55)', marginBottom: 40 }}>
              30 minutes. No pressure, no pitch deck. Just a real conversation about your church's media and what's possible.
            </p>

            {/* What to expect */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: '✓', text: 'Audit of your current media presence' },
                { icon: '✓', text: 'Custom service recommendation for your size' },
                { icon: '✓', text: 'Pricing breakdown, no surprises' },
                { icon: '✓', text: 'First Reel delivered within 48 hours of signing' },
              ].map(({ icon, text }) => (
                <div key={text} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--brass)', fontSize: 13, marginTop: 2, flexShrink: 0 }}>{icon}</span>
                  <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(244,237,226,0.7)', lineHeight: 1.5 }}>{text}</span>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 48, paddingTop: 40, borderTop: '1px solid rgba(244,237,226,0.1)' }}>
              <div className="overline" style={{ color: 'rgba(244,237,226,0.3)', marginBottom: 16, fontSize: 10 }}>Or reach us directly</div>
              <a href="mailto:hello@marketingmediamission.com" style={{
                fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: 'var(--brass)',
                textDecoration: 'none', display: 'block', marginBottom: 8,
              }}>hello@marketingmediamission.com</a>
              <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(244,237,226,0.35)' }}>Nashville, TN · Serving churches nationwide</span>
            </div>
          </div>

          {/* Right: Form */}
          <div>
            {sent ? (
              <div style={{
                background: 'rgba(168,124,61,0.12)', border: '1px solid rgba(168,124,61,0.3)',
                borderRadius: 20, padding: '56px 40px', textAlign: 'center',
              }}>
                <div style={{ fontSize: 40, marginBottom: 20 }}>✝</div>
                <h3 className="display" style={{ fontSize: 28, color: 'var(--cream)', marginBottom: 16 }}>You're on the list.</h3>
                <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 15, color: 'rgba(244,237,226,0.6)', lineHeight: 1.6 }}>
                  We'll reach out within one business day to schedule your free call. Talk soon.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{
                background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(244,237,226,0.1)',
                borderRadius: 20, padding: '40px',
                display: 'flex', flexDirection: 'column', gap: 20,
              }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <FormField label="Your Name" name="name" value={form.name} onChange={handleChange} placeholder="Pastor John Smith" required />
                  <FormField label="Church Name" name="church" value={form.church} onChange={handleChange} placeholder="Trinity Church" required />
                </div>
                <FormField label="Email Address" name="email" type="email" value={form.email} onChange={handleChange} placeholder="pastor@trinitychurch.com" required />
                <div>
                  <label style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(244,237,226,0.5)', display: 'block', marginBottom: 8 }}>
                    Average Sunday Attendance
                  </label>
                  <select name="size" value={form.size} onChange={handleChange} style={selectStyle}>
                    <option value="">Select size...</option>
                    <option value="under-100">Under 100</option>
                    <option value="100-300">100–300</option>
                    <option value="300-1000">300–1,000</option>
                    <option value="1000-plus">1,000+</option>
                  </select>
                </div>
                <div>
                  <label style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(244,237,226,0.5)', display: 'block', marginBottom: 8 }}>
                    What's your biggest media challenge?
                  </label>
                  <textarea name="message" value={form.message} onChange={handleChange} rows={3} placeholder="We struggle to post consistently, our volunteers are burned out..." style={{ ...inputStyle, resize: 'vertical', minHeight: 80 }} />
                </div>
                <button type="submit" className="btn btn-rust" style={{ width: '100%', textAlign: 'center', fontSize: 13, cursor: 'pointer' }}>
                  Book My Free 30-Min Call
                </button>
                <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, color: 'rgba(244,237,226,0.25)', textAlign: 'center', lineHeight: 1.5 }}>
                  No commitment required. We'll confirm your time within 24 hours.
                </p>
              </form>
            )}
          </div>

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

const inputStyle = {
  width: '100%', padding: '12px 16px',
  background: 'rgba(255,255,255,0.06)',
  border: '1px solid rgba(244,237,226,0.15)',
  borderRadius: 8,
  fontFamily: 'DM Sans, sans-serif', fontSize: 14,
  color: 'var(--cream)',
  outline: 'none',
  transition: 'border-color 0.2s',
};

const selectStyle = {
  ...inputStyle,
  appearance: 'none',
  cursor: 'pointer',
};

const FormField = ({ label, name, type = 'text', value, onChange, placeholder, required }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <div>
      <label style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(244,237,226,0.5)', display: 'block', marginBottom: 8 }}>
        {label}
      </label>
      <input
        type={type} name={name} value={value} onChange={onChange}
        placeholder={placeholder} required={required}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          ...inputStyle,
          borderColor: focused ? 'rgba(168,124,61,0.5)' : 'rgba(244,237,226,0.15)',
        }}
      />
    </div>
  );
};