// ============================================================
// PROCESS + CONTACT
// ============================================================

function Process({ t }) {
  const p = t.process;
  return (
    <section className="section" id="process" data-screen-label="06 Process">
      <div className="page">
        <SectionHead num={p.num} label={p.label} title={p.title} kicker={p.kicker} />
        <div className="process">
          {p.steps.map((s, i) => (
            <div className="process-step" key={i}>
              <span className="num">{s.n}</span>
              <h3>{s.title}</h3>
              <p className="desc">{s.desc}</p>
              <span className="tag">{s.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactForm({ t }) {
  const c = t.contact;
  const [state, setState] = React.useState({ name: '', phone: '', msg: '' });
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!state.name.trim() || !state.phone.trim() || !state.msg.trim()) return;
    const text = `Olá, Andrey! Me chamo ${state.name}.\nTelefone: ${state.phone}\n\n${state.msg}`;
    window.open(`https://wa.me/5531993729202?text=${encodeURIComponent(text)}`, '_blank', 'noopener,noreferrer');
    setSent(true);
    setTimeout(() => setSent(false), 6000);
    setState({ name: '', phone: '', msg: '' });
  };

  const update = (key) => (e) => setState((s) => ({ ...s, [key]: e.target.value }));

  return (
    <form className="contact-form" onSubmit={handleSubmit}>
      <div className="field-row">
        <div className="field">
          <label htmlFor="cf-name">{c.form.name}</label>
          <input id="cf-name" type="text" value={state.name} onChange={update('name')} placeholder={c.form.namePh} required />
        </div>
        <div className="field">
          <label htmlFor="cf-phone">{c.form.phone}</label>
          <input id="cf-phone" type="tel" value={state.phone} onChange={update('phone')} placeholder={c.form.phonePh} required />
        </div>
      </div>
      <div className="field">
        <label htmlFor="cf-msg">{c.form.msg}</label>
        <textarea id="cf-msg" rows="5" value={state.msg} onChange={update('msg')} placeholder={c.form.msgPh} required />
      </div>
      <div className="form-foot">
        <span className="note">{sent ? c.form.success : c.form.note}</span>
        <button type="submit" className="btn btn-primary">
          {c.form.submit}
          <Icons.arrow />
        </button>
      </div>
    </form>
  );
}

function Contact({ t }) {
  const c = t.contact;
  return (
    <section className="section" id="contact" data-screen-label="07 Contact">
      <div className="page">
        <SectionHead num={c.num} label={c.label} title={c.title} kicker={c.kicker} />
        <div className="contact-grid">
          <ContactForm t={t} />
          <aside className="contact-sidebar">
            <div className="contact-card">
              <h4>{c.channels.title}</h4>
              <div className="contact-links">
                {c.channels.items.map((it, i) => {
                  const Icon = Icons[it.icon] || Icons.mail;
                  return (
                    <a className="contact-link" href={it.url} target="_blank" rel="noopener noreferrer" key={i}>
                      <div className="left">
                        <div className="icon"><Icon /></div>
                        <div>
                          <span className="name">{it.name}</span>
                          <span className="handle">{it.handle}</span>
                        </div>
                      </div>
                      <span className="arrow"><Icons.arrow /></span>
                    </a>
                  );
                })}
              </div>
            </div>
            <div className="contact-card">
              <div className="sla">
                <div className="icon"><Icons.rocket /></div>
                <div>
                  <h5>{c.sla.title}</h5>
                  <p>{c.sla.body}</p>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Contact, ContactForm });