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;
    description?: string;
    bullets?: string[];
    ctaText?: string;
    ctaHref?: string;
}

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

    return (
        <section className="py-16 md:py-20 lg:py-24 bg-primary">
            <div className="mx-auto max-w-7xl px-4 md:px-8">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                    {/* Left: Image */}
                    <div className="order-2 lg:order-1">
                        <PhotoWithFallback
                            photoUrl={aboutImage?.url || ''}
                            photoAlt={aboutImage?.alt || ''}
                            fallbackId="about-barelux"
                            className="w-full h-full object-cover rounded-2xl min-h-[400px] lg:min-h-[500px]"
                        />
                    </div>

                    {/* Right: Content */}
                    <div className="order-1 lg:order-2">
                        {/* Tagline */}
                        {tagline && (
                            <p className="font-body text-xs font-semibold uppercase tracking-widest text-fg-primary mb-4">
                                {tagline}
                            </p>
                        )}
                        
                        {/* Heading */}
                        <h2 className="font-display text-display-md font-normal leading-tight text-fg-primary mb-6">
                            {title}
                        </h2>
                        
                        {/* Description */}
                        {aboutText && (
                            <p className="font-body text-base leading-relaxed text-secondary mb-8">
                                {aboutText}
                            </p>
                        )}

                        {/* Bullet Points with Checkmarks */}
                        {bullets && bullets.length > 0 && (
                            <ul className="space-y-4 mb-8">
                                {bullets.map((bullet, index) => (
                                    <li key={index} className="flex items-start gap-3">
                                        {/* Checkmark Icon */}
                                        <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>
                        )}

                        {/* CTA Button */}
                        {ctaText && (
                            <Button
                                href={ctaHref}
                                color="primary"
                                size="md"
                            >
                                {ctaText}
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
};

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