import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { AboutStories } from '@frontend/components/sections/AboutStories';
import { type HomeFaqItem } from '@frontend/components/sections/HomeFaq';
import { type HomePartner } from '@frontend/components/sections/HomePartners';
import { type HomeTestimonial } from '@frontend/components/sections/HomeTestimonials';
import { useSiteChrome } from '@frontend/lib/site-chrome';
import { Link } from '@inertiajs/react';

export type AboutPoint = {
    title: string;
    text: string;
};

export type AboutTeamMember = {
    name: string;
    role: string;
    photoUrl: string;
    facebook: string | null;
    x: string | null;
    linkedin: string | null;
    telegram: string | null;
};

export type AboutOffer = {
    title: string;
    description: string;
    imageUrl: string;
    price: string | null;
    expiry: string | null;
    tag: string;
    highlights: string[];
    href: string;
    number: string;
};

export type AboutCounter = {
    id: number;
    label: string;
    count: number;
    symbol: string;
};

export type ResortAbout = {
    eyebrow: string;
    heading: string;
    paragraphs: string[];
    visionTitle: string;
    vision: string;
    missionTitle: string;
    mission: string;
    imageOneUrl: string;
    imageTwoUrl: string;
    breadcrumbImageUrl: string;
    videoImageUrl: string;
    videoUrl: string | null;
    partners: HomePartner[];
    testimonials: HomeTestimonial[];
    faqs: HomeFaqItem[];
    whyChoose: AboutPoint[];
    occasionTitle: string;
    occasionText: string;
    values: AboutPoint[];
    team: AboutTeamMember[];
    offers: AboutOffer[];
    counters: AboutCounter[];
};

const whyChooseIcons = [
    'fa-solid fa-water',
    'fa-solid fa-bed',
    'fa-solid fa-utensils',
    'fa-solid fa-person-swimming',
    'fa-solid fa-briefcase',
    'fa-solid fa-handshake',
    'fa-solid fa-shield-halved',
];

const valueIcons = [
    'fa-solid fa-heart',
    'fa-solid fa-award',
    'fa-solid fa-couch',
    'fa-solid fa-user-tie',
    'fa-solid fa-scale-balanced',
    'fa-solid fa-face-smile',
];

function iconClass(icons: string[], index: number): string {
    return icons[index % icons.length];
}

