/* Illuma Energy — cards (project, service, insight, team) + slash motif */

// Diagonal slash overlay used on image blocks. corner: which corner the wedge sits.
function Slash({ color = "rgba(112,168,247,0.92)", scrim = true, corner = "bottom-left" }) {
  const wedges = {
    "bottom-left": "polygon(0 38%, 46% 100%, 0 100%)",
    "top-left": "polygon(0 0, 30% 0, 0 46%)",
    "bottom-right": "polygon(100% 40%, 100% 100%, 50% 100%)",
  };
  return (
    <div className="ill-slash">
      {scrim && <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(33,31,33,0) 45%, rgba(33,31,33,0.55) 100%)" }} />}
      <div style={{ position: "absolute", inset: 0, background: color, clipPath: wedges[corner] }} />
      <div style={{ position: "absolute", inset: 0, background: color, opacity: 0.5, clipPath: wedges["top-left"] }} />
    </div>
  );
}

// Project card — matches the RpCard design from the homepage Recent Projects section.
// 1:1 image, blue triangle hover, steel-border pill, same typography.
function ProjectCard({ img, meta, title, detail, href = "projects/molong-battery.html" }) {
  const [hovered, setHovered] = React.useState(false);
  const EASE = "420ms cubic-bezier(0.4,0,0.2,1)";
  return (
    <a href={href}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: "flex", flexDirection: "column", gap: 32,
        padding: "40px",
        textDecoration: "none", color: "var(--color-black)",
        background: "#fff",
        border: "1px solid rgba(33,31,33,0.10)",
      }}>
      {/* Square image frame with triangle overlay */}
      <div style={{ position: "relative", width: "100%", aspectRatio: "1 / 1", overflow: "hidden", background: "#e8e8e8" }}>
        <img src={img} alt={title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <svg viewBox="0 0 500 500" preserveAspectRatio="none" aria-hidden="true" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", pointerEvents: "none",
          transform: hovered ? "translate(0,0)" : "translate(-102%,-102%)",
          transition: `transform ${EASE}`
        }}>
          <path d="M0,0 L0,500 L408,0 Z" fill="#70A8F7" />
        </svg>
        <svg viewBox="0 0 500 500" preserveAspectRatio="none" aria-hidden="true" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", pointerEvents: "none",
          transform: hovered ? "translate(0,0)" : "translate(0,102%)",
          transition: `transform ${EASE}`
        }}>
          <path d="M758.199,560 L807,177 L-133,550.701 Z" fill="#70A8F7" />
        </svg>
      </div>
      {/* Info */}
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <span style={{
          alignSelf: "flex-start", display: "inline-flex", alignItems: "center",
          height: 32, padding: "0 9px",
          background: "rgba(135,163,178,0.10)",
          border: "1px solid var(--color-secondary-steel)",
          fontFamily: "var(--font-primary)", fontWeight: 500,
          fontSize: 16, lineHeight: "22.4px",
          color: "var(--color-black)", whiteSpace: "nowrap"
        }}>{meta}</span>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <h3 style={{
            margin: 0, fontFamily: "var(--font-primary)",
            fontWeight: 400, fontSize: 24, lineHeight: 1.2,
            letterSpacing: "-0.01em", color: "var(--color-black)"
          }}>{title}</h3>
          {detail && <p style={{
            margin: 0, fontFamily: "var(--font-primary)",
            fontSize: 16, lineHeight: 1.4, color: "var(--color-black-70)"
          }}>{detail}</p>}
        </div>
      </div>
    </a>
  );
}

// What we do card (392×288)
function ServiceCard({ title, copy }) {
  return (
    <div className="ill-service-card" style={{ height: "auto", minHeight: 288, background: "#fff", border: "1px solid var(--color-primary)", padding: "52px 24px", display: "flex", flexDirection: "column" }}>
      <h3 className="ill-h3">{title}</h3>
      <p className="ill-body" style={{ marginTop: 20, marginBottom: 0, flex: 1 }}>{copy}</p>
      <a className="ill-link" href="about.html" style={{ marginTop: 20 }}>+ Learn more</a>
    </div>
  );
}

// Insight / news card — matches Design System `preview/comp-insight-card.html`.
// Do not restyle; if the DS card changes, mirror the change here.
function InsightCard({ img, type = "Article", title, copy, href = "article-introducing-illuma.html" }) {
  const [hovered, setHovered] = React.useState(false);
  const trans = "color 280ms cubic-bezier(0.2, 0, 0.1, 1)";
  return (
    <a
      href={href}
      className="ill-insight-card"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        flex: "1 1 0",
        minHeight: 580,
        background: hovered ? "#732654" : "#ffffff",
        display: "flex",
        flexDirection: "column",
        cursor: "pointer",
        transition: "background 280ms cubic-bezier(0.2, 0, 0.1, 1)",
        textDecoration: "none",
        color: "#211F21"
      }}
    >
      {/* Media block */}
      <div style={{ margin: "24px 24px 0 24px", display: "flex", overflow: "hidden" }}>
        {/* Label column */}
        <div style={{ width: 60, flexShrink: 0, display: "flex", alignItems: "flex-start", justifyContent: "center" }}>
          <span style={{
            height: 32, width: 60, display: "flex", alignItems: "center", justifyContent: "center",
            background: "rgba(228, 175, 222, 0.10)", color: hovered ? "#ffffff" : "#732654", fontFamily: "var(--font-primary)",
            fontSize: 16, fontWeight: 500, border: hovered ? "1px solid #ffffff" : "1px solid #E4AFDE",
            borderRadius: 0, lineHeight: 1, flexShrink: 0, transition: trans
          }}>{type}</span>
        </div>
        {/* Image — 3:4 aspect ratio, width driven by flex (no width:100% override) */}
        <div style={{ flex: 1, marginLeft: 29, overflow: "hidden", background: "#e8e8e8", aspectRatio: "7 / 8" }}>
          <img src={img} alt={title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
      {/* Text */}
      <div style={{ padding: "0 24px 24px", marginTop: 68, display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 style={{ margin: "0 0 20px 0", fontFamily: "var(--font-primary)", fontSize: 24, fontWeight: 400, lineHeight: 1.4, color: hovered ? "#ffffff" : "#211F21", transition: trans }}>{title}</h3>
        <p style={{ margin: "0 0 32px 0", fontFamily: "var(--font-primary)", fontSize: 16, fontWeight: 400, lineHeight: 1.4, color: hovered ? "#ffffff" : "rgba(33,31,33,0.7)", flex: 1, transition: trans }}>{copy}</p>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          fontFamily: "var(--font-primary)", fontSize: 16, fontWeight: 500,
          color: hovered ? "#ffffff" : "#732654",
          borderBottom: hovered ? "2px solid #ffffff" : "2px solid #732654",
          height: 22, alignSelf: "flex-start", transition: trans
        }}>
          + Read more
        </span>
      </div>
    </a>
  );
}

// Team card (~461×533)
function TeamCard({ img, name, role }) {
  return (
    <div className="ill-team-card-wrap" style={{ width: 461, flex: "none", display: "flex", flexDirection: "column", gap: 16 }}>
      <div className="ill-imgblock team-card" style={{ height: 420, background: "var(--color-surface-pink)" }}>
        <img src={img} alt={name} style={{ objectPosition: "center top" }} />
      </div>
      <div>
        <div style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{name}</div>
        <div className="ill-small" style={{ color: "var(--color-black-70)", marginTop: 4 }}>{role}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Slash, ProjectCard, ServiceCard, InsightCard, TeamCard });