/* BathroomSections.jsx — Sections for the Bathroom Remodeling services page. */

const BathroomHero = ({ onCta }) =>
<section className="hero" data-screen-label="bathroom-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">YOUR BATHROOM REMODELING CONTRACTOR IN NORTH & CENTRAL JERSEY.</h1>
        <p className="hero__sub">Transform your bathroom into a private oasis. Premium bathroom remodeling for homeowners across North & Central New Jersey. From spa-like master suites to powder rooms with serious personality — flawless craftsmanship, fixed timelines, zero surprises.</p>
        <p className="hero__cta-line">What's included on every bathroom project:</p>
        <ul className="hero__list">
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Fully licensed &amp; insured — total peace of mind.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Schluter® waterproofing on every shower we build.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> Fixed timeline and fixed budget up front.</li>
          <li><IconCheck size={22} stroke={3.5} style={{ color: "#7BC242", flexShrink: 0, marginTop: 1 }} /> 1-year craftsmanship warranty.</li>
        </ul>
        <button className="btn btn--primary" onClick={onCta}>
          Get Your Free Estimate Here
        </button>
      </div>
      <div className="collage collage--single">
        <div className="collage__photo collage__photo--solo" style={{ backgroundImage: `url("uploads/bath1f.jpeg")` }} />
      </div>
    </div>
  </section>;


const BathroomIntro = () =>
<section className="section" data-screen-label="bathroom-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">A space worth coming home to</div>
        <h2 className="section-title">Is your bathroom a retreat — or a room you hurry to leave?</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg2)", margin: "0 auto" }}>
          Your bathroom should be a sanctuary. Whether you want to turn a cramped master bath into a spa-like experience, modernize a guest powder room, or update a layout for better accessibility, we bring your vision to life — from inspiration to installation. Sleek modern open-concept wet rooms or timeless classic designs — we handle everything in between.
        </p>
      </div>
    </div>
  </section>;


