/* Shared form primitives — used by the Press and Investor Relations pages.
   Field + DropdownSelect mirror the contact page's controls so the styling
   (contact-field / contact-select / dropdown-menu) is reused 1:1. */

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 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>
  );
}

/* Generic request form used by Press + IR. Fields are configured per page.
   Submits via a prefilled mailto to the given address (same pattern as contact). */
function RequestForm({ to, subjectPrefix, typeLabel, typeOptions, orgLabel, orgPlaceholder, messageLabel, messagePlaceholder, submitLabel, note }) {
  const [form, setForm] = React.useState({ name: "", email: "", org: "", type: "", message: "" });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    const lines = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      form.org ? `${orgLabel}: ${form.org}` : null,
      form.type ? `${typeLabel}: ${form.type}` : null,
      "",
      form.message,
    ].filter(Boolean).join("\n");
    const subject = `${subjectPrefix} — ${form.org || form.name || "—"}`;
    window.location.href = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <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 — your request is ready.</h2>
        <p className="body" style={{ marginTop: 8 }}>
          Your email client should have opened with everything pre-filled. If it didn't,
          write to <a href={`mailto:${to}`} style={{ color: "var(--accent)" }}>{to}</a> directly.
        </p>
        <button type="button" className="btn btn--secondary" onClick={() => setSubmitted(false)} style={{ marginTop: 18 }}>
          Send another
        </button>
      </div>
    );
  }

  return (
    <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={orgLabel} required>
        <input type="text" required value={form.org} onChange={update("org")} placeholder={orgPlaceholder} autoComplete="organization" />
      </Field>

      <Field label={typeLabel}>
        <DropdownSelect
          options={typeOptions}
          value={form.type}
          onChange={(v) => setForm((f) => ({ ...f, type: v }))}
          placeholder="Select one"
          label={typeLabel}
        />
      </Field>

      <Field label={messageLabel} required>
        <textarea required value={form.message} onChange={update("message")} rows="6" placeholder={messagePlaceholder}></textarea>
      </Field>

      <div className="contact-form__submit">
        <p className="contact-form__note">{note}</p>
        <button type="submit" className="btn btn--primary">{submitLabel} <Arrow /></button>
      </div>
    </form>
  );
}

Object.assign(window, { Field, DropdownSelect, RequestForm });