import { PhotoWithFallback } from '../elements';
import type { CompanyInformation } from '../../types/api/company-information';
import type { WebsitePhotos } from '../../types/api/website-photos';

interface AboutHomeProps {
    companyInformation?: CompanyInformation | null;
    websitePhotos?: WebsitePhotos | null;
    title?: string;
    subtitle?: string;
    ctaText?: string;
}

export const AboutHome = ({
    companyInformation,
    websitePhotos,
    title = "",
    subtitle = "",
    ctaText = "",
}: AboutHomeProps) => {
    const description = companyInformation?.about_text_markdown || '';
    
    // Use about photo
    const aboutImage = websitePhotos?.about;

    return (
        <section>
            <div className="mx-auto grid max-w-container grid-cols-1 gap-12 px-4 md:px-8 lg:grid-cols-2 lg:gap-16">
                <div className="order-2 lg:order-1">
                    <PhotoWithFallback
                        photoUrl={aboutImage?.url || ''}
                        photoAlt={aboutImage?.alt || 'About'}
                        fallbackId="about-aman"
                        className="w-full h-full object-cover min-h-[300px] md:min-h-[400px]"
                    />
                </div>

                <div className="order-1 lg:order-2 flex flex-col justify-center">
                    <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
                        {title}
                    </h2>
                    
                    {subtitle && (
                        <p className="mt-4 font-body text-md text-tertiary uppercase tracking-wide">
                            {subtitle}
                        </p>
                    )}
                    
                    {description && (
                        <p className="mt-6 font-body text-lg leading-relaxed text-tertiary">
                            {description}
                        </p>
                    )}

                    {ctaText && (
                        <a
                            href="/about"
                            className="mt-8 inline-block font-body text-base underline underline-offset-4 hover:no-underline w-fit transition-colors"
                            style={{ color: 'var(--color-text-brand-accent)' }}
                        >
                            {ctaText}
                        </a>
                    )}
                </div>
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('about-home', 'aman', AboutHome);
