// Contact.jsx — modern contact form with budget chips, validation, success state
function Contact({ formRef, onSubmit }) {
  const [form, setForm] = React.useState({
    name: "",
    email: "",
    company: "",
    details: "",
    budget: "",
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const budgets = ["< $5K", "$5K – $15K", "$15K – $50K", "$50K+", "Not sure yet"];

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const setBudget = (b) => setForm((f) => ({ ...f, budget: b }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Please add your name.";
    if (!form.email.trim() || !/^\S+@\S+\.\S+$/.test(form.email)) errs.email = "Please add a valid email.";
    if (!form.details.trim() || form.details.trim().length < 12) errs.details = "Tell us a bit more about your project.";
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
      onSubmit && onSubmit();
    }
  };

  return (
    <section className="section" id="contact" style={{ background: "var(--bg-page)" }} ref={formRef}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Get in touch</span>
          <h2>Tell us what's eating your week.</h2>
          <p>
            Drop a line below or book a 20-minute consult. Either way you'll get a written
            plan and a fixed quote back within one business day.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-aside reveal">
            <h3>Three ways to start</h3>
            <p className="lead">
              Pick whichever feels least like work. We'll meet you there.
            </p>

            <div className="contact-info">
              <div className="row">
                <div className="ic-bg"><i data-lucide="mail" className="ic"></i></div>
                <div>
                  <div className="lbl">Email</div>
                  <a href="mailto:contact@ducktask.com">contact@ducktask.com</a>
                </div>
              </div>
              <div className="row">
                <div className="ic-bg"><i data-lucide="instagram" className="ic"></i></div>
                <div>
                  <div className="lbl">Instagram</div>
                  <a href="https://instagram.com/duck.task" target="_blank" rel="noreferrer">@duck.task</a>
                </div>
              </div>
              <div className="row">
                <div className="ic-bg"><i data-lucide="facebook" className="ic"></i></div>
                <div>
                  <div className="lbl">Facebook</div>
                  <a href="https://www.facebook.com/people/Ducktask/61562862996787/" target="_blank" rel="noreferrer">facebook.com/Ducktask</a>
                </div>
              </div>
            </div>

            <div className="contact-calendly">
              <div className="ic-bg"><i data-lucide="calendar-clock" className="ic"></i></div>
              <div>
                <div className="ttl">Or grab a 20-min slot</div>
                <div className="sub">Calendly integration — picks up where the form leaves off.</div>
              </div>
            </div>
          </div>

          <div className="contact-card reveal d1">
            {submitted ? (
              <div className="form-success">
                <div className="ic-circle"><i data-lucide="check" style={{ width: 28, height: 28 }}></i></div>
                <h4>Got it — talk soon.</h4>
                <p>We'll reply with a written plan and a fixed quote within one business day.</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="form-row">
                  <div className="field">
                    <label htmlFor="c-name">Name</label>
                    <input id="c-name" placeholder="Your name" value={form.name} onChange={set("name")} autoComplete="name" />
                    {errors.name && <span className="error">{errors.name}</span>}
                  </div>
                  <div className="field">
                    <label htmlFor="c-email">Work email</label>
                    <input id="c-email" type="email" placeholder="you@company.com" value={form.email} onChange={set("email")} autoComplete="email" />
                    {errors.email && <span className="error">{errors.email}</span>}
                  </div>
                </div>

                <div className="form-row">
                  <div className="field full">
                    <label htmlFor="c-company">Company</label>
                    <input id="c-company" placeholder="What's the company called?" value={form.company} onChange={set("company")} autoComplete="organization" />
                  </div>
                </div>

                <div className="form-row">
                  <div className="field full">
                    <label htmlFor="c-details">Project details</label>
                    <textarea id="c-details" placeholder="What's eating your week? What would you love to hand off?" value={form.details} onChange={set("details")} />
                    {errors.details && <span className="error">{errors.details}</span>}
                  </div>
                </div>

                <div className="form-row">
                  <div className="field full">
                    <label>Rough budget</label>
                    <div className="budget-options">
                      {budgets.map((b) => (
                        <button
                          type="button"
                          key={b}
                          className={`budget-chip ${form.budget === b ? "active" : ""}`}
                          onClick={() => setBudget(b)}
                        >
                          {b}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="form-action">
                  <button type="submit" className="btn primary lg">
                    Send enquiry
                    <i data-lucide="arrow-right" className="ic"></i>
                  </button>
                  <span className="privacy">
                    <i data-lucide="lock" className="ic"></i>
                    We reply within one business day. Never any spam.
                  </span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;