// ─────────────────────────────────────────────────────────────────────────────
// VANTUZ CONTACT FORM — ARQUIVO PROTEGIDO
// Este arquivo fica na raiz do projeto, FORA da pasta vantuz/.
// O Claude Design nunca gera arquivos aqui — só dentro de vantuz/.
// NÃO substituir este arquivo com exports do Claude Design.
//
// O vantuz/contact.jsx pode ser sobrescrito livremente pelo Claude Design.
// Este arquivo é quem realmente roda — o contact.html carrega este, não aquele.
//
// Endpoint Formspree: https://formspree.io/f/mzdoqqzy
// Destino: support@vantuz.co
// ─────────────────────────────────────────────────────────────────────────────

const { useState: useCT } = React;

const TOPICS = [
  { id: 'demo',      label: 'Book a demo' },
  { id: 'pricing',   label: 'Pricing & plans' },
  { id: 'nis2',      label: 'NIS2 / compliance' },
  { id: 'tech',      label: 'Technical question' },
  { id: 'partner',   label: 'Partnership' },
  { id: 'other',     label: 'Something else' },
];

const TEAM_SIZES = ['Just me', '2–10', '11–50', '51–200', '201–1000', '1000+'];

function Field({ label, hint, error, children }) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap:8}}>
      <span className="mono" style={{fontSize:11, color: error ? 'var(--signal-bad)' : 'var(--txt-3)', letterSpacing:'.18em', textTransform:'uppercase'}}>
        {label}{hint && <span style={{textTransform:'none', letterSpacing:0, color:'var(--txt-4)', marginLeft:8}}>{hint}</span>}
      </span>
      {children}
      {error && <span className="mono" style={{fontSize:11, color:'var(--signal-bad)', letterSpacing:'.05em'}}>↳ {error}</span>}
    </label>
  );
}

const inputStyle = {
  background:'rgba(255,255,255,.02)',
  border:'1px solid var(--ink-line)',
  borderRadius: 10,
  color:'#fff',
  fontFamily:'var(--f-sans)', fontSize:15,
  padding:'14px 16px',
  outline:'none',
  transition:'border-color .18s ease, background .18s ease',
  width:'100%',
};