const BathroomServices = () => {
  const SVCS = [
  { title: "Complete Master Suite Overhauls",
    body: "Custom double vanities, freestanding soaking tubs, and lighting design that turns your morning routine into something you actually look forward to." },
  { title: "Custom Walk-In Showers",
    body: "Rainfall showerheads, frameless glass doors, built-in benches and intricate tile work — engineered for daily luxury that holds up to NJ winters." },
  { title: "Smart Bathroom Upgrades",
    body: "Heated flooring for cold mornings, smart mirrors, high-tech bidet toilets and voice-activated fixtures — modern conveniences, cleanly integrated." },
  { title: "Powder &amp; Guest Bath Updates",
    body: "Tight spaces, big impact. Clever storage, accent walls, premium fixtures — small footprints transformed into rooms guests remember." },
  { title: "Tub-to-Shower Conversions",
    body: "Swap an unused tub for an expansive walk-in shower. Better for daily use, better for resale, and we handle the full rough-in." },
  { title: "Accessibility Renovations",
    body: "Curbless showers, grab bars done with intention, comfort-height fixtures — bathrooms that age gracefully with the people who use them." }];

  return (
    <section className="section section--alt" data-screen-label="bathroom-services">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56 }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">What we do</div>
          <h2 className="section-title">Full-service, custom remodeling</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 700 }}>
            No cookie-cutter packages. Every bathroom is tailored to your home's architecture and your personal daily routine.
          </p>
        </div>
        <div className="core4">
          {SVCS.map((s, i) =>
          <div className="core4__item" key={i}>
              <div className="core4__icon"><IconWrench size={28} stroke={2} /></div>
              <div>
                <h3 className="core4__heading" dangerouslySetInnerHTML={{ __html: s.title }} />
                <p className="core4__body" dangerouslySetInnerHTML={{ __html: s.body }} />
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const BathroomCompare = () => {
  const ROWS = [
  { gsc: "Fully licensed & insured for total peace of mind.",
    other: "Unreliable credentials and sudden disappearances." },
  { gsc: "Fixed timelines & budgets so you know what to expect.",
    other: "Hidden fees and endless project delays." },
  { gsc: "Premium material sourcing for luxury looks that last.",
    other: "Cheap, easily damaged materials that leak or crack." },
  { gsc: "Local NJ expertise — regional plumbing and building codes.",
    other: "Out-of-state crews unfamiliar with local town permits." }];

  return (
    <section className="section" data-screen-label="bathroom-compare">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 48 }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Why us</div>
          <h2 className="section-title">Why North &amp; Central NJ homeowners choose Gus Skyy</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 700 }}>
            Remodeling can feel disruptive. Our process is built around clear communication, respect for your home, and zero surprises.
          </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 BathroomProcess = () => {
  const STEPS = [
  { num: 1, title: "The Design Consultation",
    body: "We sit down to discuss your lifestyle, design aesthetic and budget — and what you actually want this room to feel like." },
  { num: 2, title: "Material & Fixture Selection",
    body: "We help you choose the right tile, vanities, hardware and lighting to match your vision — and stay on budget while doing it." },
  { num: 3, title: "Permits & Prep",
    body: "We handle all the local North/Central NJ township paperwork so you don't have to chase down a single document." },
  { num: 4, title: "The Build",
    body: "Skilled craftsmen execute the plumbing, electrical, tile and installation with meticulous attention to detail — clean site, every day." },
  { num: 5, title: "The Reveal",
    body: "A final walkthrough makes sure every tile is perfect and every fixture shines. You sign off only when you're delighted." }];

  return (
    <section className="section section--dark" data-screen-label="bathroom-process">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 64, maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Our process</div>
          <h2 className="section-title">Quality means doing it right when no one is looking</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, opacity: 0.85, margin: 0 }}>
            We don't cover up old problems. We strip your space down to the studs to make sure your new bathroom is structurally sound, waterproofed flawlessly, and built to last decades.
          </p>
        </div>
        <div className="steps steps--5">
          {STEPS.map((s) =>
          <div className="step" key={s.num}>
              <div className="step__num">{s.num}</div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const BathroomBuiltToLast = () => {
  const ITEMS = [
  { Icon: IconHardHat, title: "Flawless, level flooring",
    body: "Older NJ homes shift and settle over time. Before a single tile is laid, our team meticulously inspects, reinforces and levels your subfloor — preventing cracked grout, ensuring tile alignment, and giving you a rock-solid foundation." },
  { Icon: IconShield, title: "Schluter® waterproofing on every shower",
    body: "Rubber liners and drywall are recipes for hidden mold and leaks. We exclusively use the Schluter® system on shower installations — a completely sealed, watertight enclosure beneath your tile." },
  { Icon: IconCheck, title: "Long-term protection",
    body: "Precision leveling combined with premium Schluter® engineering eliminates the risk of moisture penetration, efflorescence and mold growth — built to stay dry, stable and flawless for years." }];

  return (
    <section className="section section--alt" data-screen-label="built-to-last">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56, maxWidth: 800, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Built to last</div>
          <h2 className="section-title">Precision leveling &amp; advanced waterproofing</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            A beautiful bathroom is only as good as what's underneath the tile. Water damage and uneven floors are the silent killers of a remodel — so we invest heavily in the structural health of your space, not just the cosmetics.
          </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 style={{ maxWidth: 780, margin: "48px auto 0", textAlign: "center", padding: "28px 32px", background: "#fff", borderRadius: "var(--radius-md)", border: "var(--border-hairline-light)", boxShadow: "var(--shadow-1)" }}>
          <b style={{ display: "block", fontFamily: "var(--font-display)", fontSize: 24, textTransform: "uppercase", color: "var(--gsc-blue-dark)", marginBottom: 8, letterSpacing: "0.02em" }}>The Gus Skyy promise</b>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: "var(--fg2)" }}>
            We build bathrooms that don't just look spectacular on day one — they're engineered to stay dry, stable and flawless for years and years to come.
          </p>
        </div>
      </div>
    </section>);

};

const BathroomServiceArea = () =>
<section className="section" data-screen-label="bathroom-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 your neighborhood</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            We bring luxury bathroom remodeling to homes across North and Central New 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 BathroomWarranty = () =>
<section className="section section--alt" data-screen-label="bathroom-warranty">
    <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">Peace of mind guarantee</div>
        <h2 className="section-title">Our ironclad warranty</h2>
        <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
          A luxury bathroom shouldn't just look incredible on hand-over day — it should function flawlessly for decades. Because we don't cut corners on what's behind your walls, we back our work with industry-leading protection.
        </p>
      </div>
      <div className="warranty-grid">
        <div className="warranty-card">
          <div className="warranty-card__ic"><IconHardHat size={32} stroke={2} /></div>
          <h3>1-Year Craftsmanship Warranty</h3>
          <p>We stand behind every cut, every tile and every plumbing connection. If anything related to our workmanship needs attention in the first year, we come out and fix it — no questions asked.</p>
        </div>
        <div className="warranty-card">
          <div className="warranty-card__ic"><IconShield size={32} stroke={2} /></div>
          <h3>Schluter® Lifetime Waterproofing</h3>
          <p>When installed by our certified team, your shower area is backed by a Schluter® Lifetime Limited Warranty against water penetration, mold growth and structural moisture damage — engineered to last the entire lifespan of your home.</p>
        </div>
      </div>
      <p style={{ textAlign: "center", marginTop: 48, fontSize: 16, color: "var(--fg2)", maxWidth: 720, marginLeft: "auto", marginRight: "auto", lineHeight: 1.65 }}>
        We don't just build bathrooms — we build long-term relationships with NJ homeowners. We treat your home like our own, so the job gets done right the first time and you never worry about a leak again.
      </p>
    </div>
  </section>;


const BathroomFinalCTA = ({ onCta }) =>
<section className="cta-final" data-screen-label="bathroom-cta">
    <div className="container">
      <h2>Ready to design your dream bathroom?</h2>
      <p>Stop compromising on the most personal space in your home. Let's build something spectacular together.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Get Your Free Estimate Here
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;


Object.assign(window, {
  BathroomHero, BathroomIntro, BathroomServices, BathroomCompare,
  BathroomProcess, BathroomBuiltToLast, BathroomServiceArea,
  BathroomWarranty, BathroomFinalCTA
});