// Shared components for Cerebrum site

// ---------- Portrait placeholder ----------
// Editorial pastel block with large numeral + initials. Mimics a half-tone portrait.
function Portrait({ tone = "pink", num, name, ratio = "3/4", small = false }) {
  const colors = {
    pink:   "#fd99c6",
    yellow: "#fffaa4",
    blue:   "#c7e7f5",
    grey:   "#e4e4e4",
  };
  const initials = (name || "").split(" ").map(w => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
  return (
    <div className="cb-portrait" style={{
      background: colors[tone] || colors.pink,
      aspectRatio: ratio,
      position: "relative",
      overflow: "hidden",
      borderBottom: "1px solid #000",
    }}>
      {/* Concentric arcs as editorial ornament */}
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMid slice" style={{position:"absolute",inset:0,width:"100%",height:"100%",mixBlendMode:"multiply",opacity:0.55}}>
        <defs>
          <pattern id={`dots-${num}-${tone}`} x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.6" fill="#000" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="130" fill={`url(#dots-${num}-${tone})`} opacity="0.35" />
        <circle cx="50" cy="78" r="32" fill="none" stroke="#000" strokeWidth="0.6" opacity="0.6" />
        <circle cx="50" cy="78" r="22" fill="none" stroke="#000" strokeWidth="0.6" opacity="0.6" />
        <circle cx="50" cy="78" r="12" fill="none" stroke="#000" strokeWidth="0.6" opacity="0.6" />
        {/* shoulder line */}
        <path d="M 8 130 C 22 100, 38 92, 50 92 C 62 92, 78 100, 92 130" fill="none" stroke="#000" strokeWidth="0.8" opacity="0.65" />
        {/* head */}
        <ellipse cx="50" cy="62" rx="18" ry="22" fill="none" stroke="#000" strokeWidth="0.8" opacity="0.7" />
      </svg>
      {/* Index number top-left */}
      {num && (
        <div style={{
          position: "absolute", top: small ? 6 : 10, left: small ? 8 : 12,
          fontFamily: "'TT Bells', serif",
          fontSize: small ? 22 : 38,
          lineHeight: 0.9,
          color: "#000",
          letterSpacing: "-0.02em",
        }}>{num}</div>
      )}
      {/* Initials huge bottom-right */}
      {initials && (
        <div style={{
          position: "absolute", right: small ? 8 : 14, bottom: small ? 4 : 8,
          fontFamily: "'TT Bells', serif",
          fontSize: small ? 38 : 84,
          lineHeight: 0.85,
          color: "#000",
          letterSpacing: "-0.06em",
          mixBlendMode: "multiply",
        }}>{initials}</div>
      )}
    </div>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, style }) {
  return <div className="cb-eyebrow" style={{
    fontFamily: "'Montserrat', sans-serif",
    fontSize: 11, fontWeight: 600,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "#000",
    ...style,
  }}>{children}</div>;
}

// ---------- Tag / chip ----------
function Tag({ children, active, onClick, style }) {
  return (
    <button onClick={onClick} className="cb-tag" style={{
      fontFamily: "'Montserrat', sans-serif",
      fontSize: 11, fontWeight: 600,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
      padding: "7px 14px",
      border: "1px solid #000",
      borderRadius: 999,
      background: active ? "#000" : "#fff",
      color: active ? "#fff" : "#000",
      cursor: "pointer",
      transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
      ...style,
    }}>{children}</button>
  );
}

// ---------- Marquee strip (used at top of pages) ----------
function Marquee({ items, bg = "#000", fg = "#fff" }) {
  const repeated = [...items, ...items, ...items];
  return (
    <div style={{
      background: bg, color: fg,
      borderTop: "1px solid #000", borderBottom: "1px solid #000",
      overflow: "hidden", whiteSpace: "nowrap",
      padding: "10px 0",
    }}>
      <div className="cb-marquee" style={{ display: "inline-block", animation: "cb-scroll 40s linear infinite" }}>
        {repeated.map((item, i) => (
          <span key={i} style={{
            fontFamily: "'Montserrat', sans-serif",
            fontSize: 11, fontWeight: 600,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            padding: "0 22px",
          }}>{item} <span style={{opacity:0.5, padding:"0 6px"}}>·</span></span>
        ))}
      </div>
    </div>
  );
}

// ---------- Top nav (masthead) ----------
function Nav({ current, onNav }) {
  const items = [
    { id: "home",      label: "índice" },
    { id: "directory", label: "directorio" },
    { id: "about",     label: "estudio" },
    { id: "contact",   label: "aplicar" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "#fff" }}>
      <nav style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "16px 32px", borderBottom: "1px solid #000",
      }}>
        <button onClick={() => onNav("home")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 14 }}>
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || "assets/cerebrum-logo.png"} alt="cerebrum" style={{ height: 36, display: "block" }} />
        </button>
        <div style={{ display: "flex", gap: 28 }}>
          {items.map(it => (
            <button key={it.id} onClick={() => onNav(it.id)} style={{
              background: "none", border: "none", padding: "4px 0", cursor: "pointer",
              fontFamily: "'Montserrat', sans-serif",
              fontSize: 11, fontWeight: 600,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "#000",
              borderBottom: current === it.id ? "2px solid #000" : "2px solid transparent",
              transition: "opacity 120ms cubic-bezier(.2,.7,.2,1)",
            }}
            onMouseEnter={e => e.currentTarget.style.opacity = 0.6}
            onMouseLeave={e => e.currentTarget.style.opacity = 1}
            >{it.label}</button>
          ))}
        </div>
      </nav>
      <div style={{
        background: "#000", color: "#fff", padding: "8px 32px",
        display: "flex", justifyContent: "space-between",
        fontFamily: "'Montserrat', sans-serif",
        fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase",
      }}>
        <span>edición 03 · primavera 2026</span>
        <span style={{opacity:0.7}}>directorio creativo · cultura digital</span>
        <span>cdmx · 19.43° n</span>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer({ onNav }) {
  return (
    <footer style={{ borderTop: "1px solid #000", background: "#fff", marginTop: 96 }}>
      <div style={{ padding: "48px 32px 24px", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32 }}>
        <div>
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || "assets/cerebrum-logo.png"} alt="cerebrum — directorio creativo" style={{ height: 96, display: "block" }} />
          <div style={{ marginTop: 16, fontFamily: "'Montserrat', sans-serif", fontSize: 12, color: "#555", maxWidth: 380, lineHeight: 1.6 }}>
            directorio creativo y estudio de dirección visual enfocado en cultura digital. cdmx — 2026.
          </div>
        </div>
        <FooterCol title="navegación" links={[
          { label: "índice", id: "home" },
          { label: "directorio", id: "directory" },
          { label: "estudio", id: "about" },
          { label: "aplicar", id: "contact" },
        ]} onNav={onNav} />
        <FooterCol title="categorías" links={[
          { label: "diseño", id: "directory" },
          { label: "videografía", id: "directory" },
          { label: "fotografía", id: "directory" },
          { label: "styling", id: "directory" },
        ]} onNav={onNav} />
        <FooterCol title="contacto" links={[
          { label: "hola@cerebrum.mx", href: "mailto:hola@cerebrum.mx" },
          { label: "@cerebrum.dc", href: "#" },
          { label: "boletín", href: "#" },
        ]} />
      </div>
      <div style={{ borderTop: "1px solid #000", padding: "14px 32px", display: "flex", justifyContent: "space-between", fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "#000" }}>
        <span>© cerebrum 2026 — todos los derechos</span>
        <span>diseño · estudio cerebrum</span>
        <span>cdmx</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, links, onNav }) {
  return (
    <div>
      <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", paddingBottom: 10, borderBottom: "1px solid #000", marginBottom: 14 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map((l, i) => (
          <a key={i}
             href={l.href || "#"}
             onClick={l.id ? (e) => { e.preventDefault(); onNav(l.id); } : undefined}
             style={{
               fontFamily: "'Montserrat', sans-serif",
               fontSize: 13, color: "#000",
               textDecoration: "none",
               borderBottom: "1px solid transparent",
               width: "fit-content",
             }}
             onMouseEnter={e => e.currentTarget.style.opacity = 0.6}
             onMouseLeave={e => e.currentTarget.style.opacity = 1}
          >{l.label}</a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Portrait, Eyebrow, Tag, Marquee, Nav, Footer });