/* ATX Decon — About + Contact pages */

/* ========================= ABOUT ========================= */
function AboutPage({ go }) {
  const values = [
    { icon: "fa-user-shield", h: "Care without judgment", p: "We handle every situation with respect and zero judgment — your circumstances stay yours." },
    { icon: "fa-user-secret", h: "Total discretion", p: "Unmarked vehicles, confidential service, and respect for your privacy and your neighbors." },
    { icon: "fa-certificate", h: "Certified rigor", p: "IICRC-certified technicians following industry-standard protocols on every single job." },
    { icon: "fa-location-dot", h: "Local accountability", p: "We live here. We're your neighbors, and our name is on every job we do." },
  ];
  const stats = [
    { n: "24/7", l: "Live response, every day of the year" },
    { n: "45 min", l: "Average metro Austin response time" },
    { n: "IICRC", l: "Certified, continually trained technicians" },
    { n: "100%", l: "Licensed, bonded & insured" },
  ];
  return (
    <main>
      <section className="phero">
        <div className="phero-img" style={{ backgroundImage: 'url("assets/sec-about.jpg")' }}></div>
        <div className="phero-scrim"></div>
        <div className="wrap">
          <div className="phero-inner">
            <div className="crumb">
              <button onClick={() => go("home")}>Home</button>
              <i className="fa-solid fa-chevron-right"></i>
              <span style={{ color: "var(--violet-bright)" }}>ABOUT US</span>
            </div>
            <h1 className="h1">A local team for Austin's hardest moments.</h1>
            <p className="lead">
              ATX Decon is an Austin-based decontamination and remediation company built on a
              simple belief: no one should have to face a biohazard, an infestation, or a
              hoarding situation alone — or be judged for it.
            </p>
            <div className="phero-actions">
              <CallBtn size="lg" label="Call 24/7" />
              <button className="btn btn-outline btn-lg" onClick={() => go("contact")}>
                <i className="fa-regular fa-envelope"></i> Get in touch
              </button>
            </div>
          </div>
        </div>
      </section>
      <TrustStrip />

      <section className="section">
        <div className="wrap svc-intro">
          <div>
            <Eyebrow>OUR STORY</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>Built to do the work others can't — with care.</h2>
            <p className="lead" style={{ marginTop: 18, fontSize: 18 }}>
              We started ATX Decon because Austin families deserved a remediation company that
              answered the phone with a real, understanding voice — not an answering service —
              and showed up fast, fully equipped, and genuinely kind.
            </p>
            <p className="lead" style={{ marginTop: 16, fontSize: 18 }}>
              Today we handle the cleanups most people never think about until they need one:
              biohazard and trauma scenes, rodent and pest infestations, and hoarding
              environments. We bring certified expertise to the technical side, and patience
              and discretion to the human side.
            </p>
          </div>
          <image-slot id="about-story" placeholder="Technicians at work" radius="16"
            style={{ width: "100%", aspectRatio: "1 / 1", boxShadow: "var(--shadow-md)" }}></image-slot>
        </div>
      </section>

      <section className="section bg-soft">
        <div className="wrap">
          <div className="center" style={{ maxWidth: 640, margin: "0 auto" }}>
            <Eyebrow>WHAT WE STAND FOR</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>Four things we never compromise on.</h2>
          </div>
          <div className="incl-grid" style={{ marginTop: 44 }}>
            {values.map((v, i) => (
              <div className="incl" key={i}>
                <i className={`fa-solid ${v.icon}`}></i>
                <div><h4>{v.h}</h4><p>{v.p}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-navy">
        <div className="wrap">
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>CREDENTIALS</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16, color: "#fff" }}>Certified, insured, and accountable.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              The credentials matter because the work is serious. Here's what stands behind
              every ATX Decon job.
            </p>
          </div>
          <div style={{ marginTop: 48 }}><StatGrid stats={stats} /></div>
        </div>
      </section>

      <CTABand go={go} />
    </main>
  );
}

/* ========================= CONTACT ========================= */
function ContactPage({ go }) {
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", service: "", urgency: "soon", message: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); if (errors[k]) setErrors((e) => ({ ...e, [k]: null })); };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Please tell us your name.";
    if (!form.phone.trim()) e.phone = "We need a number to reach you.";
    else if (form.phone.replace(/\D/g, "").length < 10) e.phone = "That doesn't look like a full phone number.";
    if (form.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Please check this email address.";
    if (!form.service) e.service = "Let us know what you need help with.";
    if (!form.message.trim()) e.message = "A few words about the situation helps us prepare.";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) {
      setSent(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const urgencyOpts = [
    { v: "emergency", label: "It's an emergency", note: "Please call us" },
    { v: "soon", label: "Soon — within days", note: "" },
    { v: "exploring", label: "Just exploring", note: "" },
  ];

  return (
    <main>
      <section className="phero phero-contact">
        <div className="phero-img" style={{ backgroundImage: 'url("assets/sec-contact.jpg")' }}></div>
        <div className="phero-scrim"></div>
        <div className="wrap">
          <div className="phero-contact-grid">
            <div>
              <div className="crumb">
                <button onClick={() => go("home")}>Home</button>
                <i className="fa-solid fa-chevron-right"></i>
                <span style={{ color: "var(--violet-bright)" }}>CONTACT US</span>
              </div>
              <h1 className="h1">Let's talk. We're here to help.</h1>
              <p className="lead">
                For an active emergency, call us — a specialist answers 24/7. For everything
                else, send a few details and we'll respond quickly with next steps and a free
                estimate.
              </p>
              <a href={`tel:${PHONE_TEL}`} className="contact-call">
                <span className="contact-call-ic"><i className="fa-solid fa-phone-volume"></i></span>
                <span>
                  <span className="badge-mono" style={{ color: "var(--on-dark-mute)" }}>24/7 EMERGENCY LINE</span>
                  <span className="contact-call-num tnum">{PHONE_DISPLAY}</span>
                </span>
              </a>
            </div>
          <div className="contact-side card">
            <div className="cside-row"><i className="fa-regular fa-clock"></i><div><div className="badge-mono">HOURS</div><div className="cside-strong">Open 24 / 7 / 365</div></div></div>
            <hr className="hr" />
            <div className="cside-row"><i className="fa-solid fa-location-dot"></i><div><div className="badge-mono">SERVICE AREA</div><div className="cside-strong">Austin &amp; Central Texas</div></div></div>
            <hr className="hr" />
            <div className="cside-row"><i className="fa-regular fa-envelope"></i><div><div className="badge-mono">EMAIL</div><a href={`mailto:${EMAIL}`} className="cside-strong" style={{ color: "var(--accent-deep)" }}>{EMAIL}</a></div></div>
            <hr className="hr" />
            <div className="cside-chips chips">
              <span className="chip"><i className="fa-solid fa-certificate"></i> IICRC</span>
              <span className="chip"><i className="fa-solid fa-file-shield"></i> Insured</span>
              <span className="chip"><i className="fa-solid fa-user-secret"></i> Discreet</span>
            </div>
          </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap-narrow">
          {sent ? (
            <div className="form-success card">
              <span className="fs-ic"><i className="fa-solid fa-check"></i></span>
              <h2 className="h2">Thank you, {form.name.split(" ")[0] || "we've got it"}.</h2>
              <p className="lead" style={{ marginTop: 14 }}>
                Your request is in. An ATX Decon specialist will reach out shortly. If this
                becomes urgent in the meantime, please call us directly — we're available 24/7.
              </p>
              <div className="row" style={{ gap: 14, marginTop: 28, flexWrap: "wrap" }}>
                <CallBtn />
                <button className="btn btn-outline" onClick={() => { setSent(false); setForm({ name:"",phone:"",email:"",service:"",urgency:"soon",message:"" }); }}>
                  Submit another request
                </button>
              </div>
            </div>
          ) : (
            <form className="cform" onSubmit={submit} noValidate>
              <div className="cform-head">
                <Eyebrow>REQUEST A FREE ESTIMATE</Eyebrow>
                <h2 className="h2" style={{ marginTop: 14 }}>Tell us what's going on.</h2>
                <p className="muted" style={{ marginTop: 12 }}>Everything you share is confidential. There's no charge to talk.</p>
              </div>

              <div className="field-row">
                <Field label="Your name" error={errors.name}>
                  <input className={`input ${errors.name ? "is-err" : ""}`} value={form.name} onChange={(e)=>set("name", e.target.value)} placeholder="First and last name" />
                </Field>
                <Field label="Phone" error={errors.phone}>
                  <input className={`input ${errors.phone ? "is-err" : ""}`} value={form.phone} onChange={(e)=>set("phone", e.target.value)} placeholder="(512) 000-0000" inputMode="tel" />
                </Field>
              </div>

              <div className="field-row">
                <Field label="Email" hint="Optional" error={errors.email}>
                  <input className={`input ${errors.email ? "is-err" : ""}`} value={form.email} onChange={(e)=>set("email", e.target.value)} placeholder="you@email.com" inputMode="email" />
                </Field>
                <Field label="What do you need help with?" error={errors.service}>
                  <div className="select-wrap">
                    <select className={`input ${errors.service ? "is-err" : ""}`} value={form.service} onChange={(e)=>set("service", e.target.value)}>
                      <option value="">Select a service…</option>
                      <option value="biohazard">Biohazard &amp; trauma cleanup</option>
                      <option value="infestation">Room infestation cleanup</option>
                      <option value="hoarding">Hoarding cleanup</option>
                      <option value="other">Something else</option>
                    </select>
                    <i className="fa-solid fa-chevron-down"></i>
                  </div>
                </Field>
              </div>

              <Field label="How urgent is it?">
                <div className="urg">
                  {urgencyOpts.map((o) => (
                    <button type="button" key={o.v} className={`urg-opt ${form.urgency === o.v ? "is-sel" : ""}`} onClick={()=>set("urgency", o.v)}>
                      <span className="urg-radio"></span>
                      <span className="urg-label">{o.label}{o.note && <span className="urg-note">{o.note}</span>}</span>
                    </button>
                  ))}
                </div>
              </Field>

              <Field label="Briefly, what's the situation?" error={errors.message}>
                <textarea className={`input textarea ${errors.message ? "is-err" : ""}`} rows="4" value={form.message} onChange={(e)=>set("message", e.target.value)} placeholder="A sentence or two is plenty — we'll follow up with questions."></textarea>
              </Field>

              <div className="cform-foot">
                <button type="submit" className="btn btn-accent btn-lg">
                  <i className="fa-regular fa-paper-plane"></i> Send request
                </button>
                <span className="muted" style={{ fontSize: 14 }}>
                  <i className="fa-solid fa-lock" style={{ color: "var(--safe)", marginRight: 7 }}></i>
                  Private &amp; confidential. We never share your information.
                </span>
              </div>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

function Field({ label, hint, error, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}{hint && <span className="field-hint">{hint}</span>}</span>
      {children}
      {error && <span className="field-err"><i className="fa-solid fa-circle-exclamation"></i>{error}</span>}
    </label>
  );
}

Object.assign(window, { AboutPage, ContactPage });