// commercial.jsx, dedicated, comprehensive commercial landing page.
// Replaces the templated commercial-services view with property-manager-focused
// content: property types, full services, onboarding process, FAQ, and a
// commercial proposal request form. Reuses Nav, Footer, theme + tweak wiring.

// ---- Data -----------------------------------------------------------------
const COMM_PROPERTY_TYPES = [
  { ic: "users", h: "HOAs & Communities", p: "Common areas, entries, amenities, and shared turf kept consistent across the whole association." },
  { ic: "building", h: "Office & Corporate Campuses", p: "Polished grounds and entrances that make the right impression on tenants and visitors every day." },
  { ic: "home", h: "Retail & Mixed-Use", p: "Clean, welcoming exteriors and parking islands that keep foot traffic moving and storefronts looking sharp." },
  { ic: "truck", h: "Industrial & Warehouse", p: "Large-site mowing, detention basins, and fence-line care handled on a schedule that fits your operation." },
  { ic: "shield", h: "Medical & Senior Living", p: "Safe, accessible, immaculate grounds with priority snow and ice response where it matters most." },
  { ic: "layers", h: "Multi-Site Portfolios", p: "One team, one contact, and one invoice across every property you manage in the Chicagoland area." },
];

const COMM_SERVICES = [
  {
    ic: "scissors", h: "Grounds Maintenance",
    items: ["Weekly mowing & string trimming", "Bed weeding & edging", "Shrub & tree pruning", "Litter & debris removal", "Turf fertilization programs"],
  },
  {
    ic: "tree", h: "Landscape & Design Enhancements",
    items: ["Seasonal color rotations", "Planting design & installs", "Mulch & bed refreshes", "Property makeovers", "Irrigation checks & repair"],
  },
  {
    ic: "snow", h: "Snow & Ice Management",
    items: ["24/7 storm monitoring", "Plowing on your trigger depth", "Sidewalk & entry clearing", "Salting & pre-treatment", "Per-event or seasonal contracts"],
  },
  {
    ic: "layers", h: "Site & Grounds Management",
    items: ["Dedicated account manager", "Scheduled site walkthroughs", "Detailed digital reporting", "Budget planning & forecasting", "Single invoice across sites"],
  },
];

const COMM_PROCESS = [
  { n: "01", ic: "phone", h: "Discovery call", p: "We learn your portfolio, your current pain points, and what a better contractor looks like for you." },
  { n: "02", ic: "footprints", h: "Site assessment", p: "We walk your priority properties, measure, and document scope so nothing gets missed in the proposal." },
  { n: "03", ic: "text", h: "Tailored proposal", p: "A clear, per-property scope and price, with service frequencies and snow triggers spelled out plainly." },
  { n: "04", ic: "truck", h: "Seamless transition", p: "We coordinate the handoff from your current vendor so there is no gap in service on any site." },
  { n: "05", ic: "calendar", h: "Ongoing partnership", p: "Scheduled walkthroughs, proactive reporting, and one manager who knows every property you run." },
];

const COMM_FAQ = [
  { q: "Can you take over mid-season from our current contractor?", a: "Yes. We handle transitions year-round and coordinate the handoff so there is no gap in mowing, bed care, or snow response. Most sites are onboarded within a week of a signed proposal." },
  { q: "Do you service multiple properties under one contract?", a: "We do. Multi-site portfolios get a single account manager, one consolidated invoice, and consistent standards across every property, whether you manage three sites or thirty." },
  { q: "How do you handle snow and ice for commercial sites?", a: "We monitor every storm around the clock and dispatch on the trigger depth you set. Lots, drives, sidewalks, and entries are cleared and treated, with timestamped reporting for your records and liability protection." },
  { q: "What does your reporting look like?", a: "You get scheduled site walkthroughs plus digital service reports so you always know what was done and when. For snow events, you receive per-visit documentation including times and materials applied." },
  { q: "Are you licensed and insured for commercial work?", a: "Yes. Polaris carries commercial general liability and workers' compensation coverage, and we can provide certificates of insurance naming your management company or ownership as needed. (Confirm specific limits before publishing.)" },
  { q: "How is pricing structured?", a: "Maintenance is typically a flat seasonal or monthly rate per property so your budget is predictable. Snow can be per-event or seasonal. Enhancements are quoted per project, always approved by you before any work begins." },
];

