Process 1

"use client";

import Image from "next/image";

import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";

const steps = [
  {
    buttonText: "Get Started",
    card: "features",
    description:
      "Minimal, organized structure to help you manage, sort, and access every task.",
    number: 1,
    title: "Smarter Task Management Flow",
  },
  {
    buttonText: "Learn More",
    card: "workflow",
    description:
      "Minimal, organized structure to help you manage, sort, and access every task.",
    number: 2,
    title: "All-in-One Project Beam Control",
  },
  {
    buttonText: "Learn More",
    card: "analytics",
    description:
      "Minimal, organized structure to help you manage, sort, and access every task.",
    number: 3,
    title: "Real-Time Advanced Usage Analytics",
  },
];

const featuresList = [
  { icon: Icons.inbox, label: "Streamlined Organization", number: "#01" },
  { dot: true, icon: null, label: "Powerful Integrations", number: "#02" },
  { dot: true, icon: null, label: "Real-Time Updates", number: "#03" },
  { dot: true, icon: null, label: "Seamless Collaboration", number: "#04" },
];

const workflowTabs = ["Design", "Edit", "Publish", "Manage", "Or"];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-white py-24 dark:bg-background">
      <div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-0">
        {/* Steps Grid */}
        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
          {steps.map((step, index) => (
            <div className="flex flex-col" key={step.number}>
              {/* Step Header */}
              <div className="mb-8 flex items-center gap-4">
                <div
                  className={`flex h-12 w-12 items-center justify-center rounded-full font-semibold text-lg ${
                    step.number === 1
                      ? "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
                      : step.number === 2
                        ? "bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900"
                        : "bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900"
                  }`}
                >
                  {step.number}
                </div>
                {index < steps.length - 1 && (
                  <div className="hidden flex-1 border-neutral-300 border-t-2 border-dashed md:block dark:border-neutral-700" />
                )}
              </div>

              {/* Step Content */}
              <div className="mb-6">
                <h3 className="mb-3 font-semibold text-neutral-900 text-xl tracking-tight dark:text-neutral-100">
                  {step.title}
                </h3>
                <p className="mb-4 text-neutral-600 text-sm dark:text-neutral-400">
                  {step.description}
                </p>
                <Button
                  className="rounded-lg border border-neutral-200 bg-white px-4 py-2 font-medium text-neutral-900 text-sm hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
                  variant="outline"
                >
                  {step.buttonText}
                </Button>
              </div>

              {/* Step Card */}
              <div className="mt-auto rounded-2xl border border-neutral-200 bg-white p-5 dark:border-neutral-800 dark:bg-neutral-900">
                {step.card === "features" && (
                  <div className="space-y-4">
                    {featuresList.map((feature, idx) => (
                      <div
                        className="flex items-center justify-between"
                        key={feature.label}
                      >
                        <div className="flex items-center gap-3">
                          {idx === 0 ? (
                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600">
                              <Icons.inbox className="size-4 text-white" />
                            </div>
                          ) : (
                            <div className="flex h-3 w-3 items-center justify-center">
                              <div className="h-2 w-2 rounded-full bg-blue-600" />
                            </div>
                          )}
                          <span className="rounded-full border border-neutral-200 bg-white px-3 py-1 text-neutral-900 text-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100">
                            {feature.label}
                          </span>
                        </div>
                        <span className="text-neutral-400 text-sm">
                          {feature.number}
                        </span>
                      </div>
                    ))}
                  </div>
                )}

                {step.card === "workflow" && (
                  <div className="flex flex-col items-center">
                    {/* Top Icons */}
                    <div className="mb-4 flex items-center gap-2">
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
                        <Icons.targetArrow className="size-5 text-neutral-600 dark:text-neutral-400" />
                      </div>
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
                        <Icons.archive className="size-5 text-neutral-600 dark:text-neutral-400" />
                      </div>
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
                        <Icons.user className="size-5 text-neutral-600 dark:text-neutral-400" />
                      </div>
                    </div>

                    {/* Connecting Line */}
                    <div className="mb-4 h-8 w-px bg-neutral-200 dark:bg-neutral-700" />

                    {/* Logo */}
                    <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-600 shadow-lg">
                      <svg
                        className="h-8 w-8 text-white"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
                      </svg>
                    </div>

                    {/* Tabs */}
                    <div className="flex flex-wrap items-center justify-center gap-2">
                      {workflowTabs.map((tab) => (
                        <span
                          className="rounded-full border border-neutral-200 bg-white px-4 py-2 text-neutral-900 text-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
                          key={tab}
                        >
                          {tab}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {step.card === "analytics" && (
                  <div>
                    {/* Header */}
                    <div className="mb-4 flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-neutral-900 dark:text-neutral-100">
                          Sarah Jones
                        </h4>
                        <p className="text-neutral-500 text-sm">
                          Beam Technology
                        </p>
                      </div>
                      <div className="h-10 w-10 overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700">
                        <Image
                          alt="Sarah Jones"
                          className="h-full w-full object-cover"
                          height={40}
                          src="https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a1.jpg"
                          width={40}
                        />
                      </div>
                    </div>

                    {/* Legend */}
                    <div className="mb-4 flex items-center gap-4">
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-sm bg-neutral-300 dark:bg-neutral-600" />
                        <span className="text-neutral-600 text-sm dark:text-neutral-400">
                          Free
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-sm bg-blue-600" />
                        <span className="text-neutral-600 text-sm dark:text-neutral-400">
                          Premium
                        </span>
                      </div>
                    </div>

                    {/* Chart */}
                    <div className="relative h-24">
                      <svg
                        className="h-full w-full"
                        preserveAspectRatio="none"
                        viewBox="0 0 200 60"
                      >
                        {/* Free line */}
                        <path
                          d="M0,50 Q30,45 50,40 T100,35 T150,30 T200,40"
                          fill="none"
                          stroke="#d1d5db"
                          strokeWidth="2"
                        />
                        {/* Premium line */}
                        <path
                          d="M0,55 Q30,50 50,45 T100,20 T150,15 T200,35"
                          fill="none"
                          stroke="#2563eb"
                          strokeWidth="2"
                        />
                      </svg>
                    </div>

                    {/* X-axis labels */}
                    <div className="mt-2 flex justify-between text-neutral-400 text-xs">
                      <span>0</span>
                      <span>2k</span>
                      <span>3k</span>
                      <span>4k</span>
                      <span>5k</span>
                      <span>9K</span>
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}