// Contact page — book intro call

const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', team: '10-50', problem: '' });
  const [sent, setSent] = React.useState(false);

  const css = `
    .ct-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; max-width: 1400px; margin: 0 auto; padding: 80px 56px; }
    .ct-left h1 { font-family: 'Instrument Serif', serif; font-size: 96px; line-height: 0.96; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 32px; }
    .ct-left h1 em { color: #c8542a; font-style: italic; }
    .ct-left p { font-size: 18px; line-height: 1.55; color: #4a3f33; margin: 0 0 40px; max-width: 480px; }
    .ct-detail { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid rgba(26,22,18,0.12); }
    .ct-detail-row { display: flex; gap: 16px; align-items: baseline; }
    .ct-detail-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; text-transform: uppercase; letter-spacing: 0.12em; min-width: 90px; }
    .ct-detail-val { font-size: 16px; color: #1a1612; }
    .ct-detail-val a { color: #1a1612; }
    .ct-detail-val a:hover { color: #c8542a; }

    .ct-form { background: #fff; border: 1px solid rgba(26,22,18,0.1); border-radius: 18px; padding: 40px; box-shadow: 0 24px 48px rgba(26,22,18,0.04); }
    .ct-form-h { font-family: 'Instrument Serif', serif; font-size: 32px; line-height: 1.05; margin: 0 0 28px; font-weight: 400; }
    .ct-form-h em { color: #c8542a; font-style: italic; }
    .ct-field { margin-bottom: 18px; }
    .ct-field label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
    .ct-field input, .ct-field textarea, .ct-field select { width: 100%; box-sizing: border-box; background: #f4efe6; border: 1px solid rgba(26,22,18,0.1); border-radius: 12px; padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 15px; color: #1a1612; outline: none; transition: border-color 0.2s, background 0.2s; }
    .ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus { border-color: #c8542a; background: #fff; }
    .ct-field textarea { resize: vertical; min-height: 110px; font-family: 'Inter', sans-serif; }
    .ct-radio-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .ct-radio { padding: 10px; background: #f4efe6; border: 1px solid rgba(26,22,18,0.1); border-radius: 10px; font-size: 13px; text-align: center; cursor: pointer; transition: all 0.2s; }
    .ct-radio.on { background: #1a1612; color: #f4efe6; border-color: #1a1612; }
    .ct-submit { width: 100%; padding: 16px; background: #1a1612; color: #f4efe6; border: none; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s, transform 0.2s; margin-top: 8px; }
    .ct-submit:hover { background: #c8542a; transform: translateY(-2px); }
    .ct-tiny { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; text-align: center; margin-top: 16px; }

    .ct-sent { text-align: center; padding: 40px 0; }
    .ct-sent h3 { font-family: 'Instrument Serif', serif; font-size: 40px; font-weight: 400; margin: 0 0 12px; }
    .ct-sent h3 em { color: #c8542a; font-style: italic; }
    .ct-sent p { color: #4a3f33; }

    @media (max-width: 1024px) {
      .ct-wrap { grid-template-columns: 1fr; gap: 56px; padding: 56px 32px; }
      .ct-left h1 { font-size: 72px; }
    }
    @media (max-width: 720px) {
      .ct-wrap { padding: 40px 20px; gap: 40px; }
      .ct-left h1 { font-size: 48px; margin-bottom: 24px; }
      .ct-left p { font-size: 16px; margin-bottom: 28px; }
      .ct-form { padding: 28px 24px; border-radius: 14px; }
      .ct-form-h { font-size: 26px; margin-bottom: 22px; }
      .ct-radio-row { grid-template-columns: repeat(2, 1fr); }
    }
  `;

  const submit = async (e) => {
    e.preventDefault();
    try {
      sessionStorage.setItem('lv_lead', JSON.stringify({ name: form.name, email: form.email }));
    } catch (_) {}

    // Submit to Netlify Forms, then redirect to thanks page
    const data = new FormData();
    data.append('form-name', 'contact');
    data.append('name', form.name);
    data.append('email', form.email);
    data.append('company', form.company);
    data.append('team', form.team);
    data.append('problem', form.problem);

    try {
      await fetch('/', { method: 'POST', body: data });
    } catch (_) {}

    window.location.href = 'Leviyet Thanks.html';
  };

  return (
    <>
      <window.WeNav active="contact" />
      <window.WeSEO page="contact" />
      <style>{css}</style>

      <div className="ct-wrap">
        <div className="ct-left">
          <div className="we-shead"><div className="we-shead-line"></div>Contact</div>
          <h1>Tell us what you're <em>working on.</em></h1>
          <p>30-minute intro call. No deck, no pitch — just a conversation about the problem and whether we're the right partner. We respond within one business day.</p>
          <div className="ct-detail">
            <div className="ct-detail-row">
              <div className="ct-detail-label">Email</div>
              <div className="ct-detail-val"><a href="mailto:hello@leviyet.com">hello@leviyet.com</a></div>
            </div>
            <div className="ct-detail-row">
              <div className="ct-detail-label">Phone</div>
              <div className="ct-detail-val">+1 (416) 555-0142</div>
            </div>
            <div className="ct-detail-row">
              <div className="ct-detail-label">Hours</div>
              <div className="ct-detail-val">Mon–Fri · 9–5 ET</div>
            </div>
            <div className="ct-detail-row">
              <div className="ct-detail-label">Capacity</div>
              <div className="ct-detail-val">Accepting 2 partnerships in q3 2026</div>
            </div>
          </div>
        </div>

        <div className="ct-form">
          {!sent ? (
            <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={submit}>
              <input type="hidden" name="form-name" value="contact" />
              <p style={{display:'none'}}><label>Don't fill this out: <input name="bot-field" /></label></p>
              <div className="ct-form-h">Book an <em>intro call.</em></div>
              <div className="ct-field">
                <label>Your name</label>
                <input name="name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} required />
              </div>
              <div className="ct-field">
                <label>Work email</label>
                <input name="email" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} required />
              </div>
              <div className="ct-field">
                <label>Company</label>
                <input name="company" value={form.company} onChange={e => setForm({...form, company: e.target.value})} />
              </div>
              <div className="ct-field">
                <label>Team size</label>
                <div className="ct-radio-row">
                  {['1-10', '10-50', '50-100', '100+'].map(t => (
                    <div key={t} className={`ct-radio ${form.team === t ? 'on' : ''}`} onClick={() => setForm({...form, team: t})}>{t}</div>
                  ))}
                </div>
              </div>
              <div className="ct-field">
                <label>What's the problem?</label>
                <textarea name="problem" value={form.problem} onChange={e => setForm({...form, problem: e.target.value})} placeholder="One or two sentences. We'll come prepared." required />
              </div>
              <button type="submit" className="ct-submit">Request intro call →</button>
              <div className="ct-tiny">// we reply within 1 business day</div>
            </form>
          ) : (
            <div className="ct-sent">
              <div className="ct-form-h">Got it.</div>
              <h3>Thanks, <em>{form.name.split(' ')[0] || 'friend'}.</em></h3>
              <p>We'll be in touch within one business day at <strong>{form.email}</strong> to find a time.</p>
            </div>
          )}
        </div>
      </div>

      <window.WeFooter />
    </>
  );
};

window.Contact = Contact;