// Projects.jsx — selected works as an editorial sequence
// Mixed sizes: a wide opener, a 2-up row, a portrait + index list
function Projects() {
  const items = [
    { image: "assets/interior-grand-lounge.jpg", n: "Nº 01", category: "Private Residence", place: "Lago di Como, IT", title: "Villa Capolago", year: "MMXXV", size: "wide" },
    { image: "assets/interior-dining.jpg",       n: "Nº 02", category: "Hospitality",       place: "Zürich, CH",      title: "Maison Aurélie", year: "MMXXV",  size: "half" },
    { image: "assets/interior-living-warm.jpg",  n: "Nº 03", category: "Private Residence", place: "Berlin, DE",      title: "Penthouse Charlottenburg", year: "MMXXV", size: "half" },
    { image: "assets/interior-suite-04.jpg",     n: "Nº 04", category: "Office",            place: "München, DE",     title: "Theatinerstraße HQ", year: "MMXXIV", size: "third-l" },
    { image: "assets/interior-dark-lounge.jpg",  n: "Nº 05", category: "Hospitality",       place: "Wien, AT",        title: "Belvedere Suite", year: "MMXXIV", size: "third-r" },
  ];

  function Card({ it, ratio = "4 / 5" }) {
    const [hover, setHover] = React.useState(false);
    return (
      <a href="#" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{ display: "block", border: 0, textDecoration: "none", color: "inherit" }}>
        <div style={{
          width: "100%", aspectRatio: ratio, overflow: "hidden",
          background: "var(--bg-soft)", position: "relative",
        }}>
          <div style={{
            position: "absolute", inset: 0,
            backgroundImage: `url('${it.image}')`,
            backgroundSize: "cover", backgroundPosition: "center",
            transform: hover ? "scale(1.025)" : "scale(1)",
            transition: "transform 900ms var(--ease-quiet)",
          }} />
          {/* corner index */}
          <div style={{
            position: "absolute", top: 20, left: 22,
            fontFamily: "var(--font-sans)", fontSize: 10,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "rgba(237,231,221,0.92)",
          }}>{it.n}</div>
        </div>
        <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24 }}>
          <div>
            <div style={{
              fontFamily: "var(--font-sans)", fontSize: 10,
              letterSpacing: "0.28em", textTransform: "uppercase",
              color: "var(--fg-muted)", marginBottom: 10,
            }}>{it.category} · {it.place}</div>
            <div style={{
              fontFamily: "var(--font-serif)", fontWeight: 300,
              fontSize: 26, lineHeight: 1.15, color: "var(--fg)",
              letterSpacing: "0.005em",
            }}>{it.title}</div>
          </div>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 15, color: "var(--fg-soft)",
            whiteSpace: "nowrap",
          }}>{it.year}</div>
        </div>
      </a>
    );
  }

  return (
    <section
      id="projekte"
      data-screen-label="Projects"
      style={{ background: "var(--bg)", padding: "176px 0 144px" }}
    >
      <div style={{ maxWidth: 1600, margin: "0 auto", padding: "0 56px" }}>
        {/* Header */}
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr auto",
          gap: 64, alignItems: "end", marginBottom: 88,
          paddingBottom: 28, borderBottom: "1px solid var(--border)",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-muted)",
          }}>II · Selected Works</div>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.98,
            letterSpacing: "0.01em", margin: 0, color: "var(--fg)",
          }}>
            Curated <span style={{ fontStyle: "italic" }}>Projects.</span>
          </h2>
          <a href="#" style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.24em", textTransform: "uppercase",
            color: "var(--fg)", borderBottom: "1px solid var(--fg)",
            paddingBottom: 4, textDecoration: "none",
          }}>Alle Projekte →</a>
        </div>

        {/* Wide opener — full width 16:8 */}
        <div style={{ marginBottom: 96 }}>
          <Card it={items[0]} ratio="16 / 8" />
        </div>

        {/* 2-up row */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: 56, marginBottom: 96,
        }}>
          <Card it={items[1]} ratio="4 / 5" />
          <Card it={items[2]} ratio="4 / 5" />
        </div>

        {/* Asymmetric pair: 2/3 + 1/3 */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr",
          gap: 56, marginBottom: 96, alignItems: "start",
        }}>
          <Card it={items[3]} ratio="3 / 2" />
          <Card it={items[4]} ratio="4 / 5" />
        </div>

        {/* Index list — typographic register of more works */}
        <div style={{
          borderTop: "1px solid var(--border)",
          marginTop: 16,
        }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "60px 1fr 1fr 1fr 80px",
            gap: 24, padding: "20px 0",
            fontFamily: "var(--font-sans)", fontSize: 10,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-soft)",
            borderBottom: "1px solid var(--border)",
          }}>
            <div>Nº</div>
            <div>Project</div>
            <div>Discipline</div>
            <div>Location</div>
            <div style={{ textAlign: "right" }}>Year</div>
          </div>
          {[
            { n: "06", t: "Galerie Saint-Germain", d: "Retail",       l: "Paris, FR",       y: "MMXXIII" },
            { n: "07", t: "Spa Monte Verità",      d: "Hospitality", l: "Ascona, CH",       y: "MMXXIII" },
            { n: "08", t: "Apartment Türkenstraße",d: "Residence",   l: "München, DE",      y: "MMXXIII" },
            { n: "09", t: "Restaurant Otello",     d: "Hospitality", l: "Hamburg, DE",      y: "MMXXII" },
            { n: "10", t: "Casa Rovere",           d: "Residence",   l: "Bellinzona, CH",   y: "MMXXII" },
          ].map((row, i) => (
            <a key={i} href="#" style={{
              display: "grid",
              gridTemplateColumns: "60px 1fr 1fr 1fr 80px",
              gap: 24, padding: "26px 0",
              alignItems: "baseline",
              borderBottom: "1px solid var(--border)",
              color: "inherit", textDecoration: "none", border: 0,
              borderBottomWidth: 1, borderBottomStyle: "solid", borderBottomColor: "var(--border)",
              transition: "background 320ms var(--ease-quiet)",
            }}
            onMouseEnter={e => e.currentTarget.style.background = "var(--hover-overlay)"}
            onMouseLeave={e => e.currentTarget.style.background = "transparent"}
            >
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic",
                fontSize: 17, color: "var(--fg-muted)",
              }}>{row.n}</div>
              <div style={{
                fontFamily: "var(--font-serif)", fontWeight: 300,
                fontSize: 24, lineHeight: 1.15, color: "var(--fg)",
              }}>{row.t}</div>
              <div style={{
                fontFamily: "var(--font-sans)", fontSize: 13,
                color: "var(--fg-muted)",
              }}>{row.d}</div>
              <div style={{
                fontFamily: "var(--font-sans)", fontSize: 13,
                color: "var(--fg-muted)",
              }}>{row.l}</div>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic",
                fontSize: 15, color: "var(--fg-soft)", textAlign: "right",
              }}>{row.y}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Projects = Projects;