/* global React, window */
const { Ph, RevealPh, AnimCounter, SecHead, Arrow } = window;
const { motion, useInView } = window.FM || {};
const Mdiv   = motion.div   || "div";
const Mspan  = motion.span  || "span";
const Msection = motion.section || "section";

// Text-reveal: each line slides up from overflow:hidden container
const HERO_LINES = [
  { text: "L'architecture", em: false },
  { text: "que vous",       em: true  },
  { text: "imaginiez.",     em: false },
];

function HeroTitle({ startDelay = 0.2 }) {
  return (
    <h1 className="hero__title">
      {HERO_LINES.map((line, i) => (
        <span key={i} style={{ display: "block", overflow: "hidden", lineHeight: 0.98 }}>
          <Mspan
            style={{ display: "block" }}
            initial={{ y: "108%", opacity: 0 }}
            animate={{ y: "0%",   opacity: 1 }}
            transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1], delay: startDelay + i * 0.12 }}
          >
            {line.em ? <em>{line.text}</em> : line.text}
          </Mspan>
        </span>
      ))}
    </h1>
  );
}

function HomeHero({ go }) {
  const phRef = React.useRef(null);
  React.useEffect(() => {
    let rafId;
    const tick = () => {
      if (phRef.current) {
        const y = window.scrollY;
        phRef.current.style.transform = `translateY(${y * 0.22}px)`;
      }
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafId);
  }, []);
  return (
    <section className="hero">
      <div className="hero__num">
        Bureau familial <span>· Père & fils ·</span> Depuis 1991
      </div>

      <div>
        <Mdiv
          className="eyebrow"
          style={{ marginBottom: 28 }}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
        >
          AAKV — Architecture & Énergie
        </Mdiv>

        <HeroTitle startDelay={0.2} />

        <Mdiv
          className="hero__lede"
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1], delay: 0.65 }}
        >
          Bureau d'architecture en Brabant Wallon et à Bruxelles. Maisons contemporaines,
          extensions, rénovations énergétiques. Un travail patient, à deux générations,
          attentif au lieu autant qu'aux gens qui l'habiteront.
        </Mdiv>

        <Mdiv
          className="hero__cta-row"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.82 }}
        >
          <a className="btn btn--primary" data-cursor="hover" onClick={() => go("contact")}>Démarrer un projet <Arrow/></a>
          <a className="btn btn--ghost"   data-cursor="hover" onClick={() => go("realisations")}>Voir nos réalisations</a>
        </Mdiv>

        <Mdiv
          className="hero__meta"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8, delay: 1.05 }}
        >
          <div><span className="k">Projets livrés</span><span className="v">120+</span></div>
          <div><span className="k">Années d'expérience</span><span className="v">35</span></div>
          <div><span className="k">Zone</span><span className="v">BW · Bxl</span></div>
        </Mdiv>
      </div>

      <Mdiv
        className="hero__visual"
        data-cursor="hover"
        onClick={() => go("project", "villa-rixensart")}
        initial={{ opacity: 0, scale: 0.96, y: 24 }}
        animate={{ opacity: 1, scale: 1,    y: 0  }}
        transition={{ duration: 1.1, ease: [0.16, 1, 0.3, 1], delay: 0.18 }}
        style={{ overflow: "hidden" }}
      >
        <div ref={phRef} style={{ willChange: "transform", margin: "-12% 0" }}>
          <Ph project={window.PROJECTS[0]} ratio="4/5" />
        </div>
        <div className="hero__caption">Villa des Sources · Rixensart · 2024</div>
      </Mdiv>

      <div className="hero__marquee">
        <b>Sélection 2026 ↓</b>
        <div className="hero__marquee__track">
          <span><i>Maison de maître, Ixelles</i> &nbsp;·&nbsp; <i>Crèche Le Tilleul, Lasne</i> &nbsp;·&nbsp; <i>Duplex contemporain, Uccle</i> &nbsp;·&nbsp; <i>Atelier-galerie, Ohain</i> &nbsp;·&nbsp; <i>Villa des Sources, Rixensart</i> &nbsp;·&nbsp; <i>Maison Bois Sud, Lasne</i></span>
          <span><i>Maison de maître, Ixelles</i> &nbsp;·&nbsp; <i>Crèche Le Tilleul, Lasne</i> &nbsp;·&nbsp; <i>Duplex contemporain, Uccle</i> &nbsp;·&nbsp; <i>Atelier-galerie, Ohain</i> &nbsp;·&nbsp; <i>Villa des Sources, Rixensart</i> &nbsp;·&nbsp; <i>Maison Bois Sud, Lasne</i></span>
        </div>
      </div>
    </section>
  );
}

