const { useState, useEffect } = React;
const Section = window.Section;

const Footer = ({ activePage = 'home' }) => {
    const [hash, setHash] = useState(() => (typeof window !== 'undefined' ? window.location.hash : ''));

    useEffect(() => {
        const syncHash = () => setHash(window.location.hash);
        window.addEventListener('hashchange', syncHash);
        window.addEventListener('load', syncHash);
        return () => {
            window.removeEventListener('hashchange', syncHash);
            window.removeEventListener('load', syncHash);
        };
    }, []);

    const isHome = activePage === 'home' && hash !== '#contact';
    const isWork = activePage === 'work';
    const isStudio = activePage === 'studio';
    const CONTACT_EMAIL = 'info@sedemoasis.com';

    const footerNavClass = (active) =>
        active ? 'opacity-100 font-medium' : 'opacity-40 hover:opacity-100 transition-opacity';

    return (
        <Section id="contact" className="min-h-screen md:h-screen px-4 sm:px-8 md:px-16 bg-white pt-24 sm:pt-28 md:pt-32 pb-[max(3rem,env(safe-area-inset-bottom,0px)+1.5rem)] md:pb-12 relative flex flex-col justify-between gap-16 md:gap-0">
            <div className="flex justify-start">
                <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black">lets work together</h2>
            </div>

            <div className="flex flex-col items-start">
                <p className="text-2xl sm:text-3xl md:text-7xl font-display font-medium leading-[0.95] sm:leading-[0.9] text-black tracking-tighter text-left max-w-6xl mb-8 sm:mb-12">
                    Go on, I don’t bite!<br />
                    <span className="opacity-10">Reaching out only benefits your users.</span>
                </p>
                <a 
                    href="mailto:info@sedemoasis.com"
                    onClick={() => window.soTrack?.('contact_click', { location: 'footer_cta', method: 'mailto' })}
                    className="px-8 sm:px-10 py-4 sm:py-5 rounded-lg border border-black text-black text-[12px] sm:text-[13px] font-medium uppercase tracking-[0.2em] transition-all duration-300 hover:bg-black hover:text-white active:scale-95 focus:outline-none focus:ring-2 focus:ring-black/5 block w-full sm:w-fit text-center sm:text-left"
                >
                    get in touch
                </a>
            </div>

            <div className="w-full shrink-0 relative z-10 pt-10 sm:pt-12 border-t border-black/[0.03]">
                <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-8 sm:gap-10">
                    <div className="flex flex-col items-start space-y-6 md:max-w-xl">
                        <div className="flex items-center shrink-0">
                            <img src="logo_b.svg" alt="Sedem Oasis Logo" className="h-3.5 w-auto" />
                            <span className="text-[10px] align-top ml-1.5 font-medium text-black opacity-60">®</span>
                        </div>
                        <p className="text-lg sm:text-xl md:text-2xl opacity-40 leading-relaxed font-light">
                            We are a complete creative design studio dedicated to your needs.
                        </p>
                    </div>

                    <div className="flex flex-col items-start gap-8 md:min-w-[360px] md:pt-10 md:items-end">
                        <div className="text-[12px] opacity-40 uppercase tracking-[0.2em] font-medium md:w-full md:text-right">
                            New York · Toronto · San Francisco
                        </div>
                        <nav className="flex flex-wrap items-center gap-x-6 gap-y-2 sm:gap-x-8 text-[12px] md:text-base tracking-wider font-medium text-black md:w-full md:justify-end">
                            <a href="index.html" aria-current={isHome ? 'page' : undefined} className={footerNavClass(isHome)}>home</a>
                            <a href="allworks.html" aria-current={isWork ? 'page' : undefined} className={footerNavClass(isWork)}>work</a>
                            <a href="studio.html" aria-current={isStudio ? 'page' : undefined} className={footerNavClass(isStudio)}>studio</a>
                            <a href={`mailto:${CONTACT_EMAIL}`} className={footerNavClass(false)}>contact</a>
                        </nav>
                    </div>
                </div>

                <div className="w-full pt-12 flex flex-col md:flex-row md:justify-between md:items-start gap-4">
                    <span className="text-[12px] opacity-30 uppercase tracking-[0.2em] font-medium">© 2026 Sedem Oasis LLC</span>
                    <div className="flex items-center gap-6 text-black/40 md:min-w-[360px] md:justify-end md:ml-auto">
                        {/*
                        <a href="#" className="hover:text-black transition-colors" aria-label="Instagram">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                        </a>
                        <a href="#" className="hover:text-black transition-colors" aria-label="LinkedIn">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                        </a>
                        */}
                    </div>
                </div>
            </div>
        </Section>
    );
};

window.Footer = Footer;