/* EstimateForm.jsx — Lead capture form section for the free-estimate landing page. */

const SERVICES_LIST = [
  "Flooring Installation",
  "Bathroom Remodel",
  "Kitchen Remodel",
  "Residential Renovation",
  "Commercial Renovation",
  "New Construction (1–4 family)",
  "Other / Not Sure",
];

const TIMELINES = [
  "ASAP (within 30 days)",
  "1–3 months",
  "3–6 months",
  "6+ months",
  "Just exploring",
];

const BUDGETS = [
  "Under $10k",
  "$10k–$25k",
  "$25k–$50k",
  "$50k–$100k",
  "$100k–$250k",
  "$250k+",
  "Not sure yet",
];

const EstimateHero = () => {
  const PHOTOS = [
    "uploads/Framing1.jpg",
    "uploads/bath1b.jpeg",
    "uploads/foundation1.jpeg",
    "uploads/Medium Kitchen3 NEW.jpg",
  ];
  return (
    <section className="hero" data-screen-label="estimate-hero">
      <div className="container hero__grid">
        <div>
          <h1 className="hero__title">
            Get your free, no-obligation estimate.
          </h1>
          <p className="hero__sub">
            Tell us about your project by answering the questions below. We'll respond later today or the next business day.
          </p>
          <ul className="hero__list" style={{marginBottom: 0}}>
            <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Expert Services At Reasonable Prices.</li>
            <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Licensed &amp; insured sub-contractors on every project.</li>
            <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Projects Finished On-Time and On-Budget.</li>
          </ul>
        </div>
        <div className="collage">
          {PHOTOS.map((url, i) => (
            <div key={i} className="collage__photo" style={{backgroundImage: `url("${url}")`}}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const EstimateForm = () => {
  const [state, setState] = React.useState({
    name: "", phone: "", email: "",
    propertyType: "Residential",
    service: "",
    city: "",
    timeline: "",
    budget: "",
    description: "",
    bestTime: "Anytime",
    consent: true,
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);
  const update = (k) => (e) => setState(s => ({...s, [k]: e.target.value}));
  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setSendError(false);
    try {
      const r = await fetch("/api/lead", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(state),
      });
      if (!r.ok) throw new Error("send failed: " + r.status);
      if (window.dataLayer) {
        window.dataLayer.push({ event: "lead_form_submit", lead_service: state.service, lead_budget: state.budget, lead_timeline: state.timeline });
      }
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setSendError(true);
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <section className="section" data-screen-label="estimate-thanks">
        <div className="container" style={{maxWidth: 720}}>
          <div className="form__success" style={{padding: 32}}>
            <IconCheck size={32} stroke={3.5}/>
            <div>
              <b style={{fontSize: 22, fontFamily: "var(--font-display)", textTransform: "uppercase", letterSpacing: "0.02em", color: "var(--gsc-blue-dark)"}}>
                Thanks — we'll be in touch.
              </b>
              <p style={{marginTop: 6}}>
                Your request is in. A member of the Gus Skyy team will reach out later today or the next business day to schedule your on-site consultation. If it's urgent, call us at <b>973-577-9383</b>.
              </p>
            </div>
          </div>
          <div style={{textAlign: "center", marginTop: 40}}>
            <a className="btn btn--secondary--light" href="/">Back to Home</a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section" data-screen-label="estimate-form">
      <div className="container" style={{maxWidth: 880}}>
        <div className="estimate-card">
          <div style={{marginBottom: 28}}>
            <div className="divider-flag"/>
            <h2 className="section-title" style={{fontSize: "clamp(28px, 3.5vw, 44px)"}}>
              Tell us about your project
            </h2>
            <p style={{margin: 0, color: "var(--fg2)", fontSize: 16, lineHeight: 1.6}}>
              All fields except project description are required. We never share your information.
            </p>
          </div>

          <form className="form" onSubmit={onSubmit}>
            <div className="form__row">
              <label className="field">
                <span className="field__label">Full Name *</span>
                <input className="field__input" type="text" required value={state.name} onChange={update("name")} placeholder="Jane Smith"/>
              </label>
              <label className="field">
                <span className="field__label">Phone *</span>
                <input className="field__input" type="tel" required value={state.phone} onChange={update("phone")} placeholder="(973) 555-0100"/>
              </label>
            </div>

            <label className="field">
              <span className="field__label">Email *</span>
              <input className="field__input" type="email" required value={state.email} onChange={update("email")} placeholder="you@email.com"/>
            </label>

            <div className="form__row">
              <label className="field">
                <span className="field__label">Property Type *</span>
                <div className="seg">
                  {["Residential", "Commercial"].map(t => (
                    <button type="button" key={t}
                            className={`seg__btn ${state.propertyType === t ? "is-on" : ""}`}
                            onClick={() => setState(s => ({...s, propertyType: t}))}>
                      {t}
                    </button>
                  ))}
                </div>
              </label>
              <label className="field">
                <span className="field__label">City / Town in NJ *</span>
                <input className="field__input" type="text" required value={state.city} onChange={update("city")} placeholder="Livingston, NJ"/>
              </label>
            </div>

            <label className="field">
              <span className="field__label">What service do you need? *</span>
              <select className="field__select" required value={state.service} onChange={update("service")}>
                <option value="" disabled>Select a service…</option>
                {SERVICES_LIST.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </label>

            <div className="form__row">
              <label className="field">
                <span className="field__label">Timeline *</span>
                <select className="field__select" required value={state.timeline} onChange={update("timeline")}>
                  <option value="" disabled>When do you want to start?</option>
                  {TIMELINES.map(t => <option key={t} value={t}>{t}</option>)}
                </select>
              </label>
              <label className="field">
                <span className="field__label">Estimated Budget *</span>
                <select className="field__select" required value={state.budget} onChange={update("budget")}>
                  <option value="" disabled>Select a range…</option>
                  {BUDGETS.map(b => <option key={b} value={b}>{b}</option>)}
                </select>
              </label>
            </div>

            <label className="field">
              <span className="field__label">Tell us about your project</span>
              <textarea className="field__textarea" value={state.description} onChange={update("description")}
                        placeholder="Square footage, rooms involved, finishes you have in mind, must-haves, photos welcomed via email after submission…"/>
            </label>

            <label className="field">
              <span className="field__label">Best time to reach you</span>
              <div className="seg seg--4">
                {["Morning", "Afternoon", "Evening", "Anytime"].map(t => (
                  <button type="button" key={t}
                          className={`seg__btn ${state.bestTime === t ? "is-on" : ""}`}
                          onClick={() => setState(s => ({...s, bestTime: t}))}>
                    {t}
                  </button>
                ))}
              </div>
            </label>

            <label className="checkbox-row">
              <input type="checkbox" checked={state.consent}
                     onChange={(e) => setState(s => ({...s, consent: e.target.checked}))}/>
              <span>I agree to be contacted about my estimate by phone, text, or email.</span>
            </label>

            <button type="submit" disabled={submitting} className="btn btn--primary" style={{marginTop: 8, padding: "16px 36px", fontSize: 17, opacity: submitting ? 0.7 : 1}}>
              {submitting ? "Sending…" : <>Send My Free Estimate Request <IconArrowRight size={18} stroke={3}/></>}
            </button>

            {sendError && (
              <p style={{margin: "10px 0 0", fontSize: 14, fontWeight: 600, color: "#c0392b"}}>
                Something went wrong sending your request. Please call us at <b>973-577-9383</b> or email <b>office@GusSkyyCo.com</b> — we'll take care of you right away.
              </p>
            )}

            <p style={{margin: "8px 0 0", fontSize: 13, color: "var(--fg3)"}}>
              Prefer to talk? Call <b>973-577-9383</b> or email <b>office@GusSkyyCo.com</b>.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

const EstimateTrust = () => (
  <section className="section section--alt" data-screen-label="estimate-trust" style={{padding: "72px 0"}}>
    <div className="container">
      <div className="trust-row">
        <div className="trust-item">
          <IconShield size={32} stroke={2}/>
          <div>
            <b>Licensed &amp; Insured</b>
            <span>Fully licensed NJ general contractor with workers' comp + liability coverage on every job.</span>
          </div>
        </div>
        <div className="trust-item">
          <IconStar size={32}/>
          <div>
            <b>4.9 Star Google Rating</b>
            <span>Trusted by homeowners and business owners across North &amp; Central NJ.</span>
          </div>
        </div>
        <div className="trust-item">
          <IconClock size={32} stroke={2}/>
          <div>
            <b>Fast Response</b>
            <span>We reply later today or the next business day — no waiting weeks for a call back.</span>
          </div>
        </div>
        <div className="trust-item">
          <IconDollar size={32} stroke={2}/>
          <div>
            <b>No-Surprise Pricing</b>
            <span>Clear, detailed, fixed-price quotes — no hidden fees or contractor surprises.</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { EstimateHero, EstimateForm, EstimateTrust });