/* global React, ReactDOM */
const { useState, useEffect, useRef, useLayoutEffect } = React;

/* ============================================================
   HOOKS — restrained motion utilities
   ============================================================ */

// rAF-throttled scroll position
const useScrollY = () => {
  const [y, setY] = useState(0);
  useEffect(() => {
    let raf = 0,ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY);
        ticking = false;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {window.removeEventListener("scroll", onScroll);cancelAnimationFrame(raf);};
  }, []);
  return y;
};

// Smoothed cursor position, normalised to -0.5..0.5 around viewport centre
const useCursor = () => {
  const targetRef = useRef({ x: 0, y: 0 });
  const valueRef = useRef({ x: 0, y: 0 });
  const [, force] = useState(0);
  useEffect(() => {
    const onMove = (e) => {
      targetRef.current.x = e.clientX / window.innerWidth - 0.5;
      targetRef.current.y = e.clientY / window.innerHeight - 0.5;
    };
    window.addEventListener("pointermove", onMove);
    let raf = 0;
    const tick = () => {
      valueRef.current.x += (targetRef.current.x - valueRef.current.x) * 0.08;
      valueRef.current.y += (targetRef.current.y - valueRef.current.y) * 0.08;
      force((n) => (n + 1) % 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("pointermove", onMove);
      cancelAnimationFrame(raf);
    };
  }, []);
  return valueRef.current;
};

// IntersectionObserver — fires "shown" once when element enters viewport
const useReveal = (threshold = 0.15) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setShown(true);obs.disconnect();}});
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, shown];
};

// Element-local scroll progress (0..1 over the element's traverse of the viewport)
const useElementScroll = () => {
  const ref = useRef(null);
  const [p, setP] = useState(0);
  useEffect(() => {
    if (!ref.current) return;
    let raf = 0,ticking = false;
    const measure = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh;
      const passed = vh - r.top;
      setP(Math.max(0, Math.min(1, passed / total)));
      ticking = false;
    };
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      raf = requestAnimationFrame(measure);
    };
    measure();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);
  return [ref, p];
};

/* ============================================================
   LOGO — inlined for color control
   ============================================================ */
const Logo = ({ className = "" }) =>
<svg className={className} viewBox="55 60 555 50" xmlns="http://www.w3.org/2000/svg">
    <g fill="currentColor">
      <path d="M62.8,68.1h10.3v5.1c2.4-3,5.4-5.8,10.6-5.8c7.8,0,12.3,5.1,12.3,13.4v23.4H85.7V84.2c0-4.9-2.3-7.4-6.2-7.4 s-6.4,2.5-6.4,7.4v20.2H62.8V68.1z" />
      <path d="M103.2,86.4v-0.1c0-10.3,7.9-18.9,19-18.9c6.8,0,11.1,2.3,14.5,6.1l-6.3,6.8c-2.3-2.4-4.6-4-8.2-4c-5.1,0-8.8,4.5-8.8,9.9 v0.1c0,5.5,3.6,10,9.2,10c3.4,0,5.8-1.5,8.3-3.9l6,6.1c-3.5,3.9-7.6,6.6-14.8,6.6C111.1,105.2,103.2,96.8,103.2,86.4z" />
      <path d="M143.5,68.1h10.3v5.1c2.4-3,5.5-5.8,10.7-5.8c4.7,0,8.3,2.1,10.2,5.7c3.2-3.7,7-5.7,11.9-5.7c7.6,0,12.2,4.6,12.2,13.3v23.6 h-10.3V84.2c0-4.9-2.2-7.4-6-7.4s-6.2,2.5-6.2,7.4v20.2H166V84.2c0-4.9-2.2-7.4-6-7.4s-6.2,2.5-6.2,7.4v20.2h-10.3V68.1z" />
      <path d="M207.7,68.1H218v5.2c2.5-3.4,5.9-5.9,11.3-5.9c8.4,0,16.5,6.6,16.5,18.7v0.1c0,12.1-7.9,18.7-16.5,18.7 c-5.5,0-8.9-2.5-11.3-5.4v15.5h-10.3V68.1z M235.5,86.3v-0.1c0-6-4.1-10-8.9-10s-8.8,4-8.8,10v0.1c0,6,4,10,8.8,10 S235.5,92.4,235.5,86.3z" />
      <path d="M289.8,68.2h3.8l16.2,35.9h-4.3l-4.2-9.4h-19.4l-4.2,9.4h-4.1L289.8,68.2z M299.7,91l-8.1-18.2L283.5,91H299.7z" />
      <path d="M316.8,68.4h15.3c4.4,0,7.9,1.3,10.1,3.6c1.8,1.8,2.7,4.2,2.7,7v0.1c0,5.9-4.1,9.3-9.7,10.4l10.9,14.6h-4.9L331,90.2h-0.1 h-10.1v13.8h-4V68.4z M331.8,86.6c5.3,0,9.2-2.7,9.2-7.3v-0.1c0-4.4-3.4-7-9.1-7h-11v14.5H331.8z" />
      <path d="M351.7,86.3v-0.1c0-10.1,7.6-18.4,18-18.4c6.5,0,10.4,2.2,13.9,5.6l-2.7,3c-3.1-2.8-6.3-4.9-11.2-4.9 c-7.9,0-13.8,6.4-13.8,14.6v0.1c0,8.2,5.9,14.7,13.8,14.7c4.9,0,8.1-1.9,11.5-5.1l2.6,2.6c-3.7,3.8-7.8,6.3-14.3,6.3 C359.3,104.7,351.7,96.6,351.7,86.3z" />
      <path d="M390.8,68.4h4v15.8h20.6V68.4h4v35.6h-4V88h-20.6v16h-4V68.4z" />
      <path d="M429.9,68.4h4v35.6h-4V68.4z" />
      <path d="M453.8,72.1h-12v-3.7h28v3.7h-12v31.9h-4.1V72.1z" />
      <path d="M477.3,68.4h25.8v3.7h-21.7v12.2h19.4v3.7h-19.4v12.5h22v3.7h-26V68.4z" />
      <path d="M509.3,86.3v-0.1c0-10.1,7.6-18.4,18-18.4c6.5,0,10.4,2.2,13.9,5.6l-2.7,3c-3.1-2.8-6.3-4.9-11.2-4.9 c-7.9,0-13.8,6.4-13.8,14.6v0.1c0,8.2,5.9,14.7,13.8,14.7c4.9,0,8.1-1.9,11.5-5.1l2.6,2.6c-3.7,3.8-7.8,6.3-14.3,6.3 C516.9,104.7,509.3,96.6,509.3,86.3z" />
      <path d="M557.9,72.1h-12v-3.7h28v3.7h-12v31.9h-4.1V72.1z" />
      <path d="M578.3,98.9l2.5-3c3.7,3.4,7.3,5,12.2,5c4.8,0,7.9-2.5,7.9-6.1v-0.1c0-3.3-1.8-5.1-9.3-6.8c-8.2-1.8-12-4.4-12-10.3v-0.1 c0-5.5,4.9-9.7,11.7-9.7c5.2,0,8.9,1.5,12.5,4.4l-2.3,3.1c-3.3-2.7-6.6-3.9-10.3-3.9c-4.7,0-7.6,2.5-7.6,5.8v0.1 c0,3.4,1.8,5.3,9.7,6.9c7.9,1.7,11.6,4.6,11.6,10.1v0.1c0,6.1-5.1,10.1-12.2,10.1C587.2,104.6,582.6,102.7,578.3,98.9z" />
    </g>
  </svg>;


