// contact.jsx — Contact page for LittleCareFund

const CONTACT_REASONS = [
  { value: "", label: "Select a reason…" },
  { value: "donate", label: "I want to donate or give monthly" },
  { value: "campaign", label: "Question about a specific campaign" },
  { value: "referral", label: "I'm a healthcare worker with a referral" },
  { value: "family", label: "I'm a family seeking support" },
  { value: "media", label: "Media or press enquiry" },
  { value: "partner", label: "Partnership or organisation enquiry" },
  { value: "other", label: "Something else" },
];

const INFO_CARDS = [
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M3 5.5h16v12a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 013 17.5V5.5z" stroke="var(--ink-mid)" strokeWidth="1.6" fill="none"/>
        <path d="M3 5.5l8 7.5 8-7.5" stroke="var(--ink-mid)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    label: "Email us",
    value: "hello@littlecarefund.org",
    sub: "For all general enquiries",
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="9" r="3" stroke="var(--ink-mid)" strokeWidth="1.6" fill="none"/>
        <path d="M11 2C7.13 2 4 5.13 4 9c0 5.25 7 11 7 11s7-5.75 7-11c0-3.87-3.13-7-7-7z" stroke="var(--ink-mid)" strokeWidth="1.6" fill="none"/>
      </svg>
    ),
    label: "Based in",
    value: "Manila, Philippines",
    sub: "With cases across Luzon, Visayas & Mindanao",
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="11" r="8" stroke="var(--ink-mid)" strokeWidth="1.6" fill="none"/>
        <path d="M11 7v4l3 2" stroke="var(--ink-mid)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    label: "Response time",
    value: "1–2 business days",
    sub: "We reply to every message personally",
  },
];

// ─────────────────────────────────────────────────────────────
// Input field
// ─────────────────────────────────────────────────────────────
function Field({ label, children, required }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <label style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-deep)", letterSpacing: "-0.005em" }}>
        {label}{required && <span style={{ color: "var(--ink-mid)", marginLeft: 3 }}>*</span>}
      </label>
      {children}
    </div>
  );
}

const inputStyle = {
  width: "100%", boxSizing: "border-box",
  padding: "12px 14px",
  fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--ink-text)",
  background: "#FBFAF8",
  border: "1px solid var(--line-strong)",
  borderRadius: "var(--r-sm)",
  outline: "none",
  transition: "border-color 0.15s ease, box-shadow 0.15s ease",
};

function TextInput({ value, onChange, placeholder, type = "text" }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={{
        ...inputStyle,
        borderColor: focused ? "var(--ink-mid)" : "var(--line-strong)",
        boxShadow: focused ? "0 0 0 3px rgba(122,59,105,0.12)" : "none",
      }}
    />
  );
}

function SelectInput({ value, onChange, options }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <select
      value={value}
      onChange={e => onChange(e.target.value)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={{
        ...inputStyle,
        appearance: "none", WebkitAppearance: "none",
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' stroke='%236F5C6A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,
        backgroundRepeat: "no-repeat",
        backgroundPosition: "right 14px center",
        paddingRight: 40,
        cursor: "pointer",
        borderColor: focused ? "var(--ink-mid)" : "var(--line-strong)",
        boxShadow: focused ? "0 0 0 3px rgba(122,59,105,0.12)" : "none",
      }}
    >
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
}

function TextareaInput({ value, onChange, placeholder, rows = 5 }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <textarea
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      rows={rows}
      style={{
        ...inputStyle,
        resize: "vertical", minHeight: 120,
        lineHeight: 1.6,
        borderColor: focused ? "var(--ink-mid)" : "var(--line-strong)",
        boxShadow: focused ? "0 0 0 3px rgba(122,59,105,0.12)" : "none",
      }}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    />
  );
}

