import React from "react";
import { PhotoWithFallback } from '../elements';
import type { WebsitePhotos } from '../../types/api/website-photos';
import type { FormDefinition } from '../../types/api/form';
import type { SiteConfig } from '../../types/config';
import { ContactSectionForm } from './contact-section-form.barelux';

function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
  if (!config?.navigation?.footer) return {};
  const flat = config.navigation.footer.flat();
  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
}

interface ContactSectionProps {
    websitePhotos?: WebsitePhotos | null;
    title?: string;
    subtitle?: string;
    formDefinition?: FormDefinition | null;
    config?: SiteConfig | null;
}

const ContactSection = ({
    websitePhotos,
    title = "",
    subtitle = "",
    formDefinition,
    config,
}: ContactSectionProps) => {
    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
    const contactPhoto = websitePhotos?.contact;
    const contactImageUrl = contactPhoto?.url;
    const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
    const finalContactImageAlt = contactPhoto?.alt || "Contact image";

    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">
                    {/* Left Column - Form */}
                    <div>
                        <h2 className="font-display text-4xl font-medium text-fg-primary md:text-5xl mb-6">
                            {title}
                        </h2>
                        <p className="font-body text-lg text-secondary leading-relaxed mb-8">
                            {subtitle}
                        </p>

                        <ContactSectionForm
                            formDefinition={formDefinition}
                            privacyPolicyUrl={privacyPolicyUrl}
                            termsOfServiceUrl={termsOfServiceUrl}
                        />
                    </div>

                    {/* Right Column - Image (full height next to form) */}
                    {finalContactImage && (
                        <div className="max-lg:hidden relative h-full min-h-0 overflow-hidden rounded-lg">
                            <PhotoWithFallback
                                photoUrl={finalContactImage}
                                photoAlt={finalContactImageAlt}
                                fallbackId="contact-barelux"
                                className="h-full w-full object-cover rounded-lg"
                            />
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
};

export default ContactSection;

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('contact-section', 'barelux', ContactSection);
