// ============================================================
// TERREXO — Home page
// ============================================================

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Hero() {
  const [mouse, setMouse] = useStateH({ x: 0.5, y: 0.5 });
  const heroRef = useRefH(null);
  const isMobile = useMobile(768);

  useEffectH(() => {
    if (isMobile) return;
    const onMove = (e) => {
      if (!heroRef.current) return;
      const r = heroRef.current.getBoundingClientRect();
      setMouse({
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
      });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, [isMobile]);

  const parallaxX = (mouse.x - 0.5) * 16;
  const parallaxY = (mouse.y - 0.5) * 12;

  return (
    <section ref={heroRef} style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 76,
      background: "var(--paper)",
      overflow: "hidden",
    }}>
      <div className="container-wide" style={{
        paddingTop: "clamp(40px, 8vw, 120px)",
        paddingBottom: 60,
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
        gap: isMobile ? 48 : 80,
        alignItems: "end",
      }}>
        {/* Left: headline */}
        <div>
          <div className="reveal" style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 32, flexWrap: "wrap" }}>
            <span className="tag"><span className="dot"></span>Atelier ouvert · Foetz, Luxembourg</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>Depuis 2008</span>
          </div>
          <h1 className="h-display reveal d1">
            Rénover<br/>
            <span className="serif italic" style={{ fontWeight: 400 }}>avec mesure.</span><br/>
            Bâtir<br/>
            pour durer.
          </h1>
          <p className="body-lg reveal d2" style={{
            marginTop: 40,
            maxWidth: "44ch",
            color: "var(--ink-2)",
          }}>
            Terrexo est un atelier d'artisans rénovateurs au Luxembourg. Extensions, combles,
            isolation, salles de bains, intérieurs sur mesure — un seul interlocuteur, du premier
            croquis à la dernière finition.
          </p>
          <div className="reveal d3" style={{ marginTop: 44, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="contact.html" className="btn btn-primary">
              Demander une visite gratuite <ArrowIcon />
            </a>
            <a href="realisations.html" className="btn btn-ghost">
              Voir nos réalisations <ArrowIcon />
            </a>
          </div>
        </div>

        {/* Right: image */}
        {isMobile ? (
          <div className="media reveal d2" style={{ borderRadius: "var(--r-md)", aspectRatio: "4 / 3" }}>
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1400&q=80" alt="Maison Belair" />
          </div>
        ) : (
          <div className="reveal d2" style={{ position: "relative", height: 560 }}>
            <div style={{
              position: "absolute", top: 0, right: 0,
              width: "78%", height: "70%",
              transform: `translate(${parallaxX * 0.3}px, ${parallaxY * 0.3}px)`,
              transition: "transform .6s var(--ease-out)",
              borderRadius: "var(--r-md)", overflow: "hidden",
              boxShadow: "var(--shadow-card)",
            }}>
              <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1400&q=80"
                   alt="Maison Belair"
                   style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{
              position: "absolute", bottom: 0, left: 0,
              width: "55%", height: "48%",
              transform: `translate(${parallaxX * -0.5}px, ${parallaxY * -0.5}px)`,
              transition: "transform .6s var(--ease-out)",
              borderRadius: "var(--r-md)", overflow: "hidden",
              boxShadow: "var(--shadow-card)",
            }}>
              <img src="https://images.unsplash.com/photo-1564540583246-934409427776?w=1200&q=80"
                   alt="Extension Mersch"
                   style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>

            {/* Floating spec card */}
            <div style={{
              position: "absolute", bottom: "8%", right: "-2%",
              background: "var(--paper)", border: "1px solid var(--rule)",
              padding: "18px 22px", borderRadius: "var(--r-md)",
              boxShadow: "var(--shadow-soft)",
              transform: `translate(${parallaxX * 0.6}px, ${parallaxY * 0.6}px)`,
              transition: "transform .6s var(--ease-out)",
              minWidth: 220,
            }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>En cours · Belair</div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 12 }}>
                Maison de maître · 240 m²
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
                <span>Avancement</span>
                <span>72%</span>
              </div>
              <div style={{ marginTop: 8, height: 3, background: "var(--rule)", borderRadius: 2, overflow: "hidden" }}>
                <div style={{ width: "72%", height: "100%", background: "var(--forest)" }}/>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Bottom strip */}
      <div className="container-wide" style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        flexWrap: "wrap",
        gap: 12,
        paddingTop: 24,
        paddingBottom: 24,
        borderTop: "1px solid var(--rule)",
        marginTop: 20,
        fontSize: 12,
        fontFamily: "var(--font-mono)",
        color: "var(--ink-3)",
        letterSpacing: "0.04em",
      }}>
        <span>↓ Faites défiler</span>
        {!isMobile && (
          <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
            <span>FR / LB / DE / EN</span>
            <span>BÂTIMENTS PUBLICS &amp; PRIVÉS</span>
            <span>GARANTIE DÉCENNALE</span>
            <span>KLIMABONUS PARTENAIRE</span>
          </div>
        )}
        <span>{new Date().getFullYear()} — N° 18</span>
      </div>
    </section>
  );
}

