/* FlooringSections.jsx — Sections for the Flooring Installation services page. */

const FlooringHero = ({ onCta }) => (
  <section className="hero" data-screen-label="flooring-hero">
    <div className="container hero__grid">
      <div>
        <h1 className="hero__title">
          New floors in your North &amp; Central NJ home or business — expertly installed.
        </h1>
        <p className="hero__sub">
          Gus Skyy Construction installs hardwood, engineered wood, tile, vinyl and LVP for homeowners, landlords and business owners across NJ. Most rooms finished in days, not weeks.
        </p>
        <p className="hero__cta-line">What's included on every flooring project:</p>
        <ul className="hero__list">
          <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Free removal &amp; disposal of your old flooring.</li>
          <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Certified installers — NTCA members.</li>
          <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> 1-year installation guarantee on every job.</li>
          <li><IconCheck size={22} stroke={3.5} style={{color: "#7BC242", flexShrink: 0, marginTop: 1}}/> Free 3D rendering before you commit.</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/floor14.jpeg")`}}/>
      </div>
    </div>
  </section>
);

const FlooringFeatures = () => {
  const FEATS = [
    { Icon: IconClock,  label: "Most rooms installed in 2–3 days" },
    { Icon: IconHardHat, label: "Certified, insured installers on every job" },
    { Icon: IconShield, label: "1-year installation guarantee" },
    { Icon: IconDollar, label: "Financing options for qualified clients" },
  ];
  return (
    <section className="stats-strip">
      <div className="container">
        <div className="flooring-feats">
          {FEATS.map(({Icon, label}, i) => (
            <div className="flooring-feat" key={i}>
              <div className="flooring-feat__ic"><Icon size={28} stroke={2}/></div>
              <div className="flooring-feat__lbl">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FlooringValueProp = () => {
  const CARDS = [
    { title: "Expertly Installed",
      body: "Our installers are certified with the National Tile Contractors Association and trained in large-format tile, hardwood, engineered, vinyl and LVP. Years of hands-on NJ experience means it gets done right the first time." },
    { title: "Fast Turnaround",
      body: "Most single-room projects are completed in 2–3 days. We can usually start within a week of signing the contract, and we work on your schedule to keep disruption to your family minimal." },
    { title: "Smart Alternatives",
      body: "Big-box stores and bigger contractors push the most expensive materials. We help you find finishes that fit your budget and still look great — including options that cost less than the premium picks." },
  ];
  return (
    <section className="section" data-screen-label="flooring-value">
      <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">Beautiful floors, fair price</div>
          <h2 className="section-title">Beautiful new floors without breaking the bank</h2>
          <p style={{fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0}}>
            We add value by showing you alternative flooring options that can save substantially on material cost. Free removal &amp; disposal of your old floor and a premium underlayment upgrade are included on every project.
          </p>
        </div>
        <div className="why6">
          {CARDS.map((c, i) => (
            <div className="why6__card" key={i}>
              <h3 className="why6__title">{c.title}</h3>
              <p className="why6__body">{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FlooringWhatWeDo = () => {
  const STEPS = [
    "We pull all required permits so your project stays in compliance with local NJ codes.",
    "Our demolition crew removes your old flooring and hauls away all rubbish — no charge.",
    "We handle every bit of subfloor prep so your new floor lasts decades, not seasons.",
    "Certified installers professionally install hardwood, engineered, tile, vinyl or LVP.",
    "We can add complementary work — backsplashes, countertops, trim and painting — to finish the room.",
    "Crews show up every day, keep the site clean, and respect your home while we work.",
  ];
  return (
    <section className="section section--alt" data-screen-label="flooring-services">
      <div className="container">
        <div className="two-col" style={{alignItems: "center"}}>
          <div>
            <div className="divider-flag"/>
            <div className="eyebrow">What's included</div>
            <h2 className="section-title">Start to finish — we handle the whole project</h2>
            <p style={{fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0}}>
              You don't need to wrangle subcontractors or trips to the dump. One call to Gus Skyy Construction and the project moves from old, worn floors to beautifully installed new ones — start to finish.
            </p>
          </div>
          <ul className="checklist">
            {STEPS.map((s, i) => (
              <li key={i}>
                <IconCheck size={22} stroke={3.5}/> <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

const FloorTypes = ({ onCta }) => {
  const TYPES = [
    { title: "Hardwood",        body: "Solid hardwood for a long-lasting, premium look in living rooms, dining rooms and bedrooms." },
    { title: "Engineered Wood", body: "All the warmth of hardwood, more stable across temperature and humidity swings. Great for basements and below-grade rooms." },
    { title: "Tile",            body: "Porcelain and ceramic — including large-format tile installations our crew is specifically certified for." },
    { title: "Luxury Vinyl Plank", body: "Waterproof, durable and budget-friendly. Looks like wood, takes the punishment of kids, pets and rentals." },
    { title: "Vinyl",           body: "Cost-effective option for kitchens, bathrooms and rental units that need to look great and stand up to wear." },
    { title: "Laminate",        body: "A versatile, affordable option that mimics wood or stone — installed quickly, with low ongoing maintenance." },
  ];
  return (
    <section className="section" data-screen-label="floor-types">
      <div className="container">
        <div className="text-center" style={{marginBottom: 56}}>
          <div className="divider-flag"/>
          <div className="eyebrow">Materials we install</div>
          <h2 className="section-title">Every floor type, every room</h2>
        </div>
        <div className="core4">
          {TYPES.map((t, i) => (
            <div className="core4__item" key={i}>
              <div className="core4__icon"><IconHome size={28} stroke={2}/></div>
              <div>
                <h3 className="core4__heading">{t.title}</h3>
                <p className="core4__body">{t.body}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{textAlign: "center", marginTop: 56}}>
          <button className="btn btn--primary" onClick={onCta}>
            Get Your Free Estimate Here
          </button>
        </div>
      </div>
    </section>
  );
};

const CostOfWaiting = () => {
  const REASONS = [
    { title: "Home value stays lower",
      body: "Old, worn floors leave money on the table at resale. Every month you wait, the floors keep aging — and the asking price your home can support stays where it is." },
    { title: "Material costs keep climbing",
      body: "Flooring material prices have steadily risen over the past few years. Quoting now locks in today's pricing before the next round of increases." },
    { title: "Daily enjoyment of your home",
      body: "How much is it worth to genuinely love walking into your home every day? To not steer guests away from a tired room? Quality floors change how a space feels." },
    { title: "Damage gets more expensive",
      body: "Worn flooring eventually leads to subfloor damage. Catching it now is a flooring project. Catching it later is a flooring project plus a subfloor rebuild — often double the cost." },
  ];
  return (
    <section className="section section--alt" data-screen-label="cost-of-waiting">
      <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">Still on the fence?</div>
          <h2 className="section-title">What waiting actually costs you</h2>
          <p style={{fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0}}>
            We get it — replacing floors feels like a project. Here's what staying with the old ones quietly costs in the meantime.
          </p>
        </div>
        <div className="reasons">
          {REASONS.map((r, i) => (
            <div className="reason" key={i}>
              <span className="reason__num">{String(i+1).padStart(2,"0")}</span>
              <h3 className="reason__title">{r.title}</h3>
              <p className="reason__body">{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Flooring8 = () => {
  const ITEMS = [
    { Icon: IconDollar,  title: "Affordable, stunning floors",
      body: "We specialize in cost-effective materials that deliver the look of premium product at a fraction of the price." },
    { Icon: IconCheck,   title: "Free value-added services",
      body: "Old floor removal, standard sub-floor prep, furniture moving, debris removed from site in dumpster — all included." },
    { Icon: IconBuilding, title: "See your floor first",
      body: "Get a free 3D rendering of the new floor in your actual room before spending a dime. No more guessing how it'll look." },
    { Icon: IconStar,    title: "Discounts &amp; financing",
      body: "We're always running a promotion on flooring installation, plus flexible financing options for qualified clients." },
    { Icon: IconClock,   title: "Fast turnaround",
      body: "Most single-room projects finish in 2–3 days, with start times usually available within a week of your call." },
    { Icon: IconHardHat, title: "Certified installers",
      body: "Our team are members of the National Tile Contractors Association, trained in the latest techniques for clean results." },
    { Icon: IconShield,  title: "Peace of mind protection",
      body: "Every installation comes with a 1-year guarantee, plus the manufacturer's warranty for long-term security." },
    { Icon: IconHome,    title: "Investor &amp; flipper friendly",
      body: "From real estate investors flipping homes to local families upgrading the flooring, our portfolio shows we deliver value, beauty and reliability." },
  ];
  return (
    <section className="section section--dark" data-screen-label="flooring-8">
      <div className="container">
        <div className="text-center" style={{marginBottom: 56}}>
          <div className="divider-flag" style={{marginLeft: "auto", marginRight: "auto"}}/>
          <div className="eyebrow">Why us</div>
          <h2 className="section-title">8 reasons NJ owners trust us with their floors</h2>
        </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" dangerouslySetInnerHTML={{__html: title}} />
              <p className="why6__body">{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FlooringFAQ = () => {
  const FAQS = [
    { q: "Do you offer free estimates?",
      a: "Yes. We provide a free quote on every flooring installation, and we'll also create a free 3D rendering of your room with the flooring you've selected so you can see how it'll look before you commit to anything." },
    { q: "How long does installation usually take?",
      a: "Most flooring installations — including removal of the old floor, subfloor prep, installation and finishing — wrap up in 2–3 days for a single room. Larger or multi-room projects take a little longer. We work around your schedule to minimize disruption." },
    { q: "Will you remove and dispose of the old flooring?",
      a: "Yes — removal and disposal of your existing floor is included on every project at no extra charge." },
    { q: "How long will my new floor last?",
      a: "With normal wear and tear, hardwood, engineered and tile floors typically last around 25 years. Luxury vinyl plank and standard vinyl run closer to 15–20. We help you match the material to how the room actually gets used." },
    { q: "Will there be a lot of dust or mess?",
      a: "There's always some dust and noise during demolition — that's unavoidable. Our crews use plastic in doorways to contain dust to the work area, sweep up at the end of every day, and keep the site safe for you and your family." },
    { q: "What warranty do you provide?",
      a: "We back our installation work with a 1-year guarantee. If any damage occurs to the flooring due to improper installation, we'll repair it free of charge. You also get the manufacturer's warranty on the flooring material itself." },
    { q: "Do you work with real estate investors?",
      a: "Yes. We work with investors and flippers regularly — sometimes gutting whole houses and rebuilding with new electrical, plumbing, flooring, HVAC and finish work so a 50-year-old home feels brand new. Reach out about your next project." },
  ];
  return (
    <section className="section" data-screen-label="flooring-faq">
      <div className="container">
        <div className="text-center" style={{marginBottom: 48}}>
          <div className="divider-flag" style={{marginLeft: "auto", marginRight: "auto"}}/>
          <div className="eyebrow">Have questions?</div>
          <h2 className="section-title">Flooring questions, answered</h2>
        </div>
        <div className="faq">
          {FAQS.map((f, i) => (
            <details className="faq-item" key={i} {...(i === 0 ? { open: true } : {})}>
              <summary>{f.q}</summary>
              <p className="faq-item__body">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const FlooringFinalCTA = ({ onCta }) => (
  <section className="cta-final" data-screen-label="flooring-cta">
    <div className="container">
      <h2>Ready for floors you'll love coming home to?</h2>
      <p>Schedule a no-cost, no-obligation consultation. We'll come measure, talk through materials and budget, and have a free 3D rendering back to you before you write a check.</p>
      <button className="btn btn--primary" onClick={onCta}>
        Get Your Free Estimate Here
      </button>
    </div>
  </section>
);

Object.assign(window, {
  FlooringHero, FlooringFeatures, FlooringValueProp, FlooringWhatWeDo,
  FloorTypes, CostOfWaiting, Flooring8, FlooringFAQ, FlooringFinalCTA,
});