/* Receptionists — avatar cards (uses uploaded portrait PNGs) */
const PERSONAS = [
  { id:'sarah', name:'Sarah', role:'The Professional', blurb:'Polished, smart, calm. Confident without sounding pushy.', voice:'Sarah', dur:'5min', style:'Clear and professional with natural human touches. Pauses to think.', color:'#FF5736', img:'assets/avatars/sarah.png' },
  { id:'emma',  name:'Emma',  role:'The Empath',       blurb:'Empathetic, reassuring, patient. Calm under stress.',     voice:'Emma',  dur:'6min', style:'Gentle and measured with natural warmth. Never rushes a caller.',         color:'#7c3aed', img:'assets/avatars/emma.png' },
  { id:'james', name:'James', role:'The Dispatcher',   blurb:'Direct, fast, efficient. No fluff, action-oriented.',     voice:'James', dur:'5min', style:'Short sentences with urgency. Fast but not robotic.',                     color:'#1e3a8a', img:'assets/avatars/james.png' },
  { id:'bella', name:'Bella', role:'The Charmer',      blurb:'Warm, upbeat, enthusiastic. Booking-friendly.',           voice:'Bella', dur:'5min', style:'Enthusiastic with natural energy. Bubbly but authentic.',                 color:'#dc2626', img:'assets/avatars/bella.png' },
  { id:'liam',  name:'Liam',  role:'The Coordinator',  blurb:'Practical, trustworthy, friendly. Grounded, dependable.', voice:'Liam',  dur:'5min', style:'Straightforward with natural ease. Practical, unhurried, real.',          color:'#ea580c', img:'assets/avatars/liam.png' },
];

const Character = ({ p }) => (
  <div className="relative w-full h-full rounded-full overflow-hidden ring-1 ring-black/5"
       style={{ background: `radial-gradient(60% 60% at 50% 40%, ${p.color}22, transparent 70%)` }}>
    <img src={p.img} alt={p.name} className="w-full h-full object-cover" loading="lazy"/>
  </div>
);

const Receptionists = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section id="receptionists" className="relative py-32 bg-[#0b0b0b]/50 backdrop-blur-md border-y border-line2">
      <div className="mx-auto max-w-[1400px] px-6">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-16">
          <div className="max-w-3xl">
            <div className="font-mono text-xs tracking-[0.3em] text-flame mb-5" data-reveal>[ 05 / PICK YOUR VOICE ]</div>
            <h2 className="word-rev text-[clamp(40px,6vw,88px)] leading-[0.95] tracking-[-0.03em] font-bold">
              {splitWords("Five receptionists.")} <span className="serif text-flame">{splitWords("One price.")}</span>
            </h2>
          </div>
          <p className="text-white/60 text-lg max-w-md" data-reveal data-reveal-delay="2">
            All five ship with every Grippy plan. Switch by hour, by day-part, by line — instantly.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
          {PERSONAS.map((p, i) => (
            <article
              key={p.id}
              data-reveal
              data-reveal-delay={Math.min(4, i + 1)}
              data-tilt="6"
              onClick={() => setActive(i)}
              className={`char-card cursor-pointer bg-white text-ink rounded-3xl p-5 pb-6 relative overflow-hidden border ${active === i ? 'shadow-[0_30px_80px_rgba(255,87,54,0.25)]' : 'border-transparent'}`}
              style={active === i ? { borderColor: p.color, boxShadow: `0 30px 80px ${p.color}33, 0 0 0 3px ${p.color}15` } : { borderColor: '#e5e5e5' }}
            >
              {active === i && (
                <span className="absolute top-3 left-3 inline-flex items-center gap-1.5 font-mono text-[9px] font-bold tracking-[0.2em] px-2 py-1 rounded-full bg-green-100 text-green-700">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse-dot"></span>
                  LIVE
                </span>
              )}
              <div className="w-[120px] h-[120px] mx-auto mb-2">
                <Character p={p}/>
              </div>
              <div className="text-center font-extrabold text-xl tracking-tight" style={{color: p.color}}>{p.name}</div>
              <div className="text-center font-bold text-[10px] tracking-[0.2em] uppercase mt-0.5 text-ink/80">{p.role}</div>
              <p className="text-center text-xs text-ink/60 leading-relaxed mt-3">{p.blurb}</p>
              <div className="mt-4 bg-[#fafafa] border border-[#ececec] rounded-xl px-3 py-2.5 space-y-1.5 text-xs">
                <div className="flex justify-between text-ink/60"><span>Voice</span><strong className="font-mono text-ink">{p.voice}</strong></div>
                <div className="flex justify-between text-ink/60"><span>Duration</span><strong className="font-mono text-ink">{p.dur}</strong></div>
                <div className="flex justify-between text-ink/60"><span>Booking</span><strong className="text-green-600">● Enabled</strong></div>
              </div>
              <div className="mt-3">
                <div className="font-mono text-[9px] font-bold tracking-[0.25em] mb-1" style={{color: p.color}}>SPEAKING STYLE</div>
                <p className="text-[11px] text-ink/55 leading-relaxed">{p.style}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Receptionists = Receptionists;