import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
import { FiBriefcase, FiCalendar, FiMapPin } from 'react-icons/fi'

const EXPERIENCES = [
  {
    company: 'BAAR Technologies',
    role: 'Jr. Automation Engineer',
    type: 'Full-time',
    period: 'Feb 2026 - Mar 2026 · 2 mos',
    location: 'Kolkata, West Bengal, India · On-site',
    accent: '#6366f1',
    highlights: [
      'Built and optimized automation-driven backend systems using Python and Django, streamlining workflows and reducing manual effort.',
      'Designed and managed high-performance databases with Microsoft SQL Server, leveraging ORM for efficient data handling.',
      'Developed scalable APIs, optimized SQL queries and stored procedures, and ensured data integrity across systems.',
      'Collaborated with cross-functional teams to deliver reliable automation solutions while debugging and enhancing system performance.',
      'Gained strong expertise in backend engineering, database optimization, and process automation.',
    ],
    skills: ['Python', 'Django', 'Databases', 'SQL Server Management Studio', 'ORM', 'Microsoft SQL Server'],
  },
]

export default function Experience() {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.15 })

  return (
    <section id="experience" className="section" style={{ background: 'rgba(99,102,241,0.015)' }}>
      <div className="container" ref={ref}>
        <motion.div className="section-header"
          initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55 }}>
          <div className="section-tag"><FiBriefcase size={12} /> Experience</div>
          <h2 className="section-title">Work Experience</h2>
          <p className="section-subtitle">Professional experience building real-world backend and AI automation systems.</p>
        </motion.div>

        <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
          {EXPERIENCES.map((exp, i) => (
            <motion.div
              key={exp.company}
              className="glass-card"
              style={{ padding: '2rem', position: 'relative', overflow: 'hidden' }}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.65, delay: i * 0.12, ease: [0.22, 1, 0.36, 1] }}
              whileHover={{ y: -4 }}
            >
              <div style={{
                position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
                background: `linear-gradient(to bottom, ${exp.accent}, transparent)`,
                borderRadius: '24px 0 0 24px',
              }} />
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, ${exp.accent}50, transparent)` }} />

              <div style={{ paddingLeft: '0.5rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '0.5rem' }}>
                  <div>
                    <h3 style={{ fontSize: '1.2rem', fontWeight: 700, color: 'var(--text-primary)', marginBottom: 4 }}>
                      {exp.role}
                    </h3>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: '0.95rem', fontWeight: 600, color: exp.accent }}>{exp.company}</span>
                      <span style={{
                        padding: '2px 10px', borderRadius: 999, fontSize: '0.7rem', fontWeight: 700,
                        background: `${exp.accent}18`, border: `1px solid ${exp.accent}30`,
                        color: exp.accent, letterSpacing: '0.05em',
                      }}>{exp.type}</span>
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: '0.82rem', color: 'var(--text-muted)' }}>
                      <FiCalendar size={12} /> {exp.period}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: '0.82rem', color: 'var(--text-muted)' }}>
                      <FiMapPin size={12} /> {exp.location}
                    </div>
                  </div>
                </div>

                <ul style={{ listStyle: 'none', padding: 0, margin: '1.25rem 0 1.25rem', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {exp.highlights.map((h, j) => (
                    <li key={j} style={{ display: 'flex', gap: 10, fontSize: '0.875rem', color: 'var(--text-secondary)', lineHeight: 1.65 }}>
                      <span style={{ color: exp.accent, flexShrink: 0, marginTop: 2 }}>▸</span>
                      {h}
                    </li>
                  ))}
                </ul>

                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {exp.skills.map(s => (
                    <span key={s} className="tech-tag" style={{
                      background: `${exp.accent}12`, borderColor: `${exp.accent}25`,
                      color: exp.accent, fontSize: '0.72rem',
                    }}>{s}</span>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}