/* Decorative pieces: abstract blobs, line motifs, project mockups, about diagram. */

const DecorBlob = ({ className = "", style = {}, color = "rgba(232,100,42,0.18)" }) => (
  <svg viewBox="0 0 400 400" className={className} style={style} aria-hidden="true">
    <defs>
      <filter id="blobBlur" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="6" />
      </filter>
    </defs>
    <path
      d="M321 88c34 38 53 92 36 141-17 49-69 92-129 100-60 8-128-19-167-65C22 218 14 154 47 110 80 66 154 43 219 50c30 3 67 -2 102 38z"
      fill={color}
      filter="url(#blobBlur)"
    />
  </svg>
);

/* Flowing line decoration — wandering single-stroke curves. */
const FlowLines = ({ className = "", style = {}, color = "#E8642A", opacity = 0.35 }) => (
  <svg viewBox="0 0 600 800" className={className} style={style} aria-hidden="true" preserveAspectRatio="xMidYMid slice">
    <g fill="none" stroke={color} strokeWidth="1.4" opacity={opacity} strokeLinecap="round">
      <path d="M60 40 C 160 120, 40 200, 140 300 S 30 460, 160 560 S 60 720, 200 780" />
      <path d="M540 20 C 480 130, 580 240, 460 320 S 600 500, 480 600 S 580 720, 440 790" />
      <path d="M120 130 C 200 90, 260 200, 340 160 S 500 240, 540 200" opacity="0.7" />
    </g>
    <g fill={color} opacity={opacity * 0.6}>
      <circle cx="80" cy="220" r="2" />
      <circle cx="160" cy="450" r="2" />
      <circle cx="520" cy="380" r="2" />
      <circle cx="440" cy="120" r="2" />
      <circle cx="300" cy="610" r="2" />
    </g>
  </svg>
);

/* Dot pattern */
const DotGrid = ({ className = "", style = {}, color = "#1F1A14", opacity = 0.15 }) => (
  <svg viewBox="0 0 120 120" className={className} style={style} aria-hidden="true">
    <g fill={color} opacity={opacity}>
      {Array.from({ length: 7 }).map((_, r) =>
        Array.from({ length: 7 }).map((__, c) => (
          <circle key={`${r}-${c}`} cx={10 + c * 18} cy={10 + r * 18} r="1.3" />
        ))
      )}
    </g>
  </svg>
);

/* ===== About diagram: people / business / AI / dev / UX connected to center ===== */
const AboutDiagram = ({ content }) => {
  const cx = 230, cy = 230, r = 165;
  const nodes = content.about.diagram.nodes.map((n) => {
    const rad = (n.angle * Math.PI) / 180;
    return { ...n, x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
  });

  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 460, aspectRatio: "1 / 1", margin: "0 auto" }}>
      <svg viewBox="0 0 460 460" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} aria-hidden="true">
        {/* outer flowy shape */}
        <defs>
          <radialGradient id="aboutGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(232,100,42,0.22)" />
            <stop offset="60%" stopColor="rgba(232,100,42,0.06)" />
            <stop offset="100%" stopColor="rgba(232,100,42,0)" />
          </radialGradient>
        </defs>
        <circle cx={cx} cy={cy} r="210" fill="url(#aboutGlow)" />
        <circle cx={cx} cy={cy} r="160" fill="none" stroke="#1F1A14" strokeOpacity="0.08" strokeDasharray="2 6" />
        <circle cx={cx} cy={cy} r="110" fill="none" stroke="#1F1A14" strokeOpacity="0.06" />

        {/* lines from each node to center */}
        {nodes.map((n, i) => (
          <line
            key={i}
            x1={cx}
            y1={cy}
            x2={n.x}
            y2={n.y}
            stroke="#1F1A14"
            strokeOpacity="0.18"
            strokeWidth="1.4"
          />
        ))}

        {/* center halo */}
        <circle cx={cx} cy={cy} r="58" fill="#FFFFFF" />
        <circle cx={cx} cy={cy} r="58" fill="none" stroke="#E8642A" strokeWidth="1.6" />
      </svg>

      {/* Center chip */}
      <div
        style={{
          position: "absolute",
          left: "50%", top: "50%",
          transform: "translate(-50%, -50%)",
          width: 116, height: 116,
          borderRadius: "50%",
          background: "linear-gradient(180deg, #FFFFFF, #FDF6E9)",
          border: "1px solid var(--line)",
          boxShadow: "0 14px 40px -16px rgba(232,100,42,0.4), inset 0 0 0 6px rgba(232,100,42,0.06)",
          display: "flex", alignItems: "center", justifyContent: "center",
          textAlign: "center", padding: 10,
          fontWeight: 700, fontSize: 14, color: "var(--ink)",
          lineHeight: 1.2,
        }}
      >
        {content.about.diagram.center}
      </div>

      {/* Nodes as floating chips */}
      {nodes.map((n, i) => (
        <div
          key={i}
          style={{
            position: "absolute",
            left: `${(n.x / 460) * 100}%`,
            top: `${(n.y / 460) * 100}%`,
            transform: "translate(-50%, -50%)",
            display: "flex", alignItems: "center", gap: 8,
            background: "#FFFFFF",
            border: "1px solid var(--line-soft)",
            borderRadius: 999,
            padding: "8px 14px 8px 10px",
            boxShadow: "var(--shadow-card)",
            fontSize: 13.5, fontWeight: 600, color: "var(--ink)",
            whiteSpace: "nowrap",
          }}
        >
          <span
            style={{
              width: 26, height: 26, borderRadius: "50%",
              background: i % 2 === 0 ? "var(--coral-soft)" : "var(--teal-soft)",
              color: i % 2 === 0 ? "var(--coral-deep)" : "var(--teal)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
          >
            <Icon name={n.icon} size={15} stroke={2} />
          </span>
          {n.label}
        </div>
      ))}
    </div>
  );
};