/* ============================================================
   DATA
   ============================================================ */
const PROJECTS = [
{
  id: "eurocar",
  num: "01",
  title: "Saracakis",
  titleItal: "Group of Companies",
  location: "Maroussi, Athens",
  year: 2023,
  type: "Commercial Interior",
  area: "1 250 m²",
  status: "Completed",
  cover: "assets/img/eurocar-01-entry.jpg",
  accent: "Walnut, smoked oak, soapstone",
  body: [
  "A working interior arranged like a small civic plaza — the reception desk reads as a single block of warmth set against deep, almost archaeological darkness.",
  "Above it, a constellation of suspended luminaires draws an unruly geometry across the ceiling, deliberately resisting the orthogonal logic of the plan below.",
  "Light is treated as a structural element. Every other gesture defers to it."],

  coords: "38.0567° N · 23.8059° E",
  gallery: [
  { src: "assets/img/eurocar-02-lounge.jpg", cap: "Lounge", num: "02" },
  { src: "assets/img/eurocar-03-stair.jpg", cap: "Stair, entrance", num: "03" },
  { src: "assets/img/eurocar-05-light-detail.jpg", cap: "Suspended light array, detail", num: "04" },
  { src: "assets/img/eurocar-04-stair-detail.jpg", cap: "Stair, under", num: "05" },
  { src: "assets/img/eurocar-06-corridor.jpg", cap: "South corridor", num: "06" }],

  credits: {
    "Architecture": "NMCP Architects",
    "Project team": "M. Pergamian, S. Papanagiotou, A. Stathopoulou",
    "Lighting design": "Halo Athens",
    "Structural engineer": "Karras Engineering",
    "Contractor": "Aktor Interiors",
    "Photography": "Yiorgis Yerolymbos",
    "Client": "Saracakis Group of Companies",
    "Completed": "2023"
  }
},
{
  id: "residence-glyfada",
  num: "02",
  title: "Apartment",
  titleItal: "in Pangrati",
  location: "Pangrati, Athens",
  year: 2022,
  type: "Residential",
  area: "50 m²",
  status: "Completed",
  cover: "assets/img/residence-02-living.jpg",
  accent: "Vertical oak, neutral floor, lacquered red",
  body: [
  "A typical fifty-square-metre apartment in central Athens, reorganised so the plan finally works according to light. A single linear axis begins at the entrance and traces a counter-clockwise Γ toward the day spaces — living room, dining, balcony.",
  "A fixed bookcase lines the right of the route, measuring it step by step. The wet rooms gather around one of the two existing light wells; the bedroom settles into a niche beside the second — a quiet retreat for sleep — while the wardrobe and storage core hold the centre of the plan.",
  "A neutral floor grounds everything. Vertical timber cladding follows the linear path, the bedroom wing, and the kitchen, lending intimacy and small scale. At the heart, the wardrobe is marked in a reflective red — significance given to the archetypal centre, carried outward as continuation."],

  coords: "37.9686° N · 23.7561° E",
  gallery: [
  { src: "assets/img/residence-01-entry.jpg", cap: "Entry vestibule", num: "02" },
  { src: "assets/img/residence-04-hallway.jpg", cap: "Living, toward the entrance", num: "03" },
  { src: "assets/img/residence-07.jpg", cap: "Living, evening", num: "04" },
  { src: "assets/img/residence-06-kitchen.jpg", cap: "Living, from the dining table", num: "05" },
  { src: "assets/img/residence-05-bedroom.jpg", cap: "Main bedroom", num: "06" }],

  credits: {
    "Project": "Apartment renovation",
    "Category": "Residence",
    "Location": "Pangrati, Athens",
    "Area": "50 m²",
    "Design team": "Manthos Pergamian, Stathis Papanagiotou",
    "Year": "2022"
  }
},
{
  id: "paros",
  num: "03",
  title: "Cycladic House",
  titleItal: "above the bay",
  location: "Paros",
  year: 2022,
  type: "Residential",
  area: "320 m²",
  status: "Completed",
  cover: "assets/img/residence-02-living.jpg"
},
{
  id: "kifissia",
  num: "04",
  title: "Workplace",
  titleItal: "renovation",
  location: "Kifissia, Athens",
  year: 2021,
  type: "Workplace",
  area: "800 m²",
  status: "Completed",
  cover: "assets/img/eurocar-06-corridor.jpg"
},
{
  id: "mykonos",
  num: "05",
  title: "Coastal Villa",
  titleItal: "with three courts",
  location: "Mykonos",
  year: 2020,
  type: "Residential",
  area: "540 m²",
  status: "Completed",
  cover: "assets/img/residence-07.jpg"
},
{
  id: "patras",
  num: "06",
  title: "Library",
  titleItal: "extension",
  location: "Patras",
  year: 2019,
  type: "Cultural",
  area: "2 400 m²",
  status: "Completed",
  cover: "assets/img/eurocar-02-lounge.jpg"
},
{
  id: "suite",
  num: "07",
  title: "Hospitality",
  titleItal: "suite",
  location: "Athens",
  year: 2018,
  type: "Hospitality",
  area: "450 m²",
  status: "Completed",
  cover: "assets/img/eurocar-04-stair-detail.jpg"
}];


