/* ZestPlus — Clubs (community) */

function Community(){
  // Featured running club
  const featured = {
    name:"Sunrise 5K Club",
    tag:"Running · Jakarta",
    members:142,
    when:"Mon · Wed · Fri",
    where:"GBK · 5:30 AM",
    desc:"“We meet at 5:30. We don’t make excuses. Coffee after — always.”",
    captain:"Maya P",
    weekly:{ km:412, kcal:38400, sessions:24, prs:8 }
  };
  // Free, open running clubs across the city
  const otherClubs = [
    { name:"Sudirman Runners",   tag:"Running · Sudirman", emoji:"🌅", members:430, when:"M·W·F · 5:30 AM", c1:"#c7ff3d", c2:"#7fb800" },
    { name:"PIK Pace Pack",      tag:"Running · PIK",      emoji:"🌊", members:268, when:"T·Th·Sa · 6 AM", c1:"#34d399", c2:"#0d9488" },
    { name:"Bandung Hills",      tag:"Running · Bandung",  emoji:"⛰️", members:184, when:"Wed · Sun · 6 AM", c1:"#f59e0b", c2:"#b45309" },
    { name:"Senayan Striders",   tag:"Running · Senayan",  emoji:"🏙️", members:312, when:"Tue · Thu · 6 PM", c1:"#60a5fa", c2:"#1d4ed8" },
    { name:"Kuningan Night Run", tag:"Running · Kuningan", emoji:"🌃", members:156, when:"Tue · Thu · 8 PM", c1:"#f472b6", c2:"#9d174d" },
    { name:"BSD Trailblazers",   tag:"Running · BSD",      emoji:"👟", members:121, when:"Sat · Sun · 6 AM", c1:"#a78bfa", c2:"#6d28d9" },
  ];

  return (
    <Section id="community" className="relative">
      <OrbField orbs={[
        { left:"-10%", top:"15%", size:480, blur:130, opacity:.35, bg:"radial-gradient(closest-side, rgba(124,58,237,0.4), transparent 70%)" },
        { right:"-8%", bottom:"5%", size:520, blur:130, opacity:.3, bg:"radial-gradient(closest-side, rgba(199,255,61,0.35), transparent 70%)" },
      ]}/>

      <Container className="relative">
        {/* Header */}
        <div className="flex flex-col lg:flex-row items-start justify-between gap-6">
          <div className="max-w-[760px]">
            <Reveal><Eyebrow>Free to join · Running</Eyebrow></Reveal>
            <Reveal delay={100}>
              <h2 className="h-section text-[44px] md:text-[64px] mt-4">
                Real clubs.<br/>Real <span className="text-gradient-lime">Jakarta.</span>
              </h2>
            </Reveal>
            <Reveal delay={180}>
              <p className="mt-5 text-[17px] text-fg2 max-w-[58ch]">
                Free, open running clubs across the city — show up to a regular routine of runs, no coaches and no fees. 412 clubs and counting, in 38 cities across Southeast Asia.
              </p>
            </Reveal>
          </div>
          <Reveal delay={240}>
            <div className="flex items-center gap-3 mt-2">
              <a className="btn btn-ghost text-[13px]"><Icon name="search" size={14}/> Find a club</a>
              <a className="btn btn-primary text-[13px]"><Icon name="plus" size={14}/> Start one</a>
            </div>
          </Reveal>
        </div>

        {/* Featured + Live feed */}
        <div className="mt-16 grid lg:grid-cols-12 gap-6">
          {/* Featured */}
          <Reveal className="lg:col-span-8">
            <div className="relative overflow-hidden rounded-[28px] glass-strong ring-grad p-1">
              {/* cover */}
              <div className="relative overflow-hidden rounded-[24px]" style={{aspectRatio:"16/9"}}>
                <div className="absolute inset-0" style={{
                  background:"radial-gradient(60% 80% at 10% 30%, rgba(199,255,61,0.6), transparent 60%), radial-gradient(60% 80% at 80% 70%, rgba(245,158,11,0.45), transparent 60%), linear-gradient(135deg, #1a1a1f, #0a0a0c)"
                }}/>
                {/* Topo lines */}
                <svg className="absolute inset-0 w-full h-full" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice">
                  {Array.from({length:14}).map((_,i)=>(
                    <path key={i} d={`M 0 ${60 + i*22} Q 200 ${40 + i*18 + Math.sin(i)*12} 400 ${80 + i*20} T 800 ${50 + i*22}`}
                      stroke="rgba(255,255,255,0.05)" strokeWidth={i%3===0?1.2:0.6} fill="none"/>
                  ))}
                </svg>
                {/* sun */}
                <div className="absolute" style={{left:"55%", top:"20%", width:160, height:160, borderRadius:"50%", background:"radial-gradient(closest-side, rgba(255,200,80,0.7), rgba(255,150,50,0.2), transparent 70%)", filter:"blur(8px)"}}/>
                {/* badge corner */}
                <div className="absolute top-4 left-4 flex items-center gap-2">
                  <Pill accent className="!text-[11px]">Featured club</Pill>
                </div>
                <div className="absolute top-4 right-4">
                  <LiveDot label="3 LIVE NOW"/>
                </div>
                {/* big title */}
                <div className="absolute left-6 bottom-6 right-6">
                  <div className="text-[11px] uppercase tracking-[0.18em] text-white/65">{featured.tag}</div>
                  <h3 className="font-display font-semibold text-[36px] md:text-[44px] leading-none mt-1 text-white">{featured.name}</h3>
                  <p className="mt-3 text-[14px] md:text-[15px] text-white/80 max-w-[52ch] italic">{featured.desc}</p>
                </div>
              </div>

              {/* body */}
              <div className="p-5 md:p-6">
                <div className="grid md:grid-cols-12 gap-5 items-center">
                  <div className="md:col-span-5 flex items-center gap-3">
                    <AvatarStack names={["Maya P","Andi P","Rico T","Aisyah K","Danny F","Linda S","Hana W","Jaya R"]} size={36} max={6} overlap={11}/>
                    <div className="leading-tight">
                      <div className="text-[15px] font-display font-semibold">{featured.members} members</div>
                      <div className="text-[12px] text-fg3">Organizer: <span className="text-fg2">{featured.captain}</span></div>
                    </div>
                  </div>
                  <div className="md:col-span-4 flex items-center gap-5 text-[13px]">
                    <div className="flex items-center gap-2"><Icon name="calendar" size={15} className="text-fg3"/>{featured.when}</div>
                    <div className="flex items-center gap-2"><Icon name="pin" size={15} className="text-fg3"/>{featured.where}</div>
                  </div>
                  <div className="md:col-span-3 flex md:justify-end">
                    <a className="btn btn-primary text-[13px]"><Icon name="users" size={14}/> Join club</a>
                  </div>
                </div>

                {/* weekly stats strip */}
                <div className="mt-5 grid grid-cols-4 gap-px rounded-2xl overflow-hidden hairline">
                  {[
                    {label:"this week · km", val:`${featured.weekly.km}`},
                    {label:"kcal", val:`${(featured.weekly.kcal/1000).toFixed(1)}K`},
                    {label:"runs", val:`${featured.weekly.sessions}`},
                    {label:"new PRs", val:`${featured.weekly.prs}`},
                  ].map(s=>(
                    <div key={s.label} className="bg-elev p-3 md:p-4">
                      <div className="font-display font-semibold text-[20px] md:text-[24px] leading-none">{s.val}</div>
                      <div className="mt-1 text-[10.5px] uppercase tracking-[0.14em] text-fg3">{s.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>

          {/* Live activity feed */}
          <Reveal delay={120} className="lg:col-span-4">
            <div className="rounded-[28px] glass ring-grad p-5 md:p-6 h-full">
              <div className="flex items-center justify-between">
                <div className="eyebrow">Live activity</div>
                <LiveDot/>
              </div>
              <div className="mt-5 space-y-3 relative">
                <div className="absolute left-[14px] top-2 bottom-2 w-px" style={{background:"linear-gradient(180deg, var(--accent), transparent)"}}/>
                {[
                  {who:"Maya P", what:"finished a 5K · 27:14", when:"2 min", emoji:"🏃", color:"#22c55e"},
                  {who:"Rico T", what:"hit Level 6", when:"8 min", emoji:"⚡", color:"#c7ff3d"},
                  {who:"Aisyah K", what:"joined PIK Pace Pack", when:"14 min", emoji:"🏃", color:"#34d399"},
                  {who:"Danny F", what:"RSVP'd Saturday long run", when:"22 min", emoji:"📅", color:"#60a5fa"},
                  {who:"Linda S", what:"set a PR · 10K · 53:08", when:"34 min", emoji:"🏆", color:"#f59e0b"},
                  {who:"Hana W", what:"unlocked 9-day streak", when:"1 hr", emoji:"🔥", color:"#ef4444"},
                  {who:"Jaya R", what:"club PB · Bandung 10K", when:"2 hr", emoji:"🎉", color:"#34d399"},
                ].map((e,i)=>(
                  <div key={i} className="relative flex items-start gap-3 pl-7">
                    <div className="absolute left-[7px] top-[10px] rounded-full ring-2 ring-[var(--bg-elev)]"
                         style={{width:14, height:14, background:e.color}}/>
                    <Avatar name={e.who} size={28}/>
                    <div className="flex-1 leading-tight">
                      <div className="text-[13px]"><b className="font-display font-semibold">{e.who}</b> <span className="text-fg2">{e.what}</span></div>
                      <div className="text-[11px] text-fg3 mt-0.5">{e.when} ago · {e.emoji}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* Other clubs grid */}
        <div className="mt-12 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 items-stretch">
          {otherClubs.map((c,i)=>(
            <Reveal key={c.name} delay={i*70} className="h-full">
              <a className="group flex flex-col h-full rounded-2xl glass ring-grad p-4 hover:-translate-y-1 transition-all duration-300">
                <div className="rounded-xl grid place-items-center text-[24px] mb-3"
                     style={{height:64, background:`linear-gradient(135deg, ${c.c1}, ${c.c2})`, color:"#0a0a0b"}}>
                  {c.emoji}
                </div>
                <div className="text-[10.5px] uppercase tracking-[0.14em] text-fg3">{c.tag}</div>
                <div className="font-display font-semibold text-[15px] leading-tight mt-0.5">{c.name}</div>
                <div className="mt-auto pt-3 text-[11.5px] text-fg3 leading-snug">
                  <div className="whitespace-nowrap">{c.members} members</div>
                  <div className="mt-0.5">{c.when}</div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>

        {/* Stats row */}
        <Reveal delay={200}>
          <div className="mt-12 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 py-8 px-6 rounded-3xl glass">
            {[
              { num:412,   label:"running clubs",   format:(v)=>Math.round(v).toLocaleString() },
              { num:2800,  label:"weekly runs",     format:(v)=>`${(v/1000).toFixed(1)}K` },
              { num:38,    label:"cities in SEA",   format:(v)=>Math.round(v).toLocaleString() },
              { num:99000, label:"club finishes",   format:(v)=>`${(v/1000).toFixed(0)}K+` },
            ].map((s,i)=>(
              <div key={i} className="flex items-baseline gap-2.5">
                <span className="font-display font-semibold text-[28px] leading-none text-gradient-lime">
                  <Counter to={s.num} format={s.format}/>
                </span>
                <span className="text-[12px] text-fg3 uppercase tracking-[0.14em]">{s.label}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

Object.assign(window, { Community });