// ====== About Page ======
function AboutPage() {
  return (
    <PageLayout activeSection="about">

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Our Story</span>
          <h1>Owner-Led. Community Focused.<br />Built on Craftsmanship.</h1>
          <p className="lede">
            Ace Home Solutions was founded with one goal: deliver the kind of home
            improvement work we'd want done in our own homes — honest, high-quality,
            and backed by real accountability.
          </p>
        </div>
      </section>

      {/* Trust highlights */}
      <section className="page-section alt">
        <div className="container">
          <div className="stats-row">
            {[
              { num: "Owner-Led",     lbl: "Direct accountability from estimate to final walkthrough" },
              { num: "Free",          lbl: "No-pressure estimates for every project" },
              { num: "DFW-Based",     lbl: "Local service across the Dallas-Fort Worth area" },
              { num: "Multi-Service", lbl: "Flooring, painting, cabinets, windows, doors, and remodels" },
            ].map((s, i) => (
              <div className="stat-box" key={i}>
                <div className="num">{s.num}</div>
                <div className="lbl">{s.lbl}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Story */}
      <section className="page-section">
        <div className="container">
          <div className="content-grid">
            <div>
              <span className="eyebrow">Who We Are</span>
              <h2>A DFW Home Improvement Team You Can Trust</h2>
              <p>
                Ace Home Solutions is an owner-led home improvement company based in
                Southlake, TX, serving homeowners across the Dallas-Fort Worth
                Metroplex. From single-room flooring updates to complete kitchen and
                bathroom remodels, we handle every project with the same level of care
                and attention to detail.
              </p>
              <p>
                Unlike large contracting firms that hand your project off to
                subcontractors, our team stays involved from the first estimate through
                the final walkthrough. That means consistent quality, clear
                communication, and a finished result you'll be proud of for years.
              </p>
              <p>
                We focus on clear expectations, careful sequencing, and clean work
                areas so every project starts with a practical plan and ends with a
                walkthrough.
              </p>
            </div>
            <div>
              <img
                src="/images/proj-kitchen-luxe.jpg"
                alt="Kitchen remodel inspiration for Ace Home Solutions in DFW"
                width={1200}
                height={900}
                style={{ borderRadius: "12px", width: "100%" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="page-section alt">
        <div className="container">
          <div className="section-head" style={{ textAlign: "center" }}>
            <span className="eyebrow">Our Values</span>
            <h2>What Sets Us Apart</h2>
          </div>
          <div className="process-steps">
            {[
              { icon: "Shield",    title: "Clear Scope",              desc: "We define the work, materials, and sequence before the project begins." },
              { icon: "Quality",   title: "Premium Materials",         desc: "We source durable, high-quality materials that stand the test of time." },
              { icon: "Handshake", title: "Transparent Pricing",       desc: "No hidden fees. Your estimate is your price — period." },
              { icon: "Team",      title: "Owner-Led Accountability",  desc: "The owner stays involved so quality never gets lost in the chain." },
              { icon: "Check",     title: "Clean Job Sites",           desc: "We respect your home. We clean up fully at the end of every workday." },
              { icon: "Star",      title: "Final Walkthrough",         desc: "We review the finished work with you before wrapping up the job." },
            ].map((v, i) => {
              const Icon = I[v.icon];
              return (
                <div className="process-step" key={i}>
                  <div className="step-num" style={{ background: "var(--navy)" }}>
                    <Icon size={22} />
                  </div>
                  <h4>{v.title}</h4>
                  <p>{v.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Services teaser */}
      <section className="page-section">
        <div className="container" style={{ textAlign: "center" }}>
          <span className="eyebrow">What We Do</span>
          <h2>Complete Home Improvement Services</h2>
          <p className="lede" style={{ maxWidth: 600, margin: "16px auto 32px" }}>
            From flooring and painting to custom cabinets, windows, doors, and full
            remodels — we do it all under one roof.
          </p>
          <a href="/services/" className="btn btn-primary">
            View All Services <span className="arr"><I.Arrow size={14} /></span>
          </a>
        </div>
      </section>

      {/* CTA Band */}
      <div className="cta-band">
        <div className="container">
          <h2>Ready to Start Your Project?</h2>
          <p>Get a free, no-pressure estimate from our team — we'd love to help.</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(<AboutPage />);