"use client" import { useState, useRef, useCallback, useEffect } from 'react' import type { AboutFounderData } from '@/lib/strapi/types' interface FounderSlide { badge: string badgeIcon: string bio: string[] watermark: string image: string quote: string quoteAttribution: string } const FALLBACK_SLIDES: FounderSlide[] = [ { badge: 'About the founder', badgeIcon: '/assets/leaders/sparkle-icon.svg', bio: [ 'Chevalier Dr. Manuel Gnana Muthu (MGM) was born on 2nd April 1935 in Tirunelveli, TamilNadu, as the second son of Mr.Manuel and Mrs.Rajalakshmi. He began his career at the Chennai Port in 1957 and later founded the MGM Group of Companies, which started with logistics and hospitality and grew into areas like Coal and Mineral Mining, Food Chains, International Trading, Housing, Distilleries, IMFS, and the famous MGM Dizzee World theme park in Chennai.', 'Known for his business skills and commitment to social causes, Dr. Muthu has worked to support the underprivileged and shared his journey in his autobiography, "Rags to Riches: Chevalier Seva Ratna Dr. M. G. Muthu" (1999). He was also honored with the Chevalier Virudhu Award.', ], watermark: 'About The Founder', image: '/assets/home/our leader/MG Muthu Founder Profile.webp', quote: 'Truth, Hard work, Simplicity, Honesty and Faith" - These are the five golden tenets which the Founder - Chairman of the Group followed strictly. The Five Golden Mantras are the five Towers of the Group`s victory.', quoteAttribution: '- An excerpt from his autobiography', }, { badge: 'About Vice Chairman', badgeIcon: '/assets/leaders/sparkle-icon.svg', bio: [ 'Mr. MGM Maran, also known as Nesamani Maran Muthu, is the Vice Chairman of the MGM Group of Companies, a leading conglomerate based in Chennai. Known for his strategic insight and progressive leadership, he has played a key role in expanding the Group\'s presence across multiple industries. With a strong foundation in values such as integrity, innovation, and social responsibility, he continues to strengthen the organization\'s legacy. Mr. Maran is recognized for his people-centric approach and commitment to sustainable growth. His leadership continues to guide the MGM Group toward long-term success on both national and global platforms. ', ], watermark: 'Vision For The Future', image: '/assets/mgm-maran-new.png', quote: '"The foundation we build today will determine the heights we reach tomorrow. Let every brick be laid with honesty and every pillar stand on truth."', quoteAttribution: '- Mr. MGM Maran', }, { badge: 'About Group Managing Director', badgeIcon: '/assets/leaders/sparkle-icon.svg', bio: [ 'Mr. MGM Anand Muthu is a prominent Indian business leader and the Managing Director of the MGM Group of Companies, headquartered in Chennai. With over two decades of experience, he has been instrumental in expanding the group\'s presence across South India while upholding its strong legacy. As the son of visionary founder Dr. M.G. Muthu, he continues to build on values of integrity, discipline, and innovation. Under his leadership, the group has diversified into hospitality, entertainment, logistics, and manufacturing. Anand Muthu is known for his strategic vision, operational expertise, and commitment to sustainable growth and long-term business excellence.', ], watermark: 'Legacy Of Excellence', image: '/assets/home/our leader/MGM Anand Profile.webp?v=2', quote: '"A work of real merit finds success at last, as we have found. Nothing succeeds like success…"', quoteAttribution: '-Mr. MGM Anand Muthu', }, ] export default function FounderSection({ data }: { data: AboutFounderData }) { const [activeSlide, setActiveSlide] = useState(0) const slides = data.slides.length > 0 ? data.slides : FALLBACK_SLIDES const safeActive = slides.length > 0 ? Math.min(activeSlide, slides.length - 1) : 0 const slide = slides[safeActive] const totalSlides = slides.length const touchStartX = useRef(0) const touchEndX = useRef(0) const handlePrev = useCallback(() => { setActiveSlide((prev) => (prev > 0 ? prev - 1 : prev)) }, []) const handleNext = useCallback(() => { setActiveSlide((prev) => (prev < totalSlides - 1 ? prev + 1 : prev)) }, [totalSlides]) const isSwiping = useRef(false) const handleTouchStart = (e: React.TouchEvent) => { touchStartX.current = e.touches[0].clientX touchEndX.current = e.touches[0].clientX isSwiping.current = false } const handleTouchMove = (e: React.TouchEvent) => { touchEndX.current = e.touches[0].clientX isSwiping.current = true } const handleTouchEnd = () => { if (!isSwiping.current) return const diff = touchStartX.current - touchEndX.current if (Math.abs(diff) > 50) { diff > 0 ? handleNext() : handlePrev() } } useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'ArrowLeft') handlePrev() if (e.key === 'ArrowRight') handleNext() } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [handlePrev, handleNext]) useEffect(() => { if (typeof window !== 'undefined') { const params = new URLSearchParams(window.location.search) const slideParam = params.get('slide') if (slideParam !== null) { const slideIndex = parseInt(slideParam, 10) if (!isNaN(slideIndex) && slideIndex >= 0 && slideIndex < totalSlides) { window.setTimeout(() => setActiveSlide(slideIndex), 0) // Smooth scroll to the section in case the user clicked from another page // Give it a small timeout to ensure the DOM is ready and page has rendered setTimeout(() => { const el = document.getElementById('founder-section') if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 100 window.scrollTo({ top: y, behavior: 'smooth' }) } }, 100) } } } }, [totalSlides]) if (!slide) return null return (
{/* ===== MOBILE ===== */}
{/* Main content area */}
{/* Image + watermark grid (overlapping) */}
{/* Watermark text */} {/* Founder image */}
Founder portrait
{/* Red gradient card */}
{/* Badge */}

{slide.badge}

{/* Quote card + Bio wrapper */}
{/* Quote card */}

{slide.quote}

{slide.quoteAttribution}

{/* Bio text */}
{slide.bio.map((paragraph, i) => (

{paragraph} {i < slide.bio.length - 1 && ( <> {'\n'}   )}

))}
{/* Navigation */}
{/* ===== DESKTOP ===== */}
{/* Main content grid */}
{/* Red gradient card — left */}
{/* Badge */}

{slide.badge}

{/* Bio text */}
{slide.bio.map((paragraph, i) => (

{paragraph} {i < slide.bio.length - 1 && ( <> {'\n'}   )}

))}
{/* Right side — watermark + image + quote */}
{/* Watermark text */} {/* Founder image */}
Founder portrait
{/* Quote card */}
{/* Decorative quote marks */}

{slide.quote}

{slide.quoteAttribution}

{/* Navigation */}
) }