// hero.jsx, utility bar, main nav, hero with inline request form
const PHONE = "(630) 296-4277";
const TEL = "tel:6302964277";

// Services shown in the nav dropdown (kept in sync with the home-page tiles).
const NAV_SERVICES = [
  { ic: "scissors", slug: "lawn-care", h: "Lawn Care", d: "Mowing, leaf care, aeration" },
  { ic: "layers", slug: "hardscaping", h: "Hardscaping", d: "Patios, walls, walkways" },
  { ic: "flower", slug: "flower-bed-care", h: "Flower Bed Care", d: "Mulch, weeding, plantings" },
  { ic: "tree", slug: "landscape-design", h: "Landscape Design", d: "Design, makeovers, color" },
  { ic: "home", slug: "commercial-services", h: "Commercial Services", d: "HOAs, campuses, grounds" },
  { ic: "snow", slug: "winter-services", h: "Winter Services", d: "Snow removal, de-icing" },
];

function Nav() {
  const [open, setOpen] = React.useState(false);
  const dropRef = React.useRef(null);
  const closeTimer = React.useRef(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [subOpen, setSubOpen] = React.useState(false);
  const subRef = React.useRef(null);

  // Close on outside click / Escape.
  React.useEffect(() => {
    const onDoc = (e) => { if (dropRef.current && !dropRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") { setOpen(false); setMenuOpen(false); } };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
  }, []);

  // Lock body scroll while the mobile drawer is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const closeMenu = () => { setMenuOpen(false); setSubOpen(false); };

  const openNow = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const closeSoon = () => { closeTimer.current = setTimeout(() => setOpen(false), 140); };

  return (
    <React.Fragment>
      <div className="util">
        <div className="wrap">
          <div className="row">
            <div className="grp hide-sm">
              <a href="mailto:hello@polarislandscape.com"><Icon name="mail" />hello@polarislandscape.com</a>
              <a href={TEL}><Icon name="phone" />{PHONE}</a>
            </div>
            <div className="grp">
              <a className="login" href="/#plan"><Icon name="building" />Property Managers</a>
            </div>
          </div>
        </div>
      </div>

      <header className="nav">
        <div className="wrap">
          <div className="row">
            <a className="brand" href="/">
              <LogoMark />
              <img className="logo-word" src="/assets/polaris-wordmark.svg" alt="" />
            </a>
            <nav className="links">
              <a href="/#top">Home</a>
              <div
                className={"navdrop" + (open ? " open" : "")}
                ref={dropRef}
                onMouseEnter={openNow}
                onMouseLeave={closeSoon}
              >
                <button
                  type="button"
                  className="navdrop-trigger"
                  aria-haspopup="true"
                  aria-expanded={open}
                  onClick={() => setOpen((v) => !v)}
                >
                  Services <Icon name="chevron" />
                </button>
                <div className="navdrop-panel" onMouseEnter={openNow} onMouseLeave={closeSoon}>
                  <div className="navdrop-grid">
                    {NAV_SERVICES.map((s) => (
                      <a className="navdrop-item" href={"/" + s.slug} key={s.slug}>
                        <span className="ic"><Icon name={s.ic} /></span>
                        <span className="tx">
                          <b>{s.h}</b>
                          <small>{s.d}</small>
                        </span>
                      </a>
                    ))}
                  </div>
                </div>
              </div>
              <a href="/commercial-services">Commercial</a>
              <a href="/about">About</a>
            </nav>
            <div className="right">
              <a className="btn btn-amber btn-upper navcta" href="/#request">Get a Quote</a>
              <button
                type="button"
                className={"hamburger" + (menuOpen ? " open" : "")}
                aria-label={menuOpen ? "Close menu" : "Open menu"}
                aria-expanded={menuOpen}
                onClick={() => setMenuOpen((v) => !v)}
              >
                <span></span><span></span><span></span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={"mobnav" + (menuOpen ? " open" : "")} aria-hidden={!menuOpen}>
        <div className="mobnav-scrim" onClick={closeMenu}></div>
        <aside className="mobnav-panel" role="dialog" aria-modal="true" aria-label="Menu">
          <div className="mobnav-head">
            <span className="mobnav-title">Menu</span>
            <button type="button" className="mobnav-x" aria-label="Close menu" onClick={closeMenu}>
              <Icon name="x" />
            </button>
          </div>
          <nav className="mobnav-links">
            <a href="/#top" onClick={closeMenu}>Home</a>
            <button
              type="button"
              className={"mobnav-sub-trigger" + (subOpen ? " open" : "")}
              aria-expanded={subOpen}
              onClick={() => setSubOpen((v) => !v)}
            >
              Services <Icon name="chevron" />
            </button>
            <div className="mobnav-sub" ref={subRef} style={{ maxHeight: subOpen && subRef.current ? subRef.current.scrollHeight : 0 }}>
              {NAV_SERVICES.map((s) => (
                <a className="mobnav-sub-item" href={"/" + s.slug} key={s.slug} onClick={closeMenu}>
                  <span className="ic"><Icon name={s.ic} /></span>
                  <span className="tx"><b>{s.h}</b><small>{s.d}</small></span>
                </a>
              ))}
            </div>
            <a href="/commercial-services" onClick={closeMenu}>Commercial</a>
            <a href="/about" onClick={closeMenu}>About</a>
            <a href="/#plan" onClick={closeMenu}><Icon name="building" />Property Managers</a>
          </nav>
          <div className="mobnav-foot">
            <a className="btn btn-amber btn-block btn-upper" href="/#request" onClick={closeMenu}>Get a Quote <Icon name="arrow" /></a>
            <a className="mobnav-call" href={TEL}><Icon name="phone" />{PHONE}</a>
          </div>
        </aside>
      </div>
    </React.Fragment>
  );
}

function RequestForm() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  // On mobile the card starts collapsed (just a CTA) and the fields animate
  // open on tap; on desktop the fields are always shown (CSS handles that).
  const [expanded, setExpanded] = React.useState(false);
  const [f, setF] = React.useState({ first: "", last: "", street: "", city: "", state: "IL", zip: "", phone: "", email: "", job: "" });
  const on = (k) => (e) => setF({ ...f, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    const name = `${f.first} ${f.last}`.trim();
    if (!name || !f.phone.trim() || !f.email.trim()) {
      setError("Please add your name, phone, and email so we can reach you.");
      return;
    }
    const address = [f.street, f.city, f.state, f.zip].map((x) => x && x.trim()).filter(Boolean).join(", ");
    setSending(true);
    try {
      await window.submitLead({
        name,
        email: f.email.trim(),
        phone: f.phone.trim(),
        address,
        propertyType: "Residential",
        services: [],
        notes: f.job,
        addressCity: f.city || null,
        addressState: f.state || null,
        addressZip: f.zip || null,
      });
      setSent(true);
    } catch (err) {
      setError("Something went wrong. Please call us at " + PHONE + ".");
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <div className="reqcard" id="request">
        <div className="thanks" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <div className="check" style={{ width: 60, height: 60, marginBottom: 16 }}><Icon name="checkc" style={{ width: 32, height: 32 }} /></div>
          <h2 style={{ fontSize: 26 }}>Got it, {f.first || "friend"}!</h2>
          <p style={{ color: "var(--muted)", fontWeight: 500, margin: "12px auto 0", fontSize: 15, maxWidth: "36ch" }}>
            We've received your request and a Polaris estimator will be in touch within one business day.</p>
        </div>
      </div>
    );
  }

  return (
    <form className={"reqcard" + (expanded ? " is-expanded" : "")} id="request" onSubmit={submit}>
      <h2>Submit your request.</h2>
      {!expanded && (
        <div className="reqcard-cta">
          <p className="reqcard-teaser">Get a free, no-obligation quote. A Polaris estimator replies within one business day.</p>
          <button type="button" className="btn btn-amber btn-block btn-lg btn-upper" onClick={() => setExpanded(true)}>Get a Quote <Icon name="arrow" /></button>
          <div className="alt">Or call us: <b>{PHONE}</b></div>
        </div>
      )}
      <div className={"reqcard-fields" + (expanded ? " open" : "")}>
        <div className="grid2">
          <div className="field"><label>First name</label><input value={f.first} onChange={on("first")} placeholder="John" /></div>
          <div className="field"><label>Last name</label><input value={f.last} onChange={on("last")} placeholder="Reilly" /></div>
        </div>
        <div className="field"><label>Street address</label><input value={f.street} onChange={on("street")} placeholder="123 Oak Ln" /></div>
        <div className="grid3">
          <div className="field"><label>City</label><input value={f.city} onChange={on("city")} placeholder="Hinsdale" /></div>
          <div className="field"><label>State</label><input value={f.state} onChange={on("state")} placeholder="IL" /></div>
          <div className="field"><label>ZIP</label><input value={f.zip} onChange={on("zip")} placeholder="60521" /></div>
        </div>
        <div className="field"><label>Phone</label><input value={f.phone} onChange={on("phone")} placeholder="(630) 296-4277" /></div>
        <div className="field"><label>Email</label><input value={f.email} onChange={on("email")} placeholder="you@email.com" /></div>
        <div className="field"><label>Describe your job</label><textarea value={f.job} onChange={on("job")} rows="2" placeholder="e.g. weekly mowing + a new paver patio"></textarea></div>
        {error && <div className="form-error">{error}</div>}
        <div className="submit"><button type="submit" disabled={sending} className="btn btn-amber btn-block btn-lg btn-upper">{sending ? "Sending…" : "Submit"} {!sending && <Icon name="arrow" />}</button></div>
        <div className="alt">Or call us: <b>{PHONE}</b></div>
        <div className="signin"><Icon name="user" />Already a client? <a href="#" style={{ color: "var(--green)", fontWeight: 800 }}>&nbsp;Sign in</a></div>
      </div>
    </form>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <picture>
        <source media="(max-width: 920px)" srcSet="/assets/hero-mobile.jpg" />
        <img className="hero-bg" src="/assets/hero-desktop.jpg" alt="Polaris Landscape backyard project: putting green, herringbone paver patio, fire pit, and pergola" />
      </picture>
      <div className="photo-tone"></div>
      <div className="wrap">
        <div className="inner">
          <div className="copy">
            <div className="eyebrow">Landscape Design &amp; Care · Since 2011</div>
            <h1 className="hero-h1">
              15 years of
              <FadeRotate
                className="hero-rotate"
                phrases={[
                  "landscape design",
                  "patio installations",
                  "plantings",
                  "snow removal",
                  "professional maintenance",
                ]}
              />
            </h1>
            <p className="sub">Landscape maintenance, plantings, patios, and snow removal for residential and commercial properties across Chicagoland, cared for in every season.</p>
            <div className="trust">
              <Stars />
              <span>4.9 / 5 on Google · 240+ Chicagoland properties</span>
            </div>
          </div>
          <RequestForm />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, RequestForm, PHONE, TEL });