'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
const brands = [
  { name: 'APPLE', img: '../images/brands/Apple.png' },
  { name: 'SAMSUNG', img: '../images/brands/Samsung.png' },
  { name: 'ONEPLUS', img: '../images/brands/OnePlus.png' },
  { name: 'LENOVO', img: '../images/brands/Lenovo.png' },
  { name: 'OPPO', img: '../images/brands/Oppo.png' },
  { name: 'VIVO', img: '../images/brands/Vivo.png' },
  { name: 'ASUS', img: '../images/brands/Asus.png' },
];

const benefits = ['SECURE DATA WIPE', 'INSTANT CASH', 'FREE PICKUP'];

export function SellByBrand() {
  const [selectedBrand, setSelectedBrand] = useState<string | null>(null);

  return (
    <section className="flex w-full justify-center px-4 py-16 sm:px-8 lg:px-16 lg:py-24">
      <div className="flex w-full max-w-[1312px] flex-col gap-12 lg:gap-16">
        <header className="flex items-end justify-between gap-6">
          <div className="flex flex-col items-start gap-3">
            <h2 className="font-satoshi text-4xl font-bold leading-9 text-slate-900">
              Sell By <span className="text-sec">Brand</span>
            </h2>
            <p className="font-satoshi text-base font-medium leading-6 text-mtext">
              Get an instant quote for your device in under 60 mins.
            </p>
          </div>
          <Button
            variant="link"
            className="h-auto shrink-0 p-0 font-satoshi text-sm font-bold leading-5 text-sec underline underline-offset-4 transition-colors hover:text-sec/80"
          >
            View More Brands
          </Button>
        </header>

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 md:grid-cols-4 lg:grid-cols-7 lg:gap-8">
          {brands.map((brand) => (
            <button
              key={brand.name}
              aria-pressed={selectedBrand === brand.name}
              onClick={() => setSelectedBrand(brand.name)}
              className={`h-40 w-full overflow-hidden rounded-2xl border bg-white transition-colors ${
                selectedBrand === brand.name
                  ? 'border-sec'
                  : 'border-app hover:border-sec'
              }`}
            >
              <div className="flex h-full w-full flex-col items-center justify-center gap-4 p-6">
                <span className="font-satoshi text-2xl font-bold text-slate-900">
                  {brand.img && (
                    <Image
                  
                      width={100}
                      height={100}
                      src={brand.img}
                      alt={brand.name}
                      className="h-full w-full object-contain"
                    />
                  )}
                </span>
                <span className="font-satoshi text-center text-xs font-bold tracking-[1px] text-mtext">
                  {brand.name}
                </span>
              </div>
            </button>
          ))}
        </div>

        <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4 border-t border-app pt-8">
          {benefits.map((benefit) => (
            <li
              key={benefit}
              className="flex items-center gap-2 font-satoshi text-sm font-bold leading-5 text-mtext"
            >
              <span aria-hidden="true" className="h-1.5 w-1.5 rounded-full bg-sec" />
              {benefit}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}