/* global React, window */
const { Ph, SecHead, Arrow } = window;

function PageServices({ go }) {
  return (
    <div>
      <section className="sec" style={{ paddingTop: 88 }}>
        <div className="sec__head">
          <div><div className="eyebrow">Nos missions</div></div>
          <div>
            <h2 style={{ fontSize: 84, lineHeight: 1, fontWeight: 300, letterSpacing: "-0.02em" }}>
              Services
            </h2>
            <p className="body" style={{ marginTop: 28, maxWidth: 520 }}>
              De la note d'opportunité à la réception définitive, nous adaptons l'engagement
              à la nature de votre projet. Toutes nos missions incluent le respect strict
              du cadre déontologique de l'Ordre des Architectes.
            </p>
          </div>
        </div>
        <div className="services">
          {window.SERVICES.map((s) => (
            <div key={s.n} className="svc" data-cursor="hover" onClick={() => go("contact")}>
              <div className="svc__num">{s.n}</div>
              <div className="svc__body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <div className="svc__tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
              </div>
              <div className="svc__plus">+</div>
            </div>
          ))}
        </div>
      </section>

      <section className="sec sec--dark">
        <SecHead dark eyebrow="Honoraires" title='Une <em>tarification</em> claire,<br/>discutée avant de commencer.' body="Nous proposons trois formes d'engagement, choisies ensemble selon la complexité et le budget de votre projet." />
        <div className="pricing-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {[
            { t: "Mission complète", d: "Pourcentage du montant des travaux. De l'esquisse à la réception définitive.", n: "8 — 12%" },
            { t: "Mission partielle", d: "Permis seul, ou suivi de chantier seul. Forfait défini après l'étude préalable.", n: "Forfait" },
            { t: "Conseil & faisabilité", d: "Étude courte avant achat de terrain ou décision de rénover.", n: "€ 800 — 2 400" },
          ].map((c) => (
            <div key={c.t} style={{ padding: 32, border: "1px solid rgba(245,244,240,0.12)" }}>
              <div className="step__dot" style={{ marginBottom: 24 }}>·</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 400, color: "var(--bg)" }}>{c.t}</h3>
              <p style={{ color: "rgba(245,244,240,0.7)", marginTop: 14, fontSize: 14, lineHeight: 1.65 }}>{c.d}</p>
              <div style={{ marginTop: 28, fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--sage)", fontSize: 22 }}>{c.n}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function PageBlog({ go }) {
  const [feat, ...rest] = window.POSTS;
  return (
    <div>
      <section className="blog-hero">
        <div><div className="eyebrow">Journal · Actualités & analyses</div></div>
        <h1>Le <em>Journal</em> AAKV.</h1>
      </section>
      <section className="blog-feat">
        <div className="blog-feat__card" data-cursor="hover" onClick={() => go("blog")}>
          <Ph src={window.AUX.blogFeat} ratio="4/3" label="À la une" />
          <div>
            <div className="meta"><span className="tag">{feat.tag}</span><span>{feat.date}</span><span>{feat.read} de lecture</span></div>
            <h2>{feat.t}</h2>
            <p className="body">{feat.x}</p>
            <a className="btn btn--ghost" style={{ marginTop: 24, display: "inline-flex" }}>Lire l'article <Arrow/></a>
          </div>
        </div>
      </section>
      <section className="blog-list">
        {rest.map((p, i) => (
          <div key={p.id} className="bl-card" data-cursor="hover">
            <Ph src={[window.AUX.blog1, window.AUX.blog2, window.AUX.blog3, window.AUX.blog4, window.AUX.blog5][i % 5]} ratio="4/3" />
            <div className="meta"><span className="tag">{p.tag}</span><span>{p.date}</span></div>
            <h3>{p.t}</h3>
            <p>{p.x}</p>
          </div>
        ))}
      </section>
    </div>
  );
}

function PageAbout({ go }) {
  return (
    <div>
      <section className="about-hero">
        <div><div className="eyebrow">À propos · Bureau familial</div></div>
        <div>
          <h1>Trente-cinq ans à <em>écouter</em> des terrains et des familles.</h1>
          <p className="body" style={{ marginTop: 28 }}>
            AAKV est un bureau d'architecture binôme père-fils, installé à Ohain depuis
            1991. Nous travaillons exclusivement en Brabant Wallon et à Bruxelles, à
            taille humaine, avec une dizaine de projets actifs à la fois — pour rester
            disponibles et présents sur chaque chantier.
          </p>
        </div>
      </section>

      <section className="duo">
        <div className="duo__card">
          <Ph src={window.AUX.thomas} ratio="4/5" label="Thomas — fondateur" />
          <h3>Thomas <em style={{ color: "var(--sage)", fontStyle: "italic" }}>Aakv</em></h3>
          <div className="role">Architecte fondateur · 1991</div>
          <p>
            Diplômé de Saint-Luc Bruxelles, Thomas a fondé le bureau à 28 ans après cinq
            années en agence. Trente-cinq ans plus tard, il dirige les missions
            patrimoine et énergie. Il habite et chantier en bottes, presque autant qu'à
            la planche.
          </p>
        </div>
        <div className="duo__card">
          <Ph src={window.AUX.alexis} ratio="4/5" label="Alexis — associé" />
          <h3>Alexis <em style={{ color: "var(--sage)", fontStyle: "italic" }}>Aakv</em></h3>
          <div className="role">Architecte associé · 2017</div>
          <p>
            Formé à La Cambre puis à l'ETSAB de Barcelone, Alexis a rejoint le bureau en
            2017. Il pilote les projets contemporains et la dimension numérique : BIM,
            simulations énergétiques, dialogue avec les bureaux d'études techniques.
          </p>
        </div>
      </section>

      <section className="sec" style={{ paddingTop: 0 }}>
        <SecHead eyebrow="Repères" title='Quelques <em>jalons</em>.' />
        <div className="timeline">
          {[
            { y: "1991", t: "Fondation", d: "Thomas ouvre le bureau dans une dépendance de la maison familiale, à Ohain. Premier permis : une extension à Genval." },
            { y: "2003", t: "Installation Route de Genval", d: "Le bureau s'installe au 32 Route de Genval, dans une maison de maître restaurée par nos soins." },
            { y: "2014", t: "Premier projet public", d: "Crèche communale à Lasne, 280 m². Marque le début des missions tertiaires." },
            { y: "2017", t: "Arrivée d'Alexis", d: "Le bureau devient un binôme. Mise en place du BIM, première certification PEB A sur une rénovation." },
            { y: "2024", t: "120ᵉ projet livré", d: "Villa des Sources à Rixensart. Sélectionnée pour le prix de l'architecture du Brabant Wallon." },
          ].map((r) => (
            <div key={r.y} className="timeline__row">
              <div className="timeline__year">{r.y}</div>
              <div className="timeline__title">{r.t}</div>
              <div className="timeline__body">{r.d}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function PageContact({ go }) {
  return (
    <div>
      <section className="sec" style={{ paddingTop: 88 }}>
        <div className="sec__head">
          <div><div className="eyebrow">Premier échange · sans engagement</div></div>
          <div>
            <h2 style={{ fontSize: 84, lineHeight: 1, fontWeight: 300, letterSpacing: "-0.02em" }}>
              Parlons de votre <em style={{ color: "var(--sage)", fontStyle: "italic" }}>projet</em>.
            </h2>
            <p className="body" style={{ marginTop: 28, maxWidth: 520 }}>
              La première rencontre dure une heure, à l'agence d'Ohain ou directement sur
              votre terrain. Elle est gratuite, sans engagement, et donne lieu à une note
              d'orientation écrite sous 48 h.
            </p>
          </div>
        </div>

        <div className="contact-block">
          <div className="contact-info">
            <dl>
              <div><dt>Bureau</dt><dd>32 Route de Genval<br/>1380 Ohain-Lasne</dd></div>
              <div><dt>Email</dt><dd><a>info@aakv.be</a></dd></div>
              <div><dt>Téléphone</dt><dd><a>+32 (0)2 633 …</a></dd></div>
              <div><dt>Horaires</dt><dd style={{ fontFamily: "var(--sans)", fontSize: 14 }}>Lundi — Vendredi · 9h — 18h<br/>Samedi sur rendez-vous</dd></div>
              <div><dt>Zone d'intervention</dt><dd style={{ fontFamily: "var(--sans)", fontSize: 14 }}>Brabant Wallon · Bruxelles<br/>Déplacement nominal au-delà.</dd></div>
            </dl>
            <div className="map" style={{ marginTop: 36 }}>
              <div className="map__pin map__pin--main" data-label="AAKV · Ohain" style={{ top: "48%", left: "44%" }}/>
              <div className="map__pin" data-label="Bruxelles" style={{ top: "30%", left: "28%" }}/>
              <div className="map__pin" data-label="Wavre" style={{ top: "38%", left: "62%" }}/>
              <div className="map__pin" data-label="Waterloo" style={{ top: "58%", left: "30%" }}/>
            </div>
          </div>
          <div>
            <window.ContactForm/>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageServices, PageBlog, PageAbout, PageContact });