// Growers hub · national index of Black farmers, growers, fishers, and food makers.
// Same seed-to-claim engine as the Business hub, plus infrastructure flags and a
// demand desk: buyers post needs, operators route intros. Aggregation comes after the index.

const GROW_TAXONOMY = {
  'Produce':            ['Vegetables','Fruit & orchards','Greens','Herbs','Mushrooms'],
  'Livestock & poultry':['Beef','Pork','Poultry','Eggs','Goat & lamb'],
  'Fish & seafood':     ['Coastal','Inland / pond','Shellfish'],
  'Dairy':              ['Milk','Cheese','Butter'],
  'Grains & row crops': ['Corn','Soy','Rice','Wheat','Peas & beans'],
  'Value-added':        ['Honey','Preserves','Sauces','Baked goods','Beverages'],
  'Nursery & flowers':  ['Cut flowers','Seedlings','Landscaping'],
};

function growClassify(link, note){
  const s = (link+' '+note).toLowerCase();
  const cat =
    /cattle|beef|pork|hog|poultry|chicken|egg|goat|lamb|ranch/.test(s) ? 'Livestock & poultry' :
    /fish|shrimp|oyster|catfish|seafood/.test(s)                        ? 'Fish & seafood' :
    /dairy|milk|cheese|butter/.test(s)                                  ? 'Dairy' :
    /grain|corn|soy|rice|wheat|pea|bean|row crop/.test(s)               ? 'Grains & row crops' :
    /honey|jam|preserve|sauce|bak|syrup|juice|tea/.test(s)              ? 'Value-added' :
    /flower|nursery|seedling/.test(s)                                   ? 'Nursery & flowers' : 'Produce';
  let host = link.replace(/^https?:\/\//,'').replace(/^www\./,'').split(/[\/?#]/)[0];
  const name = (host.split('.')[0]||'New grower').replace(/[-_]/g,' ').replace(/\b\w/g, m=>m.toUpperCase());
  return { cat, name, host };
}

// Supply ladder · what a listed grower can become
const GROW_LADDER = [
  { k:'listed',   label:'Free listing',                rev:'$0' },
  { k:'claimed',  label:'Claimed · verified grower',   rev:'$0' },
  { k:'member',   label:'Network member',              rev:'$25/yr' },
  { k:'routed',   label:'Routed sales · intro fee',    rev:'5% brokered' },
  { k:'hub',      label:'Hub supplier · CSA + pantry', rev:'15-25% margin' },
  { k:'contract', label:'Contract supplier · wholesale', rev:'per contract' },
];
function growRung(g){ if(g.rung!==undefined) return g.rung; return g.status==='Claimed'?1:0; }

const INFRA_KEYS = [ ['cold','Cold storage'], ['truck','Delivery vehicle'], ['pack','Packing shed'], ['gap','GAP / food safety cert'] ];

function GrowersHub({setRoute}){
  const [items, setItems] = React.useState([]);
  const [tab, setTab]     = React.useState('All');
  const [sel, setSel]     = React.useState(null);
  const [seedLink, setSeedLink] = React.useState('');
  const [seedNote, setSeedNote] = React.useState('');
  const [seedEmail, setSeedEmail] = React.useState('');
  const [nextNum, setNextNum]   = React.useState(101);
  const [demands, setDemands]   = React.useState([]);

  const g = items.find(x=>x.id===sel) || items[0];
  const filt = tab==='All' ? items
    : tab==='Unclaimed' ? items.filter(x=>x.status==='Unclaimed'||x.status==='Enriching')
    : items.filter(x=>x.status===tab);

  function seed(){
    if(!seedLink.trim()) return;
    const id = 'GR-'+nextNum; setNextNum(nextNum+1);
    const link = seedLink.trim(), note = seedNote.trim(), email = seedEmail.trim();
    const ph = { id, name:link.replace(/^https?:\/\//,'').replace(/^www\./,'').split(/[\/?#]/)[0], cat:' · ', loc:' · ', status:'Enriching', tier:'Free', operator:null, email, website:link.replace(/^https?:\/\//,'').replace(/^www\./,''), source:'Seeded', score:0, acres:'', capacity:'', infra:{}, note: note || 'Seeded with link only.' };
    setItems(prev=>[ph, ...prev]); setSel(id); setSeedLink(''); setSeedNote(''); setSeedEmail('');
    setTimeout(()=>{
      const c = growClassify(link, note);
      setItems(prev=>prev.map(x=>x.id===id ? {...x, name:c.name, cat:c.cat, website:c.host, status:'Unclaimed', score:60+Math.floor(Math.random()*25)} : x));
    }, 1600);
  }
  function patch(id, p){ setItems(prev=>prev.map(x=>x.id===id ? {...x, ...p} : x)); }
  function sendInvite(id, op){ patch(id, {status:'Invited', operator:op}); }
  function markClaimed(id){ setItems(prev=>prev.map(x=>x.id===id ? {...x, status:'Claimed', rung:Math.max(1, x.rung||0)} : x)); }
  function setRungFn(id, rung){ patch(id, {rung, tier: rung>=4?'Hub supplier':rung>=2?'Member':'Free'}); }
  function toggleInfra(id, k){ setItems(prev=>prev.map(x=>x.id===id ? {...x, infra:{...x.infra, [k]:!x.infra[k]}} : x)); }

  function addDemand(d){ setDemands(prev=>[{...d, id:'D-'+(prev.length+101), status:'Open'}, ...prev]); }
  function routeDemand(id){ setDemands(prev=>prev.map(d=>d.id===id ? {...d, status:'Routed'} : d)); }

  const nClaimed = items.filter(x=>x.status==='Claimed').length;
  const gapCold = items.filter(x=>x.status!=='Enriching' && !x.infra.cold).length;

  return (
    <AdminShell route="growers" setRoute={setRoute} title="Growers network" breadcrumb="NETWORK · FOOD & LAND"
      actions={<>
        <button className="btn gh">Upload CSV</button>
        <a className="btn k" href="Growers Network.html" target="_blank" style={{textDecoration:'none'}}>Index preview ↗</a>
      </>}>

      <Card title="Seed a grower" meta="a link + an email · outreach starts the moment you have an address"
        actions={<button className="btn g s" onClick={seed} style={{opacity:seedLink.trim()?1:.4}}>Seed →</button>} style={{marginBottom:18}}>
        <div className="cols3" style={{display:'grid',gridTemplateColumns:'1.1fr 1fr 1.3fr auto',gap:10,alignItems:'center'}}>
          <input value={seedLink} onChange={e=>setSeedLink(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')seed();}}
            placeholder="greenacresfarm.com · instagram.com/handle" style={{border:'1px solid var(--rule-line)',padding:'10px 12px',background:'var(--bg)',outline:'none',fontSize:13,fontFamily:'var(--mono)',letterSpacing:'.02em',minWidth:0}}/>
          <input value={seedEmail} onChange={e=>setSeedEmail(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')seed();}}
            placeholder="owner@farm.com (optional)" style={{border:'1px solid var(--rule-line)',padding:'10px 12px',background:'var(--bg)',outline:'none',fontSize:13,fontFamily:'var(--mono)',letterSpacing:'.02em',minWidth:0}}/>
          <input value={seedNote} onChange={e=>setSeedNote(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')seed();}}
            placeholder="note (optional) · e.g. third-generation vegetable farm, 40 acres" style={{border:'1px solid var(--rule-line)',padding:'10px 12px',background:'var(--bg)',outline:'none',fontSize:13,fontFamily:'var(--sans)',minWidth:0}}/>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}><Pill k="info">CATEGORY · AUTO</Pill></div>
        </div>
        <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.1em',marginTop:8}}>ENGINE PULLS NAME · CATEGORY · LOCATION FROM THE LINK · WITH AN EMAIL, THE ONBOARDING INVITE IS READY IN ONE CLICK</div>
      </Card>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={items.length} l="Growers indexed" d={null}/>
        <Stat n={items.length?`${Math.round((nClaimed/items.length)*100)}%`:'0%'} l="Claimed" d={`${nClaimed} of ${items.length}`}/>
        <Stat n={demands.length} l="Buyer requests" d={demands.filter(d=>d.status==='Open').length+' open'}/>
        <Stat n={items.length?gapCold:0} l="Cold-storage gap" d="growers without cold chain"/>
      </div>

      <div className="lay2" style={{display:'grid',gridTemplateColumns:'1.5fr 1.1fr',gap:18,alignItems:'flex-start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:18,minWidth:0}}>
          <Card title="Index" meta={`${filt.length} growers`}
            actions={<Seg value={tab} onChange={setTab} options={['All','Unclaimed','Invited','Claimed']}/>}>
            <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
              <thead><tr><th>GROWER</th><th>CATEGORY</th><th>LOCATION</th><th>STATUS</th><th>INFRA</th><th className="r">FIT</th></tr></thead>
              <tbody>
                {!filt.length && <tr><td colSpan="6"><span className="mono" style={{fontSize:9.5,letterSpacing:'.1em',color:'var(--mute)'}}>NO GROWERS YET · SEED THE FIRST ONE ABOVE · CSV UPLOAD TAKES YOUR EXISTING LISTS</span></td></tr>}
                {filt.map(x=>(
                  <tr key={x.id} className={x.id===sel?'sel':''} onClick={()=>setSel(x.id)}>
                    <td><div style={{fontSize:12.5,fontWeight:600}}>{x.name}</div><div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.04em'}}>{x.website.toUpperCase()}</div></td>
                    <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.cat}</td>
                    <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{x.loc}</td>
                    <td><Pill k={x.status==='Claimed'?'live':x.status==='Invited'?'warn':x.status==='Enriching'?'info':'muted'}>{x.status==='Enriching'?'Sorting…':x.status}</Pill></td>
                    <td className="mono" style={{fontSize:10,letterSpacing:'.06em',color: INFRA_KEYS.every(([k])=>x.infra[k]) ? 'var(--green)' : 'var(--gold-2)'}}>{x.status==='Enriching'?' · ':INFRA_KEYS.filter(([k])=>x.infra[k]).length+'/4'}</td>
                    <td className="r">{x.status==='Enriching'?<span className="mono" style={{fontSize:10,color:'var(--mute)'}}> · </span>:<Score n={x.score}/>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>

          <DemandDesk demands={demands} items={items} onAdd={addDemand} onRoute={routeDemand}/>
        </div>

        {g ? <GrowerDetail g={g} onInvite={sendInvite} onClaim={markClaimed} onRung={setRungFn} onPatch={patch} onInfra={toggleInfra}/>
          : <Card title="Grower detail" meta="none selected"><div className="mono" style={{padding:'14px 0',fontSize:9.5,letterSpacing:'.1em',color:'var(--mute)'}}>SEED A GROWER · THE ENGINE SORTS IT AND THE DETAIL OPENS HERE</div></Card>}
      </div>
    </AdminShell>
  );
}

// ---------- demand desk · the affiliate-link stage of food: broker before you can fulfill ----------
function DemandDesk({demands, items, onAdd, onRoute}){
  const [buyer, setBuyer] = React.useState('');
  const [need, setNeed]   = React.useState('');
  const [vol, setVol]     = React.useState('');
  const [loc, setLoc]     = React.useState('');
  const ready = buyer.trim() && need.trim();
  function submit(){ if(!ready) return; onAdd({buyer:buyer.trim(), need:need.trim(), vol:vol.trim()||' · ', loc:loc.trim()||' · '}); setBuyer('');setNeed('');setVol('');setLoc(''); }
  function matches(d){
    const s = d.need.toLowerCase();
    return items.filter(x=>x.status!=='Enriching' && (x.cat.toLowerCase().split(/[^a-z]+/).some(w=>w && s.includes(w)) || x.note.toLowerCase().split(/[^a-z]+/).some(w=>w.length>3 && s.includes(w)))).length;
  }
  return (
    <Card title="Demand desk" meta="buyers post needs · we route the intro · every request is aggregation data">
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr .7fr .8fr auto',gap:8,alignItems:'center',marginBottom:12}}>
        <input value={buyer} onChange={e=>setBuyer(e.target.value)} placeholder="buyer · restaurant, church, HBCU dining" style={growInp}/>
        <input value={need} onChange={e=>setNeed(e.target.value)} placeholder="need · e.g. collard greens, weekly" style={growInp}/>
        <input value={vol} onChange={e=>setVol(e.target.value)} placeholder="volume" style={growInp}/>
        <input value={loc} onChange={e=>setLoc(e.target.value)} placeholder="region" style={growInp}/>
        <button className="btn g s" onClick={submit} style={{opacity:ready?1:.4}}>Log →</button>
      </div>
      <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
        <thead><tr><th>BUYER</th><th>NEED</th><th>VOLUME</th><th>REGION</th><th className="r">MATCHES</th><th>STATUS</th></tr></thead>
        <tbody>
          {!demands.length && <tr><td colSpan="6"><span className="mono" style={{fontSize:9.5,letterSpacing:'.1em',color:'var(--mute)'}}>NO REQUESTS YET · LOG THE FIRST BUYER NEED · WHEN A CROP + REGION KEEPS REPEATING, THAT IS WHERE THE FIRST HUB GOES</span></td></tr>}
          {demands.map(d=>(
            <tr key={d.id}>
              <td style={{fontSize:12.5,fontWeight:600}}>{d.buyer}</td>
              <td style={{fontSize:12}}>{d.need}</td>
              <td className="mono" style={{fontSize:10.5}}>{d.vol}</td>
              <td className="mono" style={{fontSize:10.5}}>{d.loc}</td>
              <td className="r num" style={{color:matches(d)?'var(--green)':'var(--mute)',fontWeight:700}}>{matches(d)}</td>
              <td>{d.status==='Routed' ? <Pill k="live">Routed</Pill> : <button className="btn gh s" onClick={()=>onRoute(d.id)}>Route intro →</button>}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  );
}

// ---------- detail ----------
function GrowerDetail({g, onInvite, onClaim, onRung, onPatch, onInfra}){
  return (
    <div style={{display:'flex',flexDirection:'column',gap:18,minWidth:0}}>
      <Card title="Supply ladder" meta={GROW_LADDER[growRung(g)].label.toLowerCase()}>
        <div style={{display:'flex',flexDirection:'column'}}>
          {GROW_LADDER.map((r,i)=>{
            const cur = growRung(g), done = i<=cur, next = i===cur+1;
            return (
              <div key={r.k} onClick={()=>onRung(g.id, i)}
                style={{display:'grid',gridTemplateColumns:'auto 1fr auto',gap:10,padding:'6px 0',alignItems:'center',cursor:'default',borderBottom:i===GROW_LADDER.length-1?'none':'1px solid var(--rule-line)',opacity:done?1:next?.85:.5}}>
                <span style={{width:16,height:16,display:'flex',alignItems:'center',justifyContent:'center',fontSize:9.5,fontWeight:700,background:done?'var(--green)':next?'var(--bg)':'var(--canvas)',color:done?'var(--ivory)':'var(--mute)',border:'1px solid '+(done?'var(--green)':next?'var(--gold-2)':'var(--rule-line)')}}>{done?'✓':i+1}</span>
                <span style={{fontSize:12,fontWeight:done||next?600:400}}>{r.label}{next && <span className="mono" style={{fontSize:8.5,letterSpacing:'.1em',color:'var(--gold-2)',marginLeft:8}}>NEXT</span>}</span>
                <span className="mono" style={{fontSize:10,letterSpacing:'.04em',color:done?'var(--green)':'var(--mute)'}}>{r.rev}</span>
              </div>
            );
          })}
        </div>
        <div className="mono" style={{fontSize:9,letterSpacing:'.08em',color:'var(--mute)',marginTop:8}}>CLICK A RUNG TO MARK PROGRESS · ROUTED SALES START THE COMMERCE · HUB + CONTRACT NEED AGGREGATION LIVE</div>
      </Card>

      <Card title={g.name} meta={`${g.id} · ${g.source.toLowerCase()}`}
        actions={g.status==='Claimed' ? <button className="btn gh s">View listing ↗</button>
          : g.status==='Invited' ? <button className="btn gr s" onClick={()=>onClaim(g.id)}>Mark claimed ✓</button> : null}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px 10px',marginBottom:14}}>
          <GrowKV l="Location" v={g.loc} onChange={v=>onPatch(g.id,{loc:v})} ph="City, ST"/>
          <div style={{padding:'4px 0'}}><div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.14em',textTransform:'uppercase'}}>Status</div><div style={{fontSize:12,marginTop:2,fontWeight:500}}>{g.status}</div></div>
          <GrowKV l="Acreage / scale" v={g.acres} onChange={v=>onPatch(g.id,{acres:v})} ph="e.g. 40 acres · 2 boats"/>
          <GrowKV l="Capacity" v={g.capacity} onChange={v=>onPatch(g.id,{capacity:v})} ph="e.g. 300 lb/wk in season"/>
        </div>

        {g.status!=='Enriching' && <>
          <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap',border:'1px solid var(--rule-line)',background:'var(--canvas)',padding:'10px 12px'}}>
            <span className="eyebrow">CATEGORY</span>
            <select value={GROW_TAXONOMY[g.cat]?g.cat:''} onChange={e=>onPatch(g.id,{cat:e.target.value})}
              style={{padding:'5px 8px',border:'1px solid var(--rule-line)',background:'var(--bg)',fontSize:12,fontFamily:'var(--sans)',outline:'none'}}>
              {!GROW_TAXONOMY[g.cat] && <option value=""> · </option>}
              {Object.keys(GROW_TAXONOMY).map(c=><option key={c} value={c}>{c}</option>)}
            </select>
          </div>

          <div className="eyebrow" style={{margin:'14px 0 6px'}}>INFRASTRUCTURE · THE AGGREGATION MAP</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:5}}>
            {INFRA_KEYS.map(([k,label])=>{
              const on = !!g.infra[k];
              return <button key={k} onClick={()=>onInfra(g.id,k)}
                style={{padding:'3px 9px',fontFamily:'var(--mono)',fontSize:9.5,letterSpacing:'.08em',textTransform:'uppercase',cursor:'default',border:'1px solid '+(on?'var(--green)':'var(--rule-line)'),background:on?'var(--green)':'var(--bg)',color:on?'var(--ivory)':'var(--ink-2)'}}>{on?'✓ ':'✗ '}{label}</button>;
            })}
          </div>
          <div className="mono" style={{fontSize:9,letterSpacing:'.08em',color:'var(--mute)',marginTop:6}}>WHAT A GROWER LACKS IS WHAT THE HUB PROVIDES · GAPS HERE DECIDE WHERE COLD CHAIN GOES FIRST</div>
        </>}

        <div className="eyebrow" style={{marginTop:14}}>SEED NOTE</div>
        <div style={{fontSize:13,marginTop:6,padding:'10px 12px',background:'var(--canvas)',border:'1px solid var(--rule-line)',lineHeight:1.45}}>{g.note}</div>
        {g.status==='Enriching' && <div className="mono" style={{marginTop:14,fontSize:10,letterSpacing:'.14em',color:'var(--mute)',textTransform:'uppercase'}}>Engine is sorting + categorizing from the link…</div>}
      </Card>

      {g.status==='Unclaimed' && <GrowInvite g={g} onInvite={onInvite}/>}
      {g.status==='Invited' && <Card title="Claim invite · sent" meta="sequence day 2" actions={<button className="btn gh s">Resend</button>}>
        <div className="mono" style={{fontSize:10,letterSpacing:'.06em',color:'var(--mute)',lineHeight:2}}>DAY 0 SEEDED ✓ · DAY 1 SORTED ✓ · DAY 2 INVITED ✓ · DAY 7 CLAIM + INFRA SURVEY · DAY 30 FIRST ROUTED INTRO</div>
      </Card>}
      {g.status==='Claimed' && <Card title="Claimed · next move" meta={`grower · ${(g.operator||{}).name||' · '}`}>
        <div style={{fontSize:12.5,lineHeight:1.55,color:'var(--ink-2)'}}>Infrastructure survey complete? Flag the gaps above, then watch the demand desk: when this grower matches an open buyer request, route the intro and mark the routed-sales rung.</div>
      </Card>}
    </div>
  );
}

const growInp = {border:'1px solid var(--rule-line)',padding:'8px 10px',background:'var(--bg)',outline:'none',fontSize:12,fontFamily:'var(--sans)',minWidth:0,width:'100%'};

function GrowKV({l,v,onChange,ph}){
  return <div style={{padding:'4px 0'}}>
    <div className="mono" style={{fontSize:9,color:'var(--mute)',letterSpacing:'.14em',textTransform:'uppercase'}}>{l}</div>
    <input value={v===' · '?'':v} onChange={e=>onChange(e.target.value)} placeholder={ph} style={{border:'none',borderBottom:'1px dashed var(--rule-line)',background:'transparent',outline:'none',fontSize:12,fontWeight:500,marginTop:2,width:'100%',padding:'2px 0',fontFamily:'var(--sans)'}}/>
  </div>;
}

function GrowInvite({g, onInvite}){
  const [name, setName] = React.useState('');
  const [contact, setContact] = React.useState('');
  React.useEffect(()=>{ setName(''); setContact(g.email||''); }, [g.id]);
  const ready = name.trim() && contact.trim();
  const isEmail = /\S+@\S+\.\S+/.test(contact);
  function outreachHref(){
    const farm = g.name||'your farm';
    const sub = encodeURIComponent(farm+' · your listing in the TUEPAC Growers Index');
    const body = encodeURIComponent('Hi'+(name.trim()?' '+name.trim():'')+',\n\nWe came across '+farm+' and added it to the TUEPAC Growers Index, a national directory of Black-owned farms, ranches, and food makers that buyers use to purchase direct.\n\nYour listing is live. Claiming it takes about 3 minutes and turns on order routing: members buy, the order comes to your phone by text, you confirm and get paid per order. Free to join, no listing fee.\n\nClaim your listing: https://tuepac.com/Grower%20Signup.html\n\nQuestions, just reply to this email.\n\nThe United Economic Professional Advancement Coalition\ngrowers@tuepac.com');
    return 'mailto:'+contact.trim()+'?subject='+sub+'&body='+body;
  }
  return (
    <Card title="Invite the grower" meta="starts the claim + infrastructure survey"
      actions={<div style={{display:'flex',gap:8}}>
        {isEmail && <a className="btn k s" href={outreachHref()} onClick={()=>ready && onInvite(g.id,{name:name.trim(),contact:contact.trim()})} style={{textDecoration:'none',opacity:ready?1:.4}}>Open onboarding email ✉</a>}
        <button className="btn g s" onClick={()=>ready && onInvite(g.id,{name:name.trim(),contact:contact.trim()})} style={{opacity:ready?1:.4}}>Send claim invite →</button>
      </div>}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px 12px'}}>
        <div><div className="eyebrow" style={{marginBottom:5}}>NAME</div><input value={name} onChange={e=>setName(e.target.value)} placeholder="grower / operator" style={growInp}/></div>
        <div><div className="eyebrow" style={{marginBottom:5}}>EMAIL OR NUMBER</div><input value={contact} onChange={e=>setContact(e.target.value)} placeholder="owner@farm.com · (704) 555-0100" style={growInp}/></div>
      </div>
      <div className="mono" style={{fontSize:9.5,color:'var(--mute)',letterSpacing:'.1em',marginTop:10}}>TEMPLATE T-GROW-01 · CLAIM LINK + SIGNUP PAGE + 5-MINUTE SURVEY · EMAIL PREFILLS FROM THE SEED</div>
    </Card>
  );
}

window.GrowersHub = GrowersHub;