/* RenovationSections.jsx — Sections for the Major Renovations services page. */

const RenovationHero = ({ onCta }) =>
<section className="hero" data-screen-label="renovation-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">YOUR LOCAL HOME REMODELING CONTRACTOR IN NORTH & CENTRAL JERSEY.

      </h1>
        <p className="hero__sub">We do major residential renovations and rebuilds for homeowners across North & Central New Jersey. Unlock the square footage you already own, build up or out, or strip a house down to its bones and start fresh. As a licensed General Contractor in NJ we handle the entire renovation project from blueprint to fully renovated home.

      </p>
        <p className="hero__cta-line">What's included on every major renovation:</p>
        <ul className="hero__list">
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Fully licensed &amp; insured for structural builds.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Engineering precision on every framing detail.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Fixed timelines and budgets through clear milestones.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Craftsmanship warranty on every structural install.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Dedicated Project Manager keeps communication channels open.</li>
        </ul>
        <button className="btn btn--primary" onClick={onCta}>
          Get Your Free Consultation
        </button>
      </div>
      <div className="collage">
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Major Renovation2.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/bathroom remodel1.webp")` }} />
      </div>
    </div>
  </section>;


const RenovationIntro = () =>
<section className="section" data-screen-label="renovation-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">Outgrowing your home? Stay put.</div>
        <h2 className="section-title">Love your neighborhood — get the house to match</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg2)", margin: "0 auto" }}>
          You don't need to pack up and move to get the space, luxury and layout of your dreams. Gus Skyy specializes in large-scale, structural residential transformations. We don't just patch up old spaces — we redefine them, with the technical grit and master craftsmanship required to execute major structural overhauls flawlessly.
        </p>
      </div>
    </div>
  </section>;


const RenovationServices = () => {
  const SVCS = [
  {
    tag: "01",
    title: "Custom Basement Transformations",
    lede: "Stop treating your basement like a dark storage locker.",
    body: "We transform underutilized basements into vibrant, fully functional living spaces. Before a single sheet of drywall goes up, we inspect and reinforce the structural foundation.",
    bullets: [
    "Custom home theaters, entertainment hubs and wet bars.",
    "Private home offices, gyms or secondary guest suites.",
    "Advanced moisture mitigation and structural leveling."]

  },
  {
    tag: "02",
    title: "Home Additions & Second-Level Add-Ons",
    lede: "When you need more space but want to preserve your yard — go up, or out.",
    body: "We design and build seamless additions and full second-story add-ons that look like they were part of the original blueprint, not an afterthought.",
    bullets: [
    "New master suites, sunrooms or extended living areas.",
    "Full second levels to maximize square footage on a limited lot.",
    "Meticulous tie-ins to existing roofline, framing and HVAC."]

  },
  {
    tag: "03",
    title: "Full-House Interior Gut & Rebuilds",
    lede: "Love the location and exterior — hate everything inside?",
    body: "We strip the entire interior structure down to bare studs. That lets us fix decades of hidden issues, modernize mechanical systems, and reimagine your floor plan with an open-concept flow.",
    bullets: [
    "Complete removal of outdated walls, old wiring and compromised plumbing.",
    "Correcting sagging joists and leveling subfloors throughout the home.",
    "Rebuilding with premium materials, energy-efficient insulation and custom architectural finishes."]

  },
  {
    tag: "04",
    title: "Custom Rebuilds on Existing Foundations",
    lede: "A brand-new luxury home — without the hassle of raw-land excavation.",
    body: "We safely demolish the existing structure while preserving and reinforcing your current foundation, then frame a completely new, modern home from the ground up.",
    bullets: [
    "Engineering assessment and reinforcement of the existing foundation.",
    "Framing and building a new architectural masterpiece from the ground up.",
    "Streamlined permitting and zoning navigation for NJ townships."]

  }];

  return (
    <section className="section section--alt" data-screen-label="renovation-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">What we do</div>
          <h2 className="section-title">Our major renovation &amp; structural services</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>Complex, high-end construction projects that require deep structural knowledge, precise architectural execution, and strict adherence to local NJ building codes. We handle the entire project for you so you just have a single point of contact throughout the renovation project.

          </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 RenovationCompare = () => {
  const ROWS = [
  { gsc: "Fully licensed & insured for massive structural builds.",
    other: "Unreliable credentials risking your home's integrity." },
  { gsc: "Fixed timelines & budgets managed through clear milestones.",
    other: "\"Surprise\" fees and projects that drag on for years." },
  { gsc: "True structural integrity — leveling, framing and load bearings.",
    other: "Patching over structural flaws that cause shifting later." },
  { gsc: "Local NJ code expertise navigating strict township zoning.",
    other: "Delays from out-of-state crews failing local inspections." }];

  return (
    <section className="section" data-screen-label="renovation-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">Engineering precision &amp; absolute transparency</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 720 }}>
            Large-scale structural renovations require far more than cosmetic skill. We treat your home with the highest level of respect, so you have peace of mind throughout a complex build.
          </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 RenovationBuiltToLast = () => {
  const ITEMS = [
  { Icon: IconHardHat, title: "Structural reinforcement",
    body: "Older homes in North and Central Jersey are prone to decades of settling, shifting and hidden moisture damage. We inspect, reinforce and level your subfloors and structural framing before any finishing work begins." },
  { Icon: IconShield, title: "Engineered to stay square",
    body: "We never cut corners on framing, sub-structures or foundational reinforcement. That's why we confidently back our structural installation labor with a comprehensive craftsmanship warranty." },
  { Icon: IconBuilding, title: "Built for generations",
    body: "We build spaces that aren't just beautiful — they're engineered to stay stable, square and flawless for generations. The work behind the drywall matters more than anything else." }];

  return (
    <section className="section section--dark" data-screen-label="renovation-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 to last</div>
          <h2 className="section-title">Our engineering &amp; 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. On major structural renovations, what's behind your walls and under your floors matters more than anything else.
          </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 RenovationServiceArea = () =>
<section className="section section--alt" data-screen-label="renovation-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 North &amp; Central New Jersey</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            We bring expert structural remodeling and large-scale construction to homeowners 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>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 RenovationFinalCTA = ({ onCta }) =>
<section className="cta-final" data-screen-label="renovation-cta">
    <div className="container">
      <h2>Ready to reimagine your home?</h2>
      <p>Don't settle for a home that no longer fits your life. Let's discuss your vision and see what's structurally possible for your property. Call 973-577-9383 or schedule your in-home structural consultation online.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Get My Free Consultation
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;


Object.assign(window, {
  RenovationHero, RenovationIntro, RenovationServices, RenovationCompare,
  RenovationBuiltToLast, RenovationServiceArea, RenovationFinalCTA
});