'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import Image from 'next/image';
import { FaFileAlt, FaPuzzlePiece, FaFileImport, FaUserFriends, FaToolbox, FaUsers, FaLayerGroup, FaHandsHelping } from 'react-icons/fa';

export default function AboutLDGMPage() {
    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(false);
    const [hasAnimated, setHasAnimated] = useState<boolean>(false);
    const statsRef = useRef<HTMLDivElement>(null);

    const animateCounters = useCallback((): void => {
        const counters = document.querySelectorAll<HTMLElement>('.counter');
        counters.forEach((counter: HTMLElement) => {
            const targetAttr = counter.getAttribute('data-target');
            if (!targetAttr) return;
            const target = parseInt(targetAttr);
            const duration = 2000;
            const increment = target / (duration / 16);
            let current = 0;
            const updateCounter = (): void => {
                current += increment;
                if (current < target) {
                    counter.textContent = (target >= 1000 ? Math.floor(current).toLocaleString() : Math.floor(current)) + '+';
                    requestAnimationFrame(updateCounter);
                } else {
                    counter.textContent = (target >= 1000 ? target.toLocaleString() : target) + '+';
                }
            };
            updateCounter();
        });
    }, []);

    useEffect(() => {
        const currentRef = statsRef.current;
        const observer = new IntersectionObserver(
            (entries: IntersectionObserverEntry[]) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting && !hasAnimated) {
                        setHasAnimated(true);
                        animateCounters();
                    }
                });
            },
            { threshold: 0.5 }
        );
        if (currentRef) observer.observe(currentRef);
        return () => { if (currentRef) observer.unobserve(currentRef); };
    }, [hasAnimated, animateCounters]);

    return (
        <>
            <style jsx>{`
                /* ── Reset ── */
                * { box-sizing: border-box; margin: 0; padding: 0; }

                /* ── 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: #fff;
                    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; }
                }

                /* ── Section headings ── */
                .section-title, .section-title-inline, .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;
                    line-height: 1.2;
                }
                .section-title-inline { margin-bottom: 10px; }
                .section-title-dark-center {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 36px;
                    font-weight: 700;
                    color: #181B31;
                    margin: 0 0 40px;
                    padding-bottom: 15px;
                    border-bottom: 3px solid #E67399;
                    display: inline-block;
                    line-height: 1.2;
                }
                .goal-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 36px;
                    font-weight: 700;
                    color: #181B31;
                    margin-bottom: 20px;
                    padding-bottom: 15px;
                    border-bottom: 3px solid #E67399;
                    display: inline-block;
                    line-height: 1.2;
                }
                @media (max-width: 1024px) {
                    .section-title, .section-title-inline, .section-title-dark { font-size: 26px; }
                    .section-title-dark-center, .goal-title { font-size: 30px; margin-bottom: 28px; }
                }
                @media (max-width: 767px) {
                    .section-title, .section-title-inline, .section-title-dark { font-size: 20px; margin-bottom: 12px; }
                    .section-title-dark-center, .goal-title { font-size: 20px; margin-bottom: 20px; }
                }
                @media (max-width: 480px) {
                    .section-title, .section-title-inline, .section-title-dark { font-size: 17px; }
                    .section-title-dark-center, .goal-title { font-size: 17px; }
                }

                /* ── Body text ── */
                .intro-text, .reach-intro, .goal-text,
                .benefits-list li, .description-block p,
                .picture-content p, .planning-desc,
                .pink-list li, .pink-text, .pink-quote,
                .unfolds-label, .planning-label, .stat-label {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 18px;
                    color: #5D6371;
                    line-height: 1.7;
                }
                @media (max-width: 1024px) {
                    .intro-text, .reach-intro, .goal-text,
                    .benefits-list li, .description-block p,
                    .picture-content p, .planning-desc { font-size: 16px; }
                    .unfolds-label, .planning-label, .stat-label { font-size: 15px; }
                }
                @media (max-width: 767px) {
                    .intro-text, .reach-intro, .goal-text,
                    .benefits-list li, .description-block p,
                    .picture-content p, .planning-desc,
                    .pink-list li, .pink-text, .pink-quote { font-size: 15px; }
                }

                /* ── Intro ── */
                .intro-section { padding: 35px 0 20px; background: #fff; }
                @media (max-width: 767px) { .intro-section { padding: 24px 0 12px; } }

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

                .content-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 50px;
                    margin-bottom: 40px;
                    align-items: start;
                }
                @media (max-width: 968px) { .content-grid { grid-template-columns: 1fr; gap: 32px; } }

                .video-container {
                    width: 100%;
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                    aspect-ratio: 16/9;
                }
                .video-container iframe { width: 100%; height: 100%; border: none; }

                .benefits-list {
                    list-style: disc;
                    padding-left: 20px;
                    margin: 0 0 15px;
                }
                .benefits-list li { margin-bottom: 4px; }
                .description-block { margin-top: 15px; }
                .description-block p strong { color: #5D6371; font-weight: 700; }

                /* ── Pink section ── */
                .pink-section { padding: 80px 0; background: #C87FA5; }
                @media (max-width: 1024px) { .pink-section { padding: 56px 0; } }
                @media (max-width: 767px)  { .pink-section { padding: 36px 0; } }

                .pink-title {
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 28px;
                    font-weight: 700;
                    color: #fff;
                    line-height: 1.5;
                    padding: 15px 60px 15px 0;
                    border-bottom: 2px solid #fff;
                    cursor: pointer;
                    position: relative;
                    display: block;
                    margin: 0;
                }
                @media (max-width: 1024px) { .pink-title { font-size: 22px; } }
                @media (max-width: 767px)  { .pink-title { font-size: 18px; padding: 12px 44px 12px 0; } }
                @media (max-width: 480px)  { .pink-title { font-size: 15px; } }

                .accordion-icon {
                    position: absolute;
                    right: 0; top: 50%;
                    transform: translateY(-50%);
                    font-size: 40px;
                    font-weight: 300;
                    color: #fff;
                    line-height: 1;
                }
                @media (max-width: 767px) { .accordion-icon { font-size: 28px; } }

                .accordion-content { padding-top: 30px; }
                .pink-list { list-style: disc; padding-left: 20px; margin-bottom: 30px; }
                .pink-list li { color: #fff; margin-bottom: 12px; }
                .pink-list li::marker { color: #fff; }
                .pink-text { color: #fff; margin-bottom: 25px; }
                .pink-text strong { color: #fff; font-weight: 700; }
                .pink-quote { color: #fff; margin-top: 25px; }
                .pink-quote strong { color: #fff; font-weight: 700; }

                /* ── Reach section ── */
                .reach-section {
                    padding: 60px 0 80px;
                    background: #eee;
                    position: relative;
                }
                .reach-section::before {
                    content: ''; position: absolute;
                    top: 0; left: 0; right: 0; height: 15px; background: #62C0E2;
                }
                .reach-section::after {
                    content: ''; position: absolute;
                    bottom: 0; left: 0; right: 0; height: 15px; background: #62C0E2;
                }
                @media (max-width: 767px) { .reach-section { padding: 40px 0 56px; } }

                .reach-intro { margin-bottom: 40px; }

                .stats-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 80px;
                    max-width: 1200px;
                    margin: 0 auto;
                }
                @media (max-width: 1024px) { .stats-grid { gap: 48px; } }
                @media (max-width: 767px)  { .stats-grid { grid-template-columns: 1fr; gap: 32px; } }

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

                /* ── Unfolds section ── */
                .unfolds-section {
                    padding: 60px 0 0;
                    background: #f5f5f5;
                    position: relative;
                }
                .unfolds-section::after {
                    content: ''; position: absolute;
                    bottom: 0; left: 0; right: 0; height: 15px; background: #C87FA5;
                }
                @media (max-width: 767px) { .unfolds-section { padding: 36px 0 0; } }

                .unfolds-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 60px;
                    margin-top: 50px;
                    padding-bottom: 60px;
                }
                @media (max-width: 1024px) { .unfolds-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
                @media (max-width: 480px)  { .unfolds-grid { grid-template-columns: 1fr; gap: 32px; } }

                .unfolds-item { text-align: center; }
                .unfolds-icon {
                    margin-bottom: 20px;
                    display: flex; justify-content: center; align-items: center;
                }
                .unfolds-icon svg { width: 60px !important; height: 60px !important; color: #B74273 !important; }
                .unfolds-label { text-transform: uppercase; letter-spacing: 0; line-height: 1.5; color: #5D6371; }

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

                .picture-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 50px;
                    margin-bottom: 40px;
                    align-items: start;
                }
                @media (max-width: 968px) { .picture-grid { grid-template-columns: 1fr; gap: 32px; } }

                .picture-content p { margin-bottom: 20px; }
                .picture-image {
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
                }

                /* ── Planning section ── */
                .planning-section { padding: 30px 0 60px; background: #fff; }
                @media (max-width: 767px) { .planning-section { padding: 20px 0 40px; } }

                .planning-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 40px;
                    margin-top: 50px;
                }
                @media (max-width: 1024px) { .planning-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 36px; } }
                @media (max-width: 480px)  { .planning-grid { grid-template-columns: 1fr; gap: 28px; } }

                .planning-item { text-align: center; }
                .planning-icon {
                    margin-bottom: 15px;
                    display: flex; justify-content: center; align-items: center;
                }
                .planning-icon svg { width: 50px !important; height: 50px !important; color: #B74273 !important; }
                .planning-label {
                    text-transform: uppercase;
                    margin-bottom: 10px;
                    line-height: 1.4;
                    font-weight: 400;
                    color: #5D6371;
                }

                /* ── 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;
                }
                @media (max-width: 1024px) { .cta-section { padding: 72px 0; } }
                @media (max-width: 767px)  { .cta-section { padding: 52px 0; } }

                .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; } }
                @media (max-width: 767px)  { .cta-title { font-size: 24px; } }
                @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="/ldgm-picture.jpg" alt="Lost Dutchman Game Board" fill priority style={{ objectFit: 'cover' }} />
                </div>
                <div className="cw hero-badge">
                    <div className="hero-badge-inner">
                        <h1 className="hero-title">About The Search for the Lost Dutchman's Gold Mine</h1>
                    </div>
                </div>
            </section>

            {/* ── INTRO ── */}
            <section className="intro-section">
                <div className="cw">
                    <p className="intro-text">
                        A World-Acclaimed Experiential Learning Tool Focused on Collaboration, Alignment, Leadership and Implementation of Optimized Performance.
                    </p>
                </div>
            </section>

            {/* ── MAIN ── */}
            <section className="main-section">
                <div className="cw">
                    <h2 className="section-title">Lost Dutchman's Gold Mine</h2>
                    <div className="content-grid">
                        <div className="video-wrapper">
                            <div className="video-container">
                                <iframe
                                    src="https://www.youtube.com/embed/HQp64Ijjarg"
                                    title="The Search for Lost Dutchman's Gold Mine"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowFullScreen
                                />
                            </div>
                        </div>
                        <div className="benefits-wrapper">
                            <h2 className="section-title-inline">Do You Want To</h2>
                            <ul className="benefits-list">
                                <li>Break down the silo culture at work?</li>
                                <li>Align employee goals with organizational goals?</li>
                                <li>Imbibe positivity, creativity, and proactiveness in teams?</li>
                                <li>Give employees the confidence to make faster decisions?</li>
                                <li>Encourage teams to collaborate rather than compete?</li>
                                <li>Build a sense of trust in leadership?</li>
                            </ul>
                            <div className="description-block">
                                <p><strong>The Search for The Lost Dutchman's Gold Mine</strong> has been PMC's flagship team building simulation since 1993 and has been helping all kinds of organizations on a global scale, resulting in dramatic improvements in communication, collaboration, leadership, resource management and team dynamics. It encourages employees of different levels to up their performance and add value to the organization.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* ── PINK ACCORDION ── */}
            <section className="pink-section">
                <div className="cw">
                    <h2 className="pink-title" onClick={() => setIsAccordionOpen(!isAccordionOpen)}>
                        The Search for The Lost Dutchman's Gold Mine gives your group
                        <span className="accordion-icon">{isAccordionOpen ? '−' : '+'}</span>
                    </h2>
                    {isAccordionOpen && (
                        <div className="accordion-content">
                            <ul className="pink-list">
                                <li>Access to a powerful and proven team-building event designed to strengthen organizations of all kinds</li>
                                <li>A challenging and fun gameplay resulting in an enthusiastic and energetic buy-in from participants</li>
                                <li>A solid instructional design with highly acclaimed debriefing qualities</li>
                                <li>A hands-on learning and brainstorming opportunity that leads to tangible ideas for and appreciation of better collaboration, communications, teamwork and leadership.</li>
                            </ul>
                            <p className="pink-text">During game play, teams experience issues common in workplaces with key learnings around strategic planning, collaboration, risk taking, open communication, faster decision making, and trust in leadership.</p>
                            <p className="pink-text"><strong>The Search for The Lost Dutchman's Gold Mine</strong> is energizing, visual and highly interactive, producing an excellent learning environment supported by extensive debriefing materials that invite solid learning points and a focus on implementation. It's a valuable business-improvement game that links individual and team behaviors to workplace improvement opportunities.</p>
                            <p className="pink-text">This tabletop facilitation tool is perfect for team building events, leadership training, strategy meetings, sales review meets, retreats, management training and organizational development training.</p>
                            <p className="pink-quote"><strong>"Dutchman"</strong> is a blast. In fact, surveyed users tell us that there is no other exercise that is as engaging and effective.</p>
                        </div>
                    )}
                </div>
            </section>

            {/* ── REACH ── */}
            <section className="reach-section">
                <div className="cw">
                    <h2 className="section-title-dark">Reach</h2>
                    <p className="reach-intro">
                        Our facilitation tools are used by consultants and organizations of repute all over the world.<br />
                        For over 25 years, Dutchman has entertained and enlightened thousands of participants worldwide and we have the testimonials to prove it.
                    </p>
                    <div className="stats-grid" ref={statsRef}>
                        <div className="stat-item">
                            <h3 className="stat-number counter" data-target="40">0</h3>
                            <p className="stat-label">Countries</p>
                        </div>
                        <div className="stat-item">
                            <h3 className="stat-number counter" data-target="1500">0</h3>
                            <p className="stat-label">Organizations</p>
                        </div>
                        <div className="stat-item">
                            <h3 className="stat-number counter" data-target="300000">0</h3>
                            <p className="stat-label">Professionals</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* ── HOW THE GAME UNFOLDS ── */}
            <section className="unfolds-section">
                <div className="cw">
                    <h2 className="section-title-dark">How the game unfolds?</h2>
                    <div className="unfolds-grid">
                        {[
                            { icon: <FaFileAlt />, label: 'BRIEFING SESSION' },
                            { icon: <FaPuzzlePiece />, label: 'TIME TO STRATEGIZE' },
                            { icon: <FaFileImport />, label: 'FUN, INTERACTIVE GAME PLAY' },
                            { icon: <FaUserFriends />, label: 'LEARNING THROUGH DEBRIEFING' },
                        ].map((item, i) => (
                            <div key={i} className="unfolds-item">
                                <div className="unfolds-icon" style={{ color: '#B74273', fontSize: '60px' }}>{item.icon}</div>
                                <p className="unfolds-label">{item.label}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── PICTURE THIS ── */}
            <section className="picture-section">
                <div className="cw">
                    <div className="picture-grid">
                        <div className="picture-content">
                            <h2 className="section-title-dark">Picture This:-</h2>
                            <p>Your teams will find themselves in the modern-day Southwestern United States in the Superstition Mountains of Arizona where they will go on a search for gold from the famous Lost Dutchman's Mine, first discovered by Jacob Waltz in the 1860s and lost in the Phoenix flood of 1891.</p>
                            <p>Outfitted with all the supplies and support needed for success, it's up to each team and the choices they make regarding the use of the resources and information available that will impact the amount of gold that they'll mine. Challenges and opportunities exist that will affect their decisions.</p>
                        </div>
                        <div className="picture-image">
                            <Image src="/stockofcard.jpg" alt="Lost Dutchman Game Components" width={600} height={400} style={{ width: '100%', height: 'auto', borderRadius: '12px' }} />
                        </div>
                    </div>
                    <h2 className="goal-title">The Goal is to mine as much Gold as WE Can!</h2>
                    <p className="goal-text">Collaboration between teams visibly and measurably improves team and group performance results with competition clearly sub-optimizing results ("The Goal is to mine as much Gold as WE Can!"). During the debriefing, the Expedition Leader (facilitator) establishes clear links to game behavior and desired organizational behaviors impacting collaboration, innovation, quality, motivation and leadership.</p>
                </div>
            </section>

            {/* ── PLANNING ── */}
            <section className="planning-section">
                <div className="cw">
                    <h2 className="section-title-dark-center">Planning to run the game?<br />Here are more details</h2>
                    <div className="planning-grid">
                        {[
                            { icon: <FaToolbox />, label: 'DURATION OF THE GAME', desc: 'Deliver: 3.5 hours | Debriefing: 90+ minutes' },
                            { icon: <FaUsers />, label: 'IDEAL TEAM SIZE', desc: '20–200+ in a conference seating' },
                            { icon: <FaLayerGroup />, label: 'IDEAL PARTICIPANTS', desc: 'Cross-functional teams, managers to senior / top management teams' },
                            { icon: <FaHandsHelping />, label: 'FACILITATION EXPERIENCE', desc: 'It is straightforward and simple to deliver and does not require extensive facilitation experience.' },
                        ].map((item, i) => (
                            <div key={i} className="planning-item">
                                <div className="planning-icon" style={{ color: '#B74273', fontSize: '50px' }}>{item.icon}</div>
                                <h3 className="planning-label">{item.label}</h3>
                                <p className="planning-desc">{item.desc}</p>
                            </div>
                        ))}
                    </div>
                </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>
        </>
    );
}