achraf-portfolio/components/Education.tsx

"use client";

import SafeImage from "./SafeImage";

interface EducationItem {
  degree: string;
  school: string;
  startDate: string;
  endDate: string;
  logo?: string;
}

interface CertificateItem {
  name: string;
  issuer: string;
  date: string;
  credentialId: string;
}

interface EducationProps {
  education: EducationItem[];
  certificates: CertificateItem[];
}

function EduCard({ item }: { item: EducationItem }) {
  return (
    <div
      style={{
        border: "1px solid #1c1f26",
        padding: "1.75rem",
        background: "#0e1014",
        position: "relative",
        overflow: "hidden",
        transition: "border-color 0.3s",
        flex: 1,
        display: "flex",
        flexDirection: "column",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#6b5730")}
      onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
    >
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          width: "40px",
          height: "40px",
          borderLeft: "1px solid #1c1f26",
          borderBottom: "1px solid #1c1f26",
        }}
      />

      <div
        style={{
          fontFamily: "var(--font-jetbrains), monospace",
          fontSize: "0.62rem",
          letterSpacing: "0.12em",
          color: "#c8a96e",
          marginBottom: "1rem",
        }}
      >
        {item.startDate} — {item.endDate}
      </div>

      {item.logo && (
        <div style={{ marginBottom: "1rem" }}>
          <SafeImage
            src={item.logo}
            alt={item.school}
            height={32}
            style={{ height: "32px", objectFit: "contain", filter: "brightness(0.6) grayscale(0.5)" }}
          />
        </div>
      )}

      <h3
        style={{
          fontFamily: "var(--font-bebas), sans-serif",
          fontSize: "1.3rem",
          letterSpacing: "0.04em",
          color: "#e2e4e9",
          lineHeight: 1.2,
          marginBottom: "0.5rem",
        }}
      >
        {item.degree}
      </h3>
      <p
        style={{
          fontFamily: "var(--font-jetbrains), monospace",
          fontSize: "0.85rem",
          color: "#6b7280",
          lineHeight: 1.5,
        }}
      >
        {item.school}
      </p>
    </div>
  );
}

function CertCard({ item, index }: { item: CertificateItem; index: number }) {
  return (
    <div
      style={{
        border: "1px solid #1c1f26",
        background: "#0e1014",
        position: "relative",
        overflow: "hidden",
        transition: "border-color 0.3s, box-shadow 0.3s",
        display: "flex",
        flexDirection: "column",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = "#c8a96e";
        e.currentTarget.style.boxShadow = "0 8px 32px rgba(200, 169, 110, 0.08)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = "#1c1f26";
        e.currentTarget.style.boxShadow = "none";
      }}
    >
      <div
        style={{
          padding: "1.5rem 1.75rem",
          flex: 1,
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1.25rem" }}>
          <div
            style={{
              width: "36px",
              height: "36px",
              borderRadius: "8px",
              background: index === 0
                ? "linear-gradient(135deg, rgba(200,169,110,0.15), rgba(200,169,110,0.05))"
                : "rgba(255,255,255,0.03)",
              border: "1px solid rgba(200,169,110,0.2)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#c8a96e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="8" r="6" />
              <path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11" />
            </svg>
          </div>
          <div
            style={{
              fontFamily: "var(--font-jetbrains), monospace",
              fontSize: "0.58rem",
              letterSpacing: "0.14em",
              color: "#c8a96e",
              textTransform: "uppercase",
            }}
          >
            {item.date}
          </div>
        </div>

        <h3
          style={{
            fontFamily: "var(--font-bebas), sans-serif",
            fontSize: "1.25rem",
            letterSpacing: "0.04em",
            color: "#e2e4e9",
            lineHeight: 1.3,
            marginBottom: "0.5rem",
          }}
        >
          {item.name}
        </h3>

        <p
          style={{
            fontFamily: "var(--font-jetbrains), monospace",
            fontSize: "0.78rem",
            color: "#6b7280",
            lineHeight: 1.5,
            marginBottom: "1.25rem",
          }}
        >
          {item.issuer}
        </p>

        <div
          style={{
            marginTop: "auto",
            paddingTop: "1rem",
            borderTop: "1px solid rgba(255,255,255,0.04)",
            display: "flex",
            alignItems: "center",
            gap: "0.5rem",
          }}
        >
          <div
            style={{
              width: "6px",
              height: "6px",
              borderRadius: "50%",
              background: "#c8a96e",
              opacity: 0.4,
              flexShrink: 0,
            }}
          />
          <span
            style={{
              fontFamily: "var(--font-jetbrains), monospace",
              fontSize: "0.55rem",
              color: "#4a5060",
              letterSpacing: "0.08em",
            }}
          >
            {item.credentialId}
          </span>
        </div>
      </div>
    </div>
  );
}

export default function Education({ education, certificates }: EducationProps) {
  return (
    <section id="education" style={{ padding: "8rem 2rem" }}>
      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
        <div style={{ marginBottom: "4rem" }}>
          <div className="section-label" style={{ marginBottom: "0.75rem" }}>Academic Background</div>
          <h2
            style={{
              fontFamily: "var(--font-bebas), sans-serif",
              fontSize: "clamp(2.5rem, 6vw, 5rem)",
              letterSpacing: "0.04em",
              color: "#e2e4e9",
              lineHeight: 1,
            }}
          >
            Education &amp; Certificates
          </h2>
          <div style={{ width: "48px", height: "1px", background: "#c8a96e", marginTop: "1rem" }} />
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))",
            gap: "1px",
            background: "#1c1f26",
            border: "1px solid #1c1f26",
          }}
        >
          {education.map((item) => (
            <div key={item.degree} style={{ background: "#07080a", display: "flex" }}>
              <EduCard item={item} />
            </div>
          ))}
        </div>

        {certificates && certificates.length > 0 && (
          <div style={{ marginTop: "4rem" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "2rem" }}>
              <div
                style={{
                  fontFamily: "var(--font-jetbrains), monospace",
                  fontSize: "0.62rem",
                  letterSpacing: "0.22em",
                  textTransform: "uppercase",
                  color: "#c8a96e",
                  display: "flex",
                  alignItems: "center",
                  gap: "0.6rem",
                }}
              >
                <span style={{ display: "inline-block", width: "20px", height: "1px", background: "#c8a96e" }} />
                Licenses &amp; Certifications
              </div>
              <div style={{ flex: 1, height: "1px", background: "#1c1f26" }} />
            </div>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 420px), 1fr))",
                gap: "1.25rem",
              }}
            >
              {certificates.map((cert, i) => (
                <CertCard key={cert.credentialId} item={cert} index={i} />
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}