/* ===== Project mockups — abstract, anonymous interface previews ===== */

const MuseumMockup = () => (
  <svg viewBox="0 0 400 260" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
    {/* gallery wall gradient */}
    <defs>
      <linearGradient id="museumBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#2A2018" />
        <stop offset="100%" stopColor="#0F0B07" />
      </linearGradient>
      <linearGradient id="museumFloor" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#2A211A" />
        <stop offset="100%" stopColor="#1A130E" />
      </linearGradient>
      <radialGradient id="museumSpot" cx="50%" cy="20%" r="60%">
        <stop offset="0%" stopColor="rgba(255,228,180,0.35)" />
        <stop offset="60%" stopColor="rgba(255,228,180,0.05)" />
        <stop offset="100%" stopColor="rgba(255,228,180,0)" />
      </radialGradient>
    </defs>
    <rect width="400" height="180" fill="url(#museumBg)" />
    <rect y="180" width="400" height="80" fill="url(#museumFloor)" />
    {/* spotlights */}
    <rect width="400" height="260" fill="url(#museumSpot)" />
    {/* paintings */}
    <g>
      <rect x="50" y="55" width="68" height="90" fill="#3A2B1F" stroke="#E8C99B" strokeWidth="2" />
      <rect x="56" y="61" width="56" height="78" fill="#7C6A57" />
      <circle cx="84" cy="100" r="14" fill="#D9B98F" />
      <rect x="68" y="116" width="32" height="6" fill="#5C4A38" />
    </g>
    <g>
      <rect x="160" y="40" width="80" height="110" fill="#3A2B1F" stroke="#E8C99B" strokeWidth="2" />
      <rect x="166" y="46" width="68" height="98" fill="#A38358" />
      <path d="M170 130 L188 95 L210 115 L226 90 L226 144 L170 144 Z" fill="#5C4A38" />
      <circle cx="216" cy="70" r="8" fill="#E8C99B" />
    </g>
    <g>
      <rect x="280" y="55" width="68" height="90" fill="#3A2B1F" stroke="#E8C99B" strokeWidth="2" />
      <rect x="286" y="61" width="56" height="78" fill="#574539" />
      <rect x="296" y="80" width="36" height="40" fill="#B89570" />
    </g>
    {/* floor shadow */}
    <ellipse cx="200" cy="200" rx="160" ry="14" fill="rgba(0,0,0,0.4)" />
    {/* UI chrome */}
    <g>
      <rect x="14" y="14" width="120" height="28" rx="14" fill="rgba(255,255,255,0.92)" />
      <circle cx="28" cy="28" r="4" fill="#E8642A" />
      <rect x="38" y="24" width="60" height="3" rx="1.5" fill="#1F1A14" opacity="0.7" />
      <rect x="38" y="32" width="40" height="3" rx="1.5" fill="#1F1A14" opacity="0.4" />
    </g>
    <g>
      <rect x="266" y="14" width="120" height="28" rx="14" fill="rgba(255,255,255,0.92)" />
      <rect x="276" y="22" width="20" height="12" rx="2" fill="#1F4E5F" opacity="0.2" />
      <text x="302" y="32" fontSize="11" fontFamily="Manrope, sans-serif" fontWeight="600" fill="#1F1A14">EN · HE · FR</text>
    </g>
    {/* room nav */}
    <g transform="translate(160 215)">
      <rect width="80" height="28" rx="14" fill="rgba(255,255,255,0.95)" />
      <circle cx="14" cy="14" r="4" fill="#E8642A" />
      <circle cx="32" cy="14" r="4" fill="#1F1A14" opacity="0.2" />
      <circle cx="50" cy="14" r="4" fill="#1F1A14" opacity="0.2" />
      <circle cx="68" cy="14" r="4" fill="#1F1A14" opacity="0.2" />
    </g>
  </svg>
);

