/* AboutUs.jsx — About Us page content (split for size). */

const AboutHero = () =>
<section className="hero" data-screen-label="about-hero">
    <div className="container hero__grid">
      <div>
        <div className="hero__eyebrow">About Gus Skyy Construction</div>
        <h1 className="hero__title">A FAMILY-BUILT GENERAL CONTRACTOR YOU CAN ACTUALLY TRUST.</h1>
        <p className="hero__sub">Founded in 2019 by Edivania (Skyy) and her husband Gus — a trained civil engineer from Brazil — Gus Skyy Construction was built on a foundation of technical expertise, structural integrity, and dedicated craftsmanship. What started as a vision has grown into a premier, full-service licensed general contractor serving homeowners and businesses throughout North and Central New Jersey.</p>
      </div>
      <div className="collage">
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Major Renovation2.jpg")`, backgroundSize: "cover" }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Framing1.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/Medium Kitchen NEW.jpg")` }} />
        <div className="collage__photo" style={{ backgroundImage: `url("uploads/bathroom remodel1.webp")` }} />
      </div>
    </div>
  </section>;


const AboutStory = () =>
<section className="section" data-screen-label="about-story">
    <div className="container">
      <div className="two-col" style={{ alignItems: "start" }}>
        <div>
          <div className="divider-flag" />
          <div className="eyebrow">Our story</div>
          <h2 className="section-title">From a single vision to a full-service NJ general contractor</h2>
        </div>
        <div>
          <p>Founded in 2019 by Edivania (Skyy) and her husband Gustavo — a trained civil engineer from Brazil — Gus Skyy Construction, LLC was built on a foundation of technical expertise, structural integrity, and dedicated craftsmanship.</p>
          <p>What started as a vision has grown into a premier, full-service licensed general contractor serving homeowners and businesses throughout North and Central New Jersey. Every project we take on, from a single bathroom remodel to a 4,000 SQ FT custom build, is treated with the same level of engineering discipline that defined our very first job.</p>
        </div>
      </div>
    </div>
  </section>;


const AboutWhatWeDo = () => {
  const ITEMS = [
  { Icon: IconHome, title: "Custom New Home Building",
    body: "Crafting beautiful 1–4 family homes from excavation to the final finishing touches." },
  { Icon: IconBuilding, title: "Complete Home Renovations",
    body: "Turning existing houses into dream homes with stunning kitchen remodels, bathroom upgrades, and full-house makeovers." },
  { Icon: IconWrench, title: "Specialized Flooring Installations",
    body: "Expertly handling all flooring types — including hardwood, laminate, tile, vinyl and luxury vinyl plank (LVP) — with the sole exception of carpeting." }];

  return (
    <section className="section section--alt" data-screen-label="about-what">
      <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">What we do</div>
          <h2 className="section-title">From the ground up — we bring your property visions to life</h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--fg2)", margin: 0 }}>We specialize in a comprehensive suite of residential and commercial construction services.</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>
    </section>);

};

window.AboutHero = AboutHero;
window.AboutStory = AboutStory;
window.AboutWhatWeDo = AboutWhatWeDo;