// XBD Collective — shared components
const { useState, useEffect, useRef, useMemo } = React;

// ===== Logo (inline SVG, currentColor-aware via path fill from CSS)
function Logo({ height = 30 }) {
  // Simplified mark — XBD wordmark — uses fg via CSS .nav-logo svg path
  return (
    <svg viewBox="0 0 787.46 516.63" style={{ height, width: "auto", display: "block" }} aria-label="XBD Collective">
      <g>
        <path d="M3751.7,160.89h65.63c9.76,0,9.76,0,14.8,9.61h-80.66c.66,3.92.86,7.36,1.83,10.57,6.83,22.52,21.59,36.83,44.48,42.78,3.21.83,4.74,0,6.46-2.65,10.13-15.4,20.44-30.69,30.69-46,.46.21.8.25.94.44,5.72,7.68,5.73,7.68.54,15.56-8.77,13.33-17.63,26.61-26.28,40-1.71,2.66-3.33,3.28-6.47,2.77-30.41-4.95-50.67-21.72-58.92-51.55-10.83-39.23,16.69-79.61,57.06-85,5-.68,7.52.29,10.35,4.62,26.08,39.75,52.52,79.26,78.7,118.94,2.26,3.42,4.43,4.28,8.5,3.67,30-4.48,52.46-32.93,49.59-63.18-2.74-28.92-23.28-50.29-52.25-54.5-3-.43-4.49.69-6,3-8.91,13.63-18,27.17-27,40.72-1.08,1.63-2.22,3.2-3.62,5.22-2.14-3-4-5.71-6.18-8.74l18.66-28.67c3.81-5.85,7.43-11.85,11.54-17.47a8.56,8.56,0,0,1,5.85-3.22c31.61-.55,61.23,24,66.83,55,7.56,41.94-22,79.1-64.75,81.52-3.76.22-5.59-1.35-7.51-4.25-26.25-39.63-52.7-79.13-78.85-118.83-2.82-4.28-5.41-5-10.1-3.67C3771.37,114.21,3753,136,3751.7,160.89Z" transform="translate(-3455.11 -97.17)"/>
        <path d="M3821.14,298.47c15.82.65,31.36.1,46.52,2.27,14.13,2,20.84,15.08,16.06,27.15-2.58,6.53-7.74,10.19-14.19,12.28-1.87.6-3.84.94-6.89,1.66,4.21,1,7.46,1.65,10.58,2.64,10.72,3.41,16.6,10.5,16.63,19.83,0,10.73-5.35,18.25-16.42,21.62a58.56,58.56,0,0,1-15.66,2.51c-15.77.32-31.55.11-47.62.11-.09-1.55-.16-3-.26-4.79,1.5-.16,2.76-.37,4-.42,5.89-.23,7-1.25,7-7.09q0-36.4,0-72.82C3820.92,302.27,3821,301.13,3821.14,298.47Zm13.78,45.39c0,12.19-.26,22.83.23,33.44.09,2,3.07,5.6,4.77,5.63,7.75.14,15.66,0,23.23-1.44,7.85-1.51,11.58-8,11.55-17,0-9.56-4-16.36-12-17.83C3853.84,345,3844.71,344.79,3834.92,343.86Zm.21-4.69c5.7,0,10.84.2,15.95-.08a35.53,35.53,0,0,0,8.74-1.77c7.45-2.39,11.18-8.22,10.84-16.46s-4.49-14.76-11.86-15.69c-7.74-1-15.7-.21-23.67-.21Z" transform="translate(-3455.11 -97.17)"/>
        <path d="M3949.94,389.59v-5.51c.35-.23.61-.55.9-.57,9.85-.87,9.85-.87,9.85-11.09V298.31c16,.84,31.68.8,47.06,2.71,13.05,1.62,21.66,10.37,26.25,22.62,5.5,14.64,5.52,29.3-1.28,43.58-5.11,10.74-13.64,18.51-25.34,19.66C3988.42,388.75,3969.28,388.77,3949.94,389.59Zm24.52-86.07V313q0,31.69,0,63.41c0,6.11.8,6.86,7,6.9,4.49,0,9,.1,13.48-.09,13.66-.59,21.33-6.62,24.53-19.86a83.23,83.23,0,0,0,0-39.07c-2.31-9.69-8.09-16.65-18.17-18.34C3992.67,304.51,3983.87,304.32,3974.46,303.52Z" transform="translate(-3455.11 -97.17)"/>
      </g>
    </svg>
  );
}

