"use client";

import { ArrowRightIcon } from "@heroicons/react/24/solid";

export function HomeCTA() {
  return (
    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">

        {/* LEFT: Big CTA Button */}
        <button className="w-full lg:col-span-2 flex items-center justify-between bg-white border items-left border-gray-300 rounded-full px-8 py-5 shadow-sm hover:border-cyan-500 transition">
          <span className="text-2xl lg:text-3xl font-semibold text-gray-900">
            Start Your Mycelium Journey 
          </span>

          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500">
            <ArrowRightIcon className="h-6 w-6 text-white" />
          </span>
        </button>

        {/* RIGHT: Two small CTAs */}
        <div className="flex flex-col gap-4">

          {/* Button 1 */}
          <button className="inline-flex items-center justify-between bg-cyan-500 text-white rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:bg-cyan-600 transition">
            Get Started
            <ArrowRightIcon className="h-4 w-4 ml-2" />
          </button>

          {/* Button 2 */}
          <button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
            Explore Docs
            <ArrowRightIcon className="h-4 w-4 ml-2 text-gray-700" />
          </button>

        </div>
      </div>
    </section>
  );
}