/* global React */
const { useState, useEffect, useRef } = React;

// ============ shared bits ============
const Avatar = ({ initials, color, size = 32, ring }) =>
<div
  className="inline-flex items-center justify-center rounded-full font-bold shrink-0"
  style={{
    width: size,
    height: size,
    background: color,
    color: "#0A0A0A",
    fontSize: size * 0.4,
    fontFamily: "'Bricolage Grotesque', sans-serif",
    letterSpacing: "-0.02em",
    boxShadow: ring ? `0 0 0 2px ${ring}, 0 0 0 4px #0A0A0A` : "none"
  }}>
  
    {initials}
  </div>;


const AvatarStack = ({ people, size = 24 }) =>
<div className="flex items-center" style={{ gap: 0 }}>
    {people.map((p, i) =>
  <div key={i} style={{ marginLeft: i === 0 ? 0 : -size * 0.35, zIndex: people.length - i }}>
        <Avatar initials={p.initials} color={p.color} size={size} ring="#141414" />
      </div>
  )}
  </div>;


const StatPill = ({ label, value, accent }) =>
<div className="flex flex-col gap-0.5 px-2.5 py-1.5 rounded-lg bg-white/5">
    <div className="text-[9px] uppercase tracking-[0.12em] text-white/40 font-mono">{label}</div>
    <div className="text-[13px] font-bold text-white tabular-nums" style={{ color: accent || "white" }}>
      {value}
    </div>
  </div>;


// ============ feed card variants ============
const PRCard = ({ accent }) =>
<div className="rounded-2xl p-4 bg-[#161616] border border-white/[0.06] shadow-[0_8px_24px_-12px_rgba(0,0,0,0.5)]">
    <div className="flex items-start gap-3">
      <Avatar initials="JR" color="#FF8B5A" size={40} />
      <div className="flex-1 min-w-0">
        <div className="flex items-baseline gap-1.5 flex-wrap">
          <span className="text-[13px] font-semibold text-white" data-comment-anchor="c0989838a7-span-49-11">Jack</span>
          <span className="text-[11px] text-white/40">hit a new</span>
          <span
          className="text-[11px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded font-mono"
          style={{ background: accent, color: "#0A0A0A" }}>
          
            squat PR
          </span>
        </div>
        <div className="mt-2 flex items-end gap-3">
          <div>
            <div
            className="text-[28px] font-black leading-none tabular-nums"
            style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.04em" }}>
            
              405<span className="text-white/40 text-[16px] font-bold ml-0.5">lb</span>
            </div>
            <div className="text-[10px] text-white/40 mt-1 font-mono">RPE 9 · 1RM · +15 lb</div>
          </div>
          <div className="flex-1 h-10 relative">
            <svg viewBox="0 0 100 40" preserveAspectRatio="none" className="w-full h-full">
              <path
              d="M0,32 L15,28 L30,30 L45,22 L60,24 L75,16 L90,12 L100,4"
              fill="none"
              stroke={accent}
              strokeWidth="1.5"
              strokeLinecap="round" />
            
              <circle cx="100" cy="4" r="2.5" fill={accent} />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div className="mt-3 pt-3 border-t border-white/[0.06] flex items-center justify-between">
      <div className="flex items-center gap-1">
        {["🔥", "💪", "👑"].map((e, i) =>
      <div
        key={i}
        className="flex items-center gap-1 px-1.5 py-1 rounded-full bg-white/[0.04] text-[10px]">
        
            <span>{e}</span>
            <span className="text-white/60 font-mono">{[24, 18, 7][i]}</span>
          </div>
      )}
      </div>
      <span className="text-[10px] text-white/30 font-mono">2m</span>
    </div>
  </div>;


const ChallengeCard = ({ accent }) =>
<div
  className="rounded-2xl p-4 border relative overflow-hidden"
  style={{
    background: `linear-gradient(135deg, ${accent}15 0%, #161616 60%)`,
    borderColor: `${accent}30`
  }}>
  
    <div className="flex items-center justify-between mb-3">
      <div className="flex items-center gap-2">
        <div
        className="text-[9px] font-bold uppercase tracking-[0.15em] px-2 py-1 rounded font-mono"
        style={{ background: accent, color: "#0A0A0A" }}>
        
          weekly challenge
        </div>
        <span className="text-[10px] text-white/40 font-mono">ends Sun</span>
      </div>
    </div>
    <div className="text-[15px] font-bold text-white leading-tight mb-3">
      4 workouts this week
    </div>
    <div className="flex items-center gap-2 mb-2">
      <div className="flex-1 h-2 rounded-full bg-white/5 overflow-hidden">
        <div className="h-full rounded-full" style={{ width: "75%", background: accent }} />
      </div>
      <span className="text-[11px] font-bold tabular-nums font-mono" style={{ color: accent }}>
        3/4
      </span>
    </div>
    <div className="flex items-center justify-between">
      <AvatarStack
      size={22}
      people={[
      { initials: "JL", color: "#FF8B5A" },
      { initials: "AS", color: "#A3E635" },
      { initials: "RV", color: "#60A5FA" },
      { initials: "DK", color: "#F472B6" }]
      } />
    
      <span className="text-[10px] text-white/40 font-mono">+8 in</span>
    </div>
  </div>;


