/* CommercialSections.jsx — Sections for the Commercial Renovation services page. */

const CommercialHero = ({ onCta }) =>
  <section className="hero" data-screen-label="commercial-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">COMMERCIAL RENOVATION &amp; BUILDOUTS IN NORTH &amp; CENTRAL JERSEY.</h1>
        <p className="hero__sub">High-impact commercial renovation and full-scale buildout services for business owners, property managers and franchise operators across North &amp; Central New Jersey. We respect strict building codes, hit tight commercial timelines, and deliver uncompromised structural durability — from high-traffic flooring to complete turn-key retail and restaurant transformations.</p>
        <p className="hero__cta-line">What's included on every commercial project:</p>
        <ul className="hero__list">
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Fully licensed &amp; commercially insured for multi-unit properties.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Code &amp; permit expertise in NJ zoning and OSHA standards.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Strict timeline management to minimize business downtime.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Industrial-grade materials built for heavy, continuous use.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Dedicated project manager from concept to grand opening.</li>
        </ul>
        <button className="btn btn--primary" onClick={onCta}>
          Request A Commercial Consultation
        </button>
      </div>
      <div className="collage">
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/GMC Dealer Flooring.jpg")`, backgroundSize: "cover" }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Framing1.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Medium Kitchen NEW.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Major Renovation2.jpg")` }} />
      </div>
    </div>
  </section>;


const CommercialIntro = () =>
  <section className="section" data-screen-label="commercial-intro">
    <div className="container">
      <div className="text-center" style={{ maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
        <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
        <div className="eyebrow">Engineered for business</div>
        <h2 className="section-title">Your space is a direct reflection of your brand</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg2)", margin: "0 auto" }}>
          In the commercial world, your physical space is more than just a building — it's an engine for employee productivity and the primary environment for your customer experience. Outdated layouts, worn-out flooring and poor spatial flow don't just look unprofessional; they cost you revenue. We partner with local business owners, property managers and franchise operators to deliver precision-engineered commercial spaces.
        </p>
      </div>
    </div>
  </section>;


const CommercialServices = () => {
  const SVCS = [
  {
    tag: "01",
    title: "High-Traffic Commercial Flooring",
    lede: "The wrong floor buckles, stains or wears down under commercial stress.",
    body: "Heavy-duty, commercial-grade flooring sourced and installed for the exact demands of your industry — designed to withstand chemical spills, thermal shock, foot and vehicle traffic, and strict NJ health and OSHA codes.",
    bullets: [
    "Car dealerships & showrooms — high-gloss, impact-resistant, heavy load-bearing.",
    "Restaurants & commercial kitchens — slip-resistant, hygienic, seamless to NJ health code.",
    "Apartment buildings & multi-family — sound-dampening LVP, engineered hardwood, premium carpet.",
    "Office buildings — sleek carpet tile, polished concrete or hardwood for acoustic control."]

  },
  {
    tag: "02",
    title: "Full Tenant Buildouts & Fit-Outs",
    lede: "From a raw \"vanilla shell\" to a fully operational, revenue-generating establishment.",
    body: "Complete layout reconfigurations, structural framing and high-end finish work — coordinated under one project manager so your grand opening hits its date.",
    bullets: [
    "Restaurants & bars — front-of-house and back-of-house, custom bar fabrications, kitchen layouts.",
    "Corporate offices — open-concept bullpens, executive offices, acoustically insulated conference rooms.",
    "Retail stores — custom product displays, checkout counters, strategic lighting, fitting rooms.",
    "Multi-tenant properties — full demising walls, mechanical rough-ins, ADA-compliant build-outs."]

  }];

  return (
    <section className="section section--alt" data-screen-label="commercial-services">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Our commercial services</div>
          <h2 className="section-title">Precision-engineered commercial spaces</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>Commercial projects require an entirely different level of discipline than residential work. We handle the entire project so you have a single point of contact from kickoff through final inspection.</p>
        </div>
        <div className="reno-grid">
          {SVCS.map((s, i) =>
          <div className="reno-card" key={i}>
              <div className="reno-card__tag">{s.tag}</div>
              <h3 className="reno-card__title">{s.title}</h3>
              <p className="reno-card__lede">{s.lede}</p>
              <p className="reno-card__body">{s.body}</p>
              <ul className="reno-card__list">
                {s.bullets.map((b, j) =>
              <li key={j}>
                    <IconCheck size={18} stroke={3.5} /> <span>{b}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

};


const CommercialCompare = () => {
  const ROWS = [
  { gsc: "Fully licensed & commercially insured for complex, multi-unit properties.",
    other: "Inadequate liability coverage risking your business assets." },
  { gsc: "Strict timeline management to minimize business interruption and downtime.",
    other: "Endless project delays pushing past your targeted grand opening." },
  { gsc: "Code & permit expertise navigating strict NJ commercial zoning and OSHA standards.",
    other: "Failed inspections due to a lack of commercial sub-contractor oversight." },
  { gsc: "Commercial durability using premium, industrial-grade materials built for wear.",
    other: "Residential-grade materials that quickly fail under heavy foot traffic." }];

  return (
    <section className="section" data-screen-label="commercial-compare">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 48 }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">The Gus Skyy advantage</div>
          <h2 className="section-title">Optimized for speed, precision &amp; zero surprises</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 720 }}>
            Every day your doors are closed for construction is a day of lost revenue. Here's how we stack up against the contractor down the road.
          </p>
        </div>
        <div className="compare">
          <div className="compare__head compare__head--us">The Gus Skyy Advantage</div>
          <div className="compare__head compare__head--them">The "Other Guy" Experience</div>
          {ROWS.map((r, i) =>
          <React.Fragment key={i}>
              <div className="compare__cell compare__cell--us">
                <IconCheck size={20} stroke={3.5} /> <span>{r.gsc}</span>
              </div>
              <div className="compare__cell compare__cell--them">
                <span className="compare__x">✕</span> <span>{r.other}</span>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

};


const CommercialBuiltToLast = () => {
  const ITEMS = [
  { Icon: IconHardHat, title: "Foundational subfloor prep",
    body: "Before laying a single square foot of commercial flooring or framing a tenant partition wall, we level the structural base, structurally reinforce it, and clear any moisture issues. Subfloor preparation is everything." },
  { Icon: IconBuilding, title: "Industrial-grade materials",
    body: "We strip old, failing commercial interiors down to their core structural components and upgrade the underlying systems to support the physical demands of daily operations. Residential-grade shortcuts don't survive commercial traffic." },
  { Icon: IconShield, title: "Craftsmanship guarantee",
    body: "Because we don't cut corners on foundational prep or material ratings, we confidently back our commercial installations with a comprehensive craftsmanship guarantee. Premium on opening day, premium years later." }];

  return (
    <section className="section section--dark" data-screen-label="commercial-built-to-last">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Built for heavy use</div>
          <h2 className="section-title">Our craftsmanship promise</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, opacity: 0.85, margin: 0 }}>
            Quality means doing it right when no one is looking. In a commercial property, the work behind the walls and under the floor matters more than the finish on top of them.
          </p>
        </div>
        <div className="why6">
          {ITEMS.map(({ Icon, title, body }, i) =>
          <div className="why6__card" key={i}>
              <div className="why6__icon"><Icon size={28} stroke={2} /></div>
              <h3 className="why6__title">{title}</h3>
              <p className="why6__body">{body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};


const CommercialServiceArea = () =>
  <section className="section section--alt" data-screen-label="commercial-area">
    <div className="container">
      <div className="two-col" style={{ alignItems: "center" }}>
        <div>
          <div className="divider-flag" />
          <div className="eyebrow">Service area</div>
          <h2 className="section-title">Proudly serving New Jersey businesses</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            Scalable commercial remodeling for businesses across North and Central Jersey. Not sure if you're in our service area? Call our commercial estimator — we travel for the right project.
          </p>
        </div>
        <div className="area-grid">
          <div className="area-col">
            <h4>North Jersey</h4>
            <ul>
              <li>Bergen County</li>
              <li>Essex County</li>
              <li>Morris County</li>
              <li>Passaic County</li>
              <li>Hudson County</li>
            </ul>
          </div>
          <div className="area-col">
            <h4>Central Jersey</h4>
            <ul>
              <li>Union County</li>
              <li>Middlesex County</li>
              <li>Somerset County</li>
              <li>Monmouth County</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>;


const CommercialFinalCTA = ({ onCta }) =>
  <section className="cta-final" data-screen-label="commercial-cta">
    <div className="container">
      <h2>Accelerate your business transformation</h2>
      <p>Whether you need to refresh your office flooring or build a brand-new restaurant concept from scratch, let's build an environment where your business can thrive. Call our commercial project estimator at 973-577-9383 or submit your Request for Proposal online.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Request A Commercial Consultation
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;


Object.assign(window, {
  CommercialHero, CommercialIntro, CommercialServices, CommercialCompare,
  CommercialBuiltToLast, CommercialServiceArea, CommercialFinalCTA
});