// contact.jsx — sales/lead-gen form on coral gradient
const { useState: useStateContact } = React;

function Contact() {
  const [form, setForm] = useStateContact({ name: '', email: '', company: '', phone: '', msg: '' });
  const [sent, setSent] = useStateContact(false);
  const change = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };
  return (
    <section className="contact contact--coral" id="contact" data-screen-label="07 Contact">
      <span className="contact__bg" aria-hidden="true"></span>
      <div className="shell" style={{ padding: 0, position: 'relative', zIndex: 2 }}>
        <div className="contact__grid">
          <div className="contact__lede">
            <span className="eyebrow contact__eyebrow" data-reveal>06 / Kontakt</span>
            <h2 className="contact__title" data-reveal style={{ marginTop: 24 }}>
              S čím <em>pomůžeme?</em>
            </h2>
            <p className="contact__body" data-reveal style={{ "--reveal-delay": "160ms" }}>
              Máš projekt, brief nebo jen otázku? Napiš nám — vrátíme se ti do 48 hodin s odpovědí, ne s automatickým potvrzením.
            </p>

            <a href="mailto:tomas@justmighty.cz" className="contact__person contact__person--tom" data-reveal style={{ "--reveal-delay": "240ms" }}>
              <div className="contact__person-photo" style={{ backgroundImage: 'url(./assets/tom-2.jpg)' }} />
              <div className="contact__person-body">
                <div className="contact__person-meta">
                  <span className="mono">OZVI SE NAPŘÍMO</span>
                  <strong style={{ color: "rgb(255, 255, 255)", fontSize: "16px" }}>Tomáš Pohl</strong>
                </div>
                <div className="contact__person-anchor" aria-hidden="true">
                  <span className="contact__person-anchor-row">
                    <span className="contact__person-anchor-label">tomas@justmighty.cz</span>
                    <span className="contact__person-anchor-arrow">↗</span>
                  </span>
                  <span className="contact__person-anchor-row contact__person-anchor-row--phone">
                    <span className="contact__person-anchor-label" style={{ color: "rgb(255, 255, 255)" }}>+420 777 123 456</span>
                  </span>
                </div>
              </div>
            </a>

            <a href="#justask" onClick={(e)=>{e.preventDefault();window.__appNav && window.__appNav('justask');}} className="contact__justask" data-reveal style={{ "--reveal-delay": "320ms" }}>
              <span className="contact__justask-kicker">NECHCEŠ PSÁT POPTÁVKU?</span>
              <span className="contact__justask-cta">vstupní konzultace zdarma <span className="contact__justask-arrow">→</span></span>
            </a>
          </div>

          <form className="contact-form" onSubmit={submit} data-reveal style={{ "--reveal-delay": "200ms" }}>
            <div className="contact-form__head">
              <span className="contact-form__kicker">NOVÝ PROJEKT?</span>
              <span className="contact-form__sla">volné kapacity od Q3</span>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Jméno *</label>
                <input value={form.name} onChange={change('name')} placeholder="Miko Kukuka" required />
              </div>
              <div className="field">
                <label>Firma</label>
                <input value={form.company} onChange={change('company')} placeholder="Justmighty s.r.o." />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>E-mail *</label>
                <input type="email" value={form.email} onChange={change('email')} placeholder="miko@firma.cz" required />
              </div>
              <div className="field">
                <label>Telefon</label>
                <input type="tel" value={form.phone} onChange={change('phone')} placeholder="+420 777 123 456" />
              </div>
            </div>
            <div className="field">
              <label>O čem to bude? *</label>
              <textarea value={form.msg} onChange={change('msg')} placeholder="Pár vět o tom, co řešíš a kam to má jít." required />
            </div>
            <div className="contact-form__cta">
              <button type="submit" className="btn contact-form__btn">
                {sent ? 'Odesláno ✓' : 'Odeslat poptávku'}
                <span className="arrow">↗</span>
              </button>
              <span className="contact-form__note">Odesláním souhlasíš se zpracováním osobních údajů.</span>
            </div>
          </form>
        </div>
      </div>
    </section>);
}
window.Contact = Contact;