/* ============================================================
   CHROME — fixed corner annotations + menu trigger
   ============================================================ */
const Chrome = ({ route, onNav, onOpenMenu, lang, setLang }) => {
  const [nearBottom, setNearBottom] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const left = document.documentElement.scrollHeight - (window.scrollY + window.innerHeight);
      setNearBottom(left < 220);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [route]);

  return (
    <div className={"chrome" + (nearBottom ? " near-bottom" : "")}>
      <button
        className="mark"
        onClick={() => onNav("home")}
        aria-label="Home"
        style={{ background: "transparent", display: "flex", alignItems: "baseline", gap: 12 }}>
        
        <Logo />
      </button>

      <div className="right">
        <div className="lang t-tiny">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <span>/</span>
          <button className={lang === "el" ? "on" : ""} onClick={() => setLang("el")}>EL</button>
        </div>
        <button className="menu-btn t-tiny" onClick={onOpenMenu} aria-label="Open menu">
          <span className="dot"></span>
          <span>Index</span>
        </button>
      </div>

      <div className="left-foot t-tiny">
        <span>Athens · 37.9474° N</span>
      </div>
      <div className="right-foot t-tiny">
      </div>
    </div>);

};

/* ============================================================
   MENU OVERLAY
   ============================================================ */
const NAV_ITEMS = [
{ id: "home", label: "Index", ital: "—" },
{ id: "projects", label: "Works", ital: "" },
{ id: "studio", label: "Studio", ital: "" },
{ id: "contact", label: "Contact", ital: "" }];


