---
import { websiteStructuredDescription } from "../data_files/constants";
import MainLayout from "@/layouts/MainLayout.astro";
import type { WebPage, WithContext } from "schema-dts";
import MainSection from "../components/ui/blocks/MainSection.astro";
import GrandePhotoCentrale from "../components/GrandePhotoCentrale.astro";
import photo1 from "@images/grand-bureau-tout-equipe-1.jpg"
import photo2 from "@images/grand-bureau-tout-equipe-2.jpg"
import detail1 from "@images/bureau-detail-1.jpg";
import detail2 from "@images/bureau-detail-2.jpg";
import detail3 from "@images/bureau-detail-3.jpg";
import detail4 from "@images/bureau-detail-4.jpg";
import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";


const structuredDescription = {
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://achat-maison-albi.fr/avec-piscine",
  "url": "https://achat-maison-albi.fr/avec-piscine",
  "name": "Maison individuelle avec un grand bureau à Albi",
  "description":
    "Idéal pour les télétravailleurs et indépendants ! Grand bureau connecté et sécurisé dans cette belle maison individuelle de 177 m2.",
  "isPartOf": websiteStructuredDescription,
  "inLanguage": "fr-FR"
} satisfies WithContext<WebPage>

---

<MainLayout
  title="Maison individuelle avec un grand bureau à Albi"
  structuredData={structuredDescription}
>
  <MainSection
    title="Un espace calme et confortable pour garder sérieux et concentration"
    subTitle="Idéal pour les télétravailleurs et indépendants ! Grand bureau connecté et sécurisé dans cette belle maison individuelle de 177 m2."
  >
    <p class="text-neutral-800 dark:text-neutral-100">
      Bureau en chêne-liège massif, réglage en hauteur et motorisé, 16 prises de courant, 6 prises RJ-45, radiateur
      indépendant, sol en revêtement Bolon…
    </p>
  </MainSection>

  <div class="flex gap-4">
    <div class="flex-1">
      <GrandePhotoCentrale src={photo1} alt="Bureau côté fenêtre" className="w-auto h-full max-h-[500px] object-contain mx-auto"/>
    </div>
    <div class="flex-1">
      <GrandePhotoCentrale src={photo2} alt="Bureau côté porte" className="w-auto h-full max-h-[500px] object-contain mx-auto" />
    </div>
  </div>

  <MainSection
    title="Chacun son métier"
    subTitle="Nous avons équipé ce bureau avec soin pour nos 2 activités ! Nous avons fait intervenir des professionnels renommés."
  >
    <p class="text-neutral-800 dark:text-neutral-100">
      La transformation de l’ancien garage en bureau a été confiée à l’architecte <a class="text-orange-500" target="_blank" href="https://www.delphine-eche.fr/">Delphine Eche</a><br/>

      Nous avons toutes les factures de tous les artisans et la garantie décennale bien entendu.
    </p>
  </MainSection>

  <p class="text-neutral-800 dark:text-neutral-100">

  </p>

  <div class="flex gap-4">
    <div class="flex-1">
      <GrandePhotoCentrale src={detail1} alt="Bureau côté fenêtre" className="w-auto h-full max-h-[500px] object-contain mx-auto"/>
    </div>
    <div class="flex-1">
      <GrandePhotoCentrale src={detail2} alt="Bureau côté porte" className="w-auto h-full max-h-[500px] object-contain mx-auto" />
    </div>
    <div class="flex-1">
      <GrandePhotoCentrale src={detail3} alt="Bureau côté fenêtre" className="w-auto h-full max-h-[500px] object-contain mx-auto"/>
    </div>
    <div class="flex-1">
      <GrandePhotoCentrale src={detail4} alt="Bureau côté porte" className="w-auto h-full max-h-[500px] object-contain mx-auto" />
    </div>
  </div>


  <div class="mb-8">
    Vous voulez en savoir plus ?
    <PrimaryCTA title="Faire le tour des pièces" url="/pieces" />
  </div>
</MainLayout>