/* Contact — book a meeting + company information */

function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="contact">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>08 / Contact
          </div>
          <div>
            <h2>
              Set a free <span className="serif-italic">meeting</span>.
              <br />
              60 minutes. No&nbsp;preparation&nbsp;required.
            </h2>
            <p className="lede">
              Initial consultations are conducted by a senior architect and
              a delivery lead. The agenda is yours: problem statement,
              constraints, regulatory context. A written response is
              provided within 72 working hours. The same process applies
              regardless of organisation size.
            </p>
          </div>
        </div>

        <div className="contact-wrap">
          <div>
            <div
              className="giant-mark"
              style={{ fontSize: "clamp(72px, 12vw, 200px)" }}
            >
              ROZUM<span className="grey">CODE</span>
            </div>

            <div className="contact-meta">
              <div className="row">
                <div className="k">Office</div>
                <div className="v">
                  71–75 Shelton Street<br />
                  Covent Garden, London<br />
                  WC2H 9JQ · United Kingdom
                </div>
              </div>
              <div className="row">
                <div className="k">Email</div>
                <div className="v">
                  <a href="mailto:info@rozumcode.com">info@rozumcode.com</a>
                </div>
              </div>
              <div className="row">
                <div className="k">Web</div>
                <div className="v">www.rozumcode.com</div>
              </div>
              <div className="row">
                <div className="k">Response</div>
                <div className="v">Within 72 hours · Mon–Fri · GMT</div>
              </div>
              <div className="row">
                <div className="k">Engagement</div>
                <div className="v">Advisory · Build · Production · Run</div>
              </div>
            </div>
          </div>

          {submitted ? (
            <div
              style={{
                border: "1px solid var(--ink)",
                padding: "32px 24px",
                display: "flex",
                flexDirection: "column",
                gap: 16,
                alignSelf: "start",
              }}
            >
              <div className="mono-sm" style={{ color: "var(--g-55)" }}>
                ↳ Receipt R-{Math.floor(Math.random() * 90000 + 10000)}
              </div>
              <h3
                style={{
                  fontFamily: "var(--ff-display)",
                  fontWeight: 900,
                  fontSize: 28,
                  letterSpacing: "-0.02em",
                  textTransform: "uppercase",
                  lineHeight: 0.95,
                }}
              >
                Request logged.
              </h3>
              <p style={{ fontSize: 14, color: "var(--g-70)" }}>
                A senior architect will respond from our London office within
                72 working hours. There is no newsletter and no follow-up
                sequence.
              </p>
              <button
                className="btn btn-ghost"
                style={{ alignSelf: "flex-start", marginTop: 8 }}
                onClick={() => setSubmitted(false)}
              >
                Submit another <span className="arrow"></span>
              </button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="row">
                <div className="field">
                  <label htmlFor="name">Name</label>
                  <input id="name" type="text" placeholder="Full name" required />
                </div>
                <div className="field">
                  <label htmlFor="role">Role / Title</label>
                  <input id="role" type="text" placeholder="Function" />
                </div>
              </div>
              <div className="row">
                <div className="field">
                  <label htmlFor="company">Company</label>
                  <input id="company" type="text" placeholder="Legal name" required />
                </div>
                <div className="field">
                  <label htmlFor="email">Work email</label>
                  <input id="email" type="email" placeholder="name@company.com" required />
                </div>
              </div>
              <div className="field">
                <label htmlFor="scope">Engagement scope</label>
                <select id="scope" defaultValue="advisory">
                  <option value="advisory">Advisory · Strategy &amp; architecture</option>
                  <option value="build">Build · Custom AI software</option>
                  <option value="embedded">Embedded · Hardware / ESP32</option>
                  <option value="governance">Governance · EU AI Act / ISO 42001</option>
                  <option value="security">Security · Red teaming</option>
                  <option value="agentic">Agentic · Autonomous workflows</option>
                  <option value="bespoke">Bespoke · Cross-discipline</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="brief">Brief</label>
                <textarea
                  id="brief"
                  rows="4"
                  placeholder="Problem, regulatory surface, timeline."
                ></textarea>
              </div>
              <div
                style={{
                  display: "flex",
                  gap: 16,
                  alignItems: "center",
                  marginTop: 8,
                  flexWrap: "wrap",
                }}
              >
                <button type="submit" className="btn">
                  Set the meeting <span className="arrow"></span>
                </button>
                <span className="mono-sm" style={{ color: "var(--g-55)" }}>
                  · Encrypted in transit · No third-party tracking
                </span>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });