/* hermon-mockups.jsx — realistic product UI mockups
   Uses globals: Icon, Avatar, CountUp, PEOPLE (assigned to window before render) */

/* ---------------- Pipeline board ---------------- */
const PIPE = [
  { key:"lead", name:"Lead", st:"st--lead", count:18, deals:[
    { nm:"Tyler Morgan", amt:"$12k", tag:["new","New"], src:"Instagram", hue:210 },
    { nm:"Renata Vance", amt:"$8k",  tag:["warm","Warm"], src:"Meta Ads", hue:330 },
  ]},
  { key:"appt", name:"Appointment", st:"st--appt", count:11, deals:[
    { nm:"Chris Dunbar", amt:"$15k", tag:["hot","Hot"], src:"Calendly", hue:262 },
    { nm:"Lena Brooks",  amt:"$9k",  tag:["warm","Warm"], src:"Calendly", hue:150 },
  ]},
  { key:"contract", name:"Contract", st:"st--contract", count:6, deals:[
    { nm:"Bianca Rossi", amt:"$24k", tag:["hot","Sent"], src:"eSign", hue:24 },
    { nm:"Owen Pierce",  amt:"$16k", tag:["warm","Viewed"], src:"eSign", hue:200 },
  ]},
  { key:"pay", name:"Payment", st:"st--pay", count:4, deals:[
    { nm:"Hannah Lowe",  amt:"$30k", tag:["warm","Invoice"], src:"Stripe", hue:288 },
    { nm:"Diego Cruz",   amt:"$21k", tag:["warm","Plan 1/3"], src:"Mollie", hue:120 },
  ]},
  { key:"closed", name:"Closed", st:"st--closed", count:9, deals:[
    { nm:"Amara Khan",   amt:"$28k", tag:["won","Won"], src:"Stripe", hue:300 },
    { nm:"Jude Fischer", amt:"$19k", tag:["won","Won"], src:"Whop", hue:175 },
  ]},
];

