"use client";

import React from "react";
import { Linkedin } from "lucide-react";
import { Reveal } from "@/components/Reveal";
import { TechBackground } from "@/components/TechBackground";

interface Person {
  name: string;
  role: string;
  linkedin: string;
}

interface AboutIntroProps {
  paragraphs: string[];
  team: Person[];
}

export function AboutIntro({ paragraphs, team }: AboutIntroProps) {
  return (
    <section className="bg-white relative overflow-hidden">
      <TechBackground />
      <div className="container-custom relative z-10">
        <div className="section-number">02</div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <Reveal direction="right">
            <div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
              <div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
              {paragraphs.map((p, i) => (
                <p key={i}>{p}</p>
              ))}
            </div>
          </Reveal>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            {team.map((person, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
                  <div className="flex justify-between items-start mb-4 relative z-10">
                    <h2 className="text-xl font-bold text-primary">
                      {person.name}
                    </h2>
                    <a
                      href={person.linkedin}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-[#0077b5] hover:scale-110 transition-transform"
                      aria-label={`LinkedIn Profile of ${person.name}`}
                    >
                      <Linkedin size={20} />
                    </a>
                  </div>
                  <p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">
                    {person.role}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}