// ===== Image with lazy fade-in
function Img({ src, alt, ratio, className = "", style = {}, focus = "center" }) {
  const [loaded, setLoaded] = useState(false);
  const wrapStyle = { ...style };
  if (ratio) wrapStyle.aspectRatio = ratio;
  return (
    <div className={`img-bg ${className}`} style={wrapStyle}>
      <img
        src={src}
        alt={alt || ""}
        loading="lazy"
        decoding="async"
        onLoad={() => setLoaded(true)}
        style={{
          width: "100%", height: "100%", objectFit: "cover", objectPosition: focus,
          opacity: loaded ? 1 : 0,
          transform: loaded ? "scale(1)" : "scale(1.02)",
          transition: "opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1), filter 600ms"
        }}
      />
    </div>
  );
}

// ===== Project card (used on Home featured + Projects index)
function ProjectCard({ project, t, size = "default", onClick, ar = false }) {
  const [hover, setHover] = useState(false);
  const sectorLabel = (window.XBD.sectors.find(s => s.id === project.sector) || {}).label;
  const scopes = project.scope.map(sid => (window.XBD.scopes.find(x => x.id === sid) || {}).label).join(" · ");
  return (
    <a
      href={`#${project.slug}`}
      onClick={(e) => { e.preventDefault(); onClick && onClick(project); }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", color: "inherit", cursor: "pointer" }}
    >
      <div style={{
        position: "relative", overflow: "hidden",
        background: "var(--surface-elev)",
        aspectRatio: size === "tall" ? "3 / 4" : (size === "wide" ? "16 / 10" : "4 / 3"),
        transition: "transform 600ms cubic-bezier(.2,.6,.2,1)"
      }}>
        <img
          src={project.cover}
          alt={project.name}
          loading="lazy"
          style={{
            width: "100%", height: "100%", objectFit: "cover",
            transform: hover ? "scale(1.04)" : "scale(1.0)",
            filter: hover ? "brightness(1.02)" : "brightness(0.96)",
            transition: "transform 1200ms cubic-bezier(.2,.6,.2,1), filter 600ms"
          }}
        />
        {project.visualisation && (
          <div className="mono" style={{
            position: "absolute", top: 14, [ar ? "right" : "left"]: 14,
            background: "rgba(0,0,0,0.55)", color: "var(--paper)",
            padding: "4px 8px", letterSpacing: "0.14em"
          }}>Visualisation</div>
        )}
        {project.outcome && project.outcome.includes("Award") || project.outcome && project.outcome.includes("Commended") || project.outcome && project.outcome.toLowerCase().includes("highly commended") ? (
          <div className="mono" style={{
            position: "absolute", top: 14, [ar ? "left" : "right"]: 14,
            background: "var(--accent)", color: "var(--bg)",
            padding: "4px 8px", letterSpacing: "0.14em"
          }}>Awarded</div>
        ) : null}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 18, gap: 16 }}>
        <div>
          <div className="serif" style={{ fontSize: 24, lineHeight: 1.1 }}>{project.name}</div>
          <div style={{ marginTop: 4, fontSize: 12.5, color: "var(--fg-mute)" }}>{project.location}</div>
        </div>
        <div className="mono" style={{ color: "var(--fg-mute)", whiteSpace: "nowrap" }}>{project.year}</div>
      </div>
      <div className="mono" style={{ marginTop: 6, color: "var(--fg-mute)" }}>{sectorLabel}{scopes ? " · " + scopes : ""}</div>
    </a>
  );
}

// ===== Sectional chip
function FilterChip({ label, active, onClick, accent = false }) {
  return (
    <button
      onClick={onClick}
      className="mono"
      style={{
        padding: "9px 14px",
        border: `1px solid ${active ? "var(--accent)" : "var(--hairline)"}`,
        color: active ? "var(--accent)" : "var(--fg-soft)",
        background: "transparent",
        transition: "all 240ms",
        letterSpacing: "0.12em"
      }}
    >{label}</button>
  );
}

