/* Contact — form + summary side card. Submit shows fake success state. */

const Contact = React.forwardRef((_, ref) => {
  const [state, setState] = React.useState({ name: "", email: "", phone: "", asset: "nemovitost", note: "" });
  const [sent, setSent] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section className="contact" id="kontakt" ref={ref}>
      <div className="container contact__container">
        <div className="contact__intro">
          <span className="eyebrow">Konzultace zdarma</span>
          <h2 className="h1">Pojďme se k tomu <span className="hl">vrátit konkrétně</span></h2>
          <p className="lead">
            Napište nám pár slov o tom, co chcete tokenizovat. Do 24 hodin se vám ozveme s návrhem termínu 30minutového hovoru.
          </p>

          <ul className="contact__bullets">
            <li><span/> Bez závazku, bez fakturace</li>
            <li><span/> NDA na vyžádání</li>
            <li><span/> Konkrétní výstup do 30 minut</li>
          </ul>

          <div className="contact__sig">
            <div className="contact__sig-avatar">
              <img src="assets/hero-portrait.png" alt="" loading="lazy"/>
            </div>
            <div>
              <strong>Petr Korysol</strong>
              <span>Zakladatel · KORYSOL s.r.o.</span>
            </div>
          </div>
        </div>

        <form className={`contact__form ${sent ? "contact__form--sent" : ""}`} onSubmit={onSubmit}>
          {!sent ? (
            <React.Fragment>
              <div className="field">
                <label>Jméno a příjmení</label>
                <input type="text" required value={state.name} onChange={(e) => setState({ ...state, name: e.target.value })} placeholder="Jan Novák"/>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>E-mail</label>
                  <input type="email" required value={state.email} onChange={(e) => setState({ ...state, email: e.target.value })} placeholder="jan@firma.cz"/>
                </div>
                <div className="field">
                  <label>Telefon</label>
                  <input type="tel" value={state.phone} onChange={(e) => setState({ ...state, phone: e.target.value })} placeholder="+420 …"/>
                </div>
              </div>
              <div className="field">
                <label>Co chcete tokenizovat?</label>
                <div className="seg">
                  {[
                    { v: "nemovitost", l: "Nemovitost" },
                    { v: "fve", l: "Solární FVE" },
                    { v: "firma", l: "Firma" },
                    { v: "jine", l: "Jiné" },
                  ].map((o) => (
                    <button type="button" key={o.v}
                      className={`seg__btn ${state.asset === o.v ? "seg__btn--active" : ""}`}
                      onClick={() => setState({ ...state, asset: o.v })}>{o.l}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Krátký popis aktiva</label>
                <textarea rows="4" value={state.note} onChange={(e) => setState({ ...state, note: e.target.value })}
                  placeholder="Např. bytový dům v Brně, 12 jednotek, plně pronajatý…"/>
              </div>
              <button type="submit" className="btn btn--primary btn--lg btn--block">
                Odeslat poptávku
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </button>
              <p className="contact__legal muted">
                Odesláním souhlasíte se zpracováním osobních údajů pro účely kontaktování. Žádný spam.
              </p>
            </React.Fragment>
          ) : (
            <div className="contact__sent">
              <div className="contact__sent-icon">
                <svg viewBox="0 0 64 64" width="56" height="56" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="32" cy="32" r="28"/>
                  <path d="M20 33L29 42L46 24"/>
                </svg>
              </div>
              <h3 className="h2">Díky, máme to.</h3>
              <p className="lead">Ozveme se vám do 24 hodin na uvedený e-mail s návrhem termínu konzultace.</p>
              <button className="btn btn--ghost" onClick={() => { setSent(false); setState({ name: "", email: "", phone: "", asset: "nemovitost", note: "" }); }}>Odeslat další poptávku</button>
            </div>
          )}
        </form>
      </div>
    </section>
  );
});

window.Contact = Contact;