const Menu = ({ route, onNav, onClose }) => {
  useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  return (
    <div className="menu-overlay">
      <button className="mark" onClick={() => {onNav("home");onClose();}}>
        <Logo />
      </button>
      <button className="close t-tiny" onClick={onClose}>
        <span>Close</span>
        <span className="glyph">×</span>
      </button>

      <div className="nav">
        <ol>
          {NAV_ITEMS.map((it) =>
          <li key={it.id} className={route === it.id ? "current" : ""}>
              <button onClick={() => {onNav(it.id);onClose();}}>
                {it.label}<span className="ital">{it.ital}</span>
              </button>
            </li>
          )}
        </ol>
      </div>

      <div className="side">
        <div className="block">
          <h4>Studio</h4>
          <p>NMCP Architects is an Athens-based practice working on residential, commercial and cultural interiors across Greece since 1995.</p>
        </div>
        <div className="block">
          <h4>Contact</h4>
          <p>22 Vizantiou Street<br />N. Smyrni, Athens<br /><br />+30 210 933 1213<br />studio@ncmparchitects.gr</p>
        </div>
        <div className="block">
          <h4>Follow</h4>
          <p>Instagram</p>
        </div>
      </div>
    </div>);

};

/* ============================================================
   HOME
   ============================================================ */
const Home = ({ onNav }) => {
  const heroWordRef = useRef(null);
  const nRef = useRef(null);
  const arratRef = useRef(null);
  const floatRef = useRef(null);
  const strapRef = useRef(null);
  const heroRef = useRef(null);

  // ---- One-shot mount reveal (next frame after paint) ----
  useEffect(() => {
    const r1 = requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        heroWordRef.current && heroWordRef.current.classList.add("revealed");
        floatRef.current && floatRef.current.classList.add("revealed");
        strapRef.current && strapRef.current.classList.add("revealed");
      });
    });
    return () => cancelAnimationFrame(r1);
  }, []);

  // ---- Cursor drift (more pronounced) ----
  useEffect(() => {
    let raf;
    let tx = 0,ty = 0;
    let targetX = 0,targetY = 0;
    const tick = () => {
      tx += (targetX - tx) * 0.08;
      ty += (targetY - ty) * 0.08;
      const w = heroWordRef.current;
      if (w) w.style.setProperty("--dx", `${tx * 32}px`);
      if (w) w.style.setProperty("--dy", `${ty * 24}px`);
      const f = floatRef.current;
      if (f) f.style.setProperty("--dx", `${-tx * 48}px`);
      if (f) f.style.setProperty("--dy", `${-ty * 36}px`);
      raf = requestAnimationFrame(tick);
    };
    const onMove = (e) => {
      targetX = e.clientX / window.innerWidth - 0.5;
      targetY = e.clientY / window.innerHeight - 0.5;
    };
    raf = requestAnimationFrame(tick);
    window.addEventListener("mousemove", onMove);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
    };
  }, []);

  // ---- Scroll-linked split + fade + scroll parallax on the float image ----
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const h = window.innerHeight;
      const t = Math.min(1, Math.max(0, y / (h * 0.9)));
      if (nRef.current) nRef.current.style.setProperty("--sx", `${-t * 180}px`);
      if (arratRef.current) arratRef.current.style.setProperty("--sx", `${t * 100}px`);
      if (heroWordRef.current) heroWordRef.current.style.setProperty("--scrollFade", String(1 - t * 0.95));
      if (heroWordRef.current) heroWordRef.current.style.setProperty("--scrollScale", String(1 + t * 0.12));
      // float image — drifts opposite at faster rate
      if (floatRef.current) floatRef.current.style.setProperty("--sy", `${-y * 0.35}px`);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="view" data-screen-label="01 Home">
      {/* HERO */}
      <section className="home-hero" ref={heroRef}>
        <div className="word" ref={heroWordRef}>
          <span className="top">
            <span className="ital n-part" ref={nRef}>N</span><span className="arrat" ref={arratRef}>arratives</span>
          </span>
        </div>

        <div className="float-1" ref={floatRef}>
          <div className="float-mask">
            <img src="assets/img/eurocar-03-stair.jpg" alt="Stair" />
          </div>
          <span className="cap t-tiny">FIG. 001 — SARACAKIS GRS, 2023</span>
        </div>

        <div className="strap" ref={strapRef}>
          <span className="t-tiny label">An Athens architecture practice</span>
          <p>NMCP is a small studio that designs interiors and buildings around the slow, careful arrangement of light, material and silence.</p>
        </div>

        <div className="scroll-cue t-tiny">
          <span>Scroll</span>
          <span className="line"></span>
        </div>
      </section>

      {/* FEATURED 01 — SARACAKIS */}
      <FeaturedProject project={PROJECTS[0]} side="right" onOpen={() => onNav("project:eurocar")} />

      {/* FEATURED 02 — RESIDENCE */}
      <FeaturedProject project={PROJECTS[1]} side="left" onOpen={() => onNav("project:residence-glyfada")} />

      {/* STATEMENT */}
      <section className="statement">
        <div className="corner-tl t-tiny">§ 003 · A note on practice</div>
        <h2 className="t-display body">
          We design <span className="serif-i ember">slowly</span>,
          for spaces that ought to outlast us.
        </h2>
      </section>

      {/* FOOTER */}
      <Footer onNav={onNav} />
    </div>);

};