export function AboutMain({ about }: { about: ResortAbout }) {
    const { phone, phoneHref } = useSiteChrome();

    return (
        <>
                <PageBreadcrumb page="about" />

                {/* about section start */}
                <section className="about-section-4 pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container"> 
                        <div className="row">
                            <div className="col-lg-6 col-md-12">
                                <div className="about-image">
                                    {/* about shape start */}
                                    <div className="about-shape">
                                        <figure className="image-anime">
                                            <img src="/assets/images/about/about-shape-1.png" alt="about shape" />
                                        </figure>
                                    </div>
                                    {/* about shape end */}
                                    {/* about img one start */}
                                    <div className="about-img-one">
                                        <figure className="image-anime">
                                            <img src={about.imageOneUrl} alt={about.heading} />
                                        </figure>
                                    </div>
                                    {/* about img one end */}
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="about-content wow fadeInUp" data-wow-delay=".2s">
                                    {/* section title start */}
                                    <div className="section-title mb-30">
                                        <span className="sub-title">{about.eyebrow}</span>
                                        <h2>{about.heading}</h2>
                                        {about.paragraphs.map((paragraph) => (
                                            <p key={paragraph}>{paragraph}</p>
                                        ))}
                                    </div>
                                    {/* section title end */} 

                                    {/* about features wappper start */}
                                    <div className="about-features-wappper">
                                        {/* about features item start */}
                                        <div className="about-features-item">
                                            <div className="about-features-icon">
                                                <figure>
                                                    <i className="fa-solid fa-eye" aria-hidden="true"></i>
                                                </figure>
                                            </div>
                                            <div className="about-features-title">
                                                <h3 className="line-anime">{about.visionTitle}</h3>
                                                <p>{about.vision}</p>
                                            </div>
                                        </div>
                                        {/* about features item end */}
                                        {/* about features item start */}
                                        <div className="about-features-item">
                                            <div className="about-features-icon">
                                                <figure>
                                                    <i className="fa-solid fa-bullseye" aria-hidden="true"></i>
                                                </figure>
                                            </div>
                                            <div className="about-features-title">
                                                <h3 className="line-anime">{about.missionTitle}</h3>
                                                <p>{about.mission}</p>
                                            </div>
                                        </div>
                                        {/* about features item end */} 
                                    </div> 
                                    {/* about features wappper end */}

                                    {/* about footer start */}
                                    <div className="about-footer"> 
                                        <div className="about-footer-button">
                                            <Link href="/contact" className="theme-button style-1" aria-label="Discover Now">
                                                Discover Now
                                            </Link>
                                        </div>
                                        {phone !== '' && (
                                        <div className="about-contact-box">
                                            <div className="icon-box">
                                                <i className="fa-solid fa-phone"></i>
                                            </div>
                                            <div className="about-contact-box-content">
                                                <p>Have Question?</p>
                                                <a href={phoneHref}>{phone}</a>
                                            </div>
                                        </div>
                                        )}
                                    </div>
                                    {/* about footer end */}
                                </div>
                            </div>
                        </div>
                    </div> 
                </section>
                {/* about section end */}

                {/* counter section start */}
                {about.counters.length > 0 && (
                <section className="counter-section-2 background-one pt-100 md-pt-80 pb-100 md-pb-80" data-img-src="/assets/images/shape/bg-shape-1.png">
                    <div className="container"> 
                        <div className="row">
                            <div className="col-lg-12">
                                {/* counter list start */}
                                <div className="counter-list grid-4">
                                    {about.counters.map((counter, index) => (
                                        <div key={counter.id} className="counter-item wow fadeInUp" data-wow-delay={['.2s', '.3s', '.4s', '.5s'][index] ?? '.2s'}>
                                            <div className="counter-content text-center">
                                                <div className="counter-text">
                                                    <span className="counter-value" data-stop={counter.count} data-speed="3000">0</span>
                                                    {counter.symbol}
                                                </div>
                                                <h2 className="counter-title">{counter.label}</h2>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                {/* counter list end */}
                            </div>
                        </div>
                    </div> 
                </section>
                )}
                {/* counter section end */}

                {/* why choose section start */}
                {(about.whyChoose.length > 0 || about.values.length > 0) && (
                <section className="why-choose-section-1 pt-100 md-pt-80 pb-70 md-pb-50">
                    <div className="container">
                        {about.whyChoose.length > 0 && (
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                        <span className="sub-title">Why Choose Us</span>
                                        <h2>Why Choose Chato Beach Resort?</h2>
                                    </div>
                                </div>
                            </div>
                        )}
                        <div className="row">
                            {about.whyChoose.map((item, index) => (
                                <div className="col-xl-4 col-lg-6 col-md-6" key={item.title}>
                                    <div className="why-choose-item wow fadeInUp" data-wow-delay=".2s">
                                        <div className="why-choose-icon">
                                            <figure>
                                                <i className={iconClass(whyChooseIcons, index)} aria-hidden="true"></i>
                                            </figure>
                                        </div>
                                        <div className="why-choose-content">
                                            <h2 className="why-choose-title line-anime-center">{item.title}</h2>
                                            <p>{item.text}</p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        {about.occasionTitle !== '' && (
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                        <h2>{about.occasionTitle}</h2>
                                        <p>{about.occasionText}</p>
                                    </div>
                                </div>
                            </div>
                        )}
                        {about.values.length > 0 && (
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                        <span className="sub-title">What Guides Us</span>
                                        <h2>Our Core Values</h2>
                                    </div>
                                </div>
                            </div>
                        )}
                        <div className="row">
                            {about.values.map((item, index) => (
                                <div className="col-xl-4 col-lg-6 col-md-6" key={item.title}>
                                    <div className="why-choose-item wow fadeInUp" data-wow-delay=".2s">
                                        <div className="why-choose-icon">
                                            <figure>
                                                <i className={iconClass(valueIcons, index)} aria-hidden="true"></i>
                                            </figure>
                                        </div>
                                        <div className="why-choose-content">
                                            <h2 className="why-choose-title line-anime-center">{item.title}</h2>
                                            <p>{item.text}</p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
                )}
                {/* why choose section end */}

{about.team.length > 0 && (
                <section className="team-section-1 pb-70 md-pb-50">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Our Team</span>
                                    <h2>Meet Our Expert Hotel Team</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            {about.team.map((member) => (
                                <div className="col-xl-3 col-lg-6 col-md-6 col-sm-6" key={member.name}>
                                    <div className="team-item wow fadeInUp" data-wow-delay=".3s">
                                        <div className="team-image">
                                            <figure className="image-anime">
                                                <img src={member.photoUrl} alt={member.name} />
                                            </figure>
                                            {(member.facebook || member.x || member.linkedin || member.telegram) && (
                                                <div className="team-share">
                                                    <ul className="social-icon">
                                                        {member.facebook && (
                                                            <li>
                                                                <a href={member.facebook} aria-label="facebook"><i className="fa-brands fa-facebook-f"></i></a>
                                                            </li>
                                                        )}
                                                        {member.x && (
                                                            <li>
                                                                <a href={member.x} aria-label="twitter"><i className="fa-brands fa-x-twitter"></i></a>
                                                            </li>
                                                        )}
                                                        {member.linkedin && (
                                                            <li>
                                                                <a href={member.linkedin} aria-label="linkedin"><i className="fa-brands fa-linkedin-in"></i></a>
                                                            </li>
                                                        )}
                                                        {member.telegram && (
                                                            <li>
                                                                <a href={member.telegram} aria-label="telegram"><i className="fa-brands fa-telegram"></i></a>
                                                            </li>
                                                        )}
                                                    </ul>
                                                </div>
                                            )}
                                        </div>
                                        <div className="team-content">
                                            <h2 className="team-title line-anime-center">{member.name}</h2>
                                            <p>{member.role}</p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
                )}
                {/* team section end */}

                {/* video section 2 start */}
                <div className="video-section-2" data-img-src={about.videoImageUrl}>
                    <div className="container">  
                        <div className="row">
                            <div className="col-lg-12">
                                {/* video wapper start */}
                                <div className="video-box wow fadeInUp" data-wow-delay=".2s">
                                    {about.videoUrl && (
                                    <a className="video-popup video-play play-center" href={about.videoUrl} aria-label="play video">
                                        <span className="icon"><i className="fa-solid fa-play"></i></span>
                                    </a>
                                    )}
                                </div>
                                {/* video wapper end */}
                            </div>
                        </div>
                    </div> 
                </div>
                {/* video section 2 end */}

{about.offers.length > 0 && (
                <section className="offer-section-2 pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Our Offer</span>
                                    <h2>Best Offers At Our Hotels</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="offer-wapper">
                                    {about.offers.map((offer) => (
                                        <div className="offer-item sticky" key={offer.number + offer.title}>
                                            <div className="offer-image">
                                                <Link href={offer.href}>
                                                    <figure className="image-anime">
                                                        <img src={offer.imageUrl} alt={offer.title} />
                                                    </figure>
                                                </Link>
                                            </div>
                                            <div className="offer-content">
                                                <div className="offer-number">{offer.number}</div>
                                                <div className="offer-tag">{offer.tag}</div>
                                                <h2 className="offer-title line-anime"><Link href={offer.href}>{offer.title}</Link></h2>
                                                {offer.description !== '' && <p className="desc">{offer.description}</p>}
                                                {(offer.price || offer.expiry) && (
                                                    <div className="offer-price">
                                                        {offer.price && <span className="price">{offer.price}</span>}
                                                        {offer.expiry && <span>{offer.expiry}</span>}
                                                    </div>
                                                )}
                                                {offer.highlights.length > 0 && (
                                                    <div className="check-list mb-30">
                                                        <ul>
                                                            {offer.highlights.map((highlight) => (
                                                                <li key={highlight}>{highlight}</li>
                                                            ))}
                                                        </ul>
                                                    </div>
                                                )}
                                                <div className="offer-button-wapper">
                                                    <Link href={offer.href} className="theme-button style-1" aria-label="View Offer">
                                                        View Offer
                                                    </Link>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                )}
                {/* offer section 2 section end */}

                <AboutStories partners={about.partners} testimonials={about.testimonials} faqs={about.faqs} />

        </>
    );
}