const { useEffect, useMemo, useState } = React;

const DATA = window.NXO_DATA || {};
const settings = DATA.settings || {};
const services = DATA.services || [];
const works = DATA.works || [];
const testimonials = DATA.testimonials || [];
const pricing = DATA.pricing || [];
const stats = DATA.stats || [];
const adminFaqs = DATA.faqs || [];
const servicePageMap = {
    "web-design": "web-design.php",
    "video-motion": "video-editing-motion-graphics.php",
    "digital-marketing": "digital-marketing.php"
};
const servicePriceMap = {
    "web-design": {
        price: "From $499 / project",
        note: "Landing pages, business sites, portfolio sites, and conversion pages."
    },
    "video-motion": {
        price: "From $149 / video",
        note: "Short-form edits, launch videos, motion graphics, intros, and social assets."
    },
    "digital-marketing": {
        price: "From $399 / month",
        note: "Campaign planning, creative direction, ad assets, funnels, and reporting."
    }
};
const fallbackServices = [
    { id: "web-design", title: "Web Design", tagline: "Premium websites that convert", description: "High-end websites with a clear story, strong interface, and clean lead flow.", deliverables: "Strategy, UX, UI, responsive build, contact funnel" },
    { id: "video-motion", title: "Video Editing & Motion Graphics", tagline: "Sharp edits with motion polish", description: "Social videos, launch films, kinetic text, and animated brand systems.", deliverables: "Editing, sound polish, animation, exports" },
    { id: "digital-marketing", title: "Digital Marketing", tagline: "Campaigns that keep momentum", description: "Creative campaigns, content systems, analytics, and conversion-focused experiments.", deliverables: "Campaign plan, ad creative, calendar, analytics" }
];
const serviceSource = services.length ? services : fallbackServices;
const proofFeed = [
    "Landing page structure locked",
    "Motion direction in review",
    "Campaign creative exported",
    "Lead flow connected",
    "Launch checklist prepared"
];
const processSteps = [
    ["01", "Discovery", "We map your offer, audience, goals, content gaps, timeline, and what the project must achieve.", "Brief, goals, assets, success metric"],
    ["02", "Strategy", "We shape the message, funnel, visual direction, pricing path, and production plan before execution.", "Positioning, page map, campaign angle"],
    ["03", "Design", "NXO builds the website, edits, motion assets, and campaign visuals inside one polished brand system.", "UI, motion, creative assets, review"],
    ["04", "Launch", "Final assets are deployed, forms are checked, analytics are prepared, and the next improvement loop is clear.", "Deploy, measure, improve"]
];
const fallbackFaqs = [
    ["Can NXO handle the full launch?", "Yes. The public offer, website, launch video, motion graphics, and marketing assets can be produced as one connected sprint."],
    ["Can I update the website later?", "Yes. NXO can keep your services, work, testimonials, pricing, settings, and incoming project messages organized for future updates."],
    ["Is Video Editing & Motion Graphics one service?", "Yes. It is intentionally combined so edits, animated typography, graphics, intros, outros, and exports stay in one production lane."],
    ["Does the page work on mobile?", "The landing page is built with responsive React/Tailwind sections, mobile navigation, fluid type, and compact interaction states."]
];
const faqs = adminFaqs.length
    ? adminFaqs.map((item) => [item.question || "Question", item.answer || "Answer coming soon."])
    : fallbackFaqs;

function splitList(value) {
    return String(value || "")
        .split(/\r\n|\r|\n|,/)
        .map((item) => item.trim())
        .filter(Boolean);
}

function shortText(value, fallback, limit = 118) {
    const text = String(value || fallback || "").trim();
    if (text.length <= limit) {
        return text;
    }

    return text.slice(0, limit).replace(/\s+\S*$/, "") + ".";
}

function serviceUrl(service) {
    return servicePageMap[service?.id] || `service.php?id=${encodeURIComponent(service?.id || "")}`;
}

function servicePrice(service) {
    return servicePriceMap[service?.id] || {
        price: "Custom quote",
        note: service?.tagline || "Scoped around your launch goal, timeline, and content needs."
    };
}

function contactMessageForPlan(plan) {
    const features = splitList(plan?.features).slice(0, 5);
    const lines = [
        `I want to discuss the ${plan?.name || "NXO project"} package.`,
        plan?.price ? `Budget direction: ${plan.price}` : "",
        plan?.description ? `Project fit: ${plan.description}` : "",
        features.length ? `Included focus: ${features.join(", ")}` : "",
        "",
        "My project goal:",
        "Timeline:",
        "Anything else NXO should know:"
    ];

    return lines.filter((line, index) => line || index >= lines.length - 3).join("\n");
}

function ratingValue(value) {
    const numeric = Number(value);
    if (!Number.isFinite(numeric)) {
        return 5;
    }

    return Math.min(5, Math.max(1, numeric));
}

function reviewerInitials(name) {
    return String(name || "NXO Client")
        .split(/\s+/)
        .filter(Boolean)
        .slice(0, 2)
        .map((part) => part.charAt(0).toUpperCase())
        .join("") || "NC";
}

function cx() {
    return Array.from(arguments).filter(Boolean).join(" ");
}

function useTheme() {
    const initial = document.documentElement.getAttribute("data-theme") || "dark";
    const [theme, setTheme] = useState(initial);

    useEffect(() => {
        document.documentElement.setAttribute("data-theme", theme);
        localStorage.setItem("nxo-theme", theme);
    }, [theme]);

    return [theme, setTheme];
}

function useScrollProgress() {
    const [progress, setProgress] = useState(0);

    useEffect(() => {
        function update() {
            const scrollable = document.documentElement.scrollHeight - window.innerHeight;
            setProgress(scrollable > 0 ? Math.min(100, Math.max(0, (window.scrollY / scrollable) * 100)) : 0);
        }

        update();
        window.addEventListener("scroll", update, { passive: true });
        window.addEventListener("resize", update);
        return () => {
            window.removeEventListener("scroll", update);
            window.removeEventListener("resize", update);
        };
    }, []);

    return progress;
}

function AmbientBackground() {
    return (
        <div className="ambient-system" aria-hidden="true">
            <span className="ambient-glow ambient-glow-primary" />
            <span className="ambient-glow ambient-glow-secondary" />
            <span className="ambient-vignette" />
        </div>
    );
}

function CircularHeroArc() {
    return (
        <div className="hero-arc" aria-hidden="true">
            <svg viewBox="0 0 1440 360" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="nxoArcGradient" x1="0%" y1="50%" x2="100%" y2="50%">
                        <stop offset="0%" stopColor="#9ff7ff" stopOpacity="0.92" />
                        <stop offset="34%" stopColor="#66d9ff" stopOpacity="0.86" />
                        <stop offset="68%" stopColor="#2c64ff" stopOpacity="0.98" />
                        <stop offset="100%" stopColor="#0038ff" stopOpacity="0.95" />
                    </linearGradient>
                    <filter id="nxoArcGlow" x="-8%" y="-80%" width="116%" height="260%">
                        <feGaussianBlur stdDeviation="7" result="blur" />
                        <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.42 0 0 0 0 1 0 0 0 0.9 0" result="blueGlow" />
                        <feMerge>
                            <feMergeNode in="blueGlow" />
                            <feMergeNode in="SourceGraphic" />
                        </feMerge>
                    </filter>
                </defs>
                <path className="hero-arc-shadow" d="M -90 330 C 240 58 620 18 1010 88 C 1214 126 1378 210 1530 330" />
                <path className="hero-arc-line" d="M -90 330 C 240 58 620 18 1010 88 C 1214 126 1378 210 1530 330" />
            </svg>
        </div>
    );
}

function Badge({ children, tone = "blue" }) {
    const tones = {
        blue: "border-sky-400/30 bg-sky-400/10 text-sky-200 light:text-sky-900",
        lime: "border-lime-300/35 bg-lime-300/10 text-lime-100 light:text-lime-900",
        dark: "border-white/10 bg-white/[0.06] text-white/80 light:border-slate-200 light:bg-white light:text-slate-700"
    };

    return <span className={cx("inline-flex items-center rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-normal", tones[tone])}>{children}</span>;
}

function Navbar({ theme, setTheme }) {
    const [open, setOpen] = useState(false);
    const progress = useScrollProgress();
    const primaryNav = [
        ["Services", "#services"],
        ["Work", "#work"],
        ["Pricing", "#pricing"],
        ["Contact", "#contact"]
    ];
    const mobileNav = [
        ["Home", "#top"],
        ...primaryNav
    ];
    const themeIcon = theme === "dark"
        ? <path d="M21 14.5A8.8 8.8 0 0 1 9.5 3a7.2 7.2 0 1 0 11.5 11.5Z" />
        : (
            <>
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19" />
            </>
        );

    return (
        <header className="fixed left-0 right-0 top-4 z-50 px-4">
            <span className="scroll-progress" style={{ width: `${progress}%` }} />
            <div className="nav-shell mx-auto flex max-w-6xl items-center justify-between gap-3 rounded-full border border-white/10 bg-black/45 px-3 py-2 shadow-apple backdrop-blur-2xl light:border-slate-200 light:bg-white/80">
                <a href="#top" className="flex min-w-0 items-center gap-3">
                    <span className="logo-frame">
                        <img src="NXO_LOGO.jpeg" alt={`${settings.brand || "NXO Studio"} logo`} />
                    </span>
                    <span className="brand-name-text">{settings.brand || "NXO Studio"}</span>
                </a>

                <nav className="hidden items-center rounded-full border border-white/10 bg-white/[0.04] p-1 light:border-slate-200 light:bg-slate-100/80 lg:flex">
                    {primaryNav.map(([label, href]) => (
                        <a key={label} href={href} className="rounded-full px-4 py-2 text-sm font-semibold text-white/70 transition hover:bg-white/10 hover:text-white light:text-slate-600 light:hover:bg-white light:hover:text-slate-950">
                            {label}
                        </a>
                    ))}
                </nav>

                <div className="flex items-center gap-2">
                    <button
                        type="button"
                        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
                        className="theme-toggle"
                        aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
                    >
                        <svg viewBox="0 0 24 24" aria-hidden="true">{themeIcon}</svg>
                    </button>
                    <a href="#contact" className="hidden rounded-full bg-white px-5 py-3 text-sm font-semibold text-slate-950 shadow-sm transition hover:-translate-y-0.5 light:bg-slate-950 light:text-white md:inline-flex">
                        Start project
                    </a>
                    <button
                        type="button"
                        onClick={() => setOpen(!open)}
                        className="grid h-11 w-11 place-items-center rounded-full border border-white/10 bg-white/[0.05] text-white light:border-slate-200 light:bg-white light:text-slate-950 lg:hidden"
                        aria-expanded={open}
                        aria-label="Open navigation"
                    >
                        <span className="space-y-1.5">
                            <i className="block h-0.5 w-5 rounded-full bg-current" />
                            <i className="block h-0.5 w-5 rounded-full bg-current" />
                            <i className="block h-0.5 w-5 rounded-full bg-current" />
                        </span>
                    </button>
                </div>
            </div>

            {open && (
                <nav className="mx-auto mt-3 grid max-w-6xl gap-2 rounded-3xl border border-white/10 bg-black/80 p-3 text-white shadow-apple backdrop-blur-2xl light:border-slate-200 light:bg-white/95 light:text-slate-950 lg:hidden">
                    {mobileNav.map(([label, href]) => (
                        <a key={label} href={href} onClick={() => setOpen(false)} className="rounded-2xl px-4 py-3 text-sm font-bold hover:bg-white/10 light:hover:bg-slate-100">
                            {label}
                        </a>
                    ))}
                    <a href="#contact" onClick={() => setOpen(false)} className="rounded-2xl bg-white px-4 py-3 text-sm font-black text-slate-950 light:bg-slate-950 light:text-white">
                        Start a project
                    </a>
                </nav>
            )}
        </header>
    );
}

