/* Contact — form POSTs to contact.php which mails hello@sonalstudio.in */

function Contact() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    try {
      const data = new FormData(e.target);
      const res  = await fetch("contact.php", { method: "POST", body: data });
      if (res.ok) {
        const json = await res.json().catch(() => ({}));
        setStatus(json.success === false ? "error" : "sent");
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <section id="contact" className="contact">
      <div className="container contact-layout">
        <div className="contact-intro">
          <span className="eyebrow">Get in touch</span>
          <h2>
            <span className="script-accent">hello!</span><br/>
            Tell us about your business.
          </h2>
          <p>
            Send us a quick note. We'll reply within one working day, schedule a 30-minute chat, and send a tailored quote within the week. No obligation.
          </p>
          <ul className="contact-meta">
            <li><i data-lucide="mail-open" style={{width:18, height:18, strokeWidth: 1.5}}></i> hello@sonalstudio.in</li>
            <li><i data-lucide="map-pin"   style={{width:18, height:18, strokeWidth: 1.5}}></i> Based in Ireland · serving the EU</li>
            <li><i data-lucide="clock"     style={{width:18, height:18, strokeWidth: 1.5}}></i> We reply within one working day</li>
          </ul>
        </div>

        <form className="contact-form" onSubmit={handleSubmit}>
          {status === "sent" ? (
            <div className="form-success">
              <span className="script-accent" style={{fontSize: 56, color: "var(--primary)"}}>thank you!</span>
              <p>We've got your note. You'll hear back from us within a working day - usually sooner.</p>
              <button type="button" className="btn btn-ghost" onClick={() => setStatus("idle")}>Send another</button>
            </div>
          ) : (
            <>
              {status === "error" && (
                <div className="form-error-banner">
                  Something went wrong — please email us directly at{" "}
                  <a href="mailto:hello@sonalstudio.in">hello@sonalstudio.in</a>.
                </div>
              )}

              <div className="form-row">
                <div className="field">
                  <label htmlFor="cf-name">Your name</label>
                  <input id="cf-name" name="name" required placeholder="Sonal" />
                </div>
                <div className="field">
                  <label htmlFor="cf-email">Email</label>
                  <input id="cf-email" name="email" required type="email" placeholder="you@yourbusiness.ie" />
                </div>
              </div>
              <div className="field">
                <label htmlFor="cf-biz">Tell us about your business</label>
                <input id="cf-biz" name="biz" placeholder="Type of business, where you're based" />
              </div>
              <div className="field">
                <label htmlFor="cf-plan">Which plan interests you?</label>
                <div className="radio-row">
                  <label className="radio-chip"><input type="radio" name="plan" value="Starter"      defaultChecked /> Starter</label>
                  <label className="radio-chip"><input type="radio" name="plan" value="Standard"                   /> Standard</label>
                  <label className="radio-chip"><input type="radio" name="plan" value="Premium"                    /> Premium</label>
                  <label className="radio-chip"><input type="radio" name="plan" value="Not sure yet"               /> Not sure yet</label>
                </div>
              </div>
              <div className="field">
                <label htmlFor="cf-note">Anything else? (optional)</label>
                <textarea id="cf-note" name="note" rows="4" placeholder="Anything we should know - favourite sites, must-haves, deadlines…"></textarea>
              </div>
              <button
                type="submit"
                className="btn btn-primary btn-lg"
                disabled={status === "sending"}
                style={status === "sending" ? {opacity: 0.7, cursor: "not-allowed"} : {}}
              >
                {status === "sending" ? "Sending…" : "Send hello"}
              </button>
            </>
          )}
        </form>
      </div>
      <style>{`
        .contact { background: var(--paper); }
        .contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
        @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }
        .contact-intro h2 {
          font-family: var(--font-display); font-weight: 700;
          font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.025em;
          margin: 14px 0 18px; color: var(--ink);
        }
        .contact-intro p { font-size: 16px; line-height: 1.65; color: var(--fg-soft); margin: 0 0 28px; max-width: 420px; }
        .contact-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
        .contact-meta li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
        .contact-meta li i { color: var(--primary); }
        .contact-form {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-xl);
          padding: 36px;
          box-shadow: var(--shadow-md);
          display: flex; flex-direction: column; gap: 18px;
        }
        @media (max-width: 540px) { .contact-form { padding: 24px; } }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
        .field { display: flex; flex-direction: column; gap: 6px; }
        .field label { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--fg-soft); letter-spacing: 0.04em; }
        .field input, .field textarea {
          font-family: var(--font-body); font-size: 15px;
          padding: 13px 14px;
          border-radius: var(--r-md); border: 1px solid var(--border);
          background: var(--paper); color: var(--ink);
          outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
        }
        .field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
        .field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: var(--shadow-glow-mint); }
        .field textarea { resize: vertical; min-height: 96px; }
        .radio-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
        .radio-chip {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 16px; border-radius: var(--r-pill);
          background: var(--paper-warm); border: 1px solid var(--border);
          font-size: 14px; color: var(--ink-soft); cursor: pointer;
          transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
        }
        .radio-chip input { accent-color: var(--primary); }
        .radio-chip:has(input:checked) { background: var(--mint); border-color: var(--primary); color: var(--ink); }
        .contact-form .btn { align-self: flex-start; }
        .form-success { text-align: center; padding: 32px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
        .form-success p { font-size: 16px; color: var(--fg-soft); max-width: 380px; margin: 0; }
        .form-error-banner {
          background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--r-md);
          padding: 14px 18px; font-size: 14.5px; line-height: 1.5; color: #991B1B;
        }
        .form-error-banner a { color: #B91C1C; font-weight: 600; }
      `}</style>
    </section>
  );
}

window.Contact = Contact;
