import React, { useCallback } from "react";
import Particles from "react-particles";
import { loadSlim } from "tsparticles-slim";
import type { Engine } from "tsparticles-engine";
// @ts-ignore
import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";

const history = [
    {
        year: "2012",
        title: "El Comienzo",
        description:
            "Monticars fué fundada en el año 2012, comenzando sus actividades desde casa con sacrificio y dedicación.",
        image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1172&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        year: "2013",
        title: "Crecimiento y Consolidación",
        description: "Logramos inaugurar una pequeña oficina comercial en Michelena, en la ciudad de Maracay.",
        image: "https://images.unsplash.com/photo-1591696205602-2f950c417cb9?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        year: "2014",
        title: "Grandes Retos",
        description:
            "Marcamos los estándares de Servicio, precio y calidad en la venta de Autopartes para la gama de vehículos Chinos.",
        image: "https://images.unsplash.com/photo-1730804518415-75297e8d2a41?q=80&w=1162&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        year: "Hoy",
        title: "Liderazgo en el mercado venezolano",
        description:
            "Nos consolidamos como la plataforma líder en venta de Autopartes en Venezuela, adaptándonos a las nuevas tecnologías y necesidades del mercado.",
        image: "https://s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2017/06/18191738/apreton-manos.jpg",
    },
] as const;

const mainRed = "#e31e24";

export default function CompanyPage() {
    const particlesInit = useCallback(async (engine: Engine) => {
        await loadSlim(engine);
    }, []);

    const particlesConfig: any = {
        particles: {
            number: {
                value: 25,
                density: {
                    enable: true,
                    value_area: 800,
                },
            },
            color: {
                value: mainRed,
            },
            shape: {
                type: "circle",
            },
            opacity: {
                value: 0.6,
                random: true,
                anim: {
                    enable: true,
                    speed: 1,
                    opacity_min: 0.1,
                    sync: false,
                },
            },
            size: {
                value: 12,
                random: true,
                anim: {
                    enable: true,
                    speed: 2,
                    size_min: 5,
                    sync: false,
                },
            },
            line_linked: {
                enable: false,
            },
            move: {
                enable: true,
                speed: 1.5,
                direction: "top",
                random: true,
                straight: false,
                out_mode: "out",
                bounce: false,
                attract: {
                    enable: false,
                },
            },
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: false,
                },
                onclick: {
                    enable: false,
                },
                resize: true,
            },
        },
        retina_detect: true,
    };

    return (
        <div className="py-5">
            {/* Título con partículas */}
            <div className="company-title text-center mb-5">
                <div className="company-title__container">
                    {/* <Particles
                        id="company-particles"
                        init={particlesInit}
                        options={particlesConfig}
                        className="bubbles-canvas"
                    /> */}
                    <h1 className="company-title__text">
                        NUESTRA <span className="company-title__highlight">HISTORIA</span>
                    </h1>
                </div>
                <div className="company-title__underline"></div>
            </div>

            <VerticalTimeline lineColor="#e9e9e9" animate={true}>
                {history.map((item, index) => (
                    <VerticalTimelineElement
                        key={index}
                        className="vertical-timeline-element--work"
                        contentStyle={{
                            background: "#fff",
                            color: "#333",
                            borderRadius: "15px",
                            border: "1px solid #eee",
                            boxShadow: "0 10px 30px rgba(0,0,0,0.05)",
                        }}
                        contentArrowStyle={{ borderRight: "7px solid #eee" }}
                        // Agregamos el año al ícono para visibilidad en mobile
                        icon={
                            <span
                                className="d-flex align-items-center justify-content-center h-100 fw-bold"
                                style={{ fontSize: "12px" }}
                            >
                                {item.year}
                            </span>
                        }
                        iconStyle={{
                            background: mainRed,
                            color: "#fff",
                            boxShadow: `0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)`,
                        }}
                    >
                        <div className="mb-3 overflow-hidden rounded shadow-sm">
                            <img
                                src={item.image}
                                alt={item.title}
                                style={{ width: "100%", height: "200px", objectFit: "cover" }}
                            />
                        </div>
                        <h3 className="vertical-timeline-element-title fw-bold" style={{ color: "#222" }}>
                            {item.title}
                        </h3>
                        <p className="text-muted" style={{ fontSize: "0.95rem", lineHeight: "1.6" }}>
                            {item.description}
                        </p>
                    </VerticalTimelineElement>
                ))}
            </VerticalTimeline>

            <style jsx global>{`
                .company-title {
                    margin-bottom: 3rem;
                }

                .company-title__container {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }

                .bubbles-canvas {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                }

                .company-title__text {
                    font-size: 2.5rem;
                    font-weight: 700;
                    color: #000;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    margin-bottom: 0.5rem;
                    position: relative;
                    z-index: 1;
                }

                .company-title__highlight {
                    color: ${mainRed};
                }

                .company-title__underline {
                    width: 100px;
                    height: 4px;
                    background: ${mainRed};
                    margin: 0rem auto 0;
                }

                .vertical-timeline-element-date {
                    color: #666 !important;
                    font-weight: 700 !important;
                    font-size: 1.1rem !important;
                }
                .vertical-timeline::before {
                    background: #eee !important;
                }
                /* Ocultar la fecha externa en mobile para no duplicar con el ícono */
                @media (max-width: 1169px) {
                    .vertical-timeline-element-date {
                        display: none !important;
                    }
                }

                @media (max-width: 768px) {
                    .company-title__text {
                        font-size: 1.8rem;
                    }
                }

                @media (max-width: 576px) {
                    .company-title__text {
                        font-size: 1.5rem;
                    }
                }
            `}</style>
        </div>
    );
}