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")}
    >
      {/* Corner accent */}
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          width: "40px",
          height: "40px",
          borderLeft: "1px solid #1c1f26",
          borderBottom: "1px solid #1c1f26",
        }}
      />

      <div
        className="font-mono"
        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
        className="font-display"
        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-lora), serif",
          fontSize: "0.85rem",
          color: "#6b7280",
          lineHeight: 1.5,
        }}
      >
        {item.school}
      </p>
    </div>
  );
}

function CertCard({ item }: { item: CertificateItem }) {
  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 = "#c8a96e")}
      onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
    >
      <div
        className="font-mono"
        style={{
          fontFamily: "var(--font-jetbrains), monospace",
          fontSize: "0.62rem",
          letterSpacing: "0.12em",
          color: "#c8a96e",
          marginBottom: "1rem",
        }}
      >
        {item.date}
      </div>

      <h3
        className="font-display"
        style={{
          fontFamily: "var(--font-bebas), sans-serif",
          fontSize: "1.15rem",
          letterSpacing: "0.04em",
          color: "#e2e4e9",
          lineHeight: 1.3,
          marginBottom: "0.5rem",
        }}
      >
        {item.name}
      </h3>
      <p
        style={{
          fontFamily: "var(--font-lora), serif",
          fontSize: "0.85rem",
          color: "#6b7280",
          lineHeight: 1.5,
          marginBottom: "1rem",
        }}
      >
        {item.issuer}
      </p>
      
      <div style={{
        fontFamily: "var(--font-jetbrains), monospace",
        fontSize: "0.55rem",
        color: "#4a5060",
        letterSpacing: "0.12em",
        textTransform: "uppercase",
        marginTop: "auto"
      }}>
        ID: {item.credentialId}
      </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
            className="font-display"
            style={{
              fontFamily: "var(--font-bebas), sans-serif",
              fontSize: "clamp(2.5rem, 6vw, 5rem)",
              letterSpacing: "0.04em",
              color: "#e2e4e9",
              lineHeight: 1,
            }}
          >
            Education
          </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: "6rem" }}>
            <div style={{ marginBottom: "3rem" }}>
              <div className="section-label" style={{ marginBottom: "0.75rem" }}>Licenses & Certifications</div>
              <h3
                className="font-display"
                style={{
                  fontFamily: "var(--font-bebas), sans-serif",
                  fontSize: "clamp(2rem, 4vw, 3.5rem)",
                  letterSpacing: "0.04em",
                  color: "#e2e4e9",
                  lineHeight: 1,
                }}
              >
                Certificates
              </h3>
              <div style={{ width: "32px", 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",
              }}
            >
              {certificates.map((cert) => (
                <div key={cert.name} style={{ background: "#07080a", display: "flex" }}>
                  <CertCard item={cert} />
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}