function PipelineBoard({ motion = true, compact = false }) {
  const flat = [];
  PIPE.forEach((c,ci)=> c.deals.forEach((d,di)=> flat.push(`${ci}-${di}`)));
  const [flowId, setFlowId] = React.useState(null);
  React.useEffect(()=>{
    if(!motion) return;
    let i = 0;
    const t = setInterval(()=>{ setFlowId(flat[i % flat.length]); i++; }, 1500);
    return ()=> clearInterval(t);
  }, [motion]);

  return (
    <div className="pipe">
      {PIPE.map((col,ci)=>(
        <div className="pcol" key={col.key}>
          <div className="pcol__h">
            <span className={"st "+col.st}></span>
            <span className="nm">{col.name}</span>
            <span className="ct">{col.count}</span>
          </div>
          {col.deals.map((d,di)=>(
            <div className={"deal"+(flowId===`${ci}-${di}`?" flow":"")} key={di}>
              <div className="deal__top">
                <Avatar className="deal__av" name={d.nm} hue={d.hue} />
                <span className="deal__nm">{d.nm}</span>
                <span className="deal__amt">{d.amt}</span>
              </div>
              <div className="deal__meta">
                <span className={"deal__tag tag--"+d.tag[0]}>{d.tag[1]}</span>
                <span className="deal__src">{d.src}</span>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* full pipeline app window (hero / demo) */
function PipelineApp({ motion = true }) {
  return (
    <div className="app">
      <div className="app__bar">
        <div className="app__dots"><i></i><i></i><i></i></div>
        <div className="app__url"><Icon.lock className="lock"/> app.hermon.io/pipeline</div>
        <span className="app__bartag">Live</span>
      </div>
      <div className="app__shell">
        <nav className="app__side">
          <div className="si on"><Icon.layers/></div>
          <div className="si"><Icon.bars/></div>
          <div className="si"><Icon.trophy/></div>
          <div className="si"><Icon.bell/></div>
          <div className="si"><Icon.dollar/></div>
          <div className="sp"></div>
          <Avatar className="av" name="Jordan Reyes" hue={262}/>
        </nav>
        <div className="app__main">
          <div className="app__head">
            <div>
              <div className="app__title">Sales pipeline</div>
              <div className="app__sub">Q3 · Closer team · <b style={{color:'var(--green)'}}>synced 2s ago</b></div>
            </div>
            <div className="app__controls">
              <div className="app__seg"><span>Board</span><span className="on">Board</span></div>
              <span className="app__addbtn"><Icon.plus/> New deal</span>
            </div>
          </div>
          <PipelineBoard motion={motion}/>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Mini dashboard ---------------- */
function MiniDash({ motion = true }) {
  const bars = [38, 52, 44, 67, 59, 78, 92, 84];
  const labels = ["W1","W2","W3","W4","W5","W6","W7","W8"];
  return (
    <div className="dash">
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        <div className="kpis">
          <div className="kpi">
            <div className="kpi__l">Revenue · MTD</div>
            <div className="kpi__v">$<CountUp to={842} dur={1400}/>k</div>
            <div className="kpi__d up"><Icon.up width={13} height={13}/> 23.4%</div>
          </div>
          <div className="kpi">
            <div className="kpi__l">Deals closed</div>
            <div className="kpi__v"><CountUp to={64} dur={1200}/></div>
            <div className="kpi__d up"><Icon.up width={13} height={13}/> 11 vs LW</div>
          </div>
        </div>
        <div className="panel">
          <div className="panel__t">Revenue closed <span className="mut">Last 8 weeks</span></div>
          <div className="chart">
            {bars.map((b,i)=>(
              <div key={i} className={"bar"+(i>=6?" acc":"")} style={{height: b+"%"}}>
                <span className="bar__x">{labels[i]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        <div className="panel" style={{textAlign:'center'}}>
          <div className="panel__t" style={{justifyContent:'center'}}>Close rate</div>
          <div className="donut" style={{background:`conic-gradient(var(--purple) 68%, var(--surface-3) 0)`}}>
            <div className="donut__c"><div><b><CountUp to={68} dur={1300}/>%</b><span>of qualified calls</span></div></div>
          </div>
        </div>
        <div className="panel">
          <div className="panel__t">Show rate <span className="mut" style={{color:'var(--green)'}}>+6.2%</span></div>
          <div style={{display:'flex', alignItems:'baseline', gap:8}}>
            <div style={{fontSize:'1.5rem', fontWeight:800, letterSpacing:'-.03em'}}><CountUp to={91} dur={1100}/>%</div>
            <div style={{flex:1, height:7, background:'var(--surface-3)', borderRadius:99, overflow:'hidden'}}>
              <i className="anim-x" style={{display:'block', height:'100%', width:'91%', background:'linear-gradient(90deg,var(--green),#34c98b)', borderRadius:99}}></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Leaderboard ---------------- */
const LB_DATA = [
  { name:"Jordan Reyes", role:"Senior Closer", amt:"$312k", pct:100, hue:262, badge:"🏆" },
  { name:"Mia Castellano", role:"Closer", amt:"$268k", pct:86, hue:330, badge:"🔥" },
  { name:"Devin Wright", role:"Closer", amt:"$241k", pct:77, hue:155, badge:"" },
  { name:"Priya Anand", role:"Closer", amt:"$205k", pct:66, hue:28, badge:"" },
  { name:"Marcus Bell", role:"Closer", amt:"$184k", pct:59, hue:205, badge:"" },
];
function Leaderboard({ motion = true, rows = 5 }) {
  return (
    <div className="lb">
      {LB_DATA.slice(0,rows).map((p,i)=>(
        <div className={"lbr"+(i===0?" top":"")} key={i}>
          <div className="lbr__rank">{i+1}</div>
          <Avatar className="lbr__av" name={p.name} hue={p.hue}/>
          <div style={{minWidth:0}}>
            <div className="lbr__nm">{p.name} {p.badge && <span className="lbr__badge">{p.badge}</span>}</div>
            <div className="lbr__role">{p.role}</div>
          </div>
          <div className="lbr__bar"><i className="anim-x" style={{width: p.pct+"%"}}></i></div>
          <div className="lbr__amt">{p.amt}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------------- Reminders (purple card → white text) ---------------- */
function Reminders() {
  const data = [
    { t:"Missing outcome: Caroline West", s:"Strategy Call · rescheduled", time:"Due now", due:true, ic:"alert" },
    { t:"Awaiting signature: Marco Diaz", s:"Contract sent via Calendly", time:"in 2h", ic:"contract" },
    { t:"Payment at risk: Gavin Boyd", s:"Plan 2 of 3 · Mollie", time:"Today", ic:"card" },
  ];
  return (
    <div className="rem">
      {data.map((r,i)=>{ const Ic = Icon[r.ic];
        return (
          <div className={"remr"+(r.due?" due":"")} key={i}>
            <div className="remr__ic"><Ic/></div>
            <div style={{minWidth:0}}>
              <div className="remr__t">{r.t}</div>
              <div className="remr__s">{r.s}</div>
            </div>
            <div className="remr__time">{r.time}</div>
          </div>
        );})}
    </div>
  );
}

/* ---------------- Commission widget ---------------- */
function Commissions() {
  const data = [
    { name:"Jordan Reyes", s:"14 deals · 12% tier", amt:"$37.4k", chg:"+$4.1k", rate:"12%", hue:262 },
    { name:"Mia Castellano", s:"11 deals · 10% tier", amt:"$26.8k", chg:"+$2.6k", rate:"10%", hue:330 },
    { name:"Devin Wright", s:"9 deals · 10% tier", amt:"$24.1k", chg:"+$3.0k", rate:"10%", hue:155 },
  ];
  return (
    <div>
      {data.map((c,i)=>(
        <div className="commrow" key={i}>
          <Avatar className="commrow__av" name={c.name} hue={c.hue}/>
          <div style={{minWidth:0}}>
            <div className="commrow__nm">{c.name}</div>
            <div className="commrow__s">{c.s}</div>
          </div>
          <span className="commrow__pill">{c.rate}</span>
          <div className="commrow__amt"><b>{c.amt}</b><span>{c.chg}</span></div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PipelineBoard, PipelineApp, MiniDash, Leaderboard, Reminders, Commissions });