import React from 'react'
import GroupBadgePill from './GroupBadgePill'

export default function GroupPromoCard({ group, eyebrow = 'Groups spotlight', title, description, ctaLabel = 'Open group' }) {
  if (!group) return null

  return (
    <section className="overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.18),transparent_28%),radial-gradient(circle_at_80%_20%,rgba(16,185,129,0.12),transparent_26%),linear-gradient(180deg,rgba(7,16,29,0.98),rgba(2,6,23,0.94))] shadow-[0_30px_90px_rgba(2,6,23,0.45)]">
      <div className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1.3fr)_320px] lg:p-8">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">{eyebrow}</p>
          <h2 className="mt-3 text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">{title || group.name}</h2>
          <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300">{description || group.headline || group.bio_excerpt || 'Collective publishing for shared releases, artwork credits, and collaborative identity.'}</p>

          <div className="mt-5 flex flex-wrap gap-2">
            {(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, 3).map((signal) => (
              <GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
            ))}
            {group.is_recruiting ? <GroupBadgePill label="Actively recruiting" tone="emerald" /> : null}
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <a href={group.urls?.public || '/groups'} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/15">
              {ctaLabel}
              <i className="fa-solid fa-arrow-right text-xs" />
            </a>
            <a href="/groups" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">
              Browse all groups
            </a>
          </div>
        </div>

        <div className="rounded-[28px] border border-white/10 bg-black/25 p-5 backdrop-blur-sm">
          <div className="flex items-center gap-4">
            <div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
                {group.avatar_url ? <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
            </div>
            <div className="min-w-0">
              <div className="truncate text-lg font-semibold text-white">{group.name}</div>
              <div className="mt-1 text-sm text-slate-400">{group.owner?.username || group.owner?.name ? `Led by ${group.owner.username || group.owner.name}` : 'Shared publishing identity'}</div>
            </div>
          </div>

          <div className="mt-5 grid grid-cols-2 gap-3">
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
              <div className="text-2xl font-semibold text-white">{Number(group.counts?.artworks || 0).toLocaleString()}</div>
              <div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Published artworks</div>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
              <div className="text-2xl font-semibold text-white">{Number(group.counts?.followers || 0).toLocaleString()}</div>
              <div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Followers</div>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
              <div className="text-2xl font-semibold text-white">{Number(group.counts?.members || 0).toLocaleString()}</div>
              <div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Members</div>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
              <div className="text-2xl font-semibold text-white">{Number(group.counts?.collections || 0).toLocaleString()}</div>
              <div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Collections</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}