// Import ========================================================================================================================
import App from '@/layouts/aia/app-layout';
// import '/data/www/aia-official-en-main/www/css/pages/contact-us.css';
import Button from '@/components/aia/button';
import { useEffect, useRef } from 'react';

import { useForm } from '@inertiajs/react';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import { aboutAIA } from '@vendor-web/js/about-aia.js'
import type { TimelineData } from '@/types';

interface AboutProps {
    timeline: TimelineData;
}

export default function About({ timeline }: AboutProps) {
    const elementRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (elementRef.current) {
            aboutAIA();
        }
    }, [timeline]);

    return (
        <App
            subNav={
                <SectionNavigation
                    links={
                        [{ name: 'About AIA', href: route('about'), },
                        { name: 'People', href: route('people') },
                        { name: 'Partner with us', href: route('partner') }
                        ]
                    }
                />
            }
            pageMeta={
                <PageMeta
                    title="About AIA"
                />
            }
        >

            <section className="pageContent">
                <div className="keyvisual">
                    <div className="container">
                        <img className="keyvisual-source" src="/images/img-aia-kv.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h2><b>Our Story</b></h2>
                        <p>
                            At the heart of Taiwan's AI evolution stands the Taiwan AI Academy (AIA), a catalyst for transformation
                            built upon the nation's exceptional technological prowess and vibrant innovation landscape. Founded in
                            March 2017 by the esteemed Dr. James C. Liao, Dr. H.T. Kung, and the late Dr. Sheng-Wei Chen, AIA emerged
                            from a critical need: to harness AI for solving complex manufacturing challenges. This pivotal initiative
                            underscored the urgent necessity for nurturing AI talent, leading to the establishment of the Taiwan AI
                            Academy Foundation.
                        </p>
                        <blockquote>Fostering a Thriving AI ecosystem in Taiwan</blockquote>
                    </div>
                </div>
                <div className="keyvisual">
                    <div className="container lg:flex lg:justify-end">
                        <img className="keyvisual-source keyvisual-source--right" src="/images/img-aia-kv2.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h3><b>Vision​</b></h3>
                        <h2><b>Empowering Taiwan as a Global AI Hub</b></h2>
                        <p>
                            We envision Taiwan as a globally recognized epicenter of AI innovation, driving ethical advancements that
                            elevate industrial competitiveness and foster societal well-being. Through open collaboration and
                            impactful research, we are committed to building an inclusive future—AI for All, All in AI.
                        </p>
                        <blockquote>Fostering a Thriving AI ecosystem in Taiwan</blockquote>
                    </div>
                </div>
                <div className="keyvisual">
                    <div className="container">
                        <img className="keyvisual-source" src="/images/img-aia-kv3.png" alt="" />
                    </div>
                </div>
                <div className="editor">
                    <div className="container pageIndent">
                        <h3><b>Mission​​</b></h3>
                        <h2><b>Ecosystem Architect</b></h2>
                        <p>
                            To forge strategic alliances between industry, government, academia, and research institutions,
                            cultivating a dynamic and interconnected AI ecosystem.
                        </p>
                        <h2><b>Transformation Accelerator</b></h2>
                        <p>
                            To expedite AI-driven transformation within Taiwanese industries by establishing deep-rooted, trusted
                            partnerships and championing responsible, practical AI solutions.
                        </p>
                        <h2><b>Societal Impact Leader</b></h2>
                        <p>
                            To amplify societal value through strategic initiatives and dialogues that ensure AI development
                            positively impacts all communities.
                        </p>
                        <h2><b>Global Talent Nexus</b></h2>
                        <p>
                            To unite leading global AI minds and experts, enhancing Taiwan's AI capabilities and fostering robust
                            international collaborations.
                        </p>
                    </div>
                </div>
            </section>
            <div ref={elementRef} className="pageStickyContainer">
                <section className="timeline">
                    <div className="container h-full">
                        <div className="timeline-scrollContainer">
                            <div className="timeline-description">
                                <h1 className="text-h1-bold">
                                    Taiwan AI Academy & Global AI Breakthroughs: A Parallel Evolution
                                </h1>
                                <p className="text-t3-medium mt-20 lg:mt-24">
                                    AI is transforming our world, and Taiwan AI Academy is at the heart of
                                    that transformation. This timeline is an invitation to explore the
                                    intertwined stories of global AI breakthroughs and our Academy's
                                    growth. Discover how we're building a future where innovation and
                                    knowledge converge, and be part of the story.
                                </p>
                            </div>
                            <div className="timeline-control">
                                <p className="timeline-scrollRemind">
                                    <i className="timeline-scrollRemindIcon"></i>
                                    Keep Scrolling
                                </p>
                                <nav className="timeline-controlScrollContainer">
                                    <ul className="timeline-controlContainer">
                                        {timeline.yearTabs.map((year, index) => (
                                            <li
                                                key={year}
                                                className={`timeline-yearControl ${index === 0 ? 'timeline-yearControl--active' : ''}`}
                                            >
                                                <button type="button">{year}</button>
                                            </li>
                                        ))}
                                    </ul>
                                </nav>
                            </div>
                            {timeline.groups.map((group, groupIndex) => (
                                <div key={groupIndex} className="timeline-yearGroup">
                                    <h2 className="text-h2-bold timeline-yearDescription">
                                        {group.title}
                                        {group.subtitle && ':'}
                                        <br />
                                        {group.subtitle}
                                    </h2>
                                    <ol className="timeline-yearList">
                                        {group.years.map((year, yearIndex) => (
                                            <li key={yearIndex} className="timeline-year">
                                                <div>
                                                    <figure className="timeline-visual">
                                                        <img
                                                            className="object-scale-down object-center opacity-30 bg-black/40"
                                                            src={year.image}
                                                            alt=""
                                                        />
                                                    </figure>
                                                    <p className="text-sp timeline-date">{year.year}</p>
                                                </div>
                                                <ol className="timeline-storyList">
                                                    {year.items.map((item, itemIndex) => (
                                                        <li
                                                            key={itemIndex}
                                                            className={`timeline-story timeline-story--${item.type}`}
                                                        >
                                                            <span>{item.title}</span>
                                                        </li>
                                                    ))}
                                                </ol>
                                            </li>
                                        ))}
                                    </ol>
                                </div>
                            ))}
                        </div>
                    </div>
                    <span className="timeline-observerLine timeline-observerLine--endLine"></span>
                </section>
            </div>
        </App >
    );
}