/* KitchenSections.jsx — Sections for the Kitchen Remodeling services page. */

const KitchenHero = ({ onCta }) =>
<section className="hero" data-screen-label="kitchen-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">YOUR LOCAL KITCHEN REMODELING CONTRACTOR FOR NORTH & CENTRAL JERSEY.

      </h1>
        <p className="hero__sub">
          Premium kitchen remodeling for homeowners across North &amp; Central New Jersey. From a cozy layout refresh to a full open-concept reimagine — flawless craftsmanship, fixed timelines, zero surprises.
        </p>
        <p className="hero__cta-line">What's included on every kitchen 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 }} /> Structural integrity — built from the studs up.</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/kitchen14.jpg")` }} />
      </div>
    </div>
  </section>;


const KitchenIntro = () =>
<section className="section" data-screen-label="kitchen-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 gathering in</div>
        <h2 className="section-title">Is your kitchen a chore — or the heart of your home?</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg2)", margin: "0 auto" }}>
          Your kitchen should be more than a place to cook. It should be a custom-tailored sanctuary designed around your daily routine — effortless functionality married to timeless style. Whether you want to optimize a cozy layout or completely reimagine your space with an open-concept design, we bring your vision to life with flawless craftsmanship and structural integrity.
        </p>
      </div>
    </div>
  </section>;


const KitchenStats = () => {
  const STATS = [
  { num: "50+", label: "Custom kitchens built since 2019" },
  { num: "4.9★", label: "Google Reviews rating" },
  { num: "100%", label: "Licensed & insured general contractor" },
  { num: "1 yr", label: "Craftsmanship warranty included" }];

  return (
    <section className="stats-strip">
      <div className="container">
        <div className="stats-strip__grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {STATS.map((s, i) =>
          <div className="stat-cell" key={i}>
              <div className="stat-cell__num">{s.num}</div>
              <div className="stat-cell__label">{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const KitchenTiers = () => {
  const TIERS = [
  { tag: "Tier 01",
    title: "Basic Kitchens",
    sub: "Smart, high-impact updates",
    body: "Highly functional updates that maximize your existing footprint. We focus on clean cabinetry, durable countertops, and layout optimizations that refresh your space without structural overhauls." },
  { tag: "Tier 02",
    title: "Mid-Range Kitchens",
    sub: "Upgraded luxury, everyday utility",
    body: "Custom or semi-custom cabinetry, premium stone countertops like quartz or granite, updated lighting plans, modern backsplashes, and integrated appliance layouts. The sweet spot for most homes.",
    featured: true },
  { tag: "Tier 03",
    title: "High-End Luxury",
    sub: "Built from the studs up",
    body: "Fully custom cabinetry, massive statement islands, professional-grade appliance integration, hidden pantries, intricate tile work, smart kitchen automation and premium material sourcing throughout." }];

  return (
    <section className="section section--alt" data-screen-label="kitchen-tiers">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56, maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Built around your vision</div>
          <h2 className="section-title">Kitchen tiers tailored to your budget</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
            We don't do cookie-cutter. We work closely with you to design and build a kitchen that fits your specific budget, lifestyle, and aesthetic.
          </p>
        </div>
        <div className="tiers">
          {TIERS.map((t, i) =>
          <div className={`tier ${t.featured ? "tier--featured" : ""}`} key={i}>
              <div className="tier__tag">{t.tag}</div>
              <h3 className="tier__title">{t.title}</h3>
              <div className="tier__sub">{t.sub}</div>
              <p className="tier__body">{t.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const KitchenCompare = () => {
  const ROWS = [
  { gsc: "Fully licensed & insured for absolute 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: "Structural integrity — subfloors leveled and sound.",
    other: "Covering up old issues that cause sagging or cracking later." },
  { gsc: "Local NJ expertise — regional building and plumbing codes.",
    other: "Out-of-state crews unfamiliar with local town permits." }];

  return (
    <section className="section" data-screen-label="kitchen-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">A process built around respect for your home</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: "0 auto", maxWidth: 720 }}>
            A kitchen remodel can feel disruptive. Ours is built around respect for your home, clear timelines, 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 KitchenProcess = () => {
  const STEPS = [
  { num: 1, title: "The Design Consultation",
    body: "We sit down to discuss your lifestyle, cooking habits, aesthetic preferences and budget to establish the right scope of work." },
  { num: 2, title: "Material & Fixture Selection",
    body: "We guide you through cabinetry, countertops, hardware, backsplash and lighting choices to match your vision and budget." },
  { num: 3, title: "Permits & Prep",
    body: "We handle all local North and Central NJ township paperwork and permit filings — no stress on the logistics." },
  { num: 4, title: "The Build",
    body: "Our skilled craftsmen execute structural work, leveling, plumbing, electrical, tile and cabinetry with meticulous precision." },
  { num: 5, title: "The Reveal",
    body: "A final walkthrough makes sure every cabinet door is aligned and every fixture shines — ready for your first meal." }];

  return (
    <section className="section section--dark" data-screen-label="kitchen-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 patch over old problems. We strip your space down to the studs to make sure your new kitchen is structurally sound, level, and built to last for 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 KitchenWarranty = () =>
<section className="section section--alt" data-screen-label="kitchen-warranty">
    <div className="container">
      <div className="text-center" style={{ marginBottom: 48, maxWidth: 800, marginLeft: "auto", marginRight: "auto" }}>
        <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
        <div className="eyebrow">1-year installation guarantee</div>
        <h2 className="section-title">Backed by a 1-year craftsmanship warranty</h2>
        <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>
          A luxury kitchen shouldn't just look incredible on day one — it should function flawlessly for years. Because we never cut corners on what's behind your walls or underneath your floors, we confidently back our labor with a full year of protection.
        </p>
      </div>
      <div className="warranty-grid" style={{ maxWidth: 720, margin: "0 auto" }}>
        <div className="warranty-card" style={{ gridColumn: "1 / -1" }}>
          <div className="warranty-card__ic"><IconShield 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 during your first year, we come out and fix it — no questions asked.</p>
        </div>
      </div>
    </div>
  </section>;


const KitchenServiceArea = () =>
<section className="section" data-screen-label="kitchen-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 expert kitchen remodeling to homeowners 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 KitchenFinalCTA = ({ onCta }) =>
<section className="cta-final" data-screen-label="kitchen-cta">
    <div className="container">
      <h2>Ready to design your dream kitchen?</h2>
      <p>Stop compromising on the most important room in your home. Let's build something spectacular together. Call us at 973-577-9383 or fill out our online form to schedule your in-home consultation.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Get My Free Estimate Today
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;


Object.assign(window, {
  KitchenHero, KitchenIntro, KitchenStats, KitchenTiers, KitchenCompare,
  KitchenProcess, KitchenWarranty, KitchenServiceArea, KitchenFinalCTA
});