---
import { siteConfig } from "../../config/site";
import Icon from "../Icon.astro";
import Section from "../Section.astro";
import RotatingText from "../RotatingText.vue";
import StatusIndicator from "../StatusIndicator.vue";

const rotatingText = (siteConfig.hero as any).rotatingText as
    | { text: string; className: string }[]
    | undefined;
---

<Section
    fullWidth={true}
    background="bg-neutral"
    class="relative overflow-hidden"
>
    <div
        class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff20_1px,transparent_1px),linear-gradient(to_bottom,#ffffff20_1px,transparent_1px)] bg-size-[2rem_2rem] mask-[radial-gradient(ellipse_at_center,black_20%,transparent_70%)]"
    >
    </div>

    <div class="relative max-w-7xl mx-auto px-6">
        <div class="text-center max-w-4xl mx-auto">
            <StatusIndicator client:idle />

            <h1
                class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6"
            >
                {
                    rotatingText ? (
                        <>
                            <RotatingText items={rotatingText} client:idle />
                            <span class="block">
                                {siteConfig.hero.mainTitle
                                    .replace("{rotating}", "")
                                    .trim()}
                            </span>
                        </>
                    ) : (
                        siteConfig.hero.mainTitle
                    )
                }
            </h1>

            <p
                class="text-lg sm:text-xl text-white max-w-2xl mx-auto mb-10 leading-relaxed"
            >
                {siteConfig.description}.
            </p>

            <div
                class="flex flex-col sm:flex-row gap-4 justify-center items-center"
            >
                <a
                    href="#contact"
                    class="btn btn-accent btn-lg shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30"
                >
                    <Icon name="bolt" class="w-5 h-5" />
                    {siteConfig.hero.cta}
                </a>
                <a
                    href="#services"
                    class="btn btn-outline btn-lg border-white text-white hover:bg-white hover:text-neutral hover:border-white transition-all duration-300"
                >
                    <Icon name="chevron-down" class="w-5 h-5" />
                    {siteConfig.hero.secondaryCta}
                </a>
            </div>

            <div class="mt-16 pt-10">
                <p
                    class="text-white text-sm mb-6 uppercase tracking-wider font-medium"
                >
                    {siteConfig.hero.trustedText}
                </p>
                <div
                    class="flex flex-wrap justify-center items-center gap-8 lg:gap-12"
                >
                    {
                        siteConfig.hero.features.map((feature) => (
                            <div class="flex items-center gap-2.5 text-white/80">
                                <Icon name={feature.icon} class="w-5 h-5" />
                                <span class="font-medium">{feature.text}</span>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    </div>
</Section>