// ====== Services Overview Page ======
function ServicesPage() {
  const serviceDetails = [
    {
      id: "flooring",
      slug: "flooring",
      name: "Flooring Installation",
      icon: "Floor",
      desc: "Hardwood, laminate, luxury vinyl plank, tile, and carpet — expert installation for every budget and style.",
      img: "/images/flooring.jpg",
    },
    {
      id: "painting",
      slug: "painting",
      name: "Interior & Exterior Painting",
      icon: "Brush",
      desc: "Professional interior and exterior painting with premium paints and flawless, long-lasting finishes.",
      img: "/images/painting.jpg",
    },
    {
      id: "cabinets",
      slug: "cabinets",
      name: "Cabinet Installation",
      icon: "Cabinet",
      desc: "Custom and semi-custom cabinet installation for kitchens, bathrooms, and more — style meets function.",
      img: "/images/cabinets.jpg",
    },
    {
      id: "windows",
      slug: "windows",
      name: "Window Replacement",
      icon: "Window",
      desc: "Energy-efficient window replacement that improves comfort, curb appeal, and lowers utility bills.",
      img: "/images/windows.jpg",
    },
    {
      id: "doors",
      slug: "doors",
      name: "Door Installation",
      icon: "Door",
      desc: "Entry doors, interior doors, patio doors — beautifully installed for every style and security need.",
      img: "/images/doors.jpg",
    },
    {
      id: "home",
      slug: "home-improvement",
      name: "Home Improvement & Remodeling",
      icon: "HomeWrench",
      desc: "Full kitchen and bathroom remodels, trim work, tile, repairs, and more — one team for the whole project.",
      img: "/images/proj-kitchen-luxe.jpg",
    },
  ];

  return (
    <PageLayout activeSection="services">

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">What We Do</span>
          <h1>Complete Home Improvement Services<br />for DFW Homeowners</h1>
          <p className="lede">
            From a single-room flooring update to a full kitchen remodel, Ace Home
            Solutions handles it all — with the same owner-led quality on every job.
          </p>
          <div className="hero-cta">
            <button
              className="btn btn-primary"
              onClick={() => window.__openQuote && window.__openQuote()}
            >
              Get a Free Quote <span className="arr"><I.Arrow size={14} /></span>
            </button>
            <a className="btn btn-ghost" href="/service-areas">View Service Areas</a>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="page-section">
        <div className="container">
          <div className="section-head" style={{ textAlign: "center" }}>
            <span className="eyebrow">Our Services</span>
            <h2>Everything Your Home Needs</h2>
            <p style={{ color: "var(--muted)", maxWidth: 560, margin: "12px auto 0" }}>
              Click any service to learn more about what's included, our process, and
              what to expect from start to finish.
            </p>
          </div>
          <div className="services" style={{ marginTop: 40 }}>
            {serviceDetails.map((s) => {
              const Icon = I[s.icon];
              return (
                <a key={s.id} className="service-card-link" href={`/services/${s.slug}`}>
                  <div className="svc-icon"><Icon size={26} /></div>
                  <h3>{s.name}</h3>
                  <p>{s.desc}</p>
                  <span className="more">Learn More <I.Arrow size={13} /></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Why bundle */}
      <section className="page-section alt">
        <div className="container">
          <div className="content-grid">
            <div>
              <span className="eyebrow">Bundle & Save</span>
              <h2>Combine Services for One Smooth Project</h2>
              <p>
                Many of our customers combine flooring, painting, and cabinet work into
                a single remodel. When you bundle services, we coordinate the full
                sequence — the right trade at the right time — so your home is finished
                cleanly and efficiently.
              </p>
              <p>
                Bundling also means fewer contractors, fewer scheduling headaches, and
                one point of contact from start to finish.
              </p>
              <button
                className="btn btn-primary"
                style={{ marginTop: 24 }}
                onClick={() => window.__openQuote && window.__openQuote()}
              >
                Start a Project <span className="arr"><I.Arrow size={14} /></span>
              </button>
            </div>
            <div>
              <img
                src="/images/proj-bath.jpg"
                alt="Bathroom remodel combining tile, cabinets, and painting by Ace Home Solutions"
                style={{ borderRadius: "12px", width: "100%" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Trust badges */}
      <section className="page-section">
        <div className="container" style={{ textAlign: "center" }}>
          <span className="eyebrow">Our Promise</span>
          <h2>Quality You Can Count On</h2>
          <div className="process-steps" style={{ marginTop: 32 }}>
            {[
              { icon: "Shield",    t: "Licensed & Insured",    d: "Every project fully covered — your home is protected." },
              { icon: "Tag",       t: "Free Estimates",         d: "No-pressure quotes with transparent, itemized pricing." },
              { icon: "Check",     t: "Satisfaction Guarantee", d: "If it's not right, we make it right. Simple as that." },
              { icon: "Handshake", t: "Owner Involvement",      d: "The owner stays hands-on so quality never slips." },
            ].map((b, i) => {
              const Icon = I[b.icon];
              return (
                <div className="process-step" key={i}>
                  <div className="step-num"><Icon size={22} /></div>
                  <h4>{b.t}</h4>
                  <p>{b.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <div className="cta-band">
        <div className="container">
          <h2>Not Sure Where to Start?</h2>
          <p>Tell us about your project and we'll walk you through the options — for free.</p>
          <button
            className="btn-white"
            onClick={() => window.__openQuote && window.__openQuote()}
          >
            Get a Free Quote <I.Arrow size={14} />
          </button>
        </div>
      </div>

    </PageLayout>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServicesPage />);