"use client";

import { ArrowRight } from "lucide-react";
import {
  GlassCard,
  GradientText,
  ScrollReveal,
  FloatingElement,
  GlowOrb,
} from "@/components/ui/primitives";

export default function SaasContent1() {
  return (
    <section className="relative overflow-hidden bg-white py-24">
      <GlowOrb
        color="#4f46e5"
        size="md"
        position={{ top: "10%", right: "-5%" }}
        className="opacity-[0.06]"
      />

      <div className="relative mx-auto max-w-6xl px-6">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
          {/* Left: Content */}
          <ScrollReveal variant="fade-left">
            <div>
              <GradientText
                from="indigo-300"
                to="violet-300"
                as="span"
                className="text-[120px] font-bold leading-none lg:text-[160px]"
              >
                01
              </GradientText>

              <div className="-mt-10 relative">
                <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
                  Built for developers who ship
                </h2>
                <p className="mt-4 text-base leading-relaxed text-gray-500">
                  Stop stitching together fragile toolchains. Our platform gives
                  you a single, cohesive workflow — from local development to
                  production deployment — so you can focus on building features,
                  not fighting infrastructure.
                </p>

                <a
                  href="#learn-more"
                  className="mt-8 inline-flex items-center gap-2 text-sm font-medium text-gray-900 transition-colors hover:text-indigo-600 group"
                >
                  Learn more
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </a>
              </div>
            </div>
          </ScrollReveal>

          {/* Right: Dashboard mockup */}
          <ScrollReveal variant="fade-right" delay={0.2}>
            <div className="relative">
              <FloatingElement amplitude={8} duration={7}>
                <GlassCard variant="light" hover={false} className="p-0">
                  <div className="aspect-14/10 overflow-hidden rounded-2xl">
                    <div className="flex h-full flex-col p-6">
                      {/* Top bar */}
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full bg-red-300/60" />
                        <div className="h-3 w-3 rounded-full bg-amber-300/60" />
                        <div className="h-3 w-3 rounded-full bg-emerald-300/60" />
                        <div className="ml-4 h-4 w-48 rounded bg-gray-200/60" />
                      </div>

                      {/* Content area */}
                      <div className="mt-6 grid flex-1 grid-cols-3 gap-3">
                        <div className="rounded-lg bg-linear-to-br from-indigo-100/80 to-indigo-50 p-3">
                          <div className="h-3 w-12 rounded bg-indigo-200/60" />
                          <div className="mt-2 h-6 w-16 rounded bg-indigo-300/40" />
                        </div>
                        <div className="rounded-lg bg-linear-to-br from-emerald-100/80 to-emerald-50 p-3">
                          <div className="h-3 w-12 rounded bg-emerald-200/60" />
                          <div className="mt-2 h-6 w-16 rounded bg-emerald-300/40" />
                        </div>
                        <div className="rounded-lg bg-linear-to-br from-amber-100/80 to-amber-50 p-3">
                          <div className="h-3 w-12 rounded bg-amber-200/60" />
                          <div className="mt-2 h-6 w-16 rounded bg-amber-300/40" />
                        </div>
                      </div>

                      {/* Chart placeholder */}
                      <div className="mt-3 flex-1 rounded-lg bg-gray-100/80 p-4">
                        <div className="flex h-full items-end gap-2">
                          {[40, 65, 45, 80, 55, 70, 90, 60, 75, 85].map((h, i) => (
                            <div
                              key={i}
                              className="flex-1 rounded-t bg-linear-to-t from-indigo-400/60 to-indigo-300/40"
                              style={{ height: `${h}%` }}
                            />
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </GlassCard>
              </FloatingElement>

              {/* Subtle glow behind card */}
              <div className="absolute -inset-4 -z-10 rounded-3xl bg-linear-to-br from-indigo-200/30 to-violet-200/30 blur-2xl" />
            </div>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
}