function StatsBand() {
  const T = window.TERREXO;
  const isMobile = useMobile(640);
  return (
    <section className="section-sm bg-paper-2">
      <div className="container-wide" style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
        gap: isMobile ? 32 : 40,
      }}>
        {T.stats.map(s => <Stat key={s.label} {...s} />)}
      </div>
    </section>
  );
}

function ServicesSection() {
  const T = window.TERREXO;
  const [hover, setHover] = useStateH(null);
  const isMobile = useMobile(768);

  return (
    <section className="section">
      <div className="container-wide">
        <SectionHead
          eyebrow="01 — Services"
          title={<>Six métiers,<br/>une seule équipe.</>}
          lead="On ne sous-traite rien d'essentiel. Nos chefs de chantier, nos menuisiers et nos chefs de projet sont salariés de l'atelier."
          action={<a href="services.html" className="btn btn-link">Tous les services <ArrowIcon /></a>}
        />

        <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--rule)" }}>
          {T.services.map(s => (
            <li key={s.slug}
                onMouseEnter={() => !isMobile && setHover(s.slug)}
                onMouseLeave={() => !isMobile && setHover(null)}
                className="sr"
                style={{ borderBottom: "1px solid var(--rule)", position: "relative" }}>
              <a href={`service.html?s=${s.slug}`} style={{
                display: isMobile ? "flex" : "grid",
                gridTemplateColumns: isMobile ? undefined : "100px 1fr 280px 1fr 60px",
                flexDirection: isMobile ? "row" : undefined,
                flexWrap: isMobile ? "wrap" : undefined,
                gap: isMobile ? "8px 16px" : 32,
                alignItems: isMobile ? "flex-start" : "center",
                padding: isMobile ? "24px 0" : "32px 0",
                color: hover === s.slug ? "var(--ink)" : "var(--ink-3)",
                transition: "color .35s var(--ease)",
              }}>
                <span className="mono" style={{ fontSize: 13, flexShrink: 0 }}>{s.number}</span>
                <span className="h3" style={{
                  fontWeight: 500, letterSpacing: "-0.01em",
                  color: hover === s.slug ? "var(--ink)" : "var(--ink-2)",
                  flex: isMobile ? "1" : undefined,
                  fontSize: isMobile ? "var(--t-h3)" : "var(--t-h2)",
                }}>
                  {s.title}
                </span>
                {!isMobile && <span style={{ fontSize: 14, color: "var(--ink-3)" }}>{s.kicker}</span>}
                {!isMobile && (
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em" }}>
                    {s.durations} · {s.from}
                  </span>
                )}
                {isMobile && (
                  <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", width: "100%", paddingLeft: "calc(13px + 16px)" }}>
                    {s.durations}
                  </span>
                )}
                <span style={{ display: "flex", justifyContent: "flex-end", marginLeft: "auto" }}>
                  <ArrowIcon />
                </span>
              </a>

              {/* Hover preview (desktop only) */}
              {!isMobile && (
                <div style={{
                  position: "absolute", top: "50%", right: "8%",
                  transform: `translate(0, -50%) scale(${hover === s.slug ? 1 : 0.94})`,
                  width: 280, height: 200,
                  borderRadius: "var(--r-md)", overflow: "hidden",
                  opacity: hover === s.slug ? 1 : 0,
                  transition: "opacity .35s var(--ease), transform .55s var(--ease-out)",
                  pointerEvents: "none", zIndex: 2,
                  boxShadow: "var(--shadow-card)",
                }}>
                  <img src={s.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function FeaturedProject() {
  const p = window.TERREXO.projects[0];
  const isMobile = useMobile(768);
  return (
    <section className="section bg-forest" style={{ color: "var(--paper)" }}>
      <div className="container-wide">
        <div className="sr" style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 48 : 80,
          alignItems: "center",
        }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--sand)", marginBottom: 16 }}>02 — Étude de cas</div>
            <h2 className="h1" style={{ color: "var(--paper)", maxWidth: "12ch" }}>
              Maison Belair, <span className="serif italic" style={{ fontWeight: 400 }}>1928.</span>
            </h2>
            <p className="body-lg" style={{ marginTop: 32, color: "rgba(250,250,247,.78)", maxWidth: "44ch" }}>
              Une maison de maître ramenée à sa lumière d'origine : moulures restaurées, parquets en chêne fumé,
              cuisine ouverte sur le jardin, et une isolation invisible mais radicale.
            </p>

            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: isMobile ? 20 : 32,
              marginTop: 48,
              paddingTop: 32,
              borderTop: "1px solid rgba(250,250,247,.18)",
            }}>
              {[
                ["Surface", "240 m²"],
                ["Durée", "9 mois"],
                ["Classe CPE", "F → B"],
              ].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--sand)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>{k}</div>
                  <div style={{ fontSize: isMobile ? 18 : 24, letterSpacing: "-0.01em" }}>{v}</div>
                </div>
              ))}
            </div>

            <a href={`projet.html?p=${p.slug}`} className="btn btn-on-dark" style={{ marginTop: 48 }}>
              Voir l'étude complète <ArrowIcon />
            </a>
          </div>

          <div className="media" style={{ aspectRatio: isMobile ? "4 / 3" : "4 / 5", borderRadius: "var(--r-md)", order: isMobile ? -1 : 0 }}>
            <img src={p.cover} alt={p.title} />
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectsGrid() {
  const T = window.TERREXO;
  const featured = T.projects.slice(1, 7);
  const isMobile = useMobile(640);
  const isTablet = useMobile(1024);
  return (
    <section className="section">
      <div className="container-wide">
        <SectionHead
          eyebrow="03 — Réalisations"
          title={<>Quelques chantiers<br/>récents.</>}
          lead="Du Belair à Esch-sur-Alzette, en passant par Mersch et Echternach. Chaque maison a son tempérament."
          action={<a href="realisations.html" className="btn btn-link">Toutes les réalisations <ArrowIcon /></a>}
        />

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : (isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)"),
          gap: 40,
          rowGap: isMobile ? 48 : 80,
        }}>
          {featured.map(p => <ProjectCard key={p.slug} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function ProcessTeaser() {
  const T = window.TERREXO;
  const isMobile = useMobile(640);
  const isTablet = useMobile(1024);
  return (
    <section className="section bg-paper-2">
      <div className="container-wide">
        <SectionHead
          eyebrow="04 — Notre processus"
          title={<>Six étapes,<br/>aucune surprise.</>}
          lead="On a toujours détesté les devis flous et les chantiers qui glissent. Notre méthode tient sur une page."
          action={<a href="processus.html" className="btn btn-link">Voir le détail <ArrowIcon /></a>}
        />

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : (isTablet ? "repeat(3, 1fr)" : "repeat(6, 1fr)"),
          gap: 1,
          background: "var(--rule)",
          border: "1px solid var(--rule)",
          borderRadius: "var(--r-md)",
          overflow: "hidden",
        }}>
          {T.process.map((step) => (
            <div key={step.step} className="sr" style={{
              background: "var(--paper)",
              padding: isMobile ? "24px 20px 32px" : "36px 28px 44px",
              display: "flex",
              flexDirection: "column",
              gap: 16,
              minHeight: isMobile ? 200 : 280,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--sage)", letterSpacing: "0.08em" }}>{step.step}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{step.duration}</span>
              </div>
              <div className="h4" style={{ fontWeight: 500, fontSize: isMobile ? 16 : 18, marginTop: 16, letterSpacing: "-0.01em" }}>
                {step.label}
              </div>
              {!isMobile && (
                <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-3)", margin: 0 }}>
                  {step.desc}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const T = window.TERREXO;
  const [idx, setIdx] = useStateH(0);
  const isMobile = useMobile(768);
  useEffectH(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % T.testimonials.length), 6500);
    return () => clearInterval(id);
  }, []);
  const t = T.testimonials[idx];

  return (
    <section className="section" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div className="eyebrow sr" style={{ marginBottom: 60 }}>05 — Ils nous ont confié leur maison</div>
        <div className="sr" style={{ minHeight: 280 }}>
          <blockquote className="serif" style={{
            margin: 0,
            fontSize: "clamp(22px, 3.4vw, 56px)",
            lineHeight: 1.18,
            letterSpacing: "-0.015em",
            fontWeight: 400,
            color: "var(--ink)",
            maxWidth: "22ch",
          }}>
            <span className="serif italic" style={{ color: "var(--sage)" }}>"</span>
            {t.quote}
            <span className="serif italic" style={{ color: "var(--sage)" }}>"</span>
          </blockquote>
          <div style={{
            marginTop: 48,
            display: "flex",
            flexDirection: isMobile ? "column" : "row",
            justifyContent: "space-between",
            alignItems: isMobile ? "flex-start" : "end",
            gap: isMobile ? 20 : 0,
            paddingTop: 28,
            borderTop: "1px solid var(--rule)",
          }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 500 }}>{t.name}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4, fontFamily: "var(--font-mono)" }}>
                {t.where} · {t.project}
              </div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              {T.testimonials.map((_, i) => (
                <button key={i} onClick={() => setIdx(i)}
                  style={{
                    width: 28, height: 4,
                    background: i === idx ? "var(--ink)" : "var(--rule-strong)",
                    border: 0, cursor: "pointer", padding: 0,
                    transition: "background .3s",
                  }}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function JournalTeaser() {
  const T = window.TERREXO;
  const isMobile = useMobile(640);
  const isTablet = useMobile(1024);
  return (
    <section className="section bg-paper-2">
      <div className="container-wide">
        <SectionHead
          eyebrow="06 — Journal"
          title={<>Notes d'atelier.</>}
          lead="Quelques textes longs sur l'artisanat, la rénovation au Luxembourg, et les choix qui durent."
          action={<a href="journal.html" className="btn btn-link">Tous les articles <ArrowIcon /></a>}
        />
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : (isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)"), gap: 40 }}>
          {T.journal.map(j => (
            <a key={j.slug} href="#" className="sr" style={{ display: "block" }}>
              <div className="media" style={{ aspectRatio: "4 / 3", borderRadius: "var(--r-md)", marginBottom: 20 }}>
                <img src={j.image} alt="" />
              </div>
              <div className="eyebrow" style={{ color: "var(--sage)", marginBottom: 10 }}>{j.kicker} · {j.date}</div>
              <h3 className="h3" style={{ fontWeight: 500, marginBottom: 12 }}>{j.title}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-3)", margin: 0 }}>{j.excerpt}</p>
              <div className="mono" style={{ marginTop: 18, fontSize: 12, color: "var(--ink-3)" }}>{j.readMin} min de lecture</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const isMobile = useMobile(768);
  return (
    <section className="section" style={{ background: "var(--paper)" }}>
      <div className="container-wide">
        <div className="sr" style={{
          background: "var(--ink)",
          color: "var(--paper)",
          padding: "clamp(48px, 8vw, 140px) clamp(32px, 6vw, 100px)",
          borderRadius: "var(--r-lg)",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
          gap: isMobile ? 40 : 60,
          alignItems: "end",
          position: "relative",
          overflow: "hidden",
        }}>
          {/* decorative grid */}
          <svg style={{ position: "absolute", inset: 0, opacity: 0.07, pointerEvents: "none" }} viewBox="0 0 100 100" preserveAspectRatio="none">
            {Array.from({ length: 20 }).map((_, i) => (
              <line key={`v${i}`} x1={i * 5} y1="0" x2={i * 5} y2="100" stroke="white" strokeWidth="0.1"/>
            ))}
            {Array.from({ length: 20 }).map((_, i) => (
              <line key={`h${i}`} x1="0" y1={i * 5} x2="100" y2={i * 5} stroke="white" strokeWidth="0.1"/>
            ))}
          </svg>

          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ color: "var(--sand)", marginBottom: 28 }}>07 — Démarrer</div>
            <h2 className="h-display" style={{ color: "var(--paper)" }}>
              Une visite,<br/>
              un devis,<br/>
              <span className="serif italic" style={{ fontWeight: 400 }}>une décision.</span>
            </h2>
          </div>
          <div style={{ position: "relative" }}>
            <p className="body-lg" style={{ color: "rgba(250,250,247,.78)", maxWidth: "40ch" }}>
              On vient chez vous, on regarde, on écoute. Vous recevez un devis détaillé sous 10 jours.
              Aucune pression, aucune obligation.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a href="contact.html" className="btn btn-on-dark">
                Demander une visite <ArrowIcon />
              </a>
              <a href="tel:+35227128450" className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "rgba(250,250,247,.3)" }}>
                +352 27 12 84 50
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  useScrollReveal();
  return (
    <>
      <Nav active="index.html" />
      <main>
        <Hero />
        <StatsBand />
        <ServicesSection />
        <FeaturedProject />
        <ProjectsGrid />
        <ProcessTeaser />
        <Testimonials />
        <JournalTeaser />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);