"use client";

import { useEffect, useRef } from "react";
import SafeImage from "./SafeImage";

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

interface EducationProps {
  education: EducationItem[];
}

function EduCard({ item, index }: { item: EducationItem; index: number }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => el.classList.add("visible"), index * 100);
          obs.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [index]);

  return (
    <div
      ref={ref}
      className="reveal"
      style={{
        border: "1px solid #1c1f26",
        padding: "1.75rem",
        background: "#0e1014",
        position: "relative",
        overflow: "hidden",
        transition: "border-color 0.3s",
      }}
      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>
  );
}

export default function Education({ education }: EducationProps) {
  const headingRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = headingRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) { el.classList.add("visible"); obs.disconnect(); }
      },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="education" style={{ padding: "8rem 2rem" }}>
      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
        <div ref={headingRef} className="reveal" 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-fill, minmax(min(100%, 340px), 1fr))",
            gap: "1px",
            background: "#1c1f26",
            border: "1px solid #1c1f26",
          }}
        >
          {education.map((item, i) => (
            <div key={item.degree} style={{ background: "#07080a" }}>
              <EduCard item={item} index={i} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}