function HomePhilosophy() {
  return (
    <section className="sec sec--warm">
      <div className="split">
        <div className="split__media" data-cursor="hover">
          <RevealPh src={window.AUX.philosophy} ratio="4/5" label="Atelier · Ohain" />
        </div>
        <div className="split__copy">
          <div className="eyebrow fade-up" style={{ marginBottom: 24 }}>Notre approche</div>
          <h2 className="fade-up">
            Une architecture <em>du lieu</em>,<br/>
            faite à hauteur d'habitant.
          </h2>
          <p className="body fade-up">
            Chaque projet commence par une visite, un café, une conversation longue. Nous
            écoutons ce que les futurs habitants ne savent pas encore qu'ils savent — leur
            façon d'habiter, leur lumière préférée, le soir où la cuisine déborde sur la
            terrasse.
          </p>
          <p className="body fade-up">
            Puis nous lisons le terrain : la pente, les vents, les vues, les arbres déjà
            là. De ces deux lectures naît une architecture qui semble, plus tard, avoir
            toujours été à sa place.
          </p>
          <div className="split__sig fade-up">Thomas & Alexis — architectes associés</div>
        </div>
      </div>
    </section>
  );
}

function HomeProjects({ go }) {
  const items  = window.PROJECTS.slice(0, 6);
  const layout = ["span-7", "span-5", "span-4", "span-4", "span-4", "span-12"];
  return (
    <section className="sec">
      <SecHead
        eyebrow="Réalisations sélectionnées"
        title="<em>Neuf maisons</em>, autant de manières<br/>d'habiter le Brabant."
        body="Une sélection de projets récents — résidentiel contemporain, extensions, rénovations patrimoniales et équipements publics."
      />
      <div className="proj-grid">
        {items.map((p, i) => (
          <div key={p.id} className={`proj ${layout[i]} ${i === 2 || i === 4 ? "tall" : ""} fade-up`} data-delay={i * 60} data-cursor="hover" onClick={() => go("project", p.id)}>
            <div className="proj__index">— {String(i + 1).padStart(2, "0")}</div>
            <div className="proj__cat">{p.cat}</div>
            <div className="proj__img"><div><Ph project={p} ratio={layout[i] === "span-12" ? "16/7" : layout[i].startsWith("span-7") ? "16/10" : "4/3"} /></div></div>
            <div className="proj__meta">
              <div>
                <div className="proj__title">{p.title}</div>
                <div className="proj__loc" style={{ marginTop: 6 }}>{p.loc} · {p.year}</div>
              </div>
              <div className="proj__loc">{p.surf}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
        <a className="btn btn--ghost" onClick={() => go("realisations")} data-cursor="hover">Toutes les réalisations <Arrow/></a>
      </div>
    </section>
  );
}

function HomeStats() {
  return (
    <section className="sec" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="stats">
        <div className="stat fade-up" data-delay="0">
          <div className="stat__num"><em><AnimCounter value={35} /></em></div>
          <div className="stat__lbl">Années d'expérience cumulées</div>
        </div>
        <div className="stat fade-up" data-delay="100">
          <div className="stat__num"><AnimCounter value={120} /><em>+</em></div>
          <div className="stat__lbl">Projets livrés en BW & Bxl</div>
        </div>
        <div className="stat fade-up" data-delay="200">
          <div className="stat__num">02</div>
          <div className="stat__lbl">Architectes — un binôme père & fils</div>
        </div>
        <div className="stat fade-up" data-delay="300">
          <div className="stat__num"><em>A</em></div>
          <div className="stat__lbl">PEB visé sur les rénovations énergétiques</div>
        </div>
      </div>
    </section>
  );
}

function HomeServices({ go }) {
  return (
    <section className="sec sec--warm">
      <SecHead
        eyebrow="Services"
        title='Six manières de <em>nous engager</em><br/>à vos côtés.'
        body="De la note de faisabilité à la livraison clé en main, nous adaptons la mission à votre projet — pas l'inverse."
      />
      <div className="services">
        {window.SERVICES.map((s, i) => (
          <div key={s.n} className="svc fade-up" data-delay={i * 75} data-cursor="hover" onClick={() => go("services")}>
            <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>
  );
}

function HomeProcess() {
  return (
    <section className="sec sec--dark">
      <SecHead
        dark
        eyebrow="Processus"
        title='Cinq étapes, <em>vingt-quatre mois</em><br/>en moyenne.'
        body="Une mission complète d'architecte, du premier croquis à la garantie décennale. Vous êtes informés, à chaque jalon, de ce qui se passe et de ce qui suit."
      />
      <div className="process">
        {window.PROCESS.map((s, i) => (
          <div key={s.n} className="step fade-up" data-delay={i * 100}>
            <div className="step__dot">{s.n}</div>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
            <span className="step__when">{s.w}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function HomeContact({ go }) {
  return (
    <section className="sec">
      <div className="contact-block">
        <div>
          <div className="eyebrow fade-up" style={{ marginBottom: 22 }}>Premier échange</div>
          <h2 className="fade-up" style={{ fontFamily: "var(--serif)", fontSize: 56, fontWeight: 300, lineHeight: 1.05, letterSpacing: "-0.01em" }}>
            Parlons de votre <em style={{ color: "var(--sage)", fontStyle: "italic" }}>projet</em>.
          </h2>
          <p className="body fade-up" style={{ marginTop: 24, maxWidth: 420 }}>
            Un terrain, un bien à rénover, une idée encore floue. Une visite, un café à l'agence
            d'Ohain — la première rencontre est offerte et sans engagement.
          </p>
          <div className="fade-up" style={{ marginTop: 36 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Bureau</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 20 }}>32 Route de Genval<br/>1380 Ohain-Lasne</div>
            <div style={{ marginTop: 22 }}>
              <a style={{ borderBottom: "1px solid var(--dark)", paddingBottom: 2 }}>info@aakv.be</a>
            </div>
          </div>
        </div>
        <div className="fade-up"><ContactForm/></div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [proj, setProj] = React.useState("Construction neuve");
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <div style={{ padding: 48, border: "1px solid var(--line)", textAlign: "center" }}>
        <div className="eyebrow" style={{ color: "var(--sage)" }}>Message envoyé</div>
        <h3 style={{ fontFamily: "var(--serif)", fontSize: 32, fontWeight: 300, marginTop: 18 }}>Merci.</h3>
        <p className="body" style={{ marginTop: 18 }}>Thomas vous recontacte dans les 48h ouvrables.</p>
      </div>
    );
  }
  return (
    <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
      <div className="field--row">
        <div className="field"><label>Prénom</label><input placeholder="Alexis" required /></div>
        <div className="field"><label>Nom</label><input placeholder="Dupont" required /></div>
      </div>
      <div className="field--row">
        <div className="field"><label>Email</label><input type="email" placeholder="vous@domaine.be" required /></div>
        <div className="field"><label>Téléphone</label><input placeholder="+32 …" /></div>
      </div>
      <div className="field"><label>Type de projet</label>
        <div className="field-chips">
          {["Construction neuve", "Extension", "Rénovation", "Énergie", "Conseil"].map((c) => (
            <button type="button" key={c} className={`chip ${proj === c ? "is-on" : ""}`} onClick={() => setProj(c)}>{c}</button>
          ))}
        </div>
      </div>
      <div className="field"><label>Votre projet en quelques mots</label><textarea placeholder="Surface, terrain, calendrier, budget envisagé…" /></div>
      <button className="btn btn--primary" type="submit" style={{ justifySelf: "start", marginTop: 8 }}>Envoyer le message <Arrow/></button>
      <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>Vos données restent dans nos murs — RGPD, hébergement européen.</div>
    </form>
  );
}

Object.assign(window, { HomeHero, HomePhilosophy, HomeProjects, HomeStats, HomeServices, HomeProcess, HomeContact });