const DashboardMockup = () => (
  <svg viewBox="0 0 400 260" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="dashBg" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#FBF6EE" />
        <stop offset="100%" stopColor="#F0E6D3" />
      </linearGradient>
    </defs>
    <rect width="400" height="260" fill="url(#dashBg)" />
    {/* sidebar */}
    <rect x="0" y="0" width="64" height="260" fill="#1F1A14" />
    <circle cx="32" cy="26" r="8" fill="#E8642A" />
    {[1,2,3,4,5].map(i => (
      <rect key={i} x="16" y={50 + i*22} width="32" height="3" rx="1.5" fill="#FFFFFF" opacity={i === 2 ? 1 : 0.3} />
    ))}
    {/* topbar */}
    <rect x="64" y="0" width="336" height="34" fill="#FFFFFF" />
    <rect x="80" y="12" width="120" height="10" rx="5" fill="#1F1A14" opacity="0.8" />
    <circle cx="380" cy="17" r="8" fill="#E8642A" />
    {/* KPI cards */}
    {[0,1,2].map(i => (
      <g key={i} transform={`translate(${80 + i*108} 50)`}>
        <rect width="92" height="58" rx="8" fill="#FFFFFF" stroke="#E6DBC6" />
        <rect x="10" y="10" width="40" height="6" rx="3" fill="#1F1A14" opacity="0.35" />
        <rect x="10" y="22" width="56" height="14" rx="2" fill="#1F1A14" />
        <rect x="10" y="42" width="32" height="4" rx="2" fill={i === 1 ? "#E8642A" : "#1F4E5F"} opacity="0.7" />
      </g>
    ))}
    {/* chart */}
    <g transform="translate(80 122)">
      <rect width="200" height="120" rx="8" fill="#FFFFFF" stroke="#E6DBC6" />
      <rect x="12" y="12" width="60" height="6" rx="3" fill="#1F1A14" opacity="0.5" />
      {/* bars */}
      {[40, 22, 55, 30, 60, 38, 70].map((h, i) => (
        <rect key={i} x={20 + i*24} y={104 - h} width="14" height={h} rx="3" fill={i === 4 ? "#E8642A" : "#1F4E5F"} opacity={i === 4 ? 1 : 0.7} />
      ))}
    </g>
    {/* integrations list */}
    <g transform="translate(292 122)">
      <rect width="92" height="120" rx="8" fill="#FFFFFF" stroke="#E6DBC6" />
      {[0,1,2,3].map(i => (
        <g key={i} transform={`translate(8 ${12 + i*26})`}>
          <rect width="16" height="16" rx="4" fill={i % 2 === 0 ? "#E8642A" : "#1F4E5F"} opacity="0.15" />
          <circle cx="8" cy="8" r="3.5" fill={i % 2 === 0 ? "#E8642A" : "#1F4E5F"} />
          <rect x="22" y="3" width="48" height="5" rx="2.5" fill="#1F1A14" opacity="0.7" />
          <rect x="22" y="11" width="32" height="3" rx="1.5" fill="#1F1A14" opacity="0.3" />
        </g>
      ))}
    </g>
  </svg>
);

