/* NewConstructionSections.jsx — Sections for the New Residential Construction services page. */

const NewConstructionHero = ({ onCta }) =>
<section className="hero" data-screen-label="newcon-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">LICENSED HOME BUILDER OF CUSTOM 1–4 FAMILY HOMES IN NORTH & CENTRAL JERSEY.</h1>
        <p className="hero__sub">There is a profound difference between buying a house and building a home that is entirely yours. When you build from the ground up, you aren't inheriting someone else's outdated layouts, compromised plumbing, or decades of settling foundation — you're starting with a clean slate, engineered for your lifestyle and crafted with uncompromising structural integrity.</p>
        <p className="hero__cta-line">What's included on every new build:</p>
        <ul className="hero__list">
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Licensed &amp; registered NJ Home Builder with full warranty compliance.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Advanced foundational engineering — perfectly square, level framing.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Strict timeline &amp; budget controls managed in clear build phases.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Local township expertise for smooth inspections and CO delivery.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> NJ State-approved home builder warranty backing every project.</li>
        </ul>
        <button className="btn btn--primary" onClick={onCta}>
          Schedule Your New Construction Consultation
        </button>
      </div>
      <div className="collage">
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Framing1.jpg")`, backgroundSize: "cover" }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Major Renovation2.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Medium Kitchen NEW.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/bathroom remodel1.webp")` }} />
      </div>
    </div>
  </section>;


const NewConstructionIntro = () =>
<section className="section" data-screen-label="newcon-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">Premier new home construction</div>
        <h2 className="section-title">Built from the ground up — entirely yours</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg2)", margin: "0 auto" }}>
          At Gus Skyy, we are fully licensed and registered New Jersey home builders specializing in new residential construction for 1–4 family properties. We handle the entire lifecycle of your build, translating architectural blueprints into flawless reality. Whether you're a homeowner ready to create your forever custom estate or an investor building a premium multi-family property, our team brings the technical grit, strict code compliance, and meticulous craftsmanship required for a pristine, turn-key delivery.
        </p>
      </div>
    </div>
  </section>;


const NewConstructionServices = () => {
  const SVCS = [
  {
    tag: "01",
    title: "Custom Single-Family Homes",
    lede: "Your dream home shouldn't be constrained by existing walls.",
    body: "We construct magnificent, bespoke single-family residences tailored precisely to your family's daily routine, design preferences, and long-term needs. Every detail is executed perfectly — from foundation to final finish.",
    bullets: [
    "High-end luxury layouts and sprawling open-concept spaces.",
    "State-of-the-art smart home integration and modern efficiency standards.",
    "Custom architectural finishes coordinated with your designer or ours."]

  },
  {
    tag: "02",
    title: "2–4 Family Residential & Investment Builds",
    lede: "Maximizing square footage and rental yields requires smart design and durable execution.",
    body: "We build high-end multi-family properties — duplexes, triplexes and quadplexes — engineered for optimal acoustic separation, independent mechanical systems, and layout efficiencies that attract premium tenants or accommodate multi-generational living.",
    bullets: [
    "Optimal acoustic separation between units for tenant comfort.",
    "Independent mechanical, plumbing and electrical systems per unit.",
    "Layout efficiencies designed to maximize rental yields and resale value."]

  }];

  return (
    <section className="section section--alt" data-screen-label="newcon-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 new construction capabilities</div>
          <h2 className="section-title">Ground-up builds, engineered correctly</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>As a licensed builder in NJ, we are fully equipped to manage the intensive logistics, engineering specifications, and construction milestones required for ground-up developments — under a single point of contact from kickoff through CO.</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 NewConstructionSpotlight = () =>
<section className="section" data-screen-label="newcon-spotlight">
    <div className="container">
      <div className="two-col" style={{ alignItems: "center" }}>
        <div>
          <div className="divider-flag" />
          <div className="eyebrow">Featured project spotlight</div>
          <h2 className="section-title">Custom 4,000 SQ FT luxury build — Maplewood, NJ</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            We don't just talk about premium construction — we are actively executing it in your neighborhood. Our team is currently on-site building a spectacular 4,000-square-foot custom single-family home in Maplewood, New Jersey.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "16px 0 0" }}>
            This project perfectly showcases the scale, structural precision, and high-end design capabilities we bring to every job site. From advanced foundational framing to premium architectural finishes, the Maplewood build represents the absolute standard of a Gus Skyy home.
          </p>
          <div style={{ display: "flex", gap: 32, marginTop: 28, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1, color: "var(--gsc-red)" }}>4,000</div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg2)", marginTop: 6 }}>Square feet</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1, color: "var(--gsc-red)" }}>1</div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg2)", marginTop: 6 }}>Single-family custom</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1, color: "var(--gsc-red)" }}>NJ</div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg2)", marginTop: 6 }}>Maplewood, Essex Co.</div>
            </div>
          </div>
        </div>
        <div className="collage">
          <div className="collage__photo" style={{ gridColumn: "1 / -1", aspectRatio: "16 / 10", backgroundImage: `url("uploads/Framing1.jpg")` }} />
          <div className="collage__photo" style={{ backgroundImage: `url("uploads/Major Renovation2.jpg")` }} />
          <div className="collage__photo" style={{ backgroundImage: `url("uploads/Medium Kitchen NEW.jpg")` }} />
        </div>
      </div>
    </div>
  </section>;


const NewConstructionCompare = () => {
  const ROWS = [
  { gsc: "Licensed NJ Home Builder with full structural warranty compliance.",
    other: "Unregistered contractors operating outside state guidelines." },
  { gsc: "Advanced foundational engineering — perfectly square, level framing.",
    other: "Rushed excavation and framing leading to shifting and cracking later." },
  { gsc: "Strict timeline & budget controls managed through clear build phases.",
    other: "Endless project delays and escalating \"unexpected\" costs." },
  { gsc: "Local township expertise ensuring smooth inspections and CO delivery.",
    other: "Delays caused by a failure to understand local NJ zoning laws." }];

  return (
    <section className="section section--alt" data-screen-label="newcon-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">Rigorous project management, zero corner-cutting</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 720 }}>
            Building a new home is one of the most significant investments you'll ever make. We eliminate the chaos of the construction process through transparent milestones and disciplined execution.
          </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 NewConstructionBuiltToLast = () => {
  const ITEMS = [
  { Icon: IconHardHat, title: "Reinforced foundations",
    body: "We pour perfectly reinforced foundations and utilize heavy-duty subflooring systems. The substructure is where a home succeeds or fails — and we never cut corners on what's underneath." },
  { Icon: IconBuilding, title: "Pristine framing & systems",
    body: "Highly efficient framing, plumbing and electrical layouts executed with engineering tolerances. A beautiful home is meaningless if what's behind the drywall isn't flawless." },
  { Icon: IconShield, title: "NJ State-approved warranty",
    body: "Because we refuse to take shortcuts on structural components, waterproofing, or engineering tolerances, every project is backed by a comprehensive New Jersey State-approved home builder warranty — total peace of mind from day one." }];

  return (
    <section className="section section--dark" data-screen-label="newcon-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">Uncompromising quality behind your walls</div>
          <h2 className="section-title">Built to stand true for generations</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, opacity: 0.85, margin: 0 }}>
            Quality means doing it right when no one is looking. A beautiful home is meaningless if the substructure isn't flawless. We focus intensely on what lies beneath the drywall and under the finished floors.
          </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 NewConstructionServiceArea = () =>
<section className="section section--alt" data-screen-label="newcon-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 building throughout North &amp; Central NJ</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            We provide ground-up new construction services for families and investors across North and Central Jersey. Not sure if you're in our service area? Just call — we travel for the right project.
          </p>
        </div>
        <div className="area-grid">
          <div className="area-col">
            <h4>North Jersey</h4>
            <ul>
              <li>Essex County (incl. Maplewood)</li>
              <li>Bergen 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 NewConstructionFinalCTA = ({ onCta }) =>
<section className="cta-final" data-screen-label="newcon-cta">
    <div className="container">
      <h2>Ready to build your dream home?</h2>
      <p>Stop searching for the perfect house on the market when you can build it exactly the way you want it. Let's sit down, review your blueprints, and map out the path to your new front door.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Schedule Your New Construction Consultation
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;


Object.assign(window, {
  NewConstructionHero, NewConstructionIntro, NewConstructionServices,
  NewConstructionSpotlight, NewConstructionCompare, NewConstructionBuiltToLast,
  NewConstructionServiceArea, NewConstructionFinalCTA
});