// Contact page

function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);

  const steps = [
    {
      n: "01",
      title: "Discovery call (45 min)",
      body: "We map your workflows, identify the bottleneck, and tell you whether we're a fit. No pitch, no obligation.",
    },
    {
      n: "02",
      title: "Pilot scoped in 1 week",
      body: "If we're aligned, we scope the first deployment in 5 business days. You see exactly what we'll build before you commit.",
    },
    {
      n: "03",
      title: "Live in 6–10 weeks",
      body: "We design, integrate, test, and deploy the system end-to-end. You don't manage the build.",
    },
    {
      n: "04",
      title: "We operate it",
      body: "Once live, our team runs the system, monitors performance, and tunes it as your operations evolve.",
    },
  ];

  const fitBullets = [
    "You handle 50+ inbound calls/day, or coordinate multi-step workflows across staff",
    "You've tried to hire your way out of the bottleneck and it's not working",
    "You can dedicate one operations owner to the deployment",
  ];

  return (
    <window.Page active="contact">
      {/* HOW IT WORKS */}
      <section data-section="hero" style={{ padding: "100px 32px 40px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Eyebrow>How it works from here</Eyebrow>
          <H2 style={{ marginTop: 16, maxWidth: 800 }}>Four steps from intro<br />to system in production.</H2>

          <div data-grid="4col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 48 }}>
            {steps.map(s => (
              <div key={s.n} style={{
                background: CREAM, borderRadius: 16, border: `1px solid ${INK}11`,
                padding: 28, display: "flex", flexDirection: "column",
              }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", color: SIGNAL, fontWeight: 600, marginBottom: 14 }}>{s.n}</div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 20, letterSpacing: "-0.025em", color: INK, lineHeight: 1.2, marginBottom: 12 }}>{s.title}</div>
                <div style={{ fontSize: 14, color: STONE, lineHeight: 1.6 }}>{s.body}</div>
              </div>
            ))}
          </div>

          {/* Is this a fit? */}
          <div style={{ marginTop: 56, padding: "28px 32px", background: SAND, borderRadius: 16, border: `1px solid ${INK}11` }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: MIST, fontWeight: 600, marginBottom: 16 }}>Is this a fit?</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {fitBullets.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 14, alignItems: "baseline", fontSize: 16, color: INK, lineHeight: 1.5 }}>
                  <span aria-hidden="true" style={{ color: SIGNAL, fontWeight: 700 }}>→</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* CONTACT FORM */}
      <section data-section="" style={{ padding: "60px 32px 60px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
            <div>
              <Eyebrow>Contact</Eyebrow>
              <Display size={72} style={{ marginTop: 24 }}>
                Let's <span style={{ color: SIGNAL }}>talk.</span>
              </Display>
              <Lede style={{ marginTop: 28 }}>
                Tell us a bit about your operation and what you're hoping to explore. We'll set up a 45-minute discovery call to walk through how <Wordmark /> could fit — no pitch deck, no commitment.
              </Lede>

              <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  { label: "Email", value: "hello@noralai.com" },
                  { label: "Sales", value: "deploy@noralai.com" },
                  { label: "Press", value: "press@noralai.com" },
                ].map(c => (
                  <div key={c.label} style={{ display: "flex", gap: 24, alignItems: "baseline", paddingBottom: 14, borderBottom: `1px solid ${INK}19` }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: MIST, width: 80 }}>{c.label}</div>
                    <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 18, letterSpacing: "-0.02em", color: INK }}>{c.value}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* form */}
            <div style={{ background: CREAM, borderRadius: 20, border: `1px solid ${INK}11`, padding: 36 }}>
              {submitted ? (
                <div style={{ textAlign: "center", padding: "40px 0" }}>
                  <span data-decorative="true" aria-hidden="true">
                    <NoralMark size={88} color={SIGNAL} />
                  </span>
                  <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 32, letterSpacing: "-0.035em", color: INK, marginTop: 24, marginBottom: 12 }}>Got it.</div>
                  <div style={{ fontSize: 15, color: STONE, lineHeight: 1.6, maxWidth: 420, margin: "0 auto" }}>
                    We'll reach out within one business day to schedule a 45-minute discovery call. If we're not a fit, we'll tell you on that call.
                  </div>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                  <Eyebrow>Intro conversation · 45 minutes</Eyebrow>
                  <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 24, letterSpacing: "-0.025em", color: INK, marginTop: 10, marginBottom: 28 }}>
                    Tell us where you'd like to start.
                  </div>
                  <div data-grid="2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                    <Field label="Name" placeholder="Riley Chen" />
                    <Field label="Company" placeholder="ColeLand HVAC" />
                    <Field label="Work email" placeholder="riley@company.com" />
                    <Field label="Phone" placeholder="+1 (555) 123-4567" />
                  </div>
                  <Field label="Industry" placeholder="Home Services · Healthcare · Government · …" wide />
                  <Field
                    label="Role"
                    select
                    options={[
                      "Founder / CEO",
                      "Operations leader",
                      "Sales / Revenue leader",
                      "Individual contributor",
                      "Other",
                    ]}
                    wide
                  />
                  <Field
                    label="Timeline"
                    select
                    options={[
                      "Need this live in the next 90 days",
                      "Planning for next quarter",
                      "Exploring — no firm timeline",
                    ]}
                    wide
                  />
                  <Field label="What's the bottleneck?" placeholder="Missed calls. Manual scheduling. After-hours coverage. …" wide textarea />
                  <button type="submit" style={{
                    width: "100%", marginTop: 20,
                    background: SIGNAL, color: CREAM, border: "none",
                    fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 15,
                    padding: "16px 24px", borderRadius: 10, cursor: "pointer",
                    letterSpacing: "-0.01em",
                  }}>Send →</button>
                  <div style={{ fontSize: 12, color: MIST, marginTop: 12, textAlign: "center" }}>We respond within one business day.</div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </window.Page>
  );
}

const Field = ({ label, placeholder, wide, textarea, select, options }) => {
  const inputStyle = {
    width: "100%", boxSizing: "border-box",
    background: PAPER, border: `1px solid ${INK}19`, borderRadius: 10,
    padding: "12px 14px", fontFamily: "'Inter', sans-serif", fontSize: 14, color: INK,
    outline: "none",
  };
  return (
    <label style={{ gridColumn: wide ? "1 / -1" : "auto", marginTop: 14, display: "block" }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: MIST, fontWeight: 600, marginBottom: 8 }}>{label}</div>
      {select ? (
        <select defaultValue="" style={{ ...inputStyle, appearance: "auto" }}>
          <option value="" disabled>Select an option</option>
          {options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
        </select>
      ) : textarea ? (
        <textarea placeholder={placeholder} rows={4} style={{ ...inputStyle, resize: "vertical" }} />
      ) : (
        <input placeholder={placeholder} style={inputStyle} />
      )}
    </label>
  );
};

window.ContactPage = ContactPage;
