// Contact.jsx — Verigo Global start-a-conversation page
const { V: VK, MAXW: MWK, FONT: FTK } = window;

const ContactPage = ({ onNav }) => {
  const [form, setForm] = React.useState({ name: '', email: '', org: '', size: '25–100', framework: 'ISO 27001', service: 'Readiness Assessments', market: 'United States', message: '' });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [err, setErr] = React.useState(false);
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setErr(false);
    const { error } = await window.submitInquiry({
      form_type: 'contact',
      name: form.name, email: form.email, company: form.org,
      framework: form.framework,
      service_interest: form.service,
      message: form.message,
      metadata: { size: form.size, market: form.market },
    });
    setSubmitting(false);
    if (error) { setErr(true); return; }
    setSent(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const input = { fontFamily: FTK, fontSize: 14, color: VK.black, background: '#fff', border: `1.5px solid ${VK.g200}`, borderRadius: 8, padding: '11px 14px', outline: 'none', width: '100%', transition: 'border-color 150ms' };
  const label = { fontSize: 12.5, fontWeight: 600, color: VK.black, display: 'block', marginBottom: 7 };
  const selectStyle = { ...input, appearance: 'none', backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AAA' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', paddingRight: 32, cursor: 'pointer' };

  if (sent) return (
    <div style={{ minHeight: '62vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '80px 32px' }}>
      <div style={{ textAlign: 'center', maxWidth: 460 }}>
        <div style={{ width: 68, height: 68, borderRadius: '50%', background: VK.purpleSubtle, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
          <window.Icon name="check" size={34} color={VK.purple} />
        </div>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.02em', margin: '0 0 14px', color: VK.black, fontFamily: FTK }}>We'll be in touch.</h2>
        <p style={{ color: VK.g500, lineHeight: 1.65, fontSize: 16, margin: '0 0 28px' }}>Thank you for reaching out. A senior Verigo practitioner will contact you within one business day to scope your needs and map the fastest path to certification.</p>
        <window.Btn kind="ghost" onClick={() => onNav('home')}>Back to home</window.Btn>
      </div>
    </div>
  );

  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="grid" opacity={0.12} style={{ top: -20, right: -10, width: 460, height: 360 }} />
    <div style={{ maxWidth: MWK, margin: '0 auto', padding: '72px 32px', position: 'relative', zIndex: 1 }}>
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 500px', gap: 80, alignItems: 'start' }}>
        <div>
          <window.Overline style={{ marginBottom: 14 }}>Start a Conversation</window.Overline>
          <h1 className="vg-hero-title" style={{ fontSize: 54, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 20px', lineHeight: 1.04, color: VK.black, fontFamily: FTK }}>Begin your compliance journey.</h1>
          <p style={{ fontSize: 18, color: VK.g500, lineHeight: 1.6, marginBottom: 44, maxWidth: 460 }}>Tell us about your organization, target framework, and timeline. We'll come back with a scoped plan, fixed pricing, and a clear path to certification.</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {[
              ['search', '1. Discovery call', 'A 30-minute session to understand your current state, goals, and timeline.'],
              ['clipboard', '2. Scoping & proposal', 'A detailed proposal with timeline, deliverables, and fixed pricing.'],
              ['shield', '3. Program kickoff', 'Your dedicated senior practitioner team gets to work immediately — no delays.'],
            ].map(([icon, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, borderRadius: 9, background: VK.purpleSubtle, color: VK.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={icon} size={22} />
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 4, color: VK.black }}>{t}</div>
                  <div style={{ fontSize: 14, color: VK.g500, lineHeight: 1.55 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40, padding: '24px', background: VK.g50, border: `1px solid ${VK.g200}`, borderRadius: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: VK.g400, width: '100%', marginBottom: 4 }}>Serving four markets</div>
            {['United States', 'United Kingdom', 'India', 'Singapore'].map(m => (
              <span key={m} style={{ fontSize: 13, fontWeight: 600, color: VK.g600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <window.Icon name="mapPin" size={15} color={VK.purple} />{m}
              </span>
            ))}
          </div>
        </div>

        <form onSubmit={handleSubmit} style={{ background: '#fff', border: `1px solid ${VK.g200}`, borderRadius: 16, padding: '36px', display: 'flex', flexDirection: 'column', gap: 18, boxShadow: '0 4px 24px rgba(0,0,0,0.05)' }}>
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div><label style={label}>Full name</label><input style={input} required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="Jane Smith" /></div>
            <div><label style={label}>Work email</label><input style={input} type="email" required value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} placeholder="jane@company.com" /></div>
          </div>
          <div><label style={label}>Organization</label><input style={input} value={form.org} onChange={e => setForm(f => ({ ...f, org: e.target.value }))} placeholder="Acme Technologies" /></div>
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <label style={label}>Company size</label>
              <select style={selectStyle} value={form.size} onChange={e => setForm(f => ({ ...f, size: e.target.value }))}>
                {['Under 25', '25–100', '100–500', '500–1,000', '1,000+'].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div>
              <label style={label}>Primary market</label>
              <select style={selectStyle} value={form.market} onChange={e => setForm(f => ({ ...f, market: e.target.value }))}>
                {['United States', 'United Kingdom', 'India', 'Singapore'].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
          </div>
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <label style={label}>Target framework</label>
              <select style={selectStyle} value={form.framework} onChange={e => setForm(f => ({ ...f, framework: e.target.value }))}>
                {['ISO 27001', 'ISO 42001', 'SOC 2', 'CMMC 2.0', 'HITRUST', 'CMMI', 'NIST', 'Multiple frameworks', 'Not sure yet'].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div>
              <label style={label}>Service interested in</label>
              <select style={selectStyle} value={form.service} onChange={e => setForm(f => ({ ...f, service: e.target.value }))}>
                {['Readiness Assessments', 'Implementation Toolkits', 'Pre-Audit Preparation', 'Formal Audits', 'CCP Training', 'Multiple services', 'Not sure yet'].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
          </div>
          <div><label style={label}>What are you working toward?</label><textarea style={{ ...input, resize: 'none' }} rows={4} value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} placeholder="Tell us about your compliance goals, any contract deadlines, and where you are today…" /></div>
          {err && <p style={{ fontSize: 13, color: '#D93B3B', background: '#FDEAEA', border: '1px solid #F5C2C2', borderRadius: 8, padding: '10px 14px', margin: 0 }}>Something went wrong sending your inquiry. Please try again, or email us directly.</p>}
          <window.Btn kind="primary" style={{ width: '100%', justifyContent: 'center', opacity: submitting ? 0.7 : 1, cursor: submitting ? 'default' : 'pointer' }}>{submitting ? 'Sending…' : <>Send Inquiry <window.Icon name="arrow" size={17} color="#fff" /></>}</window.Btn>
          <p style={{ fontSize: 12, color: VK.g400, textAlign: 'center', margin: 0 }}>We typically respond within one business day.</p>
        </form>
      </div>
    </div>
    </div>
  );
};

Object.assign(window, { ContactPage });