/* — Single featured project on the home page — */
const FeaturedProject = ({ project, side, onOpen }) => {
  const isRight = side === "right";
  const [ref, p] = useElementScroll(); // 0..1 across viewport
  const [revealRef, revealed] = useReveal(0.2);

  // Parallax: small tile drifts opposite direction & slower
  const smallY = (p - 0.5) * 80; // small tile vertical drift
  const smallX = (p - 0.5) * (isRight ? -40 : 40);
  const bigY = (p - 0.5) * -28; // large frame counter-drift, gentler
  const imgScale = 1 + p * 0.02; // very slow zoom while in viewport

  return (
    <section ref={ref} className={`featured ${isRight ? "" : "right"}`}>
      <div
        ref={revealRef}
        className={"frame-wrap" + (revealed ? " revealed" : "")}
        style={{ transform: `translateY(${bigY}px)` }}>
        
        <button
          className="frame"
          style={{ cursor: "pointer", border: 0, padding: 0, background: "transparent", display: "block" }}
          onClick={onOpen}>
          
          <img src={project.cover} alt={project.title} style={{ transform: `scale(${imgScale})` }} />
          <div className="reveal-curtain"></div>
        </button>
      </div>

      <div
        className="frame small"
        style={Object.assign(
          isRight ? { left: "5vw", top: "8vh" } : { right: "5vw", top: "8vh" },
          { transform: `translate(${smallX}px, ${smallY}px)` }
        )}>
        
        <img src={project.gallery[0].src} alt={project.gallery[0].cap} />
      </div>

      <div className="info">
        <h3 className="title t-h1">
          <span className="num t-tiny" style={{ verticalAlign: "top" }}>— {project.num}</span>
          {project.title} <span className="serif-i">{project.titleItal}</span>
        </h3>
        <div className="meta t-tiny">
          <dl>
            <dt>Year</dt><dd>{project.year}</dd>
            <dt>Type</dt><dd>{project.type}</dd>
            <dt>Area</dt><dd>{project.area}</dd>
            <dt>Status</dt><dd>{project.status}</dd>
          </dl>
        </div>
        <div className="meta t-tiny" style={{ alignSelf: "end" }}>
          <button
            onClick={onOpen}
            className="t-tiny"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 14,
              padding: "12px 18px",
              border: "1px solid currentColor",
              borderRadius: 999
            }}>
            
            <span>View project</span>
            <span style={{ display: "inline-block", width: 18, height: 1, background: "currentColor" }}></span>
          </button>
        </div>
      </div>
    </section>);

};

/* ============================================================
   FOOTER (shared)
   ============================================================ */
const Footer = ({ onNav }) =>
<footer className="foot">
    <div className="grid">
      <div>
        <h3>
          Building for the long <span className="serif-i ember">quiet.</span>
        </h3>
      </div>
      <div>
        <ul className="t-tiny">
          <li className="faint">Studio</li>
          <li><button onClick={() => onNav("studio")}>About</button></li>
          <li><button onClick={() => onNav("studio")}>People</button></li>
          <li><button onClick={() => onNav("projects")}>Selected works</button></li>
        </ul>
      </div>
      <div>
        <ul className="t-tiny">
          <li className="faint">Contact</li>
          <li>22 Vizantiou Street</li>
          <li>N. Smyrni, Athens</li>
          <li>+30 210 933 1213</li>
          <li><a href="mailto:studio@ncmparchitects.gr">studio@ncmparchitects.gr</a></li>
        </ul>
      </div>
      <div>
        <ul className="t-tiny">
          <li className="faint">Follow</li>
          <li>Instagram</li>
        </ul>
      </div>
    </div>
    <div className="copy t-tiny">
      <span>© 2025 NMCP Architects · All works are copyright of the studio and their respective collaborators</span>
    </div>
  </footer>;


/* ============================================================
   PROJECTS INDEX
   ============================================================ */
const ProjectsIndex = ({ onOpen }) => {
  const [filter, setFilter] = useState("All");
  const [hovered, setHovered] = useState(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });

  const types = ["All", "Residential", "Commercial Interior", "Workplace", "Cultural", "Hospitality"];
  const filtered = filter === "All" ? PROJECTS : PROJECTS.filter((p) => p.type === filter);

  return (
    <div className="view" data-screen-label="02 Projects" onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>

      <div className="index-filter t-tiny">
        {types.map((t) =>
        <button key={t} className={filter === t ? "on" : ""} onClick={() => setFilter(t)}>
            {t}
          </button>
        )}
      </div>

      <div className="index-list">
        {filtered.map((p) =>
        <div
          key={p.id}
          className={`index-row ${hovered === p.id ? "hover" : ""}`}
          onMouseEnter={() => setHovered(p.id)}
          onMouseLeave={() => setHovered(null)}
          onClick={() => onOpen(p.id)}>
          
            <span className="num t-tiny">— {p.num}</span>
            <div className="title-cell">
              <div className="title">{p.title}</div>
              <div className="subtitle">{p.titleItal}</div>
            </div>
            <span className="meta-cell t-tiny">{p.location}</span>
            <span className="meta-cell t-tiny">{p.type}</span>
            <span className="meta-cell t-tiny t-num">{p.year}</span>
            <span className="arrow t-tiny">→</span>
            {hovered === p.id &&
          <div
            className="preview"
            style={{
              left: Math.min(pos.x + 24, window.innerWidth - 304),
              top: Math.min(pos.y - 180, window.innerHeight - 384)
            }}>
            
                <img src={p.cover} alt={p.title} />
              </div>
          }
          </div>
        )}
      </div>
      <Footer onNav={(r) => window.dispatchEvent(new CustomEvent("nmcp:nav", { detail: r }))} />
    </div>);

};

