"use client";

import Link from "next/link";
import { useCallback } from "react";
import { useEventModal } from "./event-modal-context";

interface Props {
  primaryButtonText: string;
  secondaryButtonText: string;
}

export function ExperienceSection({ primaryButtonText, secondaryButtonText }: Props) {
  const { openModal } = useEventModal();

  const handleAddToCart = useCallback(async (productId: string, quantity: number, addons: string[]) => {
    console.log("Adding to cart:", { productId, quantity, addons });
  }, []);

  return (
    <section className="rounded-[2rem] border border-[#ffdede] bg-[linear-gradient(122deg,#fff0f0_0%,#ffecec_45%,#ffe5e5_100%)] px-6 py-10 shadow-[0_20px_48px_rgba(49,18,18,0.09)] md:px-10">
      <div className="grid gap-6 md:grid-cols-[1.2fr_1fr] md:items-end">
        <div className="space-y-3">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-3)]">Expérience boutique</p>
          <h3 className="font-serif text-4xl text-[var(--foreground)] md:text-5xl">Un parcours moderne pour acheter plus vite</h3>
          <p className="max-w-2xl text-sm leading-relaxed text-[var(--muted)]">Découvrez les produits, choisissez les variantes, personnalisez votre article et validez votre panier sans friction.</p>
        </div>
        <div className="flex gap-3 text-sm font-semibold">
          <Link href="/boutique" className="rounded-full bg-[var(--accent-3)] px-5 py-2.5 text-white hover:bg-[var(--accent-2)]">
            {primaryButtonText}
          </Link>
          <button
            onClick={openModal}
            className="rounded-full border border-[var(--accent-3)] bg-white/75 px-5 py-2.5 text-[var(--foreground)] hover:bg-white transition"
          >
            {secondaryButtonText}
          </button>
        </div>
      </div>
    </section>
  );
}