/* Franchise Kosovo — Contact / inquiry page */
const { useState: useStateC } = React;

function Contact({ onSubmit, prefill }) {
  const [done, setDone] = useStateC(false);
  const submit = (e) => {
    e.preventDefault();
    setDone(true);
    onSubmit && onSubmit();
  };
  return (
    <main>
      <section className="detail-hero on-dark" style={{ paddingBottom: 64 }}>
        <div className="container" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'start' }}>
          <div>
            <Eyebrow>Get started</Eyebrow>
            <h1 style={{ marginTop: 16 }}>Book your free consultation.</h1>
            <p className="hero-lead" style={{ marginTop: 18 }}>Tell us about your budget and goals. We’ll come back within one business day with a tailored shortlist — no obligation.</p>
            <div style={{ marginTop: 36, display:'flex', flexDirection:'column', gap:18 }}>
              {[['mail','hello@franchisekosovo.com'],['phone','+383 38 000 000'],['map-pin','Rr. Nëna Terezë, Pristina, Kosovo']].map(([i,t]) => (
                <div key={t} style={{ display:'flex', alignItems:'center', gap:14, color:'var(--on-navy-2)' }}>
                  <span style={{ width:42, height:42, borderRadius:11, background:'rgba(255,255,255,.07)', border:'1px solid var(--navy-line)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--gold-400)' }}><Icon name={i} /></span>
                  <span style={{ fontSize:15 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background:'#fff', borderRadius:'var(--radius-lg)', padding:32, boxShadow:'var(--shadow-lg)' }}>
            {done ? (
              <div style={{ textAlign:'center', padding:'40px 10px' }}>
                <span style={{ width:64, height:64, borderRadius:'50%', background:'var(--success-bg)', color:'var(--success)', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:18 }}><Icon name="check" /></span>
                <h3 style={{ fontFamily:'var(--font-serif)', fontSize:26, color:'var(--ink)' }}>Thank you.</h3>
                <p style={{ color:'var(--ink-2)', marginTop:10 }}>We’ve received your inquiry and will be in touch within one business day.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="form-grid">
                  <div className="field"><label>First name</label><input required placeholder="Arben" /></div>
                  <div className="field"><label>Last name</label><input required placeholder="Krasniqi" /></div>
                  <div className="field full"><label>Email</label><input required type="email" placeholder="you@email.com" /></div>
                  <div className="field"><label>Phone</label><input placeholder="+383…" /></div>
                  <div className="field"><label>Investment budget</label>
                    <select defaultValue=""><option value="" disabled>Select…</option><option>Under €25k</option><option>€25k – €50k</option><option>€50k – €100k</option><option>€100k+</option></select>
                  </div>
                  <div className="field full"><label>Industry of interest</label>
                    <select defaultValue={prefill || ''}><option value="">Any / not sure yet</option>{window.FK_INDUSTRIES.slice(1).map(i => <option key={i}>{i}</option>)}</select>
                  </div>
                  <div className="field full"><label>Anything else?</label><textarea placeholder="Tell us about your goals and timeline…"></textarea></div>
                </div>
                <Button variant="gold" size="lg" icon="arrow-right" className="" >Send inquiry</Button>
                <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:14, textAlign:'center' }}>We’ll never share your details. No obligation.</div>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { Contact });