import Services from "@/component/Services"
import Trades from "@/component/Trades"
import Testimonial from "@/component/Testimonial"
import Contact from "@/component/Contact"
export default function Home() {
  return (
    <>
    <section className="hero">
  {/* VIDEO */}
  <video autoPlay muted loop playsInline className="hero-video">
  <source src="/assets/images/Modernback.mov" type="video/mp4" />
</video>
  {/* DARK OVERLAY */}
  <div className="hero-overlay" />
  {/* ================= HERO CONTENT ================= */}
  <div className="hero-content container">
    <div className="hero-left">
      <h1>
        Strategy-Driven Design.
        <br />
        Flawlessly Executed Development.
      </h1>
      <p>
        From concept to completion, HouseCoin delivers high-quality digital
        solutions with precision and innovation.
      </p>
      <div className="hero-buttons">
        <a href="contact.html" className="btn-primary-custom">
          Get a Free Quote
        </a>
        <a href="project.html" className="btn-outline">
          Explore Projects
        </a>
      </div>
    </div>
  </div>
  {/* ================= SOCIAL SIDE ================= */}
  <div className="hero-social">
    <a href="#">
      <img src="assets/images/icons/facebook.svg" alt="" />
    </a>
    <a href="#">
      <img src="assets/images/icons/linkdien.svg" alt="" />
    </a>
    <a href="#">
      <img src="assets/images/icons/instagram.svg" alt="" />
    </a>
    <a href="#">
      <img src="assets/images/icons/twitter.svg" alt="" />
    </a>
  </div>
  {/* ================= BOTTOM STRIP ================= */}
  <div className="hero-bottom">
    <div className="hb-item">
      <div className="icon">
        <img src="assets/images/icons/project.svg" alt="" />
      </div>
      <p>500+ Project Complete</p>
    </div>
    <div className="hb-item">
      <div className="icon">
        <img src="assets/images/icons/Licensed.svg" alt="" />
      </div>
      <p>Licensed &amp; Insured</p>
    </div>
    {/* CENTER HIGHLIGHT */}
    <div className="hb-item active">
      <div className="icon">
        <img src="assets/images/icons/Member.svg" alt="" />
      </div>
      <p>NKBA Member</p>
    </div>
    <div className="hb-item">
      <div className="icon">
        <img src="assets/images/icons/Certified.svg" alt="" />
      </div>
      <p>Smart Home Certified</p>
    </div>
    <div className="hb-item">
      <div className="icon">
        <img src="assets/images/icons/Warranty.svg" alt="" />
      </div>
      <p>10-Year Warranty</p>
    </div>
  </div>
  <a href="#footer">
    <img className="swipetop" src="assets/images/icons/swipetop.svg" alt="" />
  </a>
</section>
<section className="partners-section">
  <div className="container">
    <div className="trustedpatnerqrap">
      <h6 className="text-center">Trusted Partners</h6>
      <div className="partners-wrapper">
        <div className="partner-item">
          <img src="assets/images/lutron.png" alt="" />
        </div>
        <div className="partner-item">
          <img src="assets/images/kohler.png" alt="" />
        </div>
        <div className="partner-item">
          <img src="assets/images/samsung.png" alt="" />
        </div>
        <div className="partner-item">
          <img src="assets/images/ring.png" alt="" />
        </div>
        <div className="partner-item">
          <img src="assets/images/nest.png" alt="" />
        </div>
        <div className="partner-item">
          <img src="assets/images/sherwin.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</section>
<Services />
<section className="gallery-section">
  <div className="container">
    {/* TOP */}
    <div className="services-top">
      <div>
        <span className="tag">Recent Texas Projects</span>
        <h2>
          See our transformations across <br />{" "}
          <span> Central &amp; South Texas</span>
        </h2>
      </div>
      {/* SAME BUTTON */}
      <a href="project.html" className="btn-primary-custom">
        Explore Our Project
      </a>
    </div>
    {/* GRID */}
    <div className="row">
      <div className="col-md-6">
        <div className="img-comp-container">
          <div className="img-comp-img">
            <img src="assets/images/beforehouse.png" />
          </div>
          <div className="img-comp-img img-comp-overlay">
            <img src="assets/images/afterhouse.png" />
          </div>
        </div>
        <div className="housearrow">
          <h5>Cedar Sunroom Extension</h5>
          <p>Austin, TX</p>
        </div>
      </div>
      <div className="col-md-6">
        <div className="img-comp-container">
          <div className="img-comp-img">
            <img src="assets/images/beforehouse.png" />
          </div>
          <div className="img-comp-img img-comp-overlay">
            <img src="assets/images/remodel3.png" />
          </div>
        </div>
        <div className="housearrow">
          <h5>Kitchen Remodel</h5>
          <p>Austin, TX</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section className="pricing-section">
  <div className="container">
    {/* TOP CONTENT */}
    <div className="services-top">
      <div>
        <span className="tag">Clear Pricing. No Surprise</span>
        <h2 className="headprice">
          Transparency and trust, built
          <br />
          into every quote
        </h2>
      </div>
      <a href="#" className="btn-primary-custom">
        Smarter Estimate Calculator
      </a>
    </div>
    {/* FULL WIDTH GRID */}
    <div className="pricing-grid">
      {/* CARD 1 */}
      <div className="pricing-card">
        <div className="card-inner">
          <h3>Kitchen Remodels</h3>
          <p className="starting">
            <img src="assets/images/icons/Starting At.svg" alt="" />
          </p>
          <h2 className="price">$25000</h2>
          <p className="desc">
            Complete kitchen transformations with quality materials and expert
            craftsmanship
          </p>
          <a
            href="https://housecoins.trailweb.in/gallery.html"
            className="btn-primary-custom btn-orange"
          >
            Request Kitchen Estimate
          </a>
        </div>
      </div>
      {/* CARD 2 */}
      <div className="pricing-card">
        <div className="card-inner">
          <h3>Cedar Sunrooms</h3>
          <p className="starting">
            <img src="assets/images/icons/Starting At.svg" alt="" />
          </p>
          <h2 className="price">$18000</h2>
          <p className="desc">
            Custom cedar sunrooms that expand your living space beautifully
          </p>
          <a
            href="https://housecoins.trailweb.in/gallery.html"
            className="btn-primary-custom btn-orange"
          >
            Request Sunroom Estimate
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
<section className="gallery-section">
  <div className="container">
    {/* TOP */}
    <div className="services-top">
      <div>
        <span className="tag">Gallery</span>
        <h2>
          Inspiration for your <span> transformation</span>
        </h2>
      </div>
      {/* SAME BUTTON */}
      <a
        href="https://housecoins.trailweb.in/gallery.html"
        className="btn-primary-custom"
      >
        Explore All Photos
      </a>
    </div>
    {/* GRID */}
    <div className="gallery-grid">
      {/* LEFT BIG */}
      <div className="gallery-item big">
        <img src="assets/images/gallery1.png" alt="" />
      </div>
      {/* CENTER */}
      <div className="gallery-center">
        <div className="gallery-item wide">
          <img src="assets/images/gallery2.png" alt="" />
        </div>
        <div className="gallery-bottom">
          <div className="gallery-item">
            <img src="assets/images/gallery3.png" alt="" />
          </div>
          <div className="gallery-item">
            <img src="assets/images/gallery4.png" alt="" />
          </div>
        </div>
      </div>
      {/* RIGHT BIG */}
      <div className="gallery-item big">
        <img src="assets/images/gallery5.png" alt="" />
      </div>
    </div>
  </div>
</section>
<Trades />

<Testimonial />

<Contact />

    </>
  )
}