const { Icon, SectionLabel, Divider } = window.BuildingInvestDesignSystem_f8840b;

function useViewportWidth() {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return w;
}

function Tile({ icon, label, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      type="button"
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-pressed={active}
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        justifyContent: "space-between",
        gap: "var(--space-3)",
        padding: "var(--space-4)",
        borderRadius: "var(--radius-card)",
        border: active ? "var(--border-thick) solid var(--amber-400)" : `1px solid ${hover ? "var(--amber-400)" : "var(--concrete-200)"}`,
        background: active ? "var(--amber-100)" : "var(--surface-card)",
        boxShadow: !active && hover ? "var(--shadow-lg)" : "var(--shadow-xs)",
        transform: !active && hover ? "translateY(var(--lift-y))" : "none",
        cursor: "pointer",
        textAlign: "left",
        width: "100%",
        minWidth: 0,
        minHeight: 96,
        transition: "var(--transition-shadow),var(--transition-transform),var(--transition-color)",
      }}
    >
      <div style={{ display: "flex", width: "100%", justifyContent: "space-between", alignItems: "flex-start" }}>
        <Icon name={icon} size="sm" color={active ? "var(--amber-700)" : "var(--amber-600)"} />
        {active ? <Icon name="check" size="sm" color="var(--amber-700)" /> : null}
      </div>
      <span style={{ font: "var(--weight-semibold) var(--text-xs)/1.35 var(--font-sans)", color: active ? "var(--amber-800)" : "var(--text-primary)" }}>{label}</span>
    </button>
  );
}

