---
/**
 * Cta-Hr-compoents - HR CTA Section
 * 招募行動呼籲區塊，引導求職者申請面試
 */
interface Props {
    title: string;
    description: string;
    image?: { url: string; alt: string };
}

const { title, description, image } = Astro.props;
---

<section
    class="relative py-20 px-5 bg-slate-100 bg-cover bg-center overflow-hidden"
    aria-labelledby="cta-heading"
    style={image ? `background-image: url('${image.url}')` : undefined}
>
    {/* Dark overlay when image is present */}
    {
        image && (
            <div
                class="absolute inset-0 bg-linear-to-b from-transparent to-black/70 z-0"
                aria-hidden="true"
            />
        )
    }
    <div class="relative z-10 max-w-3xl md:max-w-3xl mx-auto">
        <div
            class="grid grid-rows-[1fr_auto] gap-8 items-center lg:grid-cols-[1fr_auto]"
        >
            <div class="text-center md:text-left">
                <h3
                    id="cta-heading"
                    class:list={[
                        "text-4xl md:text-4xl font-semibold mb-4 leading-snug",
                        image ? "text-white" : "text-[#23608c]",
                    ]}
                >
                    <Fragment set:html={title} />
                </h3>
                <p
                    class:list={[
                        "text-sm md:text-base leading-relaxed text-balance max-w-xl lg:max-w-full",
                        image ? "text-white/80" : "text-slate-600",
                    ]}
                >
                    {description}
                </p>
            </div>
            <a
                href="https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center mx-auto bg-(--color-pale-purple) text-white px-8 py-4 rounded-md font-semibold text-xl transition-all duration-200 whitespace-nowrap hover:-translate-y-0.5 hover:shadow-md hover:bg-(--color-pale-purple)/90 w-full max-w-3xs md:w-full lg:max-w-[300px]"
            >
                立刻申請面試
            </a>
        </div>
    </div>
</section>