// ===== Scroll-reveal wrapper (lightweight intersection observer)
function Reveal({ children, delay = 0, y = 16, style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      ...style,
      opacity: shown ? 1 : 0,
      transform: shown ? "translateY(0)" : `translateY(${y}px)`,
      transition: `opacity 900ms cubic-bezier(.2,.6,.2,1) ${delay}ms, transform 900ms cubic-bezier(.2,.6,.2,1) ${delay}ms`
    }}>{children}</div>
  );
}

// ===== Quiet number / counter
function StatBlock({ value, label, sub }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 64, lineHeight: 1, letterSpacing: "-0.02em" }}>{value}</div>
      <div className="mono" style={{ marginTop: 10, color: "var(--fg-mute)" }}>{label}</div>
      {sub ? <div style={{ marginTop: 6, fontSize: 12.5, color: "var(--fg-mute)", fontStyle: "italic" }}>{sub}</div> : null}
    </div>
  );
}

// ===== Section header
function SectionHeader({ eyebrow, title, kicker }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, marginBottom: 56, flexWrap: "wrap" }}>
      <div>
        {eyebrow ? <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div> : null}
        <h2 className="serif" style={{ margin: 0, fontSize: "clamp(34px, 4.4vw, 60px)", lineHeight: 1.04 }}>{title}</h2>
      </div>
      {kicker ? <div style={{ maxWidth: 360, color: "var(--fg-soft)", fontSize: 14.5 }}>{kicker}</div> : null}
    </div>
  );
}

// ===== Footer
function Footer({ t, onNavigate, ar = false }) {
  const F = window.XBD.firm;
  return (
    <footer style={{
      borderTop: "1px solid var(--hairline)",
      padding: "80px 36px 32px",
      background: "var(--bg)"
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <div className="nav-logo" style={{ marginBottom: 24 }}><Logo height={36} /></div>
          <div style={{ maxWidth: 320, color: "var(--fg-soft)", fontSize: 14, lineHeight: 1.6 }}>
            {F.tagline}. Founded {F.founded} by {F.founder}. Dubai · London · Kochi.
          </div>
          <div style={{ marginTop: 28 }}>
            <button className="btn-primary" onClick={() => onNavigate("contact")}>{t.cta.start} →</button>
          </div>
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 18, color: "var(--fg-mute)" }}>{t.nav.projects}</div>
          {["Residential","Hospitality","Commercial","Retail","Mixed-use"].map(s =>
            <div key={s} style={{ fontSize: 13.5, color: "var(--fg-soft)", padding: "5px 0", cursor: "pointer" }}
                 onClick={() => onNavigate("projects")}>{s}</div>
          )}
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 18, color: "var(--fg-mute)" }}>{t.nav.studio}</div>
          {["About","Team","Awards","Press","Careers"].map(s =>
            <div key={s} style={{ fontSize: 13.5, color: "var(--fg-soft)", padding: "5px 0", cursor: "pointer" }}
                 onClick={() => onNavigate("studio")}>{s}</div>
          )}
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 18, color: "var(--fg-mute)" }}>{t.nav.contact}</div>
          <div style={{ fontSize: 13.5, color: "var(--fg-soft)", marginBottom: 14 }}>
            {F.addressShort}<br/>
            Dubai, UAE
          </div>
          <a href={`tel:${F.phoneRaw}`} style={{ fontSize: 13.5, color: "var(--fg-soft)", display: "block", marginBottom: 4 }}>{F.phone}</a>
          <a href={`mailto:${F.email}`} style={{ fontSize: 13.5, color: "var(--fg-soft)", display: "block" }}>{F.email}</a>
        </div>
      </div>
      <div style={{ marginTop: 64, paddingTop: 24, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <div className="mono" style={{ color: "var(--fg-mute)" }}>© XBD Collective {new Date().getFullYear()} · 90+ awards · 10 years</div>
        <div className="mono" style={{ color: "var(--fg-mute)" }}>Instagram · LinkedIn · Pinterest · YouTube</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Img, ProjectCard, FilterChip, Reveal, StatBlock, SectionHeader, Footer });
