"use client";

import { useEffect, useRef, useState } from "react";

const WORDS = [
    "Strategic Thinking.",
    "Creativity.",
    "Communication.",
    "Leadership Capability.",
];

export default function AboutSection() {
    const [index, setIndex] = useState(0);
    const textRef = useRef<HTMLSpanElement>(null);
    const wrapperRef = useRef<HTMLSpanElement>(null);

    /* rotate words */
    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((prev) => (prev + 1) % WORDS.length);
        }, 2500);
        return () => clearInterval(interval);
    }, []);

    /* animate width */
    useEffect(() => {
        if (textRef.current && wrapperRef.current) {
            wrapperRef.current.style.width = `${textRef.current.offsetWidth}px`;
        }
    }, [index]);

    return (
        <>
            <section
                className="w-full bg-white nyra-about-section"
                style={{ paddingTop: "80px", paddingBottom: "80px", overflow: "hidden" }}
            >
                <div className="max-w-[1140px] mx-auto px-[15px] nyra-about-container">
                    <div className="flex gap-16 items-start nyra-about-flex">

                        {/* LEFT */}
                        <div className="w-[58%] pt-12 nyra-about-left">
                            <h2 className="nyra-about-heading text-[32px] font-bold text-[#3a3a3a]" style={{ marginBottom: "8px" }}>
                                WHO ARE WE?
                            </h2>

                            <div
                                className="w-[90%] border-t border-dashed border-[#e85d7b] nyra-about-divider"
                                style={{ borderWidth: "0.8px", marginTop: "0px", marginBottom: "40px" }}
                            />

                            <p className="text-[18px] leading-[1.5] text-black text-justify nyra-about-text max-w-[95%]"
                                style={{ marginBottom: "52px" }}
                            >
                                A rapidly growing boutique leadership consulting firm with an edge. Our approach is to build strategies, enhance communication skills, and inculcate creativity, so our clients can reach their full potential. We are developing and delivering the next generation of future-ready leaders who can thrive in the ever-changing corporate landscape. Over the last 2 years, we've helped some of the world's eminent companies and exciting startups to build their leadership capability and reinvent talent development solutions.
                            </p>

                            {/* ROTATING TEXT + BUTTON */}
                            <div className="nyra-about-cta">
                                <h1 id="whoweare_creativetext">
                                    <span ref={wrapperRef} className="txt-rotate-keywords">
                                        <span ref={textRef} className="txt-rotate-keyword">
                                            {WORDS[index]}
                                        </span>
                                    </span>
                                </h1>

                                <a href="/about-us" className="who_we_are_btn">
                                    <span className="btn-inner">
                                        KNOW MORE
                                        <span className="btn-icon">
                                            <svg
                                                width="24"
                                                height="24"
                                                viewBox="0 0 24 24"
                                                fill="none"
                                                stroke="currentColor"
                                                strokeWidth="2"
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                            >
                                                <circle cx="12" cy="12" r="10" />
                                                <path d="M12 8l4 4-4 4M8 12h8" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>

                        {/* RIGHT */}
                        <div className="w-[42%] nyra-about-right">
                            <img
                                src="/about_img.png"
                                alt="Nyra leadership workshop"
                                className="shadow-2xl nyra-about-img"
                            />
                        </div>

                    </div>
                </div>
            </section>

            {/* STYLES */}
            <style dangerouslySetInnerHTML={{
                __html: `
                /* ── RIGHT COLUMN — pull image up into section padding on desktop ── */
                .nyra-about-right {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;
                    margin-top: -80px;        /* break out of section paddingTop */
                    padding-bottom: 0;
                }
                .nyra-about-img {
                    width: 100%;
                    height: auto;
                    display: block;
                    border-radius: 22px;
                }

                /* ── HEADING — never wrap ── */
                .nyra-about-heading {
                    white-space: nowrap;
                }

                /* ── CTA wrapper — block flow so button never escapes ── */
                .nyra-about-cta {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;
                }

                #whoweare_creativetext {
                    background: linear-gradient(-90deg, #0a587b 0%, #b53855 100%);
                    /* clamp width so it never overflows its parent */
                    max-width: min(650px, 100%);
                    width: fit-content;
                    padding: 3% 9%;
                    border: 3px solid #fff;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

                    border-top-left-radius: 80px;
                    border-bottom-left-radius: 0;
                    border-top-right-radius: 100px;
                    border-bottom-right-radius: 100px;

                    font-family: Helvetica;
                    line-height: 0.95em;
                    font-size: 0;
                    display: inline-block;
                    position: relative;
                    /* prevent overflow on narrow viewports */
                    overflow: hidden;
                    box-sizing: border-box;
                }

                .txt-rotate-keywords {
                    display: inline-flex;
                    white-space: nowrap;
                    transition: width 0.8s cubic-bezier(0.86, 0, 0.07, 1);
                }

                .txt-rotate-keyword {
                    font-size: 56px;
                    font-weight: 300;
                    line-height: 1.1;
                    color: #fff;
                }

                .who_we_are_btn {
                    /* static in normal flow — no more absolute positioning */
                    display: inline-block;
                    background: #e3e3e3;
                    color: #161c38;

                    border-top-left-radius: 0;
                    border-bottom-left-radius: 30px;
                    border-top-right-radius: 15px;
                    border-bottom-right-radius: 30px;

                    font-family: Helvetica;
                    font-weight: 500;
                    font-size: 18px;
                    letter-spacing: 0.1em;
                    text-transform: uppercase;

                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
                    text-decoration: none;
                    transition: all 0.3s ease;
                    z-index: 10;
                    flex-shrink: 0;
                }

                .btn-inner {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 24px;
                }

                .who_we_are_btn:hover {
                    background: #d6d6d6;
                    transform: translateY(-2px);
                }

                /* ── RESPONSIVE BREAKPOINTS ── */

                /* 1100px — mid zoom: remove left padding offset, stretch image to fill */
                @media (max-width: 1100px) {
                    .nyra-about-flex {
                        align-items: stretch !important;
                    }
                    .nyra-about-left {
                        padding-top: 0 !important;
                    }
                    .nyra-about-right {
                        margin-top: 0 !important;
                        display: flex !important;
                        flex-direction: column !important;
                        justify-content: flex-start !important;
                        align-items: stretch !important;
                    }
                    .nyra-about-img {
                        margin-top: 0 !important;
                        flex: 1 !important;
                        width: 100% !important;
                        height: 100% !important;
                        object-fit: cover !important;
                        object-position: center top !important;
                        min-height: 380px !important;
                    }
                    .txt-rotate-keyword {
                        font-size: 44px !important;
                    }
                    #whoweare_creativetext {
                        padding: 3% 7% !important;
                    }
                }

                /* 900px */
                @media (max-width: 900px) {
                    .txt-rotate-keyword {
                        font-size: 38px !important;
                    }
                    #whoweare_creativetext {
                        padding: 3% 6% !important;
                    }
                }

                /* 767px — stack layout */
                @media (max-width: 767px) {
                    .nyra-about-section {
                        padding-top: 50px !important;
                        padding-bottom: 50px !important;
                    }

                    .nyra-about-flex {
                        flex-direction: column-reverse !important;
                        gap: 24px !important;
                        align-items: stretch !important;
                    }

                    .nyra-about-left,
                    .nyra-about-right {
                        width: 100% !important;
                        margin-left: 0 !important;
                        padding-top: 0 !important;
                    }

                    /* image fills full width naturally when stacked */
                    .nyra-about-right {
                        margin-top: 0 !important;
                        justify-content: flex-start !important;
                        align-items: stretch !important;
                    }
                    .nyra-about-img {
                        flex: none !important;
                        margin-top: 0 !important;
                        width: 100% !important;
                        height: auto !important;
                        min-height: unset !important;
                        object-fit: unset !important;
                    }

                    .nyra-about-heading {
                        font-size: 26px !important;
                        text-align: left !important;
                        /* keep on one line — shrink font slightly if needed */
                        white-space: nowrap !important;
                        overflow: hidden !important;
                        text-overflow: ellipsis !important;
                    }

                    .nyra-about-text {
                        font-size: 16px !important;
                        text-align: left !important;
                        margin-bottom: 30px !important;
                    }

                    .nyra-about-cta {
                        align-items: flex-start !important;
                        overflow: hidden !important;
                        width: 100% !important;
                    }

                    #whoweare_creativetext {
                        max-width: 100% !important;
                        width: auto !important;
                        padding: 4% 8% !important;
                        margin-bottom: 0 !important;
                        box-sizing: border-box !important;
                    }

                    .txt-rotate-keywords {
                        max-width: 100% !important;
                        overflow: hidden !important;
                    }

                    .txt-rotate-keyword {
                        font-size: 32px !important;
                        overflow: hidden !important;
                        text-overflow: ellipsis !important;
                    }

                    .who_we_are_btn {
                        align-self: flex-start !important;
                    }

                    .btn-inner {
                        padding: 10px 20px !important;
                        font-size: 16px !important;
                    }
                }

                @media (max-width: 480px) {
                    .nyra-about-heading {
                        font-size: 22px !important;
                    }

                    .txt-rotate-keyword {
                        font-size: 26px !important;
                    }

                    #whoweare_creativetext {
                        padding: 5% 7% !important;
                    }

                    .btn-inner {
                        font-size: 14px !important;
                        padding: 9px 16px !important;
                    }
                }

                @media (max-width: 360px) {
                    .nyra-about-heading {
                        font-size: 20px !important;
                    }
                    .txt-rotate-keyword {
                        font-size: 22px !important;
                    }
                }
            `}} />
        </>
    );
}