'use client';

import Image from 'next/image';
import { useState, useEffect, useRef } from 'react';

export default function LDGMLeadershipPage() {
    const [openAccordion, setOpenAccordion] = useState<string | null>(null);
    const [counts, setCounts] = useState({ years: 0, people: 0, countries: 0, orgs: 0 });
    const [hasAnimated, setHasAnimated] = useState(false);
    const statsRef = useRef<HTMLDivElement>(null);

    const toggleAccordion = (section: string) => {
        setOpenAccordion(openAccordion === section ? null : section);
    };

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                if (entries[0].isIntersecting && !hasAnimated) {
                    setHasAnimated(true);
                    animateNumbers();
                }
            },
            { threshold: 0.5 }
        );
        if (statsRef.current) observer.observe(statsRef.current);
        return () => observer.disconnect();
    }, [hasAnimated]);

    const animateNumbers = () => {
        const duration = 2000;
        const steps = 60;
        const interval = duration / steps;
        const targets = { years: 30, people: 300000, countries: 40, orgs: 1500 };
        let step = 0;
        const timer = setInterval(() => {
            step++;
            const progress = step / steps;
            setCounts({
                years: Math.floor(targets.years * progress),
                people: Math.floor(targets.people * progress),
                countries: Math.floor(targets.countries * progress),
                orgs: Math.floor(targets.orgs * progress),
            });
            if (step >= steps) { setCounts(targets); clearInterval(timer); }
        }, interval);
    };

    return (
        <>
            <style jsx>{`
                /* ── Content wrapper ── */
                .cw {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 5.5%;
                    box-sizing: border-box;
                }
                @media (max-width: 1200px) { .cw { padding: 0 4.5%; } }
                @media (max-width: 767px)  { .cw { padding: 0 20px; } }

                /* ── Hero — position UNCHANGED: bottom -60px ── */
                .hero-section {
                    position: relative;
                    margin-top: 105px;
                    margin-bottom: 60px;
                }
                .hero-banner {
                    height: 60vh;
                    min-height: 500px;
                    width: 100%;
                    position: relative;
                }
                .hero-badge {
                    position: absolute;
                    bottom: -60px;
                    left: 0;
                    right: 0;
                    z-index: 10;
                }
                .hero-badge-inner {
                    display: inline-block;
                    background: linear-gradient(-90deg, #b53855 0%, #62c0e2 100%);
                    border-radius: 10px 15px 0 0;
                    padding: 45px 85px;
                    max-width: 85%;
                }
                .hero-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 38px;
                    font-weight: 700;
                    color: #ffffff;
                    line-height: 1.3;
                    margin: 0;
                    white-space: normal;
                    word-wrap: break-word;
                }

                @media (max-width: 1024px) {
                    .hero-banner { min-height: 380px; height: 55vh; }
                    .hero-badge-inner { padding: 35px 50px; max-width: 90%; }
                    .hero-title { font-size: 30px; }
                }
                @media (max-width: 767px) {
                    .hero-section { margin-bottom: 30px; }
                    .hero-banner { min-height: 340px; height: 75vw; }
                    .hero-badge { bottom: -30px; }
                    .hero-badge-inner { padding: 22px 28px; max-width: 95%; border-radius: 8px 10px 0 0; }
                    .hero-title { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .hero-section { margin-bottom: 25px; }
                    .hero-banner { min-height: 300px; height: 78vw; }
                    .hero-badge { bottom: -25px; }
                    .hero-badge-inner { padding: 16px 20px; max-width: 96%; }
                    .hero-title { font-size: 16px; }
                }

                /* ── Intro section ── */
                .intro-section {
                    padding: 80px 0 60px;
                    background: #fff;
                }
                @media (max-width: 1024px) { .intro-section { padding: 56px 0 40px; } }
                @media (max-width: 767px)  { .intro-section { padding: 36px 0 28px; } }

                .intro-grid {
                    display: flex;
                    flex-direction: row;
                    gap: 50px;
                    align-items: flex-start;
                }
                @media (max-width: 968px) { .intro-grid { flex-direction: column; gap: 30px; } }

                .intro-content { flex: 1.4; }
                .intro-image { flex: 0.8; max-width: 360px; }
                .intro-image img { width: 100%; height: auto; border-radius: 12px; }
                @media (max-width: 968px) { .intro-image { max-width: 100%; } }

                /* ── Section headings ── */
                .section-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 28px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 25px;
                    border-bottom: 3px solid #E67399;
                    display: inline-block;
                    line-height: 1.2;
                }
                .section-title-dark {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 30px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 15px;
                    border-bottom: 3px solid #E67399;
                    display: inline-block;
                }
                .section-title-pink {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 30px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 15px;
                    border-bottom: 3px solid #E67399;
                    display: inline-block;
                }
                @media (max-width: 1024px) {
                    .section-title      { font-size: 24px; }
                    .section-title-dark { font-size: 26px; }
                    .section-title-pink { font-size: 26px; }
                }
                @media (max-width: 767px) {
                    .section-title      { font-size: 20px; margin-bottom: 18px; }
                    .section-title-dark { font-size: 20px; }
                    .section-title-pink { font-size: 20px; }
                }
                @media (max-width: 480px) {
                    .section-title      { font-size: 18px; }
                    .section-title-dark { font-size: 18px; }
                    .section-title-pink { font-size: 18px; }
                }

                /* ── Body text ── */
                .intro-text, .why-intro, .why-text, .ready-text, .attend-subtitle {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    color: #5D6371;
                    line-height: 1.8;
                    margin-bottom: 20px;
                }
                @media (max-width: 1024px) {
                    .intro-text, .why-intro, .why-text, .ready-text { font-size: 16px; }
                }
                @media (max-width: 767px) {
                    .intro-text, .why-intro, .why-text, .ready-text { font-size: 15px; line-height: 1.7; }
                }

                /* ── Lists ── */
                .intro-list, .accordion-list {
                    list-style: disc;
                    padding-left: 25px;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    color: #5D6371;
                    line-height: 1.6;
                }
                .intro-list li { margin-bottom: 2px; padding-bottom: 2px; }
                .accordion-list li { margin-bottom: 20px; }
                @media (max-width: 1024px) {
                    .intro-list, .accordion-list { font-size: 16px; }
                }
                @media (max-width: 767px) {
                    .intro-list, .accordion-list { font-size: 15px; }
                    .accordion-list li { margin-bottom: 14px; }
                }

                /* ── Why section ── */
                .why-section { padding: 5px 0 60px; background: #fff; }
                @media (max-width: 767px) { .why-section { padding: 5px 0 36px; } }

                /* ── Stats grid ── */
                .stats-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 40px;
                    margin-bottom: 40px;
                }
                @media (max-width: 1024px) { .stats-grid { gap: 28px; } }
                @media (max-width: 968px)  { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
                @media (max-width: 480px)  { .stats-grid { grid-template-columns: 1fr; gap: 24px; } }

                .stat-item { text-align: center; }
                .stat-number {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 38px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 10px;
                }
                .stat-label {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    color: #181B31;
                }
                @media (max-width: 1024px) { .stat-number { font-size: 30px; } .stat-label { font-size: 16px; } }
                @media (max-width: 767px)  { .stat-number { font-size: 26px; } .stat-label { font-size: 15px; } }

                /* ── Accordion ── */
                .accordion-section { padding: 60px 0; background: #f5f5f5; }
                @media (max-width: 767px) { .accordion-section { padding: 36px 0; } }

                .accordion-item { background: #fff; margin-bottom: 2px; border-bottom: 1px solid #e0e0e0; }

                .accordion-header {
                    width: 100%;
                    padding: 30px 40px;
                    background: #fff;
                    border: none;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: background 0.3s;
                    text-align: left;
                }
                .accordion-header:hover { background: #fafafa; }
                .accordion-header h2 {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 22px;
                    font-weight: 700;
                    color: #1a1a1a;
                    text-align: left;
                    margin: 0;
                    line-height: 1.3;
                }
                .accordion-icon {
                    font-size: 36px;
                    font-weight: 300;
                    color: #1a1a1a;
                    margin-left: 20px;
                    flex-shrink: 0;
                }
                .accordion-content { padding: 0 40px 40px; background: #fff; }

                @media (max-width: 1024px) {
                    .accordion-header { padding: 24px 28px; }
                    .accordion-header h2 { font-size: 20px; }
                    .accordion-content { padding: 0 28px 32px; }
                }
                @media (max-width: 767px) {
                    .accordion-header { padding: 18px 20px; }
                    .accordion-header h2 { font-size: 17px; }
                    .accordion-icon { font-size: 28px; margin-left: 12px; }
                    .accordion-content { padding: 0 20px 24px; }
                }
                @media (max-width: 480px) {
                    .accordion-header h2 { font-size: 15px; }
                }

                /* ── Ready section ── */
                .ready-section { padding: 60px 0; background: #fff; }
                @media (max-width: 767px) { .ready-section { padding: 36px 0; } }

                .contact-button {
                    display: inline-block;
                    margin-top: 30px;
                    padding: 15px 40px;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 600;
                    color: #ffffff;
                    background: linear-gradient(90deg, #62C0E2 0%, #B73855 100%);
                    border-radius: 10px;
                    text-decoration: none;
                    transition: all 0.3s;
                }
                .contact-button:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
                @media (max-width: 767px) {
                    .contact-button { font-size: 16px; padding: 13px 30px; }
                }

                /* ── CTA section ── */
                .cta-section {
                    padding: 100px 0;
                    background: #62C0E2;
                    text-align: center;
                    position: relative;
                }
                .cta-section::after {
                    content: '';
                    position: absolute;
                    bottom: 0; left: 0; right: 0;
                    height: 15px;
                    background: #C87FA5;
                }
                .cta-content { max-width: 800px; margin: 0 auto; padding: 0 20px; }
                .cta-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 39px;
                    font-weight: 700;
                    color: #fff;
                    margin: 0 0 20px;
                    line-height: 1.2;
                }
                @media (max-width: 1024px) { .cta-title { font-size: 30px; } .cta-section { padding: 72px 0; } }
                @media (max-width: 767px)  { .cta-title { font-size: 24px; } .cta-section { padding: 52px 0; } }
                @media (max-width: 480px)  { .cta-title { font-size: 20px; } }

                .cta-button {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    padding: 18px 60px;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    color: #0F1B43;
                    background: #fff;
                    border-radius: 50px;
                    text-decoration: none;
                    transition: all 0.4s ease;
                    border: none;
                    position: relative;
                    overflow: hidden;
                }
                .cta-button::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(90deg, #62C0E2 0%, #C87FA5 100%);
                    opacity: 0;
                    transition: opacity 0.4s ease;
                    border-radius: 50px;
                    z-index: 0;
                }
                .cta-button:hover::before { opacity: 1; }
                .cta-button:hover { color: #fff; }
                .cta-text { position: relative; z-index: 1; }
                .cta-arrow {
                    position: relative; z-index: 1;
                    width: 20px; height: 20px;
                    display: inline-flex; align-items: center; justify-content: center;
                    border: 2px solid currentColor;
                    border-radius: 50%;
                    flex-shrink: 0;
                }
                .cta-arrow::before {
                    content: '';
                    width: 0; height: 0;
                    border-left: 5px solid currentColor;
                    border-top: 4px solid transparent;
                    border-bottom: 4px solid transparent;
                    margin-left: 2px;
                }
                @media (max-width: 767px) {
                    .cta-button { padding: 14px 36px; font-size: 16px; }
                }


            `}</style>

            {/* ── HERO ── */}
            <section className="hero-section">
                <div className="hero-banner">
                    <Image src="/myteamhero.png" alt="Leadership Office Illustration" fill priority style={{ objectFit: 'cover' }} />
                </div>
                <div className="cw hero-badge">
                    <div className="hero-badge-inner">
                        <h1 className="hero-title">The Lost Dutchman Gold Mine Leadership Program</h1>
                    </div>
                </div>
            </section>

            {/* ── INTRO ── */}
            <section className="intro-section">
                <div className="cw">
                    <div className="intro-grid">
                        <div className="intro-content">
                            <h2 className="section-title">
                                Ready to Unlock your Leadership<br />
                                The Lost Dutchman Gold Mine Leadership Program
                            </h2>
                            <p className="intro-text">Discover a unique, eclectic, iterative, and interactive experience that simulates the following:-</p>
                            <ul className="intro-list">
                                <li>Significance of sound leadership and strategic thinking.</li>
                                <li>Macro & Micro goal setting & objectives.</li>
                                <li>Team Dynamism, unique personalities, & tenor of interpersonal skills.</li>
                                <li>Critical thinking, Creativity, Curiosity, Communication, and Collaboration.</li>
                                <li>Art & science of observing, decision-making, negotiation, and influencing.</li>
                                <li>Critical conversation and conversational intelligence.</li>
                                <li>Analytical Mastery and Intuitive Originality.</li>
                                <li>Resource planning and optimization.</li>
                            </ul>
                        </div>
                        <div className="intro-image">
                            <Image src="/teamtrader.png" alt="LDGM Game Cards" width={360} height={304} />
                        </div>
                    </div>
                </div>
            </section>

            {/* ── WHY LDGM ── */}
            <section className="why-section">
                <div className="cw">
                    <h2 className="section-title-dark">Why The Lost Dutchman Gold Mine Leadership Workshop?</h2>
                    <p className="why-intro">Lost Dutchman Gold Mine or LDGM as it is popularly known comes armed with</p>

                    <div className="stats-grid" ref={statsRef}>
                        <div className="stat-item">
                            <h3 className="stat-number">{counts.years}+ years</h3>
                            <p className="stat-label">Of proven track record</p>
                        </div>
                        <div className="stat-item">
                            <h3 className="stat-number">{counts.people.toLocaleString()}+</h3>
                            <p className="stat-label">Educated & enlightened</p>
                        </div>
                        <div className="stat-item">
                            <h3 className="stat-number">{counts.countries}+</h3>
                            <p className="stat-label">Countries</p>
                        </div>
                        <div className="stat-item">
                            <h3 className="stat-number">{counts.orgs.toLocaleString()}+</h3>
                            <p className="stat-label">Organisation</p>
                        </div>
                    </div>

                    <p className="why-text">From conferences to strategy meet, from an OD intervention to a Learning & Development endeavour, LDGM is a simulation with multifaceted application & relevance!</p>
                    <p className="why-text">A versatile learning tool that elicits many workplace behaviours which is a replica of how professionals conduct themselves and come across in a professional setting.</p>
                </div>
            </section>

            <section style={{ height: '15px', backgroundColor: '#CF87B0' }} />

            {/* ── ACCORDION ── */}
            <section className="accordion-section">
                <div className="cw">
                    {[
                        {
                            id: 'importance',
                            title: 'LDGM is an apt simulation that accentuates importance of:-',
                            content: (
                                <ul className="accordion-list">
                                    <li>Having a staunch strategy and culture</li>
                                    <li>Analysis and action</li>
                                    <li>Planning and Implementation</li>
                                    <li>Setting objectives and execution</li>
                                    <li>Independent roles and yet the interdependency on one another</li>
                                </ul>
                            )
                        },
                        {
                            id: 'unique',
                            title: 'What render it unique are the following attributes:-',
                            content: (
                                <ul className="accordion-list">
                                    <li><strong>Engaging and experiential</strong> – Infotaining as we call it! Step away from traditional lectures and dive into a collaborative adventure that mirrors real-world leadership challenges.</li>
                                    <li><strong>Exert leadership and strategic Thinking</strong> – Deploy practical leadership skills & big picture thinking in abundance with conduits of communication, problem-solving, decision-making, role-modelling, setting direction & purpose, through immersive gameplay.</li>
                                    <li><strong>Unleash hidden potential</strong> – Decipher and unravel the true meaning and mechanics of the full spirit of 'Collaboration' as participants go on the expedition with "The Goal is to mine as much Gold as WE Can!"</li>
                                    <li><strong>Fungibility of Behaviours</strong> – The behaviour seen during the game play can very easily & visibly be correlated to on the ground behaviours & conduct during the professional world.</li>
                                    <li><strong>Conceptual Depth and Pragmatic Examples</strong> – The workshop is replete with pertinent frameworks, concepts, central point of view on different themes like leadership, negotiation and collaboration.</li>
                                </ul>
                            )
                        },
                        {
                            id: 'individuals',
                            title: 'Benefits for Individuals',
                            content: (
                                <ul className="accordion-list">
                                    <li><strong>Develop leadership capabilities:</strong> Watch yourself & others deploy skills to lead people, business, & results with a unique opportunity to motivate, inspire to achieve broader objectives.</li>
                                    <li><strong>Amplify your communication and collaboration:</strong> In real time, you get a view about your collaboration & communication acumen from your own self and other's observations.</li>
                                    <li><strong>Boost critical thinking, creativity, and problem-solving:</strong> Building systems thinking through structured exposure to complexities, challenges, explicit & implicit problems.</li>
                                    <li><strong>Gain valuable self-awareness:</strong> Gain deeper insights into your style of leading others, being led, and other interpersonal skills under high pressure.</li>
                                    <li><strong>Access to LDGM Leadership Workbook –</strong> A holistic, integrated, interactive workbook on key concepts, frameworks, point of views with well delineated outlook on leading, collaborating, problem solving.</li>
                                </ul>
                            )
                        },
                        {
                            id: 'organisations',
                            title: 'Benefits for Organisations',
                            content: (
                                <ul className="accordion-list">
                                    <li><strong>Foster high-performing teams:</strong> Stimulate culture of high productivity by mooting an atmosphere where results get velocitized by leveraging collaboration, interdependencies and each other's strengths.</li>
                                    <li><strong>Amplify employee engagement:</strong> Induce clutter breaking head, hand, heart engagement for teams.</li>
                                    <li><strong>Nurture future leaders:</strong> Cogent & appealing method to identify & develop leadership pipeline for future.</li>
                                    <li><strong>Improve communication and alignment:</strong> Compelling & well founded method to showcase, decipher, and demystify the correlation between consistent communication & alignment to achieve org. goals.</li>
                                </ul>
                            )
                        },
                        {
                            id: 'attend',
                            title: 'Who can Attend',
                            content: (
                                <>
                                    <p className="attend-subtitle">Anyone & Everyone</p>
                                    <ul className="accordion-list">
                                        <li>Whether you are a corporate executive or a C-Suite leader</li>
                                        <li>Whether you are a freelancer or an entrepreneur</li>
                                        <li>Whether you are seasoned professional or just starting your career</li>
                                        <li>Whether you are a HR professional, a corporate trainer, or in procurement</li>
                                    </ul>
                                </>
                            )
                        },
                    ].map((item) => (
                        <div key={item.id} className="accordion-item">
                            <button
                                className={`accordion-header${openAccordion === item.id ? ' active' : ''}`}
                                onClick={() => toggleAccordion(item.id)}
                            >
                                <h2>{item.title}</h2>
                                <span className="accordion-icon">{openAccordion === item.id ? '−' : '+'}</span>
                            </button>
                            {openAccordion === item.id && (
                                <div className="accordion-content">{item.content}</div>
                            )}
                        </div>
                    ))}
                </div>
            </section>

            <section style={{ height: '15px', backgroundColor: '#62C0E2' }} />

            {/* ── READY ── */}
            <section className="ready-section">
                <div className="cw">
                    <h2 className="section-title-pink">Ready to unlock your leadership potential?</h2>
                    <p className="ready-text">Are you ready to "mine as much gold as WE can"!</p>
                    <p className="ready-text">Contact us today to learn more about the Lost Dutchman Gold Mine Leadership Workshop and how it can benefit you or your organisation.</p>
                    <p className="ready-text">This simulation is meant for anyone or everyone who is keen to take their leadership potential to the next level and aspires to build a winning team!</p>
                    <a href="/contact" className="contact-button">Contact Us</a>
                </div>
            </section>

            {/* ── CTA ── */}
            <section className="cta-section">
                <div className="cta-content">
                    <h2 className="cta-title">Experience Lost Dutchman Today</h2>
                    <a href="/contact" className="cta-button">
                        <span className="cta-text">Let's Make It Happen</span>
                        <i className="cta-arrow" />
                    </a>
                </div>
            </section>

            <section style={{ height: '15px', backgroundColor: '#CF87B0' }} />


        </>
    );
}