---
// Import necessary components
import MainLayout from "@/layouts/MainLayout.astro";
import MainSection from "@components/ui/blocks/MainSection.astro";
import LeftSection from "@components/ui/blocks/LeftSection.astro";
import RightSection from "@components/ui/blocks/RightSection.astro";
import FeaturesStats from "@components/sections/features/FeaturesStats.astro";

// Import necessary images
import photoSalonCheminee from "@images/salon-cheminee.jpg";
import photoSalonCuisine from "@images/salon.jpg";
import photoChambreEnfantEst from "@images/chambre-enfant-est.jpg";
import photoChambreEnfantOuest from "@images/chambre-enfant-ouest.jpg";
import photoParentale from "@images/chambre-parentale.jpg";
import photoChambre2 from "@images/chambre-2.jpg";
import usingTools from "@images/using-tools.avif";
import progressBuilding from "@images/progress-building.avif";
import underConstruction from "@images/under-construction.avif";
import { SITE } from "@data/constants";

interface Article {
  isRightSection: boolean;
  title: string;
  subTitle: string;
  btnExists?: boolean;
  btnTitle?: string;
  btnURL?: string;
  single?: boolean;
  img?: any;
  imgAlt?: string;
  imgOne?: any;
  imgOneAlt?: string;
  imgTwo?: any;
  imgTwoAlt?: string;
}

const articles: Article[] = [
  {
    isRightSection: true,
    title: "Grande pièce de vie lumineuse",
    subTitle:
      "Embarking on a construction project can be overwhelming. With our professional consultation services, we guide you through every stage, ensuring you make informed decisions. Whether you are a DIY enthusiast or a skilled contractor, our experts are on hand to offer tailored advice on product selection, project scope, and compliance with local regulations.",
    single: false,
    imgOne: photoSalonCheminee,
    imgOneAlt: "Blueprints and digital tablet with construction plans.",
    imgTwo: photoSalonCuisine,
    imgTwoAlt: "Person working in the office",
  },
  {
    isRightSection: false,
    title: "Cuisine ouverte, toute équipée",
    subTitle:
      "Refaite en 2017, la cuisine allie plan de travail en bois et nombreux rangements. Elle est équipée de plaques à induction, d’une hotte et d’un four Bosch.",
    img: photoSalonCheminee,
    imgAlt: "Blueprints and digital tablet with construction plans.",
  },
  {
    isRightSection: true,
    title: "Chambre principale",
    subTitle:
      "Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory.",
    imgOne: photoParentale,
    imgOneAlt: "Construction site before and after",
    single: true,
    btnExists: false,
    btnTitle: "Learn More",
    btnURL: "#",
  },
  {
    isRightSection: false,
    title: "Seconde chambre",
    subTitle:
      "… ou chambre d’amis … ou salle de jeux … ou bureau … ou atelier … petit salon … qu’en ferez-vous ?",
    img: photoChambre2,
    imgAlt: "Second chambre, aménagée en petit salon de jeu",
    btnExists: false,
    btnTitle: "Learn More",
    btnURL: "#",
  },
  {
    isRightSection: true,
    title: "Chambres enfants",
    subTitle:
      "Effective project management is at the heart of any successful build. ScrewFast provides thorough planning and robust management services that keep your project on time and within budget. Let us handle the complexities of workflow coordination, resource allocation, and stakeholder communication while you focus on your vision.",
    single: false,
    imgOne: photoChambreEnfantOuest,
    imgOneAlt: "Construction workers orchestrating a project",
    imgTwo: photoChambreEnfantEst,
    imgTwoAlt: "Aerial view of managed construction",
  }
];

const pageTitle: string = `Pièces | ${SITE.title}`;
---

<MainLayout
  title={pageTitle}
  structuredData={{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "@id": "https://screwfast.uk/services",
    "url": "https://screwfast.uk/services",
    "name": "Expert Consultation Services | ScrewFast",
    "description": "Uniting expertise with your vision, ScrewFast provides exceptional service and comprehensive solutions in the hardware and construction industry, from consultation to project completion.",
    "isPartOf": {
        "@type": "WebSite",
        "url": "https://screwfast.uk",
        "name": "ScrewFast",
        "description": "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs."
    },
    "inLanguage": "fr-FR"
  }}
>
  <!--MainSection is the introductory section of the page, it also contains a CTA button-->
  <MainSection
    title="Des espaces pour chacun et chacune"
    subTitle="Avec 5 chambres, 3 salles d’eau, un bureau et des beaux espaces de vie intérieurs comme extérieurs, notre maison est accueillante et conviviale."
    btnTitle="Nous contacter"
    btnURL="/contact"
  />
  <!-- RightSection and LeftSection contain details about various services along with pertinent imagery.
  They alternate for variety in design.
  The 'btnExists' property is used to toggle the display of a button in these sections.
  When btnExists={true}, a button is displayed.
  This can be used to link to more detailed information or related resources.
  RightSection can also conditionally render one or two images based on the 'single' property.
  If 'single' is true, it displays one image, otherwise it displays two.
  -->
  {
    articles.map(article => {
      return article.isRightSection ? (
        <RightSection
          title={article.title}
          subTitle={article.subTitle}
          single={article.single}
          imgOne={article.imgOne}
          imgOneAlt={article.imgOneAlt}
          imgTwo={article.imgTwo}
          imgTwoAlt={article.imgTwoAlt}
          btnExists={article.btnExists}
          btnTitle={article.btnTitle}
          btnURL={article.btnURL}
        />
      ) : (
        <LeftSection
          title={article.title}
          subTitle={article.subTitle}
          img={article.img}
          imgAlt={article.imgAlt}
          btnExists={article.btnExists}
          btnTitle={article.btnTitle}
          btnURL={article.btnURL}
        />
      );
    })
  }
  <!--FeaturesStats section showcases essential stats valuable to users-->
  <FeaturesStats
    title="By the Numbers"
    subTitle="Our commitment to quality and reliability is evident in every project we undertake. At ScrewFast, we are dedicated to delivering industry-leading services that ensure your construction projects are built to last."
    mainStatTitle="96%"
    mainStatSubTitle="of our clients rate their experience with ScrewFast as exceptional"
    stats={[
      {
        stat: "99.8%",
        description: "project completion rate",
      },
      {
        stat: "5,000+",
        description: "successful installations",
      },
      {
        stat: "85%",
        description: "client growth year-over-year",
      },
    ]}
  />
</MainLayout>