const Field = ({ id, label, type = "text", as = "input" }) => {
  const [val, setVal] = React.useState("");
  const filled = val.length > 0;
  const Comp = as;
  return (
    <div className={`form-field ${filled ? "filled" : ""}`}>
      <Comp
        id={id}
        type={type}
        value={val}
        onChange={e => setVal(e.target.value)}
        rows={as === "textarea" ? 4 : undefined}
      />
      <label htmlFor={id}>{label}</label>
    </div>
  );
};

const Contact = () => {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    const form = e.target;
    const data = {
      naam:      form.naam.value,
      email:     form.email.value,
      onderwerp: form.onderwerp.value,
      bericht:   form.bericht.value,
    };
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      setStatus(res.ok ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  };

  return (
    <section id="contact" className="contact">
      <div className="wrap">
        <div className="section-mark">
          <span className="num">№ 06</span>
          <span className="name">Contact</span>
          <span className="spacer"></span>
          <span className="meta">— Laten we praten</span>
        </div>

        <div className="contact-grid" style={{marginTop:48}}>
          <div className="contact-intro">
            <h2>
              Laat je stijl<br/><em>meegroeien.</em>
            </h2>
            <p>
              Een gesprek begint met een bericht. Vertel me waar je staat, of
              gewoon wat je nieuwsgierig maakt — ik reageer persoonlijk, meestal
              binnen 48 uur.
            </p>
            <div className="contact-details">
              <div className="row">
                <span className="k">E-mail</span>
                <a className="v" href="mailto:info@stylistcoach.nl">info@stylistcoach.nl</a>
              </div>
              <div className="row">
                <span className="k">Telefoon</span>
                <a className="v" href="tel:+31653755845">+31 6 53 75 58 45</a>
              </div>
              <div className="row">
                <span className="k">Gevestigd</span>
                <span className="v">Nederland · landelijk werkzaam</span>
              </div>
              <div className="row">
                <span className="k">Reactie</span>
                <span className="v">Binnen 48 uur</span>
              </div>
            </div>
          </div>

          <form className="contact-form" onSubmit={handleSubmit}>
            {status === "sent" ? (
              <div style={{padding:"60px 0",textAlign:"left"}}>
                <div className="eyebrow" style={{color:"var(--accent)",marginBottom:12}}>Bedankt —</div>
                <h3 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:40,lineHeight:1,margin:"0 0 16px",letterSpacing:"-0.02em"}}>
                  Je bericht is <em style={{fontStyle:"italic",color:"var(--accent)"}}>onderweg.</em>
                </h3>
                <p style={{fontFamily:"var(--serif)",fontWeight:300,fontSize:18,color:"var(--ink-2)",maxWidth:"36ch"}}>
                  Ik neem zo snel mogelijk contact met je op — meestal binnen 48 uur.
                </p>
              </div>
            ) : (
              <>
                <Field id="naam" label="Jouw naam" />
                <Field id="email" label="E-mailadres" type="email" />
                <Field id="onderwerp" label="Waar gaat het over?" />
                <Field id="bericht" label="Jouw bericht" as="textarea" />
                {status === "error" && (
                  <p style={{color:"var(--accent)",fontSize:14,margin:0}}>
                    Er ging iets mis. Probeer het opnieuw of stuur een e-mail naar info@stylistcoach.nl.
                  </p>
                )}
                <div className="form-actions">
                  <div className="form-note">Door te versturen ga je akkoord met respectvol contact.</div>
                  <button className="btn btn-solid" type="submit" disabled={status === "sending"}>
                    {status === "sending" ? "Versturen…" : "Verstuur bericht"}
                    {status !== "sending" && <span className="arrow">→</span>}
                  </button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

window.Contact = Contact;