import ConsultationForm from '@/components/site/consultation-form';
import Glow from '@/components/site/glow';
import Icon from '@/components/site/icon';
import Pill from '@/components/site/pill';
import Section from '@/components/site/section';
import { company, offices } from '@/data/site';

type ConsultationSectionProps = {
    id: string;
    title: string;
    description: string;
};

/** Closing call-to-action with contact details and the quick form. */
export default function ConsultationSection({
    id,
    title,
    description,
}: ConsultationSectionProps) {
    const contacts = offices.map((office) => ({
        icon: office.icon,
        title: office.name,
        lines: [
            office.building,
            `${office.street}, ${office.area}`,
            office.city,
            `Telp: ${office.phone.label}`,
        ],
    }));

    return (
        <Section
            id={id}
            background={
                <Glow className="top-1/2 left-1/2 h-[520px] w-[850px] -translate-x-1/2 -translate-y-1/2" />
            }
        >
            <div className="border-outline-variant/60 bg-surface-container rounded-3xl border p-6 shadow-2xl sm:p-8 lg:p-12">
                <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12">
                    <div className="flex flex-col gap-6 lg:col-span-7">
                        <Pill tone="brand" icon="verified_user">
                            KONSULTASI TEKNIS &amp; AUDIT INFRASTRUKTUR
                        </Pill>
                        <div className="flex flex-col gap-3">
                            <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold tracking-tight">
                                {title}
                            </h2>
                            <p className="text-on-surface-variant text-sm leading-relaxed lg:text-base">
                                {description}
                            </p>
                        </div>
                        <div className="text-on-surface-variant grid grid-cols-1 gap-4 pt-2 text-xs sm:grid-cols-2">
                            {contacts.map((contact) => (
                                <div
                                    key={contact.title}
                                    className="border-outline-variant/40 bg-surface-container-high/60 flex items-start gap-2.5 rounded-xl border p-3"
                                >
                                    <Icon
                                        name={contact.icon}
                                        className="text-primary mt-0.5 text-xl"
                                    />
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-on-surface font-bold">
                                            {contact.title}
                                        </span>
                                        {contact.lines.map((line) => (
                                            <span key={line}>{line}</span>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <a
                            href={`mailto:${company.email.busdev}`}
                            className="text-on-surface-variant hover:text-primary flex items-center gap-2 text-xs"
                        >
                            <Icon
                                name="mail"
                                className="text-primary text-base"
                            />
                            {company.email.busdev}
                        </a>
                    </div>
                    <div className="w-full lg:col-span-5">
                        <ConsultationForm idPrefix={id} />
                    </div>
                </div>
            </div>
        </Section>
    );
}