import React from 'react';
import { REVIEWS_LIST } from '../data/yachtData';
import { Star, ShieldCheck, Award, Quote, CheckCircle2 } from 'lucide-react';

export const ReviewsAndPress: React.FC = () => {
  const corporateClients = [
    "Morgan Stanley",
    "HSBC Private Bank",
    "Lane Crawford",
    "Goldman Sachs",
    "Cathay Pacific",
    "Swire Properties"
  ];

  return (
    <section className="py-24 bg-[#080e18] relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-amber-500/15 border border-amber-500/30 text-amber-300 text-xs font-semibold uppercase tracking-wider">
            <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
            <span>5.0 Star Rated Superyacht</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Trusted by Hong Kong's Discerning Hosts
          </h2>
          <p className="text-slate-400 text-base sm:text-lg">
            Over 180+ successful charters logged across Victoria Harbour, Sai Kung, and Southside.
          </p>
        </div>

        {/* Corporate Client Logos / Names Bar */}
        <div className="mb-16 p-6 rounded-2xl bg-slate-900/60 border border-white/10 backdrop-blur-md">
          <span className="text-[11px] font-bold uppercase tracking-widest text-slate-400 block text-center mb-4">
            Trusted For Corporate Hospitality & Executive Mixers By:
          </span>
          <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-12">
            {corporateClients.map((client, idx) => (
              <span
                key={idx}
                className="text-xs sm:text-sm font-semibold tracking-wider text-slate-300 uppercase font-mono"
              >
                {client}
              </span>
            ))}
          </div>
        </div>

        {/* Verified Reviews Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {REVIEWS_LIST.map((review) => (
            <div
              key={review.id}
              className="glass-card rounded-3xl p-6 sm:p-7 border border-white/15 bg-slate-900/80 shadow-2xl flex flex-col justify-between space-y-6"
            >
              <div className="space-y-4">
                {/* Stars & Charter badge */}
                <div className="flex items-center justify-between">
                  <div className="flex gap-1">
                    {[...Array(review.rating)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                  <span className="text-[10px] text-slate-400 font-mono">
                    {review.date}
                  </span>
                </div>

                <div className="text-xs font-bold text-amber-300 bg-amber-500/10 px-2.5 py-1 rounded-lg border border-amber-500/20 inline-block">
                  {review.charterName}
                </div>

                <p className="text-xs sm:text-sm text-slate-200 leading-relaxed font-light italic">
                  "{review.comment}"
                </p>
              </div>

              {/* Author */}
              <div className="flex items-center gap-3 pt-4 border-t border-white/10">
                <img
                  src={review.avatar}
                  alt={review.author}
                  className="w-10 h-10 rounded-full object-cover border border-amber-400/40"
                />
                <div>
                  <div className="text-xs font-bold text-white flex items-center gap-1">
                    <span>{review.author}</span>
                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                  </div>
                  <div className="text-[11px] text-slate-400">
                    {review.role} • {review.companyOrOccasion}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

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