/* ============================================================
   PROJECT DETAIL
   ============================================================ */
const ProjectDetail = ({ id, onNav }) => {
  const p = PROJECTS.find((x) => x.id === id) || PROJECTS[0];
  const idx = PROJECTS.findIndex((x) => x.id === id);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  return (
    <div className="view" data-screen-label={`Project · ${p.title}`}>
      <section className="proj-hero">
        <div className="meta t-tiny">
          <div className="tag">— {p.num} · {p.status}</div>
          <h2 className="t-h2 soft">{p.location} · {p.year}</h2>
        </div>
        <h1 className="title">
          {p.title} <span className="ital">{p.titleItal}.</span>
        </h1>

        <dl className="info-grid t-tiny">
          <div><dt>Programme</dt><dd>{p.type}</dd></div>
          <div><dt>Area</dt><dd>{p.area}</dd></div>
          <div><dt>Coordinates</dt><dd>{p.coords || "—"}</dd></div>
          <div><dt>Palette</dt><dd>{p.accent || "—"}</dd></div>
        </dl>
      </section>

      <div className="proj-cover">
        <img src={p.cover} alt={p.title} />
        <span className="marker t-tiny">Plate 01 · {p.title}</span>
      </div>

      <section className="proj-body">
        <div className="colA t-tiny">
          <div>§ Notes on the project</div>
          <div style={{ marginTop: 12 }}>{p.year}</div>
        </div>
        <div className="colB">
          {p.body && p.body.map((para, i) => <p key={i}>{para}</p>)}
        </div>
        <div className="colC t-tiny">
          <div>Plate references</div>
          <ul style={{ listStyle: "none", marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }}>
            {(p.gallery || []).slice(0, 4).map((g) =>
            <li key={g.num}><span style={{ color: "var(--ink-faint)" }}>{g.num} —</span> {g.cap}</li>
            )}
          </ul>
        </div>
      </section>

      {p.gallery &&
      <section className="proj-gallery">
          <div className="row row-a">
            <div className="frame wide">
              <img src={p.gallery[0].src} alt={p.gallery[0].cap} />
              <div className="cap t-tiny"><span>{p.gallery[0].cap}</span><span>{p.gallery[0].num}</span></div>
            </div>
            <div className="frame tall offset">
              <img src={p.gallery[1].src} alt={p.gallery[1].cap} />
              <div className="cap t-tiny"><span>{p.gallery[1].cap}</span><span>{p.gallery[1].num}</span></div>
            </div>
          </div>

          {p.gallery[2] &&
        <div className="full">
              <img src={p.gallery[2].src} alt={p.gallery[2].cap} />
            </div>
        }

          <div className="row row-b">
            <div className="frame tall">
              <img src={p.gallery[3].src} alt={p.gallery[3].cap} />
              <div className="cap t-tiny"><span>{p.gallery[3].cap}</span><span>{p.gallery[3].num}</span></div>
            </div>
            {p.gallery[4] &&
          <div className="frame wide offset">
                <img src={p.gallery[4].src} alt={p.gallery[4].cap} />
                <div className="cap t-tiny"><span>{p.gallery[4].cap}</span><span>{p.gallery[4].num}</span></div>
              </div>
          }
          </div>
        </section>
      }

      {/* Plan — drawn placeholder */}
      <section className="proj-plan">
        <div className="text">
          <div className="label t-tiny">— Drawing 01 · ground floor plan</div>
          <h3>An order that <span className="serif-i">refuses</span> to be a grid.</h3>
          <p>Three rooms are held in suspension around a wooden core. The plan reads almost as a single space, broken only by the soft furniture of joinery.</p>
        </div>
        <div className="plan-canvas">
          <PlanSVG />
        </div>
      </section>

      {/* Credits */}
      <section className="proj-credits">
        <div>
          <div className="t-tiny faint">— Credits</div>
          <h3 className="t-h2" style={{ marginTop: 12, maxWidth: "14ch" }}>The people who made it.</h3>
        </div>
        <dl className="t-tiny">
          {p.credits && Object.entries(p.credits).map(([k, v]) =>
          <React.Fragment key={k}>
              <dt>{k}</dt>
              <dd>{v}</dd>
            </React.Fragment>
          )}
        </dl>
      </section>

      <section className="proj-next">
        <div>
          <div className="t-tiny faint">— Next project</div>
          <div className="t-tiny soft" style={{ marginTop: 8 }}>{next.location} · {next.year}</div>
        </div>
        <div className="right">
          <h3 onClick={() => onNav("project:" + next.id)}>
            {next.title} <span className="serif-i">{next.titleItal}</span> →
          </h3>
        </div>
      </section>

      <Footer onNav={onNav} />
    </div>);

};

