import type { FeaturesSection as FeaturesSectionData } from '@/marketing/cms-types';
import { iconFor } from '@/marketing/feature-icons';
import { SanitizedHtmlBody, SanitizedHtmlInline } from '@/marketing/sanitized-html';
import { CrossMark, Reveal } from '@/marketing/shared';
import { Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';
import type { ReactNode } from 'react';

export function FeaturesSection({ section }: { section: FeaturesSectionData }) {
    return (
        <section className="ms-section-features border-t border-border/60 bg-card/40">
            <div className="relative mx-auto max-w-6xl border-x border-border/60 px-6 py-24 lg:px-8 lg:py-24">
                <CrossMark className="left-0 top-0" />
                <CrossMark className="left-full top-0" />
                <Reveal>
                    <div className="ms-head max-w-3xl">
                        {section.eyebrow && (
                            <div className="ms-badge mb-6 inline-flex items-center rounded-full bg-accent px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-accent-foreground">
                                <SanitizedHtmlInline html={section.eyebrow} />
                            </div>
                        )}
                        <h2 className="font-display text-4xl font-medium leading-[1.1] tracking-tight text-foreground sm:text-5xl [&_em]:font-display [&_em]:italic [&_em]:text-accent">
                            <SanitizedHtmlInline html={section.heading} />
                        </h2>
                        {section.subhead && (
                            <SanitizedHtmlBody
                                html={section.subhead}
                                className="mt-6 text-lg"
                            />
                        )}
                    </div>
                </Reveal>
                <Reveal delay={0.1}>
                    {/* Column count tracks item count so 3 items fill a row
                        of 3, 4 items fill a row of 4, etc. Hardcoded
                        lg:grid-cols-4 left empty cells when sections had
                        only 3 items (Contact Channels + Quicklinks).
                        CrossMarks at column boundaries shift with the
                        grid — 3-col uses 1/3 + 2/3, 4-col uses 1/4 / 1/2 / 3/4. */}
                    {(() => {
                        const n = section.items.length;
                        const lgCols = n <= 1 ? 'lg:grid-cols-1'
                            : n === 2 ? 'lg:grid-cols-2'
                            : n === 3 ? 'lg:grid-cols-3'
                            : 'lg:grid-cols-4';
                        const mdCols = n === 1 ? 'sm:grid-cols-1' : 'sm:grid-cols-2';
                        return (
                    <div className={`relative -mx-6 mt-10 grid gap-px border-y border-border/60 bg-border/60 ${mdCols} lg:-mx-8 ${lgCols}`}>
                        {n >= 4 && (
                            <>
                                <CrossMark className="left-1/2 top-0" />
                                <CrossMark className="left-1/2 top-full" />
                                <CrossMark className="left-1/4 top-0" breakpoint="lg" />
                                <CrossMark className="left-1/4 top-full" breakpoint="lg" />
                                <CrossMark className="left-3/4 top-0" breakpoint="lg" />
                                <CrossMark className="left-3/4 top-full" breakpoint="lg" />
                            </>
                        )}
                        {n === 3 && (
                            <>
                                <CrossMark className="left-1/3 top-0" breakpoint="lg" />
                                <CrossMark className="left-1/3 top-full" breakpoint="lg" />
                                <CrossMark className="left-2/3 top-0" breakpoint="lg" />
                                <CrossMark className="left-2/3 top-full" breakpoint="lg" />
                            </>
                        )}
                        {n === 2 && (
                            <>
                                <CrossMark className="left-1/2 top-0" />
                                <CrossMark className="left-1/2 top-full" />
                            </>
                        )}
                        {section.items.map((item) => {
                            const hasIcon = !!item.icon;
                            const Icon = hasIcon ? iconFor(item.icon!) : null;
                            const linkLabel = item.linkLabel || 'Open';
                            const inner: ReactNode = (
                                <>
                                    {Icon && (
                                        <div className="ms-icon inline-flex h-11 w-11 items-center justify-center rounded-xl bg-accent/10 text-accent transition-colors group-hover:bg-accent group-hover:text-accent-foreground">
                                            <Icon className="h-5 w-5" />
                                        </div>
                                    )}
                                    <h3
                                        className={
                                            'font-display text-xl font-semibold text-foreground ' +
                                            (hasIcon ? 'mt-6' : '')
                                        }
                                    >
                                        {item.title}
                                    </h3>
                                    <SanitizedHtmlBody
                                        html={item.body}
                                        className="mt-3 text-sm"
                                    />
                                    {item.href && (
                                        <span className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-accent transition-opacity group-hover:opacity-80">
                                            {linkLabel}
                                            <ArrowRight className="h-3.5 w-3.5" />
                                        </span>
                                    )}
                                </>
                            );
                            const cardClass = 'ms-card group flex flex-col bg-card p-8 transition-colors lg:p-10';
                            // Link cards open hover-state via group-hover bg + opacity
                            // on the arrow. Internal hrefs use Inertia Link for SPA
                            // navigation; external + mailto fall through to <a>.
                            if (item.href) {
                                const isExternal =
                                    item.external ||
                                    /^(https?:|mailto:|tel:)/.test(item.href);
                                return isExternal ? (
                                    <a
                                        key={item.title}
                                        href={item.href}
                                        target={item.external ? '_blank' : undefined}
                                        rel={item.external ? 'noopener noreferrer' : undefined}
                                        className={cardClass + ' hover:bg-background'}
                                    >
                                        {inner}
                                    </a>
                                ) : (
                                    <Link
                                        key={item.title}
                                        href={item.href}
                                        className={cardClass + ' hover:bg-background'}
                                    >
                                        {inner}
                                    </Link>
                                );
                            }
                            return (
                                <div key={item.title} className={cardClass}>
                                    {inner}
                                </div>
                            );
                        })}
                    </div>
                        );
                    })()}
                </Reveal>
            </div>
        </section>
    );
}
