// Initium — Form + Footer (commercial)
const { useState: useStateF } = React;

function FormSection({ t }) {
  const [submitted, setSubmitted] = useStateF(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4500);
  };
  return (
    <section className="section paper" id="contacto">
      <div className="shell">
        <SectionHead paper eyebrow={t.form.eyebrow} title={t.form.title} titleAccent={t.form.titleAccent} sub={t.form.sub} />
        <div className="form-shell">
          <div>
            <form className="form-card" onSubmit={onSubmit} autoComplete="off">
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">{t.form.f_name}</label>
                  <input className="form-input" type="text" placeholder="María Restrepo" />
                </div>
                <div className="form-group">
                  <label className="form-label">{t.form.f_email}</label>
                  <input className="form-input" type="email" placeholder="tu@email.co" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">{t.form.f_phone}</label>
                  <input className="form-input" type="tel" placeholder="+57 ..." />
                </div>
                <div className="form-group">
                  <label className="form-label">{t.form.f_type}</label>
                  <select className="form-input">
                    {t.form.types.map((s, i) => <option key={i}>{s}</option>)}
                  </select>
                </div>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">{t.form.f_company}</label>
                  <input className="form-input" type="text" placeholder="—" />
                </div>
                <div className="form-group">
                  <label className="form-label">{t.form.f_amount}</label>
                  <input className="form-input" type="text" placeholder="$ 500 — $ 50,000 USD" />
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">{t.form.f_msg}</label>
                <textarea className="form-input" placeholder={t.form.f_msg_ph} rows={3}></textarea>
              </div>
              <div className="flex gap-16" style={{ alignItems: "center", marginTop: 8, flexWrap: "wrap" }}>
                <button className="form-submit" type="submit">
                  {submitted ? "✓  " + (t === window.I18N.es ? "Enviado" : "Sent") : t.form.submit}
                  {!submitted && (
                    <svg width="14" height="14" viewBox="0 0 12 12" fill="none">
                      <path d="M3 6h6m0 0L6 3m3 3L6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  )}
                </button>
                <span className="body-s" style={{ color: "var(--on-paper-3)", fontSize: 12 }}>{t.form.respond}</span>
              </div>
            </form>
          </div>

          <aside className="contact-block">
            <div>
              <span className="eyebrow">{t.form.contact_eyebrow}</span>
              <h3 className="display-m mt-16" style={{ color: "var(--on-paper)" }}>
                {t.form.contact_t.split(".")[0]}.<br />
                <span className="serif-display" style={{ color: "var(--gold-deep)" }}>{t.form.contact_t.split(".")[1] || ""}</span>
              </h3>
              <p className="body-s mt-16" style={{ color: "var(--on-paper-2)" }}>{t.form.contact_d}</p>
            </div>

            <a className="contact-cta" href="https://wa.me/">
              <Icon name="wa" size={20} />
              <div>
                <div className="cap" style={{ color: "var(--on-paper-3)" }}>{t.form.wa_label}</div>
                <div className="mono" style={{ color: "var(--on-paper)", fontSize: 15 }}>+57 · solicitar enlace</div>
              </div>
              <Icon name="arrow" size={16} />
            </a>

            <div className="contact-row">
              <span className="contact-label">{t.form.email_label}</span>
              <a href="mailto:hello@initiumapp.co" className="contact-value">hello@initiumapp.co</a>
            </div>
            <div className="contact-row">
              <span className="contact-label">{t === window.I18N.es ? "Horario" : "Hours"}</span>
              <span className="contact-value" style={{ fontSize: 14 }}>{t.form.hours}</span>
            </div>
            <div className="contact-row">
              <span className="contact-label">{t === window.I18N.es ? "Sede" : "HQ"}</span>
              <span className="contact-value" style={{ fontSize: 14 }}>Bogotá · Colombia</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-col">
            <a href="#top" className="logo">
              <span className="logo-mark"></span>
              <span>INITIUM</span>
            </a>
            <p className="mt-16" style={{ maxWidth: 360, color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.55 }}>{t.footer.tag}</p>
            <div className="flex gap-8 mt-16" style={{ flexWrap: "wrap" }}>
              <span className="tag" style={{ color: "var(--gold)" }}><span className="tag-dot gold"></span> Binance P2P</span>
              <span className="tag"><span className="tag-dot"></span> Bre-B</span>
              <span className="tag">SAGRILAFT</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>{t.footer.c1}</h5>
            {t.footer.c1l.map((x, i) => <a href="#servicios" key={i}>{x}</a>)}
          </div>
          <div className="footer-col">
            <h5>{t.footer.c2}</h5>
            {t.footer.c2l.map((x, i) => <a href="#respaldo" key={i}>{x}</a>)}
          </div>
          <div className="footer-col">
            <h5>{t.footer.c3}</h5>
            {t.footer.c3l.map((x, i) => <a href={x.href} key={i}>{x.label}</a>)}
          </div>
        </div>
        <div className="footer-bottom">
          <p><strong style={{ color: "var(--text-2)" }}>Disclaimer.</strong> {t.footer.disc}</p>
          <span style={{ fontFamily: "var(--mono)" }}>{t.footer.copy}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FormSection, Footer });