/* — A drawn plan, abstracted — */
const PlanSVG = () =>
<svg viewBox="0 0 800 600" style={{ width: "100%", height: "100%", display: "block" }}>
    <defs>
      <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
        <line x1="0" y1="0" x2="0" y2="6" stroke="var(--ink-faint)" strokeWidth="0.5" />
      </pattern>
    </defs>
    {/* Outline */}
    <rect x="60" y="60" width="680" height="480" fill="none" stroke="var(--ink)" strokeWidth="1.2" />
    {/* Walls */}
    <line x1="60" y1="260" x2="380" y2="260" stroke="var(--ink)" strokeWidth="1.2" />
    <line x1="380" y1="60" x2="380" y2="540" stroke="var(--ink)" strokeWidth="1.2" />
    <line x1="380" y1="380" x2="740" y2="380" stroke="var(--ink)" strokeWidth="1.2" />
    <line x1="540" y1="60" x2="540" y2="380" stroke="var(--ink)" strokeWidth="1.2" />
    {/* Wood core */}
    <rect x="200" y="150" width="120" height="60" fill="url(#hatch)" stroke="var(--ink)" strokeWidth="0.6" />
    <rect x="200" y="340" width="120" height="120" fill="url(#hatch)" stroke="var(--ink)" strokeWidth="0.6" />
    {/* Doors */}
    <path d="M 200 260 A 40 40 0 0 1 240 220" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    <path d="M 540 240 A 40 40 0 0 1 580 200" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    <path d="M 380 460 A 40 40 0 0 1 420 500" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    {/* Furniture sketches */}
    <rect x="610" y="100" width="100" height="40" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    <circle cx="660" cy="180" r="18" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    <rect x="430" y="430" width="160" height="80" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    <rect x="100" y="430" width="220" height="60" fill="none" stroke="var(--ink-soft)" strokeWidth="0.5" />
    {/* Labels */}
    <text x="100" y="100" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>A · Entry</text>
    <text x="420" y="100" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>B · Living</text>
    <text x="600" y="430" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>C · Kitchen</text>
    <text x="100" y="430" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>D · Bedroom</text>
    {/* North arrow */}
    <g transform="translate(720,520)">
      <line x1="0" y1="0" x2="0" y2="-32" stroke="var(--ink)" strokeWidth="1" />
      <polygon points="0,-36 -4,-28 4,-28" fill="var(--ink)" />
      <text x="0" y="14" textAnchor="middle" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em" }}>N</text>
    </g>
    {/* Scale */}
    <g transform="translate(60,560)">
      <line x1="0" y1="0" x2="100" y2="0" stroke="var(--ink)" strokeWidth="1" />
      <line x1="0" y1="-4" x2="0" y2="4" stroke="var(--ink)" strokeWidth="1" />
      <line x1="100" y1="-4" x2="100" y2="4" stroke="var(--ink)" strokeWidth="1" />
      <line x1="50" y1="-3" x2="50" y2="3" stroke="var(--ink)" strokeWidth="1" />
      <text x="0" y="20" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em" }}>0</text>
      <text x="100" y="20" fill="var(--ink-soft)" style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.18em" }}>5M</text>
    </g>
  </svg>;


/* ============================================================
   STUDIO
   ============================================================ */
