// contact.jsx, dedicated /contact page. Reuses Nav + Footer; hosts the Trade-OS
// leads widget (contact form) inline in the body.

function ContactHero() {
  return (
    <section className="about-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <span>Contact</span>
        </nav>
        <div className="about-hero-inner">
          <div className="eyebrow">Get in touch</div>
          <h1>Contact Polaris.</h1>
          <p className="about-hero-sub">Send us a message and the Polaris team will get back to you, usually within one business day. Prefer to talk? Give us a call.</p>
          <div className="about-hero-cta">
            <a className="btn btn-amber btn-upper" href="#message">Send a message <Icon name="arrow" /></a>
            <a className="btn btn-ghost" href={TEL}><Icon name="phone" />{PHONE}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

const CONTACT_DETAILS = [
  { ic: "phone", h: "Call us", lines: [{ t: PHONE, href: TEL }], note: "Mon–Fri 7am–6pm, talk to a real person." },
  { ic: "pin", h: "Headquarters", lines: [{ t: "670 Vandustrial Drive" }, { t: "Westmont, IL 60559" }], note: "Serving greater Chicagoland." },
  { ic: "calendar", h: "Hours", lines: [{ t: "Mon–Fri 7am–6pm" }, { t: "Sat 8am–2pm" }], note: "Crews out rain or shine, April through October." },
];

function ContactBody() {
  return (
    <section className="svc-cta" id="message" style={{ background: "var(--bg)" }}>
      <div className="wrap">
        <div className="svc-cta-grid">
          <div className="svc-cta-copy">
            <div className="eyebrow">Contact</div>
            <h2>Reach the Polaris team.</h2>
            <p>One team handles your whole property, from the first quote to every visit after. Send a message and we'll be in touch, or reach us directly.</p>
            <div className="contact-cards">
              {CONTACT_DETAILS.map((c, i) => (
                <div className="contact-card" key={i}>
                  <div className="contact-ic"><Icon name={c.ic} /></div>
                  <div>
                    <h3>{c.h}</h3>
                    {c.lines.map((l, j) => (
                      l.href
                        ? <a className="contact-line" href={l.href} key={j}>{l.t}</a>
                        : <div className="contact-line" key={j}>{l.t}</div>
                    ))}
                    <p>{c.note}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <LeadsWidget />
        </div>
      </div>
    </section>
  );
}

// Trade-OS leads widget (the contact form). Its target div is rendered by React,
// so we inject widget.js from an effect — a static <script defer> could run
// before #tradeos-leads exists.
function LeadsWidget() {
  const loaded = React.useRef(false);
  React.useEffect(() => {
    if (loaded.current) return; // guard against a second mount re-injecting
    loaded.current = true;
    const s = document.createElement("script");
    s.src = "https://www.gotradeos.com/widget.js";
    s.defer = true;
    s.setAttribute("data-tenant-key", "b15f6d97-f8ee-450b-990e-6ec170d33a39");
    s.setAttribute("data-target", "#tradeos-leads");
    document.body.appendChild(s);
  }, []);
  return <div id="tradeos-leads" className="leads-widget"></div>;
}

function ContactPage() {
  useReveal();
  React.useEffect(() => { document.title = "Contact · Polaris Landscape"; }, []);
  return (
    <React.Fragment>
      <Nav />
      <ContactHero />
      <ContactBody />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);