import { PhotoWithFallback, Button } 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;
    tagline?: string;
    title?: string;
    subtitle?: string;
    description?: string;
    bullets?: string[];
    ctaText?: string;
    ctaHref?: string;
}

export const AboutHome = ({
    companyInformation,
    websitePhotos,
    tagline = "",
    title = "",
    subtitle = "",
    description: descriptionProp,
    bullets = [],
    ctaText = "",
    ctaHref = "/about",
}: AboutHomeProps) => {
    const description = descriptionProp || companyInformation?.about_text_markdown || '';
    const aboutImage = websitePhotos?.about;
    const companyName = companyInformation?.company_name || '';

    return (
        <section className="bg-secondary py-16 md:py-24">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Centered Title */}
                <div className="text-center mb-12 max-w-3xl mx-auto">
                    {tagline && (
                        <p className="font-body text-xs font-semibold uppercase tracking-widest text-fg-primary mb-2">
                            {tagline}
                        </p>
                    )}
                    <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl mb-4">
                        {title}
                    </h2>
                    {subtitle && (
                        <p className="font-body text-lg text-secondary">
                            {subtitle}
                        </p>
                    )}
                </div>

                {/* Image and Content */}
                <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16 items-center">
                    <div>
                        <PhotoWithFallback
                            photoUrl={aboutImage?.url || ''}
                            photoAlt={aboutImage?.alt || `About ${companyName}`}
                            fallbackId="about-balance"
                            className="w-full h-full object-cover min-h-[400px] md:min-h-[500px] rounded-lg"
                        />
                    </div>

                    <div className="flex flex-col justify-center">
                        {description && (
                            <p className="font-body text-lg leading-relaxed text-secondary mb-8">
                                {description}
                            </p>
                        )}

                        {/* Bullet Points with Checkmarks */}
                        {bullets.length > 0 && (
                            <ul className="space-y-4 mb-8 list-none">
                                {bullets.map((bullet, index) => (
                                    <li key={index} className="flex items-start gap-3">
                                        <div className="flex-shrink-0 w-6 h-6 rounded-full border-2 border-fg-primary flex items-center justify-center mt-0.5">
                                            <svg
                                                className="w-3 h-3 text-fg-primary"
                                                fill="none"
                                                viewBox="0 0 24 24"
                                                stroke="currentColor"
                                                strokeWidth={3}
                                            >
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                                            </svg>
                                        </div>
                                        <span className="font-body text-base text-fg-primary">
                                            {bullet}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        )}

                        {ctaText && (
                            <Button
                                href={ctaHref}
                                color="primary"
                                size="lg"
                                className="font-body font-medium w-fit"
                            >
                                {ctaText}
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
};

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