function Hero() {
    const [focusIndex, setFocusIndex] = useState(0);
    const active = serviceSource[focusIndex % serviceSource.length] || serviceSource[0];

    useEffect(() => {
        const timer = window.setInterval(() => {
            setFocusIndex((index) => (index + 1) % serviceSource.length);
        }, 3200);

        return () => window.clearInterval(timer);
    }, []);

    return (
        <section id="top" className="relative overflow-hidden px-4 pb-12 pt-28 sm:pt-32 lg:min-h-[calc(100vh-24px)] lg:pb-16">
            <CircularHeroArc />
            <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[1.02fr_0.98fr]">
                <div className="relative z-10">
                    <div className="mb-6 flex flex-wrap items-center gap-3">
                        <Badge tone="blue">{settings.availability || "Booking new projects"}</Badge>
                        <Badge tone="dark">Web design + motion + growth</Badge>
                    </div>
                    <h1 className="max-w-4xl text-balance text-4xl font-semibold leading-[1.02] tracking-normal text-white light:text-slate-950 sm:text-6xl lg:text-7xl">
                        {settings.headline || "Digital work that makes brands impossible to ignore"}
                    </h1>
                    <p className="mt-5 max-w-xl text-base leading-7 text-white/62 light:text-slate-600 sm:text-lg">
                        {shortText(settings.subheadline, "Websites, videos, motion, and growth systems built for launches that need to look expensive and convert fast.", 128)}
                    </p>
                    <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                        <a href="#contact" className="inline-flex h-12 items-center justify-center rounded-full bg-white px-6 text-sm font-semibold text-slate-950 shadow-glow transition hover:-translate-y-1 light:bg-slate-950 light:text-white">
                            {settings.cta_primary || "Start a project"}
                        </a>
                        <a href="#services" className="inline-flex h-12 items-center justify-center rounded-full border border-white/12 bg-white/[0.05] px-6 text-sm font-semibold text-white transition hover:-translate-y-1 hover:bg-white/10 light:border-slate-200 light:bg-white light:text-slate-950">
                            Explore services
                        </a>
                    </div>
                    <div className="mt-6 flex max-w-xl flex-wrap gap-2">
                        {serviceSource.map((service, index) => (
                            <button
                                key={service.id}
                                type="button"
                                onClick={() => setFocusIndex(index)}
                                className={cx(
                                    "rounded-full border px-3.5 py-2 text-xs font-semibold transition",
                                    active.id === service.id
                                        ? "border-sky-300 bg-sky-300 text-slate-950"
                                        : "border-white/10 bg-white/[0.04] text-white/55 hover:text-white light:border-slate-200 light:bg-white light:text-slate-600"
                                )}
                            >
                                {service.title}
                            </button>
                        ))}
                    </div>
                    <div className="mt-6 grid max-w-xl grid-cols-3 gap-2.5">
                        {stats.map((stat) => (
                            <div key={stat.label} className="rounded-2xl border border-white/10 bg-white/[0.045] p-3 backdrop-blur light:border-slate-200 light:bg-white">
                                <strong className="block text-xl font-semibold text-white light:text-slate-950">{stat.value}</strong>
                                <span className="mt-1 block text-xs font-semibold text-white/50 light:text-slate-500">{stat.label}</span>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="relative z-10">
                    <div className="studio-device mx-auto max-w-lg rounded-[32px] border border-white/12 bg-white/[0.05] p-2.5 shadow-apple backdrop-blur-2xl light:border-slate-200 light:bg-white/70">
                        <div className="relative overflow-hidden rounded-[26px] border border-white/10 bg-[#080b12] p-4 light:border-slate-200 light:bg-slate-950">
                            <div className="absolute inset-x-0 top-12 h-64 rounded-[100%] border-t-[10px] border-sky-500/70 blur-[1px]" />
                            <div className="relative flex items-center justify-between">
                                <div className="flex gap-2">
                                    <span className="h-3 w-3 rounded-full bg-red-400" />
                                    <span className="h-3 w-3 rounded-full bg-yellow-300" />
                                    <span className="h-3 w-3 rounded-full bg-green-400" />
                                </div>
                                <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-bold text-white/70">NXO Live Board</span>
                            </div>
                            <div className="relative mt-8 grid gap-4">
                                <div className="rounded-3xl border border-white/10 bg-white/[0.07] p-5 backdrop-blur">
                                    <div className="flex items-start justify-between gap-4">
                                        <div>
                                            <p className="text-xs font-black uppercase text-sky-200">Live focus</p>
                                            <h2 className="mt-2 text-xl font-semibold text-white">{active.title}</h2>
                                        </div>
                                        <span className="rounded-full bg-lime-300 px-3 py-1 text-xs font-black text-slate-950">Active</span>
                                    </div>
                                    <div className="mt-5 grid grid-cols-3 gap-2">
                                        <span className="h-16 rounded-2xl bg-white/12" />
                                        <span className="h-16 rounded-2xl bg-sky-400/25" />
                                        <span className="h-16 rounded-2xl bg-white/12" />
                                    </div>
                                </div>
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="rounded-3xl border border-white/10 bg-white/[0.07] p-4">
                                        <p className="text-xs font-black uppercase text-violet-200">Momentum</p>
                                        <div className="mt-4 flex h-20 items-end gap-2">
                                            {[44, 70, 52, 88, 64].map((height, index) => (
                                                <span key={index} className="flex-1 rounded-full bg-gradient-to-t from-sky-400 to-violet-400" style={{ height: `${height}%` }} />
                                            ))}
                                        </div>
                                    </div>
                                    <div className="rounded-3xl border border-white/10 bg-white/[0.07] p-4">
                                        <p className="text-xs font-black uppercase text-lime-100">Growth</p>
                                        <strong className="mt-3 block text-3xl font-semibold text-white">4.8x</strong>
                                        <span className="text-sm text-white/50">campaign lift</span>
                                    </div>
                                </div>
                                <div className="rounded-3xl border border-white/10 bg-white/[0.07] p-4">
                                    <div className="flex items-center justify-between text-xs font-bold text-white/60">
                                        <span>Strategy</span><span>Design</span><span>Motion</span><span>Launch</span>
                                    </div>
                                    <div className="mt-3 h-3 overflow-hidden rounded-full bg-white/10">
                                        <span className="auto-progress block h-full rounded-full bg-gradient-to-r from-sky-400 via-violet-400 to-lime-300" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

function LiveProof() {
    const [active, setActive] = useState(0);

    useEffect(() => {
        const timer = window.setInterval(() => {
            setActive((index) => (index + 1) % proofFeed.length);
        }, 2400);

        return () => window.clearInterval(timer);
    }, []);

    return (
        <section id="proof" className="px-4 py-12 sm:py-16">
            <div className="mx-auto grid max-w-7xl gap-5 lg:grid-cols-[0.8fr_1.2fr]">
                <div className="rounded-[34px] border border-white/10 bg-white/[0.055] p-6 shadow-apple light:border-slate-200 light:bg-white">
                    <Badge tone="lime">Live delivery rhythm</Badge>
                    <h2 className="mt-4 text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-4xl">A page that moves without shouting.</h2>
                    <div className="mt-6 grid grid-cols-3 gap-3">
                        {["Live proof", "Auto flow", "Lead-ready"].map((item) => (
                            <span key={item} className="rounded-2xl border border-white/10 bg-white/[0.06] px-3 py-3 text-center text-xs font-semibold uppercase text-white/70 light:border-slate-200 light:bg-slate-50 light:text-slate-700">{item}</span>
                        ))}
                    </div>
                </div>
                <div className="grid gap-3 rounded-[34px] border border-white/10 bg-slate-950 p-4 shadow-apple light:border-slate-200">
                    {proofFeed.map((item, index) => (
                        <button
                            key={item}
                            type="button"
                            onClick={() => setActive(index)}
                            className={cx(
                                "grid grid-cols-[auto_1fr_auto] items-center gap-4 rounded-[24px] border p-4 text-left transition",
                                active === index ? "border-sky-300/60 bg-white text-slate-950" : "border-white/10 bg-white/[0.05] text-white/64 hover:bg-white/[0.08]"
                            )}
                        >
                            <span className={cx("h-3 w-3 rounded-full", active === index ? "bg-lime-400" : "bg-white/20")} />
                            <span className="font-semibold">{item}</span>
                            <span className="text-xs font-black uppercase opacity-60">{active === index ? "Now" : "Queued"}</span>
                        </button>
                    ))}
                </div>
            </div>
        </section>
    );
}

function Services() {
    const [active, setActive] = useState(serviceSource[0]?.id || "");
    const activeService = serviceSource.find((service) => service.id === active) || serviceSource[0] || {};
    const activePrice = servicePrice(activeService);

    useEffect(() => {
        const timer = window.setInterval(() => {
            const currentIndex = serviceSource.findIndex((service) => service.id === active);
            const next = serviceSource[(currentIndex + 1 + serviceSource.length) % serviceSource.length];
            if (next) {
                setActive(next.id);
            }
        }, 6200);

        return () => window.clearInterval(timer);
    }, [active]);

    return (
        <section id="services" className="relative overflow-hidden px-4 py-16 sm:py-20">
            <div className="mx-auto max-w-7xl">
                <div className="mx-auto max-w-3xl text-center">
                    <Badge tone="blue">Our Services</Badge>
                    <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-5xl">
                        Three focused services, built to work together.
                    </h2>
                    <p className="mx-auto mt-4 max-w-lg text-base leading-7 text-white/58 light:text-slate-600">
                        Choose one service or combine them into a launch package with one creative direction.
                    </p>
                </div>

                <div className="mt-10 grid gap-4 md:grid-cols-3">
                    {serviceSource.map((service, index) => {
                        const price = servicePrice(service);

                        return (
                            <a
                                key={service.id}
                                href={serviceUrl(service)}
                                onMouseEnter={() => setActive(service.id)}
                                onFocus={() => setActive(service.id)}
                                className="service-card group rounded-[28px] border border-white/10 bg-white/[0.055] p-5 shadow-apple transition light:border-slate-200 light:bg-white"
                            >
                                <span className="text-xs font-semibold uppercase text-sky-300 light:text-sky-700">0{index + 1}</span>
                                <strong className="mt-4 block text-2xl font-semibold leading-tight text-white light:text-slate-950">{service.title}</strong>
                                <span className="mt-3 block text-sm leading-6 text-white/58 light:text-slate-600">{shortText(service.tagline, service.description, 82)}</span>
                                <span className="mt-5 inline-flex rounded-full bg-white px-4 py-2 text-xs font-semibold text-slate-950 light:bg-slate-950 light:text-white">{price.price}</span>
                                <span className="mt-5 flex items-center justify-between border-t border-white/10 pt-4 text-sm font-semibold text-sky-200 light:border-slate-200 light:text-sky-700">
                                    View service page
                                    <span className="transition group-hover:translate-x-1">?</span>
                                </span>
                            </a>
                        );
                    })}
                </div>

                <div className="mt-6 rounded-[30px] border border-white/10 bg-white/[0.06] p-5 shadow-apple backdrop-blur-2xl light:border-slate-200 light:bg-white">
                    <div className="grid gap-8 lg:grid-cols-[1fr_0.7fr] lg:items-center">
                        <div>
                            <Badge tone="lime">Selected preview</Badge>
                            <h3 className="mt-4 text-3xl font-semibold leading-tight text-white light:text-slate-950">{activeService.title}</h3>
                            <p className="mt-4 text-base leading-7 text-white/60 light:text-slate-600">{shortText(activeService.description, activeService.tagline, 135)}</p>
                            <div className="mt-5 flex flex-wrap gap-2">
                                {splitList(activeService.deliverables).slice(0, 5).map((item) => (
                                    <span key={item} className="rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-sm font-bold text-white/70 light:border-slate-200 light:bg-slate-50 light:text-slate-700">
                                        {item}
                                    </span>
                                ))}
                            </div>
                        </div>
                        <div className="relative min-h-60 overflow-hidden rounded-[24px] bg-slate-950 p-5 text-white">
                            <div className="absolute inset-x-[-20%] top-10 h-36 rounded-full border-t-8 border-sky-400/70 blur-[1px]" />
                            <div className="relative grid h-full content-between gap-8">
                                <div className="flex items-center justify-between">
                                    <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-black">NXO</span>
                                    <span className="h-2 w-2 rounded-full bg-lime-300 shadow-[0_0_20px_rgba(190,242,100,0.8)]" />
                                </div>
                                <div>
                                    <p className="text-sm font-bold text-white/50">Starting at</p>
                                    <strong className="mt-2 block text-3xl font-semibold leading-none">{activePrice.price}</strong>
                                    <p className="mt-3 text-sm leading-6 text-white/58">{activePrice.note}</p>
                                </div>
                                <a href={serviceUrl(activeService)} className="inline-flex h-11 items-center justify-center rounded-full bg-white px-5 text-sm font-semibold text-slate-950">
                                    Open details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

function Work() {
    const categories = useMemo(() => ["All", ...Array.from(new Set(works.map((work) => work.category).filter(Boolean)))], []);
    const [filter, setFilter] = useState("All");
    const [featuredId, setFeaturedId] = useState(works[0]?.id || "");
    const sortedWorks = [...works].sort((a, b) => Number(Boolean(b.recent)) - Number(Boolean(a.recent)));
    const visibleWorks = filter === "All" ? sortedWorks : sortedWorks.filter((work) => work.category === filter);
    const featured = works.find((work) => work.id === featuredId) || visibleWorks[0] || works[0] || {};

    return (
        <section id="work" className="px-4 py-16 sm:py-20">
            <div className="mx-auto max-w-7xl">
                <div className="flex flex-col justify-between gap-8 lg:flex-row lg:items-end">
                    <div className="max-w-3xl">
                        <Badge tone="dark">Selected Work</Badge>
                        <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-5xl">Premium visuals. Clear buying paths.</h2>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {categories.map((category) => (
                            <button
                                key={category}
                                type="button"
                                onClick={() => setFilter(category)}
                                className={cx(
                                    "rounded-full border px-4 py-2 text-sm font-semibold transition",
                                    filter === category
                                        ? "border-white bg-white text-slate-950 light:border-slate-950 light:bg-slate-950 light:text-white"
                                        : "border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/10 light:border-slate-200 light:bg-white light:text-slate-700"
                                )}
                            >
                                {category}
                            </button>
                        ))}
                    </div>
                </div>

                <div className="mt-9 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    {visibleWorks.map((work, index) => (
                        <article
                            key={work.id}
                            onMouseEnter={() => setFeaturedId(work.id)}
                            onFocus={() => setFeaturedId(work.id)}
                            className={cx("group overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.055] shadow-apple transition hover:-translate-y-2 light:border-slate-200 light:bg-white", index === 0 ? "md:col-span-2" : "")}
                            tabIndex="0"
                        >
                            <div className="relative min-h-56 overflow-hidden bg-slate-950 p-5">
                                <div className="absolute inset-0 opacity-80" style={{ background: `radial-gradient(circle at 35% 25%, ${work.color || "#38bdf8"}, transparent 28%), linear-gradient(135deg, rgba(255,255,255,0.15), transparent)` }} />
                                <div className="absolute inset-x-[-20%] top-20 h-40 rounded-full border-t-8 border-white/35 blur-[1px] transition group-hover:scale-105" />
                                <div className="relative flex h-full min-h-48 flex-col justify-between">
                                    <div className="flex flex-wrap items-center gap-2">
                                        <Badge tone="dark">{work.category}</Badge>
                                        {work.recent && <Badge tone="lime">Recent</Badge>}
                                    </div>
                                    <div>
                                        <span className="text-sm font-bold text-white/60">Outcome</span>
                                        <strong className="mt-1 block text-2xl font-semibold text-white">{work.metric}</strong>
                                        {(work.client || work.year) && <span className="mt-2 block text-xs font-bold uppercase text-white/42">{[work.client, work.year].filter(Boolean).join(" / ")}</span>}
                                    </div>
                                </div>
                            </div>
                            <div className="p-6">
                                <h3 className="text-xl font-semibold text-white light:text-slate-950">{work.title}</h3>
                                <p className="mt-2 leading-6 text-white/58 light:text-slate-600">{shortText(work.description, "", 92)}</p>
                            </div>
                        </article>
                    ))}
                </div>
                {featured.title && (
                    <div className="mt-6 rounded-[32px] border border-white/10 bg-white/[0.055] p-5 shadow-apple light:border-slate-200 light:bg-white">
                        <div className="grid gap-5 md:grid-cols-[0.8fr_1.2fr] md:items-center">
                            <div>
                                <Badge tone="blue">Currently previewing</Badge>
                                <h3 className="mt-3 text-2xl font-semibold text-white light:text-slate-950">{featured.title}</h3>
                            </div>
                            <p className="text-base leading-7 text-white/58 light:text-slate-600">{shortText(featured.description, "", 105)} <strong className="font-semibold text-lime-200 light:text-sky-700">{featured.metric}</strong></p>
                        </div>
                    </div>
                )}
            </div>
        </section>
    );
}

function Process() {
    const [activeStep, setActiveStep] = useState(0);

    return (
        <section id="process" className="px-4 py-16 sm:py-20">
            <div className="mx-auto max-w-7xl">
                <div className="grid gap-10 lg:grid-cols-[0.86fr_1.14fr] lg:items-start">
                    <div className="lg:sticky lg:top-32">
                        <Badge tone="blue">How We Work</Badge>
                        <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-5xl">A clear path from first brief to launch.</h2>
                        <p className="mt-4 text-base leading-7 text-white/58 light:text-slate-600">Four focused stages keep every website, video, and campaign moving without confusion.</p>
                    </div>
                    <div className="grid gap-4">
                        {processSteps.map(([number, title, body, meta], index) => (
                            <article
                                key={number}
                                onClick={() => setActiveStep(index)}
                                className={cx(
                                    "grid cursor-pointer gap-4 rounded-[24px] border p-5 shadow-apple transition light:border-slate-200 sm:grid-cols-[72px_1fr]",
                                    activeStep === index ? "border-sky-300/50 bg-white text-slate-950" : "border-white/10 bg-white/[0.055] light:bg-white"
                                )}
                            >
                                <span className="text-3xl font-semibold text-sky-300 light:text-sky-700">{number}</span>
                                <div>
                                    <h3 className={cx("text-2xl font-semibold", activeStep === index ? "text-slate-950" : "text-white light:text-slate-950")}>{title}</h3>
                                    <p className={cx("mt-2 text-base leading-7", activeStep === index ? "text-slate-600" : "text-white/58 light:text-slate-600")}>{shortText(body, "", 88)}</p>
                                    <div className="mt-5 h-2 overflow-hidden rounded-full bg-slate-200/20">
                                        <span className={cx("block h-full rounded-full bg-gradient-to-r from-sky-400 to-lime-300 transition-all duration-500", activeStep === index ? "w-full" : "w-1/5")} />
                                    </div>
                                    <span className={cx("mt-3 block text-xs font-black uppercase", activeStep === index ? "text-sky-700" : "text-sky-200 light:text-sky-700")}>{meta}</span>
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}

function Testimonials() {
    const rows = [...testimonials, ...testimonials];

    return (
        <section id="reviews" className="overflow-hidden px-4 py-16 sm:py-20">
            <div className="mx-auto max-w-7xl">
                <div className="mx-auto max-w-3xl text-center">
                    <Badge tone="lime">Client Reviews</Badge>
                    <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-5xl">Rated for launch quality, speed, and polish.</h2>
                    <div className="mx-auto mt-5 flex max-w-xl flex-wrap items-center justify-center gap-3 text-sm font-semibold text-white/58 light:text-slate-600">
                        <span className="rounded-full border border-white/10 bg-white/[0.055] px-4 py-2 light:border-slate-200 light:bg-white">4.9 average rating</span>
                        <span className="rounded-full border border-white/10 bg-white/[0.055] px-4 py-2 light:border-slate-200 light:bg-white">Verified project feedback</span>
                    </div>
                </div>
                <div className="marquee mt-12 flex gap-4">
                    {rows.map((item, index) => {
                        const rating = ratingValue(item.rating);
                        const stars = Array.from({ length: 5 }, (_, starIndex) => starIndex + 1);

                        return (
                            <article key={`${item.id}-${index}`} className="min-w-[320px] rounded-[30px] border border-white/10 bg-white/[0.055] p-6 shadow-apple light:border-slate-200 light:bg-white sm:min-w-[420px]">
                                <div className="flex items-start justify-between gap-4">
                                    <div className="flex items-center gap-3">
                                        <span className="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-white text-sm font-black text-slate-950 shadow-sm light:bg-slate-950 light:text-white">
                                            {reviewerInitials(item.name)}
                                        </span>
                                        <div>
                                            <strong className="block text-white light:text-slate-950">{item.name}</strong>
                                            <span className="text-sm font-semibold text-white/45 light:text-slate-500">{item.role}</span>
                                        </div>
                                    </div>
                                    <span className="rounded-full bg-lime-300 px-3 py-1 text-xs font-black text-slate-950">{rating.toFixed(1)}</span>
                                </div>
                                <div className="mt-5 flex items-center gap-1" aria-label={`${rating.toFixed(1)} out of 5 rating`}>
                                    {stars.map((star) => (
                                        <span key={star} className={cx("text-lg leading-none", star <= Math.round(rating) ? "text-lime-300" : "text-white/18 light:text-slate-300")}>★</span>
                                    ))}
                                    <span className="ml-2 text-xs font-bold uppercase text-white/42 light:text-slate-500">Verified review</span>
                                </div>
                                <p className="mt-5 min-h-28 text-base leading-7 text-white/72 light:text-slate-700">"{shortText(item.quote, "", 156)}"</p>
                                <div className="mt-6 flex flex-wrap gap-2 border-t border-white/10 pt-4 light:border-slate-200">
                                    <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs font-bold text-sky-200 light:border-slate-200 light:bg-slate-50 light:text-sky-700">{item.service || "Launch project"}</span>
                                    <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs font-bold text-white/55 light:border-slate-200 light:bg-slate-50 light:text-slate-500">{item.location || "Bangladesh"}</span>
                                    <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5 text-xs font-bold text-white/55 light:border-slate-200 light:bg-slate-50 light:text-slate-500">{item.date || "Recent project"}</span>
                                </div>
                            </article>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}

function Pricing({ onDiscussProject }) {
    return (
        <section id="pricing" className="px-4 py-16 sm:py-20">
            <div className="mx-auto max-w-7xl">
                <div className="mx-auto max-w-3xl text-center">
                    <Badge tone="dark">Pricing</Badge>
                    <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-5xl">Individual prices and bundle deals.</h2>
                    <p className="mx-auto mt-4 max-w-xl text-base leading-7 text-white/58 light:text-slate-600">Start with one service or combine web, video, motion, and marketing into a launch package.</p>
                </div>
                <div className="mt-10 grid gap-4 md:grid-cols-3">
                    {serviceSource.map((service) => {
                        const price = servicePrice(service);

                        return (
                            <article key={service.id} className="rounded-[28px] border border-white/10 bg-white/[0.055] p-6 shadow-apple light:border-slate-200 light:bg-white">
                                <p className="text-sm font-semibold uppercase text-sky-200 light:text-sky-700">{service.title}</p>
                                <h3 className="mt-3 text-3xl font-semibold text-white light:text-slate-950">{price.price}</h3>
                                <p className="mt-4 text-sm leading-6 text-white/58 light:text-slate-600">{price.note}</p>
                                <a href={serviceUrl(service)} className="mt-6 inline-flex h-11 w-full items-center justify-center rounded-full border border-white/10 text-sm font-semibold text-white transition hover:-translate-y-1 hover:bg-white/10 light:border-slate-200 light:text-slate-950 light:hover:bg-slate-50">
                                    See breakdown
                                </a>
                            </article>
                        );
                    })}
                </div>
                <div className="mt-12 flex items-center gap-3">
                    <span className="h-px flex-1 bg-white/10 light:bg-slate-200" />
                    <span className="text-xs font-semibold uppercase text-white/50 light:text-slate-500">Bundle packages</span>
                    <span className="h-px flex-1 bg-white/10 light:bg-slate-200" />
                </div>
                <div className="mt-6 grid gap-5 lg:grid-cols-2">
                    {pricing.map((plan, index) => {
                        const left = plan.highlight ? 3 : 6;
                        const used = 10 - left;

                        return (
                        <article key={plan.id} className={cx("rounded-[36px] border p-7 shadow-apple", plan.highlight ? "border-sky-300/50 bg-white text-slate-950" : "border-white/10 bg-white/[0.055] text-white light:border-slate-200 light:bg-white light:text-slate-950")}>
                            {plan.highlight && <Badge tone="blue">Most requested</Badge>}
                            <p className={cx("mt-5 text-sm font-semibold uppercase", plan.highlight ? "text-sky-700" : "text-sky-200 light:text-sky-700")}>{plan.name}</p>
                            <h3 className="mt-3 text-4xl font-semibold">{plan.price}</h3>
                            <p className={cx("mt-4 text-base leading-7", plan.highlight ? "text-slate-600" : "text-white/58 light:text-slate-600")}>{shortText(plan.description, "", 100)}</p>
                            <ul className="mt-7 grid gap-3">
                                {splitList(plan.features).map((feature) => (
                                    <li key={feature} className={cx("flex gap-3 text-sm font-semibold", plan.highlight ? "text-slate-700" : "text-white/65 light:text-slate-700")}>
                                        <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-lime-300 text-xs text-slate-950">+</span>
                                        {feature}
                                    </li>
                                ))}
                            </ul>
                            <div className="mt-7 rounded-3xl border border-black/10 bg-black/[0.04] p-4 light:border-slate-200">
                                <div className="flex items-center justify-between text-xs font-semibold uppercase">
                                    <span>{left}/10 slots left</span>
                                    <span>{index === 0 ? "Flexible" : "Priority"}</span>
                                </div>
                                <div className="mt-3 h-3 overflow-hidden rounded-full bg-slate-300/30">
                                    <span className="block h-full rounded-full bg-gradient-to-r from-sky-400 to-lime-300" style={{ width: `${used * 10}%` }} />
                                </div>
                            </div>
                            <button
                                type="button"
                                onClick={() => onDiscussProject(plan)}
                                className={cx("mt-8 inline-flex h-12 w-full items-center justify-center rounded-full text-sm font-semibold transition hover:-translate-y-1", plan.highlight ? "bg-slate-950 text-white" : "bg-white text-slate-950 light:bg-slate-950 light:text-white")}
                            >
                                Discuss this project
                            </button>
                        </article>
                    );
                    })}
                </div>
            </div>
        </section>
    );
}

function FAQ() {
    const [open, setOpen] = useState(0);

    return (
        <section id="faq" className="px-4 py-14 sm:py-18">
            <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-[0.8fr_1.2fr]">
                <div>
                    <Badge tone="dark">Questions</Badge>
                    <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight text-white light:text-slate-950 sm:text-4xl">Quick answers.</h2>
                </div>
                <div className="grid gap-3">
                    {faqs.map(([question, answer], index) => (
                        <article key={question} className="overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.055] shadow-apple light:border-slate-200 light:bg-white">
                            <button type="button" onClick={() => setOpen(open === index ? -1 : index)} className="flex w-full items-center justify-between gap-5 p-5 text-left">
                                <span className="text-base font-semibold text-white light:text-slate-950">{question}</span>
                                <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-white text-xl font-semibold text-slate-950 light:bg-slate-950 light:text-white">{open === index ? "-" : "+"}</span>
                            </button>
                            {open === index && <p className="px-5 pb-5 text-base leading-7 text-white/58 light:text-slate-600">{shortText(answer, "", 130)}</p>}
                        </article>
                    ))}
                </div>
            </div>
        </section>
    );
}

function GmailLogo() {
    return (
        <svg viewBox="0 0 48 48" aria-hidden="true">
            <path fill="#4285f4" d="M6 14.6v18.8c0 2 1.6 3.6 3.6 3.6h5.8V23.4L6 14.6Z" />
            <path fill="#34a853" d="M32.6 37h5.8c2 0 3.6-1.6 3.6-3.6V14.6l-9.4 8.8V37Z" />
            <path fill="#fbbc04" d="M32.6 14.7V23.4L42 14.6v-1.8c0-4.4-5.1-6.8-8.5-4L32.6 9.5v5.2Z" />
            <path fill="#ea4335" d="M15.4 23.4V14.7L24 21.2l8.6-6.5V9.5L24 16 15.4 9.5v5.2Z" />
            <path fill="#c5221f" d="M6 12.8v1.8l9.4 8.8v-8.7l-.9-.7C11.1 11.2 6 8.4 6 12.8Z" />
        </svg>
    );
}

function PhoneLogo() {
    return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M6.6 2.8 10 6.2c.7.7.8 1.8.2 2.6l-1.4 1.9c1.1 2.2 2.8 3.9 5 5l1.9-1.4c.8-.6 1.9-.5 2.6.2l3.4 3.4c.5.5.6 1.3.2 1.9-.9 1.5-2.6 2.3-4.4 2.1C9.3 20.8 3.2 14.7 2.1 6.5 1.9 4.7 2.7 3 4.2 2.1c.6-.4 1.4-.3 1.9.2l.5.5Z" />
        </svg>
    );
}

function WhatsAppLogo() {
    return (
        <svg viewBox="0 0 32 32" aria-hidden="true">
            <path fill="#25d366" d="M16 3.1A12.7 12.7 0 0 0 5.2 22.5L3.5 28.8l6.5-1.7A12.7 12.7 0 1 0 16 3.1Z" />
            <path fill="#ffffff" d="M23.4 19.2c-.4 1.2-2.2 2.2-3.1 2.3-.8.1-1.8.2-5.3-1.2-4.5-1.8-7.4-6.4-7.6-6.7-.2-.3-1.8-2.4-1.8-4.5s1.1-3.2 1.5-3.6c.4-.4.8-.5 1.1-.5h.8c.3 0 .6 0 .9.7.4.8 1.2 2.9 1.3 3.1.1.2.2.5 0 .8-.1.3-.2.4-.5.7-.2.3-.5.6-.7.8-.2.3-.5.5-.2 1 .3.5 1.2 2 2.6 3.2 1.8 1.6 3.3 2.1 3.8 2.3.5.2.8.2 1.1-.1.3-.4 1.3-1.5 1.6-2 .3-.5.7-.4 1.1-.2.4.1 2.7 1.3 3.2 1.5.5.2.8.4.9.6.1.2.1 1-.3 1.8Z" />
        </svg>
    );
}

function Contact({ preset }) {
    const [selectedService, setSelectedService] = useState("");
    const [message, setMessage] = useState("");
    const phoneHref = `tel:${String(settings.phone || "").replace(/[^\d+]/g, "")}`;
    const whatsappHref = `https://wa.me/${String(settings.phone || "").replace(/[^\d]/g, "")}`;
    const mailHref = `mailto:${settings.email || ""}`;

    useEffect(() => {
        if (!preset) {
            return;
        }

        setSelectedService(preset.service || "");
        setMessage(preset.message || "");
    }, [preset]);

    const presetServiceExists = serviceSource.some((service) => service.title === selectedService);

    return (
        <section id="contact" className="px-4 py-16 sm:py-20">
            <div className="mx-auto grid max-w-7xl gap-8 rounded-[42px] border border-white/10 bg-white/[0.055] p-5 shadow-apple backdrop-blur-2xl light:border-slate-200 light:bg-white md:p-8 lg:grid-cols-[0.9fr_1.1fr]">
                <div className="flex flex-col justify-between rounded-[32px] bg-slate-950 p-7 text-white">
                    <div>
                        <Badge tone="blue">Start</Badge>
                        <h2 className="mt-4 text-balance text-3xl font-semibold leading-tight sm:text-5xl">Tell NXO what needs to launch.</h2>
                        <p className="mt-4 text-base leading-7 text-white/58">Send the rough version. NXO will shape it into a launch path.</p>
                    </div>
                    <div className="mt-10 grid gap-3">
                        <a className="group grid grid-cols-[48px_1fr_auto] items-center gap-4 rounded-[24px] border border-white/10 bg-white/[0.07] p-3 text-white shadow-[0_18px_46px_rgba(0,0,0,0.24)] transition hover:-translate-y-1 hover:border-sky-300/40 hover:bg-white/[0.11]" href={mailHref}>
                            <span className="grid h-12 w-12 place-items-center rounded-2xl bg-white">
                                <span className="block h-7 w-7"><GmailLogo /></span>
                            </span>
                            <span className="min-w-0">
                                <span className="block text-xs font-black uppercase text-sky-200">Gmail</span>
                                <span className="mt-1 block truncate text-sm font-semibold text-white/68">{settings.email}</span>
                            </span>
                            <span className="grid h-9 w-9 place-items-center rounded-full bg-white/[0.06] text-white/32 transition group-hover:translate-x-1 group-hover:text-sky-200">
                                <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
                                    <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </span>
                        </a>
                        <a className="group grid grid-cols-[48px_1fr_auto] items-center gap-4 rounded-[24px] border border-white/10 bg-white/[0.07] p-3 text-white shadow-[0_18px_46px_rgba(0,0,0,0.24)] transition hover:-translate-y-1 hover:border-lime-300/40 hover:bg-white/[0.11]" href={phoneHref}>
                            <span className="grid h-12 w-12 place-items-center rounded-2xl bg-lime-300 text-slate-950">
                                <span className="block h-6 w-6 [&_svg]:h-full [&_svg]:w-full [&_svg]:fill-current"><PhoneLogo /></span>
                            </span>
                            <span className="min-w-0">
                                <span className="block text-xs font-black uppercase text-lime-200">Call</span>
                                <span className="mt-1 block truncate text-sm font-semibold text-white/68">{settings.phone}</span>
                            </span>
                            <span className="grid h-9 w-9 place-items-center rounded-full bg-white/[0.06] text-white/32 transition group-hover:translate-x-1 group-hover:text-lime-200">
                                <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
                                    <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </span>
                        </a>
                        <a className="group grid grid-cols-[48px_1fr_auto] items-center gap-4 rounded-[24px] border border-white/10 bg-white/[0.07] p-3 text-white shadow-[0_18px_46px_rgba(0,0,0,0.24)] transition hover:-translate-y-1 hover:border-emerald-300/40 hover:bg-white/[0.11]" href={whatsappHref} target="_blank" rel="noreferrer">
                            <span className="grid h-12 w-12 place-items-center rounded-2xl bg-white">
                                <span className="block h-8 w-8"><WhatsAppLogo /></span>
                            </span>
                            <span className="min-w-0">
                                <span className="block text-xs font-black uppercase text-emerald-200">WhatsApp</span>
                                <span className="mt-1 block truncate text-sm font-semibold text-white/68">Message now</span>
                            </span>
                            <span className="grid h-9 w-9 place-items-center rounded-full bg-white/[0.06] text-white/32 transition group-hover:translate-x-1 group-hover:text-emerald-200">
                                <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
                                    <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </span>
                        </a>
                        <span className="pt-2 text-sm font-bold text-white/38">{settings.location}</span>
                    </div>
                </div>

                <form className="grid gap-4 p-2 md:p-3" action="contact.php" method="post">
                    {DATA.sent && <div className="rounded-2xl border border-lime-300/40 bg-lime-300/10 px-4 py-3 text-sm font-bold text-lime-100 light:text-lime-800">Thanks. Your project message has been sent.</div>}
                    {DATA.flash && <div className="rounded-2xl border border-amber-300/40 bg-amber-300/10 px-4 py-3 text-sm font-bold text-amber-100 light:text-amber-800">{DATA.flash}</div>}
                    <input type="hidden" name="csrf_token" value={DATA.csrfToken || ""} />
                    <div className="grid gap-4 md:grid-cols-2">
                        <label className="grid gap-2 text-sm font-bold text-white/55 light:text-slate-600">
                            Name
                            <input className="h-14 rounded-2xl border border-white/10 bg-white/[0.06] px-4 text-white outline-none transition focus:border-sky-300 light:border-slate-200 light:bg-slate-50 light:text-slate-950" name="name" required maxLength="120" />
                        </label>
                        <label className="grid gap-2 text-sm font-bold text-white/55 light:text-slate-600">
                            Email
                            <input className="h-14 rounded-2xl border border-white/10 bg-white/[0.06] px-4 text-white outline-none transition focus:border-sky-300 light:border-slate-200 light:bg-slate-50 light:text-slate-950" type="email" name="email" required maxLength="160" />
                        </label>
                    </div>
                    <label className="grid gap-2 text-sm font-bold text-white/55 light:text-slate-600">
                        Phone <span className="font-semibold opacity-70">(optional)</span>
                        <input className="h-14 rounded-2xl border border-white/10 bg-white/[0.06] px-4 text-white outline-none transition focus:border-sky-300 light:border-slate-200 light:bg-slate-50 light:text-slate-950" name="phone" maxLength="60" />
                    </label>
                    <label className="grid gap-2 text-sm font-bold text-white/55 light:text-slate-600">
                        Service
                        <select
                            className="h-14 rounded-2xl border border-white/10 bg-white/[0.06] px-4 text-white outline-none transition focus:border-sky-300 light:border-slate-200 light:bg-slate-50 light:text-slate-950"
                            name="service"
                            required
                            value={selectedService}
                            onChange={(event) => setSelectedService(event.target.value)}
                        >
                            <option value="">Choose a service</option>
                            {selectedService && !presetServiceExists && <option value={selectedService}>{selectedService}</option>}
                            {serviceSource.map((service) => <option key={service.id}>{service.title}</option>)}
                        </select>
                    </label>
                    <label className="grid gap-2 text-sm font-bold text-white/55 light:text-slate-600">
                        Project details
                        <textarea
                            className="min-h-40 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-4 text-white outline-none transition focus:border-sky-300 light:border-slate-200 light:bg-slate-50 light:text-slate-950"
                            name="message"
                            required
                            maxLength="2000"
                            value={message}
                            onChange={(event) => setMessage(event.target.value)}
                        />
                    </label>
                    <button className="h-12 rounded-full bg-white text-sm font-semibold text-slate-950 transition hover:-translate-y-1 light:bg-slate-950 light:text-white" type="submit">
                        Send inquiry
                    </button>
                </form>
            </div>
        </section>
    );
}

function Footer() {
    return (
        <footer className="px-4 pb-10">
            <div className="mx-auto flex max-w-7xl flex-col justify-between gap-5 border-t border-white/10 pt-8 text-sm font-semibold text-white/45 light:border-slate-200 light:text-slate-500 sm:flex-row">
                <span>{settings.brand || "NXO Studio"} Copyright {new Date().getFullYear()}</span>
                <div className="flex flex-wrap gap-4">
                    <a href={settings.instagram || "#"}>Instagram</a>
                    <a href={settings.facebook || "#"}>Facebook</a>
                    <a href={settings.linkedin || "#"}>LinkedIn</a>
                </div>
            </div>
        </footer>
    );
}

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError() {
        return { hasError: true };
    }

    componentDidCatch(error) {
        if (window.NXO_RESTORE_FALLBACK) {
            window.NXO_RESTORE_FALLBACK(error);
        }
    }

    render() {
        if (this.state.hasError) {
            return null;
        }

        return this.props.children;
    }
}

function App() {
    const [theme, setTheme] = useTheme();
    const [contactPreset, setContactPreset] = useState(null);

    function handleDiscussProject(plan) {
        setContactPreset({
            service: plan?.name || "NXO project",
            message: contactMessageForPlan(plan),
            stamp: Date.now()
        });

        window.setTimeout(() => {
            document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" });
        }, 60);
    }

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("is-visible");
                }
            });
        }, { threshold: 0.12 });

        document.querySelectorAll(".reveal").forEach((node) => observer.observe(node));
        return () => observer.disconnect();
    }, []);

    useEffect(() => {
        if (!window.location.hash) {
            return;
        }

        const target = document.querySelector(window.location.hash);
        if (target) {
            window.setTimeout(() => target.scrollIntoView({ block: "start" }), 80);
        }
    }, []);

    return (
        <>
            <Navbar theme={theme} setTheme={setTheme} />
            <main>
                <AmbientBackground />
                <Hero />
                <div className="reveal"><Services /></div>
                <div className="reveal"><Process /></div>
                <div className="reveal"><Work /></div>
                <div className="reveal"><Testimonials /></div>
                <div className="reveal"><Pricing onDiscussProject={handleDiscussProject} /></div>
                <div className="reveal"><FAQ /></div>
                {/* Future: add blog/resource cards or expanded testimonial case studies here. */}
                <div className="reveal"><Contact preset={contactPreset} /></div>
            </main>
            <Footer />
        </>
    );
}

const rootElement = document.getElementById("root");

try {
    ReactDOM.createRoot(rootElement).render(
        <ErrorBoundary>
            <App />
        </ErrorBoundary>
    );

    window.setTimeout(() => {
        if (rootElement && !rootElement.textContent.trim() && window.NXO_RESTORE_FALLBACK) {
            window.NXO_RESTORE_FALLBACK();
        }
    }, 1500);
} catch (error) {
    if (window.NXO_RESTORE_FALLBACK) {
        window.NXO_RESTORE_FALLBACK(error);
    } else {
        throw error;
    }
}