const Studio = ({ onNav }) =>
<div className="view" data-screen-label="03 Studio">
    <section className="studio-hero">
      <div className="marker t-tiny">
        <div>§ 002</div>
        <div>The studio</div>
        <div className="faint">Athens · since 1995</div>
      </div>
      <h1 className="title">
        Twenty <span className="ital">one</span> years<br />
        of working slowly<br />
        in <span className="ital">three rooms</span>.
      </h1>
    </section>

    <section className="studio-body">
      <p className="leader">
        NMCP is a small architecture practice founded in Athens in 1995. We design houses, apartments, workplaces and cultural interiors — usually one project at a time, almost always for clients we know well.
      </p>
      <div className="text">
        <p>We are interested in spaces that are quiet enough to receive the people who live in them. Light is treated as a structural element. Joinery, terrazzo and lime plaster are treated as collaborators.</p>
        <p>Our drawings often start as long letters to ourselves — written before any line is drawn. The buildings that follow inherit a certain calm from that habit.</p>
        <p>We work with a handful of trusted engineers, lighting designers and craftspeople, all of them based in Greece. The studio does not advertise. New clients usually arrive through other clients.</p>
      </div>
    </section>

    <div className="studio-portrait">
      <img src="assets/img/eurocar-06-corridor.jpg" alt="Studio" />
    </div>

    <section className="studio-people">
      <div className="person">
        <h4>Matteo Pergamian</h4>
        <div className="role t-tiny">Founding partner</div>
        <p>NTUA, 2002. Cooper Union, 2004. Teaches design at the University of Patras.</p>
      </div>
      <div className="person">
        <h4>Stathis Papanagiotou</h4>
        <div className="role t-tiny">Partner</div>
        <p>AUTh, 2003. Joined the studio in 2009. Leads commercial and hospitality projects.</p>
      </div>
      <div className="person">
        <h4>The team</h4>
        <div className="role t-tiny">Studio</div>
        <p>Six architects, two interior designers, one model-maker, two persistent dogs.</p>
      </div>
    </section>

    <section className="studio-numbers">
      <div className="stat"><div className="v t-num">21</div><div className="l t-tiny">Years in practice</div></div>
      <div className="stat"><div className="v t-num">84</div><div className="l t-tiny">Projects delivered</div></div>
      <div className="stat"><div className="v t-num">11</div><div className="l t-tiny">Studio team</div></div>
      <div className="stat"><div className="v t-num">07</div><div className="l t-tiny">Awards & publications</div></div>
    </section>

    <Footer onNav={onNav} />
  </div>;


/* ============================================================
   CONTACT
   ============================================================ */
const Contact = ({ onNav }) => {
  const [sent, setSent] = useState(false);
  return (
    <div className="view" data-screen-label="04 Contact">
      <section className="contact-wrap">
        <h1 className="lede">
          Write to <span className="ital">us</span>,<br />
          we read every<br />
          letter slowly.
        </h1>
        <div className="side t-tiny">
          <div className="block">
            <div className="label">Studio</div>
            <div className="val">
              22 Vizantiou Street<br />
              N. Smyrni, Athens · Greece
            </div>
          </div>
          <div className="block">
            <div className="label">Email</div>
            <div className="val">
              <a href="mailto:studio@ncmparchitects.gr">studio@ncmparchitects.gr</a><br />
              <a href="mailto:press@ncmparchitects.gr">press@ncmparchitects.gr</a>
            </div>
          </div>
          <div className="block">
            <div className="label">Telephone</div>
            <div className="val">+30 210 933 1213</div>
          </div>
          <div className="block">
            <div className="label">Hours</div>
            <div className="val">By appointment · Mon — Fri · 10:00 to 18:00</div>
          </div>
        </div>
      </section>

      <section className="contact-form">
        <div className="col-left">
          <h3>Tell us about your <span className="serif-i ember">project</span>.</h3>
          <p>A short note is enough. We answer everyone within five working days, even if it is only to say we cannot help.</p>
        </div>
        <form onSubmit={(e) => {e.preventDefault();setSent(true);}}>
          <div className="field">
            <label className="t-tiny">Name</label>
            <input type="text" required placeholder="Your name" />
          </div>
          <div className="field">
            <label className="t-tiny">Email</label>
            <input type="email" required placeholder="you@example.com" />
          </div>
          <div className="field">
            <label className="t-tiny">Project type</label>
            <input type="text" placeholder="Residence · Workplace · Cultural · Other" />
          </div>
          <div className="field">
            <label className="t-tiny">A short note</label>
            <textarea rows="3" placeholder="Tell us a little about the project — location, scale, what you are hoping for."></textarea>
          </div>
          <button className="submit t-tiny" type="submit">
            <span>{sent ? "Thank you — we'll reply soon" : "Send"}</span>
            {!sent && <span className="arr"></span>}
          </button>
        </form>
      </section>

      <Footer onNav={onNav} />
    </div>);

};

/* ============================================================
   APP / Router
   ============================================================ */
const App = () => {
  const [route, setRoute] = useState("home");
  const [menuOpen, setMenuOpen] = useState(false);
  const [lang, setLang] = useState("en");

  const nav = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Listen for cross-component nav events (from Footer in ProjectsIndex etc.)
  useEffect(() => {
    const handler = (e) => nav(e.detail);
    window.addEventListener("nmcp:nav", handler);
    return () => window.removeEventListener("nmcp:nav", handler);
  }, []);

  const isProject = route.startsWith("project:");

  return (
    <>
      <Chrome
        route={route}
        onNav={nav}
        onOpenMenu={() => setMenuOpen(true)}
        lang={lang}
        setLang={setLang} />
      

      {route === "home" && <Home onNav={nav} />}
      {route === "projects" && <ProjectsIndex onOpen={(id) => nav("project:" + id)} />}
      {isProject && <ProjectDetail id={route.split(":")[1]} onNav={nav} />}
      {route === "studio" && <Studio onNav={nav} />}
      {route === "contact" && <Contact onNav={nav} />}

      {menuOpen && <Menu route={route} onNav={nav} onClose={() => setMenuOpen(false)} />}
    </>);

};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);