// ---- Sections -------------------------------------------------------------
function CommHero() {
  return (
    <section className="comm-hero">
      <div className="wrap">
        <nav className="crumb">
          <a href="/">Home</a>
          <Icon name="chevron" />
          <span>Commercial</span>
        </nav>
        <div className="comm-hero-inner">
          <div className="eyebrow">Commercial Landscape Services</div>
          <h1>One landscape partner for every property you manage.</h1>
          <p className="comm-hero-sub">Polaris keeps HOAs, office campuses, retail centers, and industrial sites across Chicagoland clean, safe, and sharp, year-round, with one point of contact.</p>
          <div className="comm-hero-cta">
            <a className="btn btn-amber btn-upper" href="#proposal">Request a proposal <Icon name="arrow" /></a>
            <a className="btn btn-ghost" href={TEL}><Icon name="phone" />{PHONE}</a>
          </div>
          <div className="comm-hero-strip">
            <div className="hs"><Icon name="shield" /><span>Licensed &amp; insured</span></div>
            <div className="hs"><Icon name="clock" /><span>24/7 snow response</span></div>
            <div className="hs"><Icon name="badge" /><span>Serving Chicagoland since 2011</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CommPropertyTypes() {
  return (
    <section className="block comm-types">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Properties we keep in top shape</h2>
          <p className="sub">From a single building to a portfolio of sites, we tailor a program to how each property is used.</p>
        </div>
        <div className="types-grid">
          {COMM_PROPERTY_TYPES.map((t, i) => (
            <div className="type-card reveal" key={i}>
              <div className="type-ic"><Icon name={t.ic} /></div>
              <h3>{t.h}</h3>
              <p>{t.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CommServices() {
  return (
    <section className="block comm-services" id="services">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Everything your site needs, under one roof</h2>
          <p className="sub">Bundle any combination of services into a single, predictable program managed by one team.</p>
        </div>
        <div className="cserv-grid">
          {COMM_SERVICES.map((s, i) => (
            <div className="cserv-card reveal" key={i}>
              <div className="cserv-head">
                <div className="cserv-ic"><Icon name={s.ic} /></div>
                <h3>{s.h}</h3>
              </div>
              <ul>
                {s.items.map((it, j) => (
                  <li key={j}><Icon name="check" />{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CommProcess() {
  return (
    <section className="block comm-process">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Switching to Polaris is simple</h2>
          <p className="sub">A clear path from first call to fully onboarded, with no gap in service when you leave your current contractor.</p>
        </div>
        <div className="proc-rail">
          {COMM_PROCESS.map((p, i) => (
            <div className="proc-step reveal" key={i}>
              <div className="proc-top">
                <span className="proc-n">{p.n}</span>
                <span className="proc-ic"><Icon name={p.ic} /></span>
              </div>
              <h3>{p.h}</h3>
              <p>{p.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CommFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="block comm-faq">
      <div className="wrap">
        <div className="sec-center reveal">
          <div className="divider"></div>
          <h2>Property manager FAQ</h2>
          <p className="sub">The questions we hear most from the managers and boards we work with.</p>
        </div>
        <div className="faq-list reveal">
          {COMM_FAQ.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={"faq-item" + (isOpen ? " open" : "")} key={i}>
                <button type="button" className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq-ic"><Icon name={isOpen ? "minus" : "plus"} /></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <p>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- Commercial proposal form --------------------------------------------
const PROP_TYPES = ["HOA / Community", "Office / Corporate", "Retail / Mixed-use", "Industrial / Warehouse", "Medical / Senior living", "Other"];
const SITE_COUNTS = ["1 site", "2 to 5 sites", "6 to 15 sites", "16+ sites"];
const COMM_NEEDS = ["Grounds Maintenance", "Snow & Ice", "Enhancements / Design", "Full Management"];

function CommProposalForm() {
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({
    company: "", name: "", email: "", phone: "", ptype: "", sites: "", needs: [], notes: "",
  });
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const on = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const toggleNeed = (n) => setF((p) => ({ ...p, needs: p.needs.includes(n) ? p.needs.filter((x) => x !== n) : [...p.needs, n] }));

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    if (!f.name.trim() || !f.phone.trim() || !f.email.trim()) {
      setError("Please add your name, phone, and work email so we can reach you.");
      return;
    }
    const detail = [
      f.company ? `Company / group: ${f.company}` : null,
      f.sites ? `Number of sites: ${f.sites}` : null,
      f.notes || null,
    ].filter(Boolean).join("\n");
    setSending(true);
    try {
      await window.submitLead({
        name: f.name.trim(),
        email: f.email.trim(),
        phone: f.phone.trim(),
        company: f.company || null,
        address: f.company || "",
        propertyType: f.ptype || "Commercial",
        services: f.needs.length ? f.needs : ["Full Management"],
        notes: detail,
        leadType: "commercial",
      });
      setSent(true);
    } catch (err) {
      setError("Something went wrong. Please call us at " + PHONE + ".");
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <div className="reqcard comm-form" id="proposal">
        <div className="thanks" style={{ textAlign: "center" }}>
          <div className="check" style={{ width: 60, height: 60, marginBottom: 16 }}><Icon name="checkc" style={{ width: 32, height: 32 }} /></div>
          <h2 style={{ fontSize: 26 }}>Thanks{f.name ? `, ${f.name}` : ""}!</h2>
          <p style={{ color: "var(--muted)", fontWeight: 500, margin: "12px 0 18px", fontSize: 15 }}>
            We've received your request{f.company ? ` for ${f.company}` : ""}. A Polaris commercial estimator will follow up within one business day to schedule your site assessment.</p>
          <a className="btn btn-green btn-block" href="/">Back to home <Icon name="arrow" /></a>
        </div>
      </div>
    );
  }

  return (
    <form className="reqcard comm-form" id="proposal" onSubmit={submit}>
      <h2>Request a proposal</h2>
      <p className="form-lede">Tell us about your property. We'll reach out within one business day.</p>
      <div className="field"><label>Company / management group</label><input value={f.company} onChange={on("company")} placeholder="Eastgate Property Group" /></div>
      <div className="grid2">
        <div className="field"><label>Your name</label><input value={f.name} onChange={on("name")} placeholder="Jordan Lee" /></div>
        <div className="field"><label>Phone</label><input value={f.phone} onChange={on("phone")} placeholder="(630) 296-4277" /></div>
      </div>
      <div className="field"><label>Work email</label><input value={f.email} onChange={on("email")} placeholder="you@company.com" /></div>
      <div className="grid2">
        <div className="field"><label>Property type</label>
          <select value={f.ptype} onChange={on("ptype")}>
            <option value="" disabled>Select one</option>
            {PROP_TYPES.map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
        </div>
        <div className="field"><label>How many sites?</label>
          <select value={f.sites} onChange={on("sites")}>
            <option value="" disabled>Select one</option>
            {SITE_COUNTS.map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
        </div>
      </div>
      <div className="field">
        <label>Services needed</label>
        <div className="chip-row">
          {COMM_NEEDS.map((n) => (
            <button type="button" key={n} className={"need-chip" + (f.needs.includes(n) ? " on" : "")} onClick={() => toggleNeed(n)}>
              {f.needs.includes(n) && <Icon name="check" />}{n}
            </button>
          ))}
        </div>
      </div>
      <div className="field"><label>Anything else?</label><textarea value={f.notes} onChange={on("notes")} rows="2" placeholder="Current pain points, timing, number of buildings, etc."></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…" : "Request my proposal"} {!sending && <Icon name="arrow" />}</button></div>
      <div className="alt">Prefer to talk? Call <b>{PHONE}</b></div>
    </form>
  );
}

function CommCTA() {
  return (
    <section className="comm-cta" id="proposal-band">
      <div className="wrap">
        <div className="comm-cta-grid">
          <div className="comm-cta-copy">
            <div className="eyebrow">Let's talk</div>
            <h2>Get a tailored proposal for your property.</h2>
            <p>Tell us what you manage and where your current contractor falls short. We'll walk your priority sites and come back with a clear, per-property plan, no obligation.</p>
            <ul className="cta-points">
              <li><Icon name="checkc" />Free site assessment &amp; proposal</li>
              <li><Icon name="checkc" />Seamless transition from your current vendor</li>
              <li><Icon name="checkc" />One contact &amp; one invoice across every site</li>
              <li><Icon name="checkc" />Licensed &amp; insured, serving Chicagoland since 2011</li>
            </ul>
          </div>
          <CommProposalForm />
        </div>
      </div>
    </section>
  );
}

function CommercialPage() {
  useReveal();
  React.useEffect(() => { document.title = "Commercial Landscape Services · Polaris Landscape"; }, []);

  return (
    <React.Fragment>
      <Nav />
      <CommHero />
      <CommPropertyTypes />
      <CommServices />
      <CommProcess />
      <CommFAQ />
      <CommCTA />
      <Footer />
    </React.Fragment>
  );
}

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