const AIInsightCard = ({ accent }) =>
<div className="rounded-2xl p-4 bg-[#161616] border border-white/[0.06]">
    <div className="flex items-center gap-2 mb-2">
      <div className="w-5 h-5 rounded-md flex items-center justify-center" style={{ background: accent }}>
        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#0A0A0A" strokeWidth="3">
          <path d="M12 2v6m0 8v6M2 12h6m8 0h6M5 5l4 4m6 6l4 4M5 19l4-4m6-6l4-4" strokeLinecap="round" />
        </svg>
      </div>
      <div className="text-[10px] font-bold uppercase tracking-[0.15em] text-white/50 font-mono">
        AI insight
      </div>
    </div>
    <div className="text-[13px] text-white leading-snug">
      Your bench volume is up <span className="font-bold" style={{ color: accent }}>+18%</span> over the last 4 weeks.{" "}
      <span className="text-white/50">Share it?</span>
    </div>
    <div className="mt-3 flex gap-1.5">
      <div className="flex-1 grid grid-cols-12 gap-[2px] h-6 items-end">
        {[3, 4, 3, 5, 4, 6, 5, 7, 6, 8, 7, 9].map((h, i) =>
      <div
        key={i}
        className="rounded-sm"
        style={{
          height: `${h / 9 * 100}%`,
          background: i >= 8 ? accent : "rgba(255,255,255,0.15)"
        }} />

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


const LeaderboardCard = ({ accent }) =>
<div className="rounded-2xl p-4 bg-[#161616] border border-white/[0.06]">
    <div className="flex items-center justify-between mb-3">
      <div className="text-[12px] font-bold text-white">Similar lifters</div>
      <div className="text-[9px] uppercase tracking-wider text-white/40 font-mono">75kg · M · 2yr</div>
    </div>
    <div className="space-y-2">
      {[
    { rank: 1, name: "Theo R.", val: "1,420", you: false, color: "#FF8B5A" },
    { rank: 2, name: "You", val: "1,385", you: true, color: accent },
    { rank: 3, name: "Sara K.", val: "1,340", you: false, color: "#F472B6" }].
    map((p) =>
    <div
      key={p.rank}
      className="flex items-center gap-2 px-2 py-1.5 rounded-lg"
      style={{ background: p.you ? `${accent}15` : "transparent" }}>
      
          <span
        className="text-[10px] font-mono font-bold w-4"
        style={{ color: p.you ? accent : "rgba(255,255,255,0.4)" }}>
        
            {p.rank}
          </span>
          <Avatar initials={p.name[0]} color={p.color} size={22} />
          <span className={`text-[12px] flex-1 ${p.you ? "font-bold text-white" : "text-white/70"}`}>
            {p.name}
          </span>
          <span className="text-[11px] font-mono tabular-nums text-white/60">{p.val}</span>
        </div>
    )}
    </div>
  </div>;


const CheckinCard = ({ accent }) =>
<div className="rounded-2xl p-3.5 bg-[#161616] border border-white/[0.06]">
    <div className="flex items-center gap-2.5">
      <AvatarStack
      size={26}
      people={[
      { initials: "A", color: "#A3E635" },
      { initials: "J", color: "#60A5FA" },
      { initials: "M", color: "#F472B6" }]
      } />
    
      <div className="flex-1 min-w-0">
        <div className="text-[12px] text-white leading-tight">
          <span className="font-semibold">3 from your gym</span>
          <span className="text-white/50"> trained legs today</span>
        </div>
        <div className="text-[10px] text-white/40 font-mono mt-0.5">PURE GYM · WHITECHAPEL</div>
      </div>
      <div
      className="px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider font-mono"
      style={{ color: accent, background: `${accent}15` }}>
      
        join
      </div>
    </div>
  </div>;


const StreakCard = ({ accent }) =>
<div className="rounded-2xl p-3.5 bg-[#161616] border border-white/[0.06]">
    <div className="flex items-center justify-between">
      <div>
        <div className="flex items-baseline gap-1">
          <span
          className="text-[24px] font-black tabular-nums leading-none"
          style={{ fontFamily: "'Bricolage Grotesque', sans-serif", color: accent, letterSpacing: "-0.04em" }}>
          
            12
          </span>
          <span className="text-[10px] uppercase tracking-wider text-white/40 font-mono">week streak</span>
        </div>
        <div className="text-[10px] text-white/40 mt-1">Don't miss tomorrow</div>
      </div>
      <div className="flex gap-0.5">
        {[1, 1, 1, 1, 1, 1, 0].map((d, i) =>
      <div
        key={i}
        className="w-3 h-6 rounded-sm"
        style={{ background: d ? accent : "rgba(255,255,255,0.08)" }} />

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


// ============ Phone frame ============
const PhoneFrame = ({ children, accent }) =>
<div
  className="relative rounded-[44px] p-2 mx-auto"
  style={{
    width: 320,
    background: "linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%)",
    boxShadow:
    "0 0 0 1px rgba(255,255,255,0.08), 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 120px -20px " + accent + "20"
  }}>
  
    <div
    className="relative rounded-[36px] overflow-hidden bg-[#0A0A0A]"
    style={{ height: 640 }}>
    
      {/* notch */}
      <div className="absolute top-2 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-full z-30 flex items-center justify-end pr-2">
        <div className="w-2 h-2 rounded-full bg-white/10" />
      </div>
      {/* status bar */}
      <div className="absolute top-0 left-0 right-0 h-10 flex items-center justify-between px-6 z-20 text-[11px] text-white font-mono pt-1">
        <span>9:41</span>
        <span></span>
        <span className="flex items-center gap-1">
          <span style={{ fontSize: 9 }}>●●●●</span>
          <span style={{ fontSize: 9 }}>5G</span>
        </span>
      </div>
      {children}
    </div>
  </div>;


// ============ Main mockup ============
const FeedMockup = ({ accent }) =>
<PhoneFrame accent={accent}>
    {/* Header */}
    <div className="pt-12 px-4 pb-3 flex items-center justify-between">
      <div className="flex items-center gap-2">
        <div
        className="text-[20px] font-black leading-none"
        style={{
          fontFamily: "'Bricolage Grotesque', sans-serif",
          letterSpacing: "-0.06em",
          color: accent
        }}>
        
          XRPE
        </div>
        <div className="text-[10px] text-white/40 font-mono uppercase tracking-wider mt-0.5">
          / feed
        </div>
      </div>
      <div className="flex items-center gap-2">
        <div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
            <path d="M21 21l-4.35-4.35M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />
          </svg>
        </div>
        <Avatar initials="YO" color={accent} size={28} />
      </div>
    </div>

    {/* Tabs */}
    <div className="px-4 flex gap-1 mb-3">
      {["Feed", "Gym", "Challenges", "Insights"].map((t, i) =>
    <div
      key={t}
      className={`text-[11px] px-3 py-1.5 rounded-full font-medium ${
      i === 0 ? "text-[#0A0A0A]" : "text-white/50"}`
      }
      style={{
        background: i === 0 ? accent : "rgba(255,255,255,0.04)"
      }}>
      
          {t}
        </div>
    )}
    </div>

    {/* Feed scrolling content */}
    <div className="px-3 pb-6 space-y-2.5 overflow-hidden" style={{ height: 540 }}>
      <PRCard accent={accent} />
      <CheckinCard accent={accent} />
      <ChallengeCard accent={accent} />
      <AIInsightCard accent={accent} />
      <StreakCard accent={accent} />
      <LeaderboardCard accent={accent} />
    </div>

    {/* bottom nav */}
    <div className="absolute bottom-0 left-0 right-0 h-16 bg-[#0A0A0A]/95 backdrop-blur border-t border-white/[0.06] flex items-center justify-around px-6">
      {[
    ["home", true],
    ["users", false],
    ["plus", false],
    ["trophy", false],
    ["user", false]].
    map(([icon, active], i) =>
    <div key={i} className="flex flex-col items-center gap-1">
          <div
        className="w-6 h-6 rounded-md flex items-center justify-center"
        style={{ background: active ? accent : "transparent" }}>
        
            <div
          className="w-3.5 h-3.5 rounded-sm"
          style={{ background: active ? "#0A0A0A" : "rgba(255,255,255,0.4)" }} />
        
          </div>
        </div>
    )}
    </div>
  </PhoneFrame>;


// ============ Floating cards around phone ============
const FloatingCard = ({ children, className, style }) =>
<div
  className={`absolute hidden lg:block ${className}`}
  style={{
    animation: "float 6s ease-in-out infinite",
    ...style
  }}>
  
    {children}
  </div>;


const HeroMockup = ({ accent }) =>
<div className="relative w-full max-w-[640px] mx-auto" style={{ minHeight: 720 }}>
    {/* Glow */}
    <div
    className="absolute inset-0 blur-[100px] opacity-30 pointer-events-none"
    style={{
      background: `radial-gradient(circle at center, ${accent}, transparent 60%)`
    }} />
  

    {/* Phone center */}
    <div className="relative z-10 pt-4">
      <FeedMockup accent={accent} />
    </div>

    {/* Floating left card — Shoutout */}
    <FloatingCard
    className="left-0 top-32 w-[240px]"
    style={{ animationDelay: "0s" }}>
    
      <div className="rounded-2xl p-3.5 bg-[#141414] border border-white/[0.08] shadow-2xl">
        <div className="flex items-start gap-2">
          <div className="text-[18px]">👑</div>
          <div className="flex-1">
            <div className="text-[11px] text-white/50 font-mono uppercase tracking-wider">shoutout</div>
            <div className="text-[12px] text-white mt-1 leading-snug">
              <span className="font-semibold">Sara</span> celebrated your{" "}
              <span style={{ color: accent }} className="font-semibold">12-week streak</span>
            </div>
          </div>
        </div>
      </div>
    </FloatingCard>

    {/* Floating right card — Accountability */}
    <FloatingCard
    className="right-0 top-20 w-[260px]"
    style={{ animationDelay: "1.5s" }}>
    
      <div className="rounded-2xl p-3.5 bg-[#141414] border border-white/[0.08] shadow-2xl">
        <div className="flex items-center justify-between mb-2">
          <div className="text-[11px] text-white/50 font-mono uppercase tracking-wider">accountability group</div>
          <div className="w-2 h-2 rounded-full" style={{ background: accent }} />
        </div>
        <div className="text-[12px] text-white font-semibold mb-2">Morning Lifters</div>
        <div className="flex items-center gap-2">
          <AvatarStack
          size={22}
          people={[
          { initials: "A", color: "#FF8B5A" },
          { initials: "B", color: "#A3E635" },
          { initials: "C", color: "#60A5FA" },
          { initials: "D", color: "#F472B6" },
          { initials: "E", color: accent }]
          } />
        
          <span className="text-[10px] text-white/40 font-mono">5/6 checked in</span>
        </div>
      </div>
    </FloatingCard>

    {/* Floating right bottom — Comment */}
    <FloatingCard
    className="right-4 bottom-32 w-[240px]"
    style={{ animationDelay: "3s" }}>
    
      <div className="rounded-2xl p-3.5 bg-[#141414] border border-white/[0.08] shadow-2xl">
        <div className="flex items-center gap-2 mb-2">
          <Avatar initials="DK" color="#60A5FA" size={22} />
          <span className="text-[11px] text-white font-semibold">Deniz</span>
          <span className="text-[10px] text-white/40 font-mono">commented</span>
        </div>
        <div className="text-[12px] text-white/80 leading-snug">
          "405? Bro that's a clean rep. Catching you next month 👀"
        </div>
      </div>
    </FloatingCard>

    {/* Floating left bottom — Reaction burst */}
    <FloatingCard
    className="left-4 bottom-40 w-[200px]"
    style={{ animationDelay: "2s" }}>
    
      <div className="rounded-2xl p-3 bg-[#141414] border border-white/[0.08] shadow-2xl">
        <div className="text-[10px] text-white/50 font-mono uppercase tracking-wider mb-2">new reactions</div>
        <div className="flex items-center gap-1.5">
          {["🔥", "💪", "👑", "⚡"].map((e, i) =>
        <div
          key={i}
          className="w-7 h-7 rounded-full flex items-center justify-center text-[14px]"
          style={{ background: "rgba(255,255,255,0.05)" }}>
          
              {e}
            </div>
        )}
          <span className="text-[11px] text-white/60 font-mono ml-1">+24</span>
        </div>
      </div>
    </FloatingCard>
  </div>;


window.HeroMockup = HeroMockup;
window.FeedMockup = FeedMockup;
window.Avatar = Avatar;
window.AvatarStack = AvatarStack;
window.PRCard = PRCard;
window.ChallengeCard = ChallengeCard;
window.AIInsightCard = AIInsightCard;
window.LeaderboardCard = LeaderboardCard;
window.CheckinCard = CheckinCard;
window.StreakCard = StreakCard;