/* Contact page — real form (client-side validation, mailto fallback) */

function ContactPage() {
  const [form, setForm] = React.useState({
    name: "",
    email: "",
    company: "",
    budget: "",
    timeline: "",
    services: [],
    message: "",
    file: null,
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);
  const fileInputRef = React.useRef(null);

  React.useEffect(() => {
    document.title = "Contact — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", "Get in touch with Innoveev. We respond within one business day.");
  }, []);

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

  const toggleService = (s) => setForm((f) => ({
    ...f,
    services: f.services.includes(s) ? f.services.filter(x => x !== s) : [...f.services, s],
  }));

  const onSubmit = (e) => {
    e.preventDefault();
    // In production this would POST to a real endpoint.
    // Here we build a mailto with the body filled in.
    const lines = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      form.company ? `Company: ${form.company}` : null,
      form.budget ? `Budget: ${form.budget}` : null,
      form.timeline ? `Timeline: ${form.timeline}` : null,
      form.services.length ? `Services: ${form.services.join(", ")}` : null,
      "",
      form.message,
      form.file ? `\n[Attachment: ${form.file.name}]` : "",
    ].filter(Boolean).join("\n");
    const subject = `New enquiry — ${form.name || "—"}`;
    const url = `mailto:hello@innoveev.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
    window.location.href = url;
    setSubmitted(true);
  };

  const onFile = (file) => {
    if (!file) return;
    if (file.size > 10 * 1024 * 1024) {
      alert("File too large (max 10 MB). Email us directly with the attachment.");
      return;
    }
    setForm((f) => ({ ...f, file }));
  };

  const SERVICE_OPTIONS = [
    "Discovery sprint", "Mobile app", "Web app", "AI integration",
    "Design system", "Embedded squad", "Maintenance", "Not sure yet",
  ];

  const BUDGETS = ["< $25k", "$25–75k", "$75–250k", "$250k+", "Not sure"];
  const TIMELINES = ["ASAP", "1–3 months", "3–6 months", "6+ months", "Exploring"];

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Contact · Replies within one business day</span>
            <h1 className="sub-hero__title">
              Tell us about the <em>thing you want to build.</em>
            </h1>
            <p className="sub-hero__lede">
              A paragraph is enough to get a reply. If you have a PRD, brief, sketches or
              a Figma link — drop them in. The form goes straight to the founding team.
            </p>
          </div>
        </div>
      </header>

      <section className="section section--tight">
        <div className="container">
          <div className="contact-grid">
            {/* Left: contact channels */}
            <aside className="contact-aside">
              <div className="contact-channel">
                <div className="contact-channel__label">EMAIL</div>
                <a href="mailto:hello@innoveev.com" className="contact-channel__val" data-cursor="Email">hello@innoveev.com</a>
                <div className="contact-channel__sub">We read everything. Reply same day during DXB business hours.</div>
              </div>
              <div className="contact-channel">
                <div className="contact-channel__label">CAREERS</div>
                <a href="mailto:careers@innoveev.com" className="contact-channel__val" data-cursor="Apply">careers@innoveev.com</a>
                <div className="contact-channel__sub">For open roles, see <a href="careers.html" style={{ color: "var(--accent)" }}>careers</a>.</div>
              </div>
              <div className="contact-channel">
                <div className="contact-channel__label">PRESS</div>
                <a href="mailto:press@innoveev.com" className="contact-channel__val">press@innoveev.com</a>
                <div className="contact-channel__sub">Logos, founder bios and screenshots on request.</div>
              </div>

              <div className="contact-offices">
                <div className="contact-channel__label" style={{ marginBottom: 12 }}>OFFICES</div>
                <ul>
                  <li><span>Dubai (HQ)</span><span className="mono-meta">DXB · GMT+4</span></li>
                  <li><span>Damascus</span><span className="mono-meta">DAM · GMT+3</span></li>
                  <li><span>Istanbul</span><span className="mono-meta">IST · GMT+3</span></li>
                  <li><span>Tallinn</span><span className="mono-meta">TLL · GMT+2</span></li>
                </ul>
              </div>
            </aside>

            {/* Right: form */}
            <div className="contact-form-wrap">
              {submitted ? (
                <div className="contact-success">
                  <div className="contact-success__check" aria-hidden="true">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <h2 className="h3">Thanks — message ready.</h2>
                  <p className="body" style={{ marginTop: 8 }}>
                    Your email client should have just opened with everything pre-filled.
                    If it didn't, send a note directly to <a href="mailto:hello@innoveev.com" style={{ color: "var(--accent)" }}>hello@innoveev.com</a>.
                  </p>
                  <button type="button" className="btn btn--secondary" onClick={() => setSubmitted(false)} style={{ marginTop: 18 }}>
                    Send another
                  </button>
                </div>
              ) : (
                <form className="contact-form" onSubmit={onSubmit}>
                  <div className="contact-form__row contact-form__row--two">
                    <Field label="Your name" required>
                      <input
                        type="text" required value={form.name} onChange={update("name")}
                        placeholder="Jane Doe" autoComplete="name"
                      />
                    </Field>
                    <Field label="Email" required>
                      <input
                        type="email" required value={form.email} onChange={update("email")}
                        placeholder="jane@company.com" autoComplete="email"
                      />
                    </Field>
                  </div>

                  <Field label="Company">
                    <input
                      type="text" value={form.company} onChange={update("company")}
                      placeholder="Acme Co · Optional" autoComplete="organization"
                    />
                  </Field>

                  <Field label="What can we help with?" hint="Pick all that apply">
                    <div className="contact-form__chips">
                      {SERVICE_OPTIONS.map((s) => (
                        <button
                          key={s}
                          type="button"
                          className={`contact-chip ${form.services.includes(s) ? "is-active" : ""}`}
                          onClick={() => toggleService(s)}
                        >
                          {s}
                        </button>
                      ))}
                    </div>
                  </Field>

                  <div className="contact-form__row contact-form__row--two">
                    <Field label="Budget">
                      <DropdownSelect
                        options={BUDGETS}
                        value={form.budget}
                        onChange={(v) => setForm(f => ({ ...f, budget: v }))}
                        placeholder="Select a range"
                        label="Budget"
                      />
                    </Field>
                    <Field label="Timeline">
                      <DropdownSelect
                        options={TIMELINES}
                        value={form.timeline}
                        onChange={(v) => setForm(f => ({ ...f, timeline: v }))}
                        placeholder="Select a timeline"
                        label="Timeline"
                      />
                    </Field>
                  </div>

                  <Field label="Tell us more" required hint="A paragraph is plenty. Links to Figma / PRD welcome.">
                    <textarea
                      required value={form.message} onChange={update("message")}
                      rows="6"
                      placeholder="We're building a treasury app for the Saudi market. Currently…"
                    ></textarea>
                  </Field>

                  <Field label="Attach a brief, PRD or sketches" hint="Optional · PDF / DOC / PNG · up to 10MB">
                    <div
                      className={`contact-drop ${dragging ? "is-dragging" : ""} ${form.file ? "has-file" : ""}`}
                      onClick={() => fileInputRef.current?.click()}
                      onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
                      onDragLeave={() => setDragging(false)}
                      onDrop={(e) => {
                        e.preventDefault();
                        setDragging(false);
                        onFile(e.dataTransfer.files[0]);
                      }}
                    >
                      <input
                        ref={fileInputRef}
                        type="file"
                        style={{ display: "none" }}
                        onChange={(e) => onFile(e.target.files[0])}
                        accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.fig,.sketch"
                      />
                      {form.file ? (
                        <span className="contact-drop__file">
                          <span>📎</span>
                          {form.file.name}
                          <button type="button" onClick={(e) => { e.stopPropagation(); setForm(f => ({ ...f, file: null })); }} aria-label="Remove file">
                            ✕
                          </button>
                        </span>
                      ) : (
                        <>
                          <strong>Drop a file here</strong>
                          <span>or click to browse</span>
                        </>
                      )}
                    </div>
                  </Field>

                  <div className="contact-form__submit">
                    <p className="contact-form__note">
                      We respond within one business day. By submitting, you agree to our
                      modest <a href="#" style={{ color: "var(--accent)" }}>privacy policy</a>.
                    </p>
                    <button type="submit" className="btn btn--primary">
                      Send to the studio <Arrow />
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>

          {/* Quick FAQ — common questions about getting in touch */}
          <div className="section-head" style={{ marginTop: 96 }}>
            <div>
              <span className="eyebrow">Before you write</span>
              <h2 className="h2 section-head__title">A few quick answers.</h2>
            </div>
            <p className="lede section-head__lede">
              If your question is here, you can save yourself the email. For everything else,
              the form above is faster than you'd think.
            </p>
          </div>

          <Accordion type="single" defaultValue="c-0">
            <AccordionItem value="c-0">
              <AccordionTrigger>How fast will you reply?</AccordionTrigger>
              <AccordionContent>
                <p>
                  Same business day for DXB hours. Within one business day, always. If you don't
                  hear back, that means we never received it — write again to hello@innoveev.com.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="c-1">
              <AccordionTrigger>Do I need to sign an NDA before sharing details?</AccordionTrigger>
              <AccordionContent>
                <p>
                  No. We respect what you send and don't share it. If you'd like one signed before
                  the call, mention it in the message and we'll have one back to you the same day.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="c-2">
              <AccordionTrigger>What should I include in the first message?</AccordionTrigger>
              <AccordionContent>
                <p>
                  A paragraph is plenty. Tell us what you're building (or trying to), your rough
                  timeline, and one constraint that matters most. We'll write back with a fit
                  read and either a calendar link or a thoughtful "not us, try X."
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="c-3">
              <AccordionTrigger>Do you take on small projects?</AccordionTrigger>
              <AccordionContent>
                <p>
                  Our minimum engagement is a two-week discovery sprint at USD 12k. Below that
                  we'll often refer you to freelancers we trust. See <a href="pricing.html" style={{ color: "var(--accent)" }}>pricing</a> for full detail.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="c-4">
              <AccordionTrigger>Are you hiring?</AccordionTrigger>
              <AccordionContent>
                <p>
                  Yes — eight open roles right now across our four cities. The full list is on the{" "}
                  <a href="careers.html" style={{ color: "var(--accent)" }}>careers page</a>, or
                  email careers@innoveev.com with a portfolio and a paragraph about you.
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

function Field({ label, hint, required, children }) {
  return (
    <label className="contact-field">
      <span className="contact-field__label">
        {label}
        {required ? <span className="contact-field__req" aria-hidden="true">*</span> : null}
        {hint ? <span className="contact-field__hint">{hint}</span> : null}
      </span>
      {children}
    </label>
  );
}

function SegmentedSelect({ options, value, onChange }) {
  return (
    <div className="contact-segments" role="radiogroup">
      {options.map((o) => (
        <button
          key={o}
          type="button"
          role="radio"
          aria-checked={value === o}
          className={`contact-segment ${value === o ? "is-active" : ""}`}
          onClick={() => onChange(o === value ? "" : o)}
        >
          {o}
        </button>
      ))}
    </div>
  );
}

function DropdownSelect({ options, value, onChange, placeholder = "Select", label = "" }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          className={`contact-select ${value ? "has-value" : ""}`}
          aria-label={label}
        >
          <span className="contact-select__val">{value || placeholder}</span>
          <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true">
            <path d="M3 5.5 L7 9.5 L11 5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" sideOffset={8}>
        <DropdownMenuGroup>
          {options.map((o) => (
            <DropdownMenuItem
              key={o}
              onSelect={() => onChange(o === value ? "" : o)}
              className={o === value ? "is-selected" : ""}
            >
              <span className="dropdown-menu__check">
                {o === value ? (
                  <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                    <path d="M3 8.5 L7 12.5 L13 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                ) : null}
              </span>
              <span>{o}</span>
              <span></span>
            </DropdownMenuItem>
          ))}
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);