function ContactForm() {
  const [form, setForm] = useCT({
    name:'', email:'', company:'', size:'', topic:'demo', message:'', consent:false,
  });
  const [errors, setErrors] = useCT({});
  const [status, setStatus] = useCT('idle'); // idle | submitting | success

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.name.trim())                                e.name    = 'Please tell us your name.';
    if (!form.email.trim())                               e.email   = 'We need an email to write back.';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "That doesn't look like a valid email.";
    if (!form.message.trim() || form.message.trim().length < 12) e.message = 'A sentence or two helps us route this faster.';
    if (!form.consent)                                    e.consent = 'You need to agree to the privacy notice.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setStatus('submitting');
    try {
      const res = await fetch('https://formspree.io/f/mzdoqqzy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name:    form.name,
          email:   form.email,
          company: form.company,
          size:    form.size,
          topic:   form.topic,
          message: form.message,
        }),
      });
      if (res.ok) {
        setStatus('success');
      } else {
        const data = await res.json().catch(() => ({}));
        setErrors({ message: data.error || 'Something went wrong — try emailing hello@vantuz.co directly.' });
        setStatus('idle');
      }
    } catch (_) {
      setErrors({ message: 'Could not send — check your connection and try again.' });
      setStatus('idle');
    }
  };

  if (status === 'success') {
    return (
      <div className="card" style={{padding:'48px 44px', textAlign:'left'}}>
        <div className="mono" style={{fontSize:11, color:'var(--signal-ok)', letterSpacing:'.22em', textTransform:'uppercase'}}>● MESSAGE RECEIVED</div>
        <h3 className="display" style={{fontSize:'clamp(32px, 3.6vw, 52px)', margin:'14px 0 18px', color:'#fff', fontWeight:700, letterSpacing:'-.025em', lineHeight:1.05}}>
          Thanks, {form.name.split(' ')[0] || 'friend'}.<br/>We'll be in touch.
        </h3>
        <p style={{fontSize:16, lineHeight:1.6, color:'var(--txt-2)', maxWidth:480, marginBottom:24}}>
          A human reads every message. Expect a reply at <span style={{color:'#fff'}}>{form.email}</span> within
          the next business day — usually sooner.
        </p>
        <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
          <a href="index.html" className="btn btn-white">Back to home <span aria-hidden>→</span></a>
          <button
            onClick={() => { setForm({ name:'', email:'', company:'', size:'', topic:'demo', message:'', consent:false }); setStatus('idle'); setErrors({}); }}
            className="btn btn-outline-white"
          >
            Send another
          </button>
        </div>
        <div className="mono" style={{fontSize:11, letterSpacing:'.15em', color:'var(--txt-4)', textTransform:'uppercase', marginTop:32, paddingTop:24, borderTop:'1px solid var(--ink-line)'}}>
          REF · VTZ-{Math.floor(Math.random()*9000+1000)} · {new Date().toISOString().slice(0,10)}
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="card" style={{padding:'40px 36px', display:'flex', flexDirection:'column', gap:22}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
        <div className="mono" style={{fontSize:11, color:'var(--aurora-2)', letterSpacing:'.22em', textTransform:'uppercase'}}>● NEW MESSAGE</div>
        <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.2em'}}>VTZ-FORM-v1</div>
      </div>

      <h3 className="display" style={{fontSize:'clamp(26px, 2.6vw, 36px)', margin:'4px 0 0', color:'#fff', fontWeight:600, letterSpacing:'-.02em', lineHeight:1.1}}>
        Tell us what you're solving.
      </h3>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="row-2">
        <Field label="Name" error={errors.name}>
          <input style={inputStyle} value={form.name} onChange={e=>update('name', e.target.value)} placeholder="Maria Costa" autoComplete="name"/>
        </Field>
        <Field label="Work email" error={errors.email}>
          <input style={inputStyle} type="email" value={form.email} onChange={e=>update('email', e.target.value)} placeholder="maria@company.eu" autoComplete="email"/>
        </Field>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="row-2">
        <Field label="Company" hint="optional">
          <input style={inputStyle} value={form.company} onChange={e=>update('company', e.target.value)} placeholder="Company name" autoComplete="organization"/>
        </Field>
        <Field label="Team size" hint="optional">
          <select
            value={form.size}
            onChange={e=>update('size', e.target.value)}
            style={{...inputStyle, appearance:'none', backgroundImage:'linear-gradient(45deg, transparent 50%, var(--txt-3) 50%), linear-gradient(135deg, var(--txt-3) 50%, transparent 50%)', backgroundPosition:'calc(100% - 18px) center, calc(100% - 12px) center', backgroundSize:'6px 6px, 6px 6px', backgroundRepeat:'no-repeat'}}
          >
            <option value="" style={{background:'#0a0c12'}}>Select…</option>
            {TEAM_SIZES.map(s => <option key={s} value={s} style={{background:'#0a0c12'}}>{s}</option>)}
          </select>
        </Field>
      </div>

      <Field label="What's this about?">
        <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
          {TOPICS.map(t => {
            const active = form.topic === t.id;
            return (
              <button
                type="button"
                key={t.id}
                onClick={() => update('topic', t.id)}
                style={{
                  padding:'10px 16px', borderRadius:999,
                  border: active ? '1px solid var(--aurora-2)' : '1px solid var(--ink-line)',
                  background: active ? 'rgba(74,109,245,.12)' : 'transparent',
                  color: active ? '#fff' : 'var(--txt-2)',
                  fontSize:13, fontWeight:500,
                }}
              >
                {t.label}
              </button>
            );
          })}
        </div>
      </Field>

      <Field label="Your message" error={errors.message} hint="a sentence or two is enough">
        <textarea
          style={{...inputStyle, minHeight:140, resize:'vertical', fontFamily:'var(--f-sans)', lineHeight:1.55}}
          value={form.message}
          onChange={e=>update('message', e.target.value)}
          placeholder="We're 40 people, distributed across the EU. We need NIS2 detection in place by Q3. Curious how Vantuz fits."
        />
      </Field>

      <label style={{display:'flex', alignItems:'flex-start', gap:12, cursor:'pointer'}}>
        <input
          type="checkbox"
          checked={form.consent}
          onChange={e=>update('consent', e.target.checked)}
          style={{width:18, height:18, marginTop:2, accentColor:'#6c8bff', flex:'0 0 auto'}}
        />
        <span style={{fontSize:13, color: errors.consent ? 'var(--signal-bad)' : 'var(--txt-2)', lineHeight:1.5}}>
          I agree that Vantuz can process the data above to reply to my message.
          See our <a href="#" style={{color:'var(--aurora-2)'}}>privacy notice</a>.
          {errors.consent && <span style={{display:'block', marginTop:4, color:'var(--signal-bad)', fontFamily:'var(--f-mono)', fontSize:11}}>↳ {errors.consent}</span>}
        </span>
      </label>

      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap', marginTop:6}}>
        <button
          type="submit"
          disabled={status==='submitting'}
          className="btn btn-lg btn-white"
          style={{opacity: status === 'submitting' ? .6 : 1}}
        >
          {status === 'submitting' ? 'Sending…' : 'Send message'} <span aria-hidden>→</span>
        </button>
        <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.12em'}}>
          ↳ reply within 1 business day
        </div>
      </div>
    </form>
  );
}

function ContactPage() {
  return (
    <>
      <Nav current="Contact"/>

      <PageHero
        eyebrow="CONTACT · EU · NIS2-READY"
        title={<>Talk to a human.</>}
        subtitle="A real engineer or founder replies to every message. No SDRs. No discovery calls until you want one."
        minHeight="56vh"
      />

      <section data-screen-label="02 Form" className="bg-ink" style={{padding:'40px 0 160px', position:'relative', borderTop:'1px solid var(--ink-line)'}}>
        <div className="grid-dots" style={{position:'absolute', inset:0, opacity:.3, pointerEvents:'none'}}/>
        <div className="wrap" style={{position:'relative'}}>
          <div style={{display:'grid', gridTemplateColumns:'minmax(0,1.45fr) minmax(0,1fr)', gap:48, alignItems:'flex-start'}} className="contact-grid">
            <ContactForm/>

            {/* Sidebar */}
            <aside style={{display:'flex', flexDirection:'column', gap:24}}>
              <div className="card-flat" style={{padding:'28px 26px'}}>
                <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:14}}>
                  Direct email
                </div>
                <a href="mailto:hello@vantuz.co" className="display" style={{fontSize:26, color:'#fff', fontWeight:600, letterSpacing:'-.02em', lineHeight:1.2, display:'block'}}>
                  hello@vantuz.co
                </a>
                <div style={{fontSize:13, color:'var(--txt-2)', marginTop:10, lineHeight:1.55}}>
                  We read every message. Plain text is fine.
                </div>
              </div>

              <div className="card-flat" style={{padding:'28px 26px'}}>
                <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:14}}>
                  Where we operate
                </div>
                <div style={{fontSize:'clamp(20px, 1.6vw, 26px)', color:'#fff', fontWeight:500, letterSpacing:'-.015em', lineHeight:1.25}}>
                  Across the EU
                </div>
                <div style={{fontSize:13, color:'var(--txt-2)', marginTop:10, lineHeight:1.55}}>
                  Data plane and team distributed within the European Union. GDPR-compliant by design.
                </div>
              </div>

              <div className="card-flat" style={{padding:'28px 26px'}}>
                <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:14}}>
                  Already deploying?
                </div>
                <div style={{fontSize:'clamp(20px, 1.6vw, 26px)', color:'#fff', fontWeight:500, letterSpacing:'-.015em', lineHeight:1.25}}>
                  support@vantuz.co
                </div>
                <div style={{fontSize:13, color:'var(--txt-2)', marginTop:10, lineHeight:1.55}}>
                  Existing customers · technical incidents only.
                </div>
              </div>

              <div style={{
                padding:'24px 24px', border:'1px dashed var(--ink-line-2)', borderRadius:14,
                background:'rgba(74,109,245,.04)',
              }}>
                <div className="mono" style={{fontSize:11, color:'var(--aurora-2)', letterSpacing:'.18em', textTransform:'uppercase', marginBottom:10}}>
                  ● TYPICAL RESPONSE
                </div>
                <div style={{fontSize:14, lineHeight:1.6, color:'var(--txt-2)'}}>
                  Median first reply: under 4 hours during EU business days.
                  We don't auto-respond.
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <FooterSection/>

      <style>{`
        input::placeholder, textarea::placeholder { color: var(--txt-4); }
        input:focus, textarea:focus, select:focus {
          border-color: var(--aurora-2) !important;
          background: rgba(74,109,245,.04) !important;
        }
        @media (max-width: 1100px){
          .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 640px){
          .row-2 { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);