function PhotoSlot({ ratio = "16 / 9", label = "FOTO", height, style }) {
  return (
    <div style={{ aspectRatio: height ? undefined : ratio, height, background: "var(--concrete-100)", border: "1px solid var(--concrete-200)", borderRadius: "var(--radius-image)", display: "grid", placeItems: "center", overflow: "hidden", ...style }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <Icon name="image" size="md" color="var(--concrete-300)" />
        <span style={{ font: "var(--type-mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--concrete-400)" }}>{label}</span>
      </div>
    </div>
  );
}

function ProjectImage({ src, ratio = "4 / 3", label, height, style }) {
  if (!src) return <PhotoSlot ratio={ratio} label={label} height={height} style={style} />;
  return (
    <div style={{ aspectRatio: height ? undefined : ratio, height, borderRadius: "var(--radius-image)", overflow: "hidden", ...style }}>
      <img src={src} alt={label || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  );
}

function ProjectGallery({ images, mainRatio = "16 / 9", lang = "ro", fallbackLabel = "FOTO" }) {
  const [open, setOpen] = React.useState(false);
  const [index, setIndex] = React.useState(0);
  const t = (window.I18N[lang] || window.I18N.ro).common;

  const list = images && images.length ? images : null;
  const count = list ? list.length : 0;

  const close = () => setOpen(false);
  const prev = (e) => { if (e) e.stopPropagation(); setIndex((i) => (i - 1 + count) % count); };
  const next = (e) => { if (e) e.stopPropagation(); setIndex((i) => (i + 1) % count); };

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, count]);

  if (!list) return <PhotoSlot ratio={mainRatio} label={fallbackLabel} />;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", minWidth: 0 }}>
      <div style={{ position: "relative" }}>
        <div onClick={() => setOpen(true)} style={{ cursor: "zoom-in", aspectRatio: mainRatio, borderRadius: "var(--radius-image)", overflow: "hidden" }}>
          <img src={list[index]} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
        {count > 1 && (
          <>
            <button onClick={prev} aria-label={t.prev} style={{ position: "absolute", left: "var(--space-3)", top: "50%", transform: "translateY(-50%)", width: 36, height: 36, borderRadius: "var(--radius-full)", border: "none", background: "rgba(255,255,255,.9)", boxShadow: "var(--shadow-md)", cursor: "pointer", display: "grid", placeItems: "center" }}>
              <Icon name="chevron-left" size="sm" color="var(--concrete-900)" />
            </button>
            <button onClick={next} aria-label={t.next} style={{ position: "absolute", right: "var(--space-3)", top: "50%", transform: "translateY(-50%)", width: 36, height: 36, borderRadius: "var(--radius-full)", border: "none", background: "rgba(255,255,255,.9)", boxShadow: "var(--shadow-md)", cursor: "pointer", display: "grid", placeItems: "center" }}>
              <Icon name="chevron-right" size="sm" color="var(--concrete-900)" />
            </button>
            <span style={{ position: "absolute", right: "var(--space-3)", bottom: "var(--space-3)", padding: "3px 8px", borderRadius: "var(--radius-full)", background: "rgba(13,12,11,.72)", font: "var(--type-mono)", fontSize: 11, color: "var(--concrete-0)" }}>{index + 1} / {count}</span>
          </>
        )}
      </div>
      {count > 1 && (
        <div style={{ display: "flex", gap: "var(--space-3)", overflowX: "auto", paddingBottom: 4 }}>
          {list.map((src, i) => (
            <div key={src} onClick={() => setIndex(i)} style={{ cursor: "pointer", flex: "0 0 auto", width: 120, aspectRatio: "4 / 3", borderRadius: "var(--radius-image)", overflow: "hidden", border: i === index ? "var(--border-thick) solid var(--amber-400)" : "1px solid var(--concrete-200)" }}>
              <img src={src} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          ))}
        </div>
      )}
      {open && (
        <div role="dialog" aria-modal="true" onClick={close}
          style={{ position: "fixed", inset: 0, zIndex: 500, background: "rgba(13,12,11,.94)", backdropFilter: "blur(3px)", display: "grid", placeItems: "center", padding: "var(--space-6)" }}>
          <button onClick={close} aria-label={t.close} style={{ position: "absolute", top: "var(--space-6)", right: "var(--space-6)", background: "none", border: "none", cursor: "pointer", padding: 8 }}>
            <Icon name="x" size="lg" color="var(--concrete-0)" />
          </button>
          {count > 1 && (
            <button onClick={prev} aria-label={t.prev} style={{ position: "absolute", left: "var(--space-6)", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", padding: 8 }}>
              <Icon name="chevron-left" size="xl" color="var(--concrete-0)" />
            </button>
          )}
          {count > 1 && (
            <button onClick={next} aria-label={t.next} style={{ position: "absolute", right: "var(--space-6)", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", padding: 8 }}>
              <Icon name="chevron-right" size="xl" color="var(--concrete-0)" />
            </button>
          )}
          <img src={list[index]} alt="" onClick={(e) => e.stopPropagation()} style={{ maxWidth: "88vw", maxHeight: "84vh", objectFit: "contain", borderRadius: "var(--radius-image)" }} />
          {count > 1 && (
            <span style={{ position: "absolute", bottom: "var(--space-5)", left: "50%", transform: "translateX(-50%)", font: "var(--type-mono)", fontSize: 12, letterSpacing: "0.05em", color: "var(--concrete-0)" }}>{index + 1} / {count}</span>
          )}
        </div>
      )}
    </div>
  );
}

function Container({ children, width = "var(--container-xl)", style }) {
  return <div style={{ maxWidth: width, margin: "0 auto", padding: "0 var(--page-margin-lg)", ...style }}>{children}</div>;
}

function Section({ children, label, number, title, lead, tone = "light", style }) {
  const dark = tone === "dark";
  return (
    <section data-theme={dark ? "dark" : undefined} style={{ background: dark ? "var(--concrete-900)" : tone === "sunken" ? "var(--surface-sunken)" : "var(--surface-card)", padding: "var(--section-y) 0", ...style }}>
      <Container>
        {(label || title) && (
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)", marginBottom: "var(--space-9)", maxWidth: "var(--container-md)" }}>
            {label ? <SectionLabel number={number} tone={dark ? "inverse" : "accent"}>{label}</SectionLabel> : null}
            {title ? <h2 style={{ font: "var(--type-h2)", color: dark ? "var(--concrete-0)" : "var(--text-primary)", letterSpacing: "var(--tracking-tight)" }}>{title}</h2> : null}
            {lead ? <p style={{ font: "var(--type-body-lg)", color: dark ? "var(--alpha-white-72)" : "var(--text-secondary)", maxWidth: "var(--measure-prose)" }}>{lead}</p> : null}
          </div>
        )}
        {children}
      </Container>
    </section>
  );
}

Object.assign(window, { useViewportWidth, Tile, PhotoSlot, ProjectImage, ProjectGallery, Container, Section });