const StreamMockup = () => (
  <svg viewBox="0 0 400 260" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="streamBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#0E1F26" />
        <stop offset="100%" stopColor="#031018" />
      </linearGradient>
      <linearGradient id="streamScreen" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#1F4E5F" />
        <stop offset="100%" stopColor="#0A2731" />
      </linearGradient>
    </defs>
    <rect width="400" height="260" fill="url(#streamBg)" />
    {/* player */}
    <rect x="32" y="40" width="240" height="160" rx="10" fill="url(#streamScreen)" />
    {/* stage with figures */}
    <ellipse cx="152" cy="170" rx="90" ry="6" fill="rgba(0,0,0,0.4)" />
    <g opacity="0.9">
      <rect x="130" y="100" width="44" height="56" rx="6" fill="#E8642A" opacity="0.9" />
      <circle cx="152" cy="92" r="14" fill="#F2A47A" />
      <rect x="98" y="120" width="20" height="36" rx="4" fill="#1F1A14" opacity="0.6" />
      <rect x="186" y="120" width="20" height="36" rx="4" fill="#1F1A14" opacity="0.6" />
    </g>
    {/* light beams */}
    <path d="M152 50 L100 100 L80 96 Z" fill="#E8642A" opacity="0.18" />
    <path d="M152 50 L204 100 L224 96 Z" fill="#E8642A" opacity="0.18" />
    {/* LIVE chip */}
    <g transform="translate(48 56)">
      <rect width="56" height="22" rx="11" fill="#E8642A" />
      <circle cx="14" cy="11" r="4" fill="#FFFFFF" />
      <text x="24" y="15" fontSize="10" fontFamily="Manrope, sans-serif" fontWeight="700" fill="#FFFFFF">LIVE</text>
    </g>
    {/* timeline */}
    <g transform="translate(48 188)">
      <rect width="208" height="4" rx="2" fill="rgba(255,255,255,0.2)" />
      <rect width="118" height="4" rx="2" fill="#E8642A" />
      <circle cx="118" cy="2" r="5" fill="#FFFFFF" />
    </g>
    {/* sidebar chat */}
    <rect x="288" y="40" width="80" height="160" rx="10" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)" />
    <rect x="296" y="50" width="40" height="5" rx="2.5" fill="#FFFFFF" opacity="0.6" />
    {[0,1,2,3,4].map(i => (
      <g key={i} transform={`translate(296 ${66 + i*24})`}>
        <circle cx="6" cy="6" r="5" fill={i % 2 === 0 ? "#E8642A" : "#F2A47A"} />
        <rect x="16" y="2" width="50" height="3" rx="1.5" fill="#FFFFFF" opacity="0.7" />
        <rect x="16" y="8" width="36" height="3" rx="1.5" fill="#FFFFFF" opacity="0.3" />
      </g>
    ))}
    {/* bottom badges */}
    <g transform="translate(48 220)">
      <rect width="64" height="22" rx="11" fill="rgba(255,255,255,0.92)" />
      <text x="14" y="15" fontSize="10" fontFamily="Manrope, sans-serif" fontWeight="600" fill="#1F1A14">12,408</text>
    </g>
  </svg>
);

const PROJECT_IMAGES = {
  museum:    "images/projects/3d-museum.webp",
  dashboard: "images/projects/Insurance-Integration-Manager.webp",
  stream:    "images/projects/Live_Streaming_Event_Platform.webp",
};

const ProjectMockup = ({ name }) => {
  const src = PROJECT_IMAGES[name];
  if (src) return (
    <img src={src} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />
  );
  if (name === "museum") return <MuseumMockup />;
  if (name === "dashboard") return <DashboardMockup />;
  if (name === "stream") return <StreamMockup />;
  return null;
};

/* ===== Portrait stylized placeholder when no image dropped =====
   Draws a warm-shaped figure silhouette behind a circular crop. */
const PortraitPlaceholder = () => (
  <svg viewBox="0 0 400 460" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="portraitBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#2A211A" />
        <stop offset="100%" stopColor="#16100B" />
      </linearGradient>
      <radialGradient id="portraitGlow" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stopColor="rgba(255,200,150,0.35)" />
        <stop offset="100%" stopColor="rgba(255,200,150,0)" />
      </radialGradient>
    </defs>
    <rect width="400" height="460" fill="url(#portraitBg)" />
    <rect width="400" height="460" fill="url(#portraitGlow)" />
    {/* figure silhouette */}
    <g>
      <ellipse cx="200" cy="180" rx="78" ry="92" fill="#3A2B1F" />
      <path d="M60 460 C 80 350 130 300 200 300 C 270 300 320 350 340 460 Z" fill="#3A2B1F" />
      {/* shoulders */}
      <path d="M100 420 Q 200 380 300 420 L 300 460 L 100 460 Z" fill="#2A1F16" />
    </g>
    {/* subtle key line */}
    <path d="M260 130 Q 290 200 270 290" stroke="rgba(232,100,42,0.4)" strokeWidth="1.5" fill="none" />
    <text x="200" y="430" textAnchor="middle" fontSize="11" fontFamily="Manrope" fill="rgba(255,255,255,0.45)" letterSpacing="0.2em">
      DROP YOUR PORTRAIT
    </text>
  </svg>
);

Object.assign(window, {
  DecorBlob, FlowLines, DotGrid, AboutDiagram, ProjectMockup, PortraitPlaceholder,
});