// ─────────────────────────────────────────────────────────────
// Contact form
// ─────────────────────────────────────────────────────────────
function ContactForm() {
  const [form, setForm] = React.useState({ name: "", email: "", reason: "", message: "" });
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState("");

  const set = (k) => (v) => setForm(prev => ({ ...prev, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setError("Please fill in your name, email, and message.");
      return;
    }
    if (!form.email.includes("@")) {
      setError("Please enter a valid email address.");
      return;
    }
    setError("");
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="card" style={{ padding: "36px 28px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
        <div style={{
          width: 56, height: 56, borderRadius: "50%",
          background: "rgba(127,162,132,0.18)",
          display: "grid", placeItems: "center",
        }}>
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
            <path d="M5 13l6 6 10-10" stroke="#26452A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div>
          <h3 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, color: "var(--ink-deep)", letterSpacing: "-0.015em" }}>
            Message received
          </h3>
          <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-mute)", maxWidth: 340 }}>
            Thanks, {form.name.split(" ")[0]}. We'll get back to you at <strong style={{ color: "var(--ink-deep)" }}>{form.email}</strong> within 1–2 business days.
          </p>
        </div>
        <button
          className="btn btn--ghost btn--sm"
          style={{ marginTop: 4 }}
          onClick={() => { setSubmitted(false); setForm({ name: "", email: "", reason: "", message: "" }); }}
        >
          Send another message
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} noValidate style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* Name + email row */}
      <div className="contact-name-email" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <Field label="Your name" required>
          <TextInput value={form.name} onChange={set("name")} placeholder="Jane Smith" />
        </Field>
        <Field label="Email address" required>
          <TextInput value={form.email} onChange={set("email")} placeholder="jane@example.com" type="email" />
        </Field>
      </div>

      <Field label="Reason for contact">
        <SelectInput value={form.reason} onChange={set("reason")} options={CONTACT_REASONS} />
      </Field>

      <Field label="Message" required>
        <TextareaInput
          value={form.message}
          onChange={set("message")}
          placeholder="Tell us a little about what you need…"
          rows={6}
        />
      </Field>

      {error && (
        <p style={{ margin: 0, fontSize: 13.5, color: "#8B2030", background: "rgba(139,32,48,0.08)", borderRadius: 8, padding: "10px 14px" }}>
          {error}
        </p>
      )}

      <button type="submit" className="btn btn--primary btn--lg" style={{ alignSelf: "flex-start" }}>
        Send message
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2 8h12M10 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>

      <p style={{ margin: 0, fontSize: 12.5, color: "var(--ink-mute)", lineHeight: 1.5 }}>
        We reply to every message. We don't share your details with anyone. Ever.
      </p>
    </form>
  );
}

// ─────────────────────────────────────────────────────────────
// Contact page
// ─────────────────────────────────────────────────────────────
function ContactPage({ onNavigate }) {
  return (
    <>
      {/* Hero */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Get in touch</div>
        <h1 className="display" style={{ fontSize: 40, marginBottom: 16 }}>
          We're here to help.
        </h1>
        <p className="body-md" style={{ maxWidth: 500, marginBottom: 0 }}>
          We're a small team, and we read every message ourselves. Whether you're a family looking for help, a doctor with a referral, or a donor who just wants to know more — write to us. We'll write back.
        </p>
      </Section>

      {/* Form + info */}
      <Section>
        <div className="contact-layout" style={{ display: "flex", flexDirection: "column", gap: 32 }}>

          {/* Form column */}
          <div className="contact-form-col">
            <h2 className="section-title" style={{ marginBottom: 22 }}>Send us a message</h2>
            <ContactForm />
          </div>

          {/* Info column */}
          <div className="contact-info-col" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <h2 className="section-title" style={{ marginBottom: 8 }}>Contact details</h2>

            {INFO_CARDS.map((card, i) => (
              <div key={i} className="card" style={{ padding: "18px 20px", display: "flex", gap: 16, alignItems: "flex-start" }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                  background: "var(--bg-3)", display: "grid", placeItems: "center",
                }}>
                  {card.icon}
                </div>
                <div>
                  <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 3 }}>
                    {card.label}
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-deep)", marginBottom: 2 }}>
                    {card.value}
                  </div>
                  <div style={{ fontSize: 13, color: "var(--ink-mute)" }}>{card.sub}</div>
                </div>
              </div>
            ))}

            {/* FAQ shortcut */}
            <button
              onClick={() => onNavigate && onNavigate("faq")}
              style={{
                background: "none", border: "1px solid var(--line-strong)", borderRadius: "var(--r-md)",
                padding: "14px 18px", cursor: "pointer", textAlign: "left",
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
              }}
            >
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-deep)" }}>
                Check our FAQ first — you may find an instant answer.
              </span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
                <path d="M3 8h10M9 4l4 4-4 4" stroke="var(--ink-mid)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>

        </div>
      </Section>

      <Footer onNavigate={onNavigate} />
    </>
  );
}

Object.assign(window, { ContactPage });