import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { router } from '@inertiajs/react';
import { useEffect, useRef } from 'react';
import ArchitectureCard from './components/ArchitectureCard';
import IntegrationsSection from './components/IntegrationsSection';
import ModuleTabsSection from './components/ModuleTabsSection';
import ProductCta from './components/ProductCta';
import ProductHero from './components/ProductHero';
import { tabs } from './components/tabs-config';

export default function Product({ tab }: { tab?: string | null }) {
    const activeTab = tabs.some((t) => t.value === tab) ? tab! : 'loans';
    const activeTabConfig = tabs.find((t) => t.value === activeTab) ?? tabs[0];
    const modulesRef = useRef<HTMLElement>(null);

    // Deep links like /product/savings land on the modules section directly.
    const deepLinkedTab = useRef(tab);
    useEffect(() => {
        if (deepLinkedTab.current) {
            modulesRef.current?.scrollIntoView?.({ behavior: 'smooth' });
        }
    }, []);

    const handleTabChange = (value: string) => {
        router.replace({
            url: value === 'loans' ? '/product' : `/product/${value}`,
            props: (current) => ({ ...current, tab: value }),
            preserveScroll: true,
        });
    };

    return (
        <PlatformLayout>
            <Seo
                title={`${activeTabConfig.label} — Product`}
                description={activeTabConfig.sub}
            />

            <ProductHero />
            <ModuleTabsSection
                ref={modulesRef}
                activeTab={activeTab}
                onTabChange={handleTabChange}
            />
            <IntegrationsSection />
            <ArchitectureCard />
            <ProductCta />
        </PlatformLayout>
    );
}