import type { LogoWallSection as LogoWallSectionData } from '@/marketing/cms-types';

import { CrossMark, Reveal } from '@/marketing/shared';
import { type ReactNode } from 'react';

type LogoItem = LogoWallSectionData['items'][number];

/* Customer / partner logo strip. Ported from the formerly-hardcoded
 * `LogoWall` in Welcome.tsx — same grid + grayscale-on-hover treatment,
 * now data-driven through the CMS. Auto-hides when no logos are set so
 * fresh installs don't render an empty band (and don't ship placeholder
 * "customer" logos). */
export function LogoWallSection({
    section,
}: {
    section: LogoWallSectionData;
}) {
    const logos = section.items.filter((l) => (l.imageUrl || l.image || '') !== '');
    if (logos.length === 0) {
        return null;
    }

    return (
        <section className="ms-section-logos border-t border-border/60 bg-card/40">
            <div className="relative mx-auto max-w-6xl border-x border-border/60">
                <CrossMark className="left-0 top-0" />
                <CrossMark className="left-full top-0" />
                <Reveal>
                    <div className="grid grid-cols-2 gap-px bg-border/60 sm:grid-cols-4 lg:grid-cols-5">
                        {section.label.trim() !== '' && (
                            <div className="col-span-2 flex items-center bg-card px-6 py-6 text-[11px] font-medium uppercase leading-snug tracking-wider text-muted-foreground sm:col-span-4 lg:col-span-1 lg:row-span-2 lg:px-8 lg:py-8">
                                {section.label}
                            </div>
                        )}
                        {/* `contents` keeps the cells as grid items for the
                            default skin; the Geometry skin turns the track
                            into an infinite marquee and reveals the duplicate
                            set below (needed for the seamless -50% loop). */}
                        <div className="ms-logo-track contents">
                            {logos.map((logo, i) => (
                                <div
                                    key={`${logo.imageUrl || logo.image}-${i}`}
                                    className="ms-card flex items-center justify-center bg-card px-6 py-8"
                                >
                                    <LogoMark logo={logo} />
                                </div>
                            ))}
                            <div className="ms-logo-dup hidden" aria-hidden="true">
                                {logos.map((logo, i) => (
                                    <div
                                        key={`dup-${logo.imageUrl || logo.image}-${i}`}
                                        className="ms-card flex items-center justify-center bg-card px-6 py-8"
                                    >
                                        <LogoMark logo={logo} />
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </Reveal>
            </div>
        </section>
    );
}

function LogoMark({ logo }: { logo: LogoItem }): ReactNode {
    const src = logo.imageUrl || logo.image || '';
    const img = (
        <img
            src={src}
            alt={logo.alt ?? ''}
            loading="lazy"
            className="h-7 w-auto max-w-full object-contain opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0"
        />
    );

    if (logo.href && logo.href.trim() !== '') {
        return (
            <a
                href={logo.href}
                {...(logo.external
                    ? { target: '_blank', rel: 'noopener noreferrer' }
                    : {})}
                className="flex items-center justify-center"
            >
                {img}
            </a>
        );
    }

    return img;
}
