// Projects section — featured cards
function Projects({ t, lang }) {
  return (
    <section id="projects" className="section" style={{
      background: "var(--ink)",
      color: "var(--canvas)",
    }}>
      <div className="shell">
        <Reveal>
          <Eyebrow color="var(--orange-soft)">{t.projects.eyebrow}</Eyebrow>
        </Reveal>

        <Reveal delay={80}>
          <h2 style={{
            marginTop: 24,
            fontSize: "clamp(44px, 6vw, 76px)",
            lineHeight: 1.0,
            letterSpacing: "-0.025em",
            fontWeight: 500,
            color: "var(--canvas)",
            maxWidth: 16 + "ch",
          }}>
            {t.projects.title}{" "}
            <span className="serif-italic" style={{ color: "var(--orange-soft)" }}>{t.projects.titleItalic}</span>
            {t.projects.titleEnd}
          </h2>
        </Reveal>

        <div style={{
          marginTop: 80,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 28,
        }} className="proj-grid">
          {PROJECTS.map((p, i) => (
            <ProjectCard key={p.id} p={p} lang={lang} t={t} delay={i * 100} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) { .proj-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 640px)  { .proj-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 640px)  { .project-card { padding: 18px !important; } }
      `}</style>
    </section>
  );
}

function ProjectCard({ p, lang, t, delay }) {
  const desc = lang === "no" ? p.descNo : p.descEn;
  return (
    <Reveal delay={delay}>
      <a className="project-card"
        href={p.url || "#"} target={p.url ? "_blank" : undefined} rel={p.url ? "noopener noreferrer" : undefined}
        onClick={(e) => { if (!p.url) e.preventDefault(); }}
        style={{
          display: "block",
          padding: 24,
          borderWidth: 1,
          borderStyle: "solid",
          borderRadius: 12,
          height: "100%",
          transition: "background 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease)",
        }}>
        <ProjectVisual p={p} />

        <div style={{
          display: "flex", alignItems: "baseline", justifyContent: "space-between",
          marginTop: 20, marginBottom: 6,
        }}>
          <div style={{
            fontSize: 22, fontWeight: 500, color: "var(--canvas)",
            letterSpacing: "-0.01em",
          }}>{p.name}</div>
          <div style={{
            fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "rgba(255,255,255,0.45)",
          }}>{p.kind[lang]}</div>
        </div>
        <p style={{
          fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.65)",
        }}>{desc}</p>

        <div style={{
          marginTop: 20, paddingTop: 16,
          borderTop: "1px solid rgba(255,255,255,0.10)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          fontSize: 12, color: "var(--orange-soft)",
        }}>
          <span>{t.projects.visit} →</span>
          <span style={{
            display: "inline-block", width: 8, height: 8, borderRadius: "50%",
            background: p.swatch,
          }} />
        </div>
      </a>
    </Reveal>
  );
}

function ProjectVisual({ p }) {
  // Each project gets a generative SVG placeholder
  return (
    <div style={{
      aspectRatio: "5/4",
      borderRadius: 8,
      background: `linear-gradient(135deg, ${p.swatch}22, ${p.swatch}05)`,
      border: `1px solid ${p.swatch}33`,
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        {p.pattern === "dots" && <DotsPattern color={p.swatch} />}
        {p.pattern === "helix" && <HelixPattern color={p.swatch} />}
        {p.pattern === "lines" && <LinesPattern color={p.swatch} />}
      </div>
      <div style={{
        position: "absolute", top: 12, left: 14,
        fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.55)",
      }}>{p.id}</div>
    </div>
  );
}

function DotsPattern({ color }) {
  return (
    <svg width="180" height="140" viewBox="0 0 180 140" fill="none">
      {[...Array(8)].map((_, r) =>
        [...Array(10)].map((_, c) => {
          const cx = 18 + c * 16;
          const cy = 16 + r * 14;
          const d = Math.hypot(cx - 90, cy - 70);
          const op = Math.max(0.1, 1 - d / 90);
          const rad = 1.5 + (1 - d / 100) * 3;
          return <circle key={`${r}-${c}`} cx={cx} cy={cy} r={Math.max(0.8, rad)} fill={color} opacity={op} />;
        })
      )}
    </svg>
  );
}

function HelixPattern({ color }) {
  const turns = 3;
  const w = 200, h = 130;
  const top = [];
  const bot = [];
  for (let i = 0; i <= 60; i++) {
    const x = (i / 60) * w;
    const y1 = h / 2 + Math.sin((i / 60) * turns * Math.PI * 2) * 38;
    const y2 = h / 2 + Math.sin((i / 60) * turns * Math.PI * 2 + Math.PI) * 38;
    top.push(`${x},${y1}`);
    bot.push(`${x},${y2}`);
  }
  return (
    <svg width="200" height="130" viewBox="0 0 200 130" fill="none">
      <polyline points={top.join(" ")} stroke={color} strokeWidth="1.4" fill="none" opacity="0.75" />
      <polyline points={bot.join(" ")} stroke={color} strokeWidth="1.4" fill="none" opacity="0.75" />
      {[...Array(13)].map((_, i) => {
        const x = (i / 12) * w;
        const y1 = h / 2 + Math.sin((i / 12) * turns * Math.PI * 2) * 38;
        const y2 = h / 2 + Math.sin((i / 12) * turns * Math.PI * 2 + Math.PI) * 38;
        return <line key={i} x1={x} y1={y1} x2={x} y2={y2} stroke={color} strokeWidth="0.8" opacity="0.4" />;
      })}
    </svg>
  );
}

function LinesPattern({ color }) {
  return (
    <svg width="180" height="130" viewBox="0 0 180 130" fill="none">
      {[...Array(10)].map((_, i) => (
        <line key={i}
          x1="20" y1={20 + i * 9}
          x2={170 - i * 8} y2={20 + i * 9}
          stroke={color} strokeWidth="1" opacity={0.35 + i * 0.06} />
      ))}
      <circle cx="155" cy="100" r="14" fill={color} opacity="0.7" />
    </svg>
  );
}

window.Projects = Projects;