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.aman';

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>
            <div className="mx-auto max-w-container px-4 md:px-8">
                <div className="grid grid-cols-1 gap-12 md:gap-16 lg:grid-cols-2">
                    {/* Form Side */}
                    <div className="flex w-full flex-col">
                        <div className="mb-8">
                            <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
                                {title}
                            </h2>
                            <p className="mt-4 font-body text-lg leading-relaxed text-tertiary">
                                {subtitle}
                            </p>
                        </div>

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

                    {/* Image Side - full height next to form */}
                    <div className="max-lg:hidden h-full min-h-0 overflow-hidden">
                        <PhotoWithFallback
                            photoUrl={finalContactImage || ''}
                            photoAlt={finalContactImageAlt}
                            fallbackId="contact-image"
                            className="h-full w-full object-cover"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ContactSection;

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