script.js

const state = {
  screen: 'landing',
  params: {},
  currentRole: null,
  farmerProfile: null,
  customerProfile: null,
  cart: [],
  farmers: [
    {id:'f1', name:'Ramesh Yadav', village:'Barwani', district:'Madhya Pradesh', years:12, rating:4.7, deals:63, avatar:'👨\u200d🌾', bio:'Third-generation farmer growing tomatoes on 3.5 acres using natural pest control passed down from my father.'},
    {id:'f2', name:'Sunita Devi', village:'Nashik', district:'Maharashtra', years:8, rating:4.9, deals:41, avatar:'👩\u200d🌾', bio:'I switched to organic onion farming five years ago — better soil, better sleep, and buyers who actually know my name.'},
    {id:'f3', name:'Arjun Patel', village:'Anand', district:'Gujarat', years:15, rating:4.6, deals:97, avatar:'👨\u200d🌾', bio:'We grow wheat the way my grandfather did — rain-fed, traditional seed, no shortcuts.'}
  ],
  products: [
    {id:'p1', farmerId:'f1', crop:'Tomato', emoji:'🍅', quantity:180, unit:'kg', price:34, harvestDate:'2026-08-18', practices:['Natural Farming','No Pesticides'], story:'Picked ripe at dawn so they reach you within 24 hours of harvest.'},
    {id:'p2', farmerId:'f2', crop:'Onion', emoji:'🧅', quantity:420, unit:'kg', price:26, harvestDate:'2026-08-10', practices:['Organic','Traditional Seeds'], story:'Sun-cured for a week the traditional way — no chemical drying, better shelf life.'},
    {id:'p3', farmerId:'f3', crop:'Wheat', emoji:'🌾', quantity:900, unit:'kg', price:24, harvestDate:'2026-08-05', practices:['Rain-fed','Traditional Seeds'], story:'Stone-ground quality wheat from rain-fed fields — no borewell, no shortcuts.'},
    {id:'p4', farmerId:'f2', crop:'Mango (Kesar)', emoji:'🥭', quantity:75, unit:'kg', price:110, harvestDate:'2026-08-20', practices:['Organic'], story:'Tree-ripened Kesar mangoes, hand-picked in small batches to protect the skin.'}
  ],
  orders: []
};
const STATUSES = ['Confirmed','Packed','Out for Delivery','Delivered'];

function inr(n){ return '₹' + Number(n).toLocaleString('en-IN'); }
function farmerOf(id){ return state.farmers.find(f=>f.id===id); }
function productOf(id){ return state.products.find(p=>p.id===id); }
function genTrace(){ return 'KS-' + Math.random().toString(36).slice(2,6).toUpperCase() + '-' + Math.random().toString(36).slice(2,6).toUpperCase(); }
function toast(msg){
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(window._toastTimer);
  window._toastTimer = setTimeout(()=>t.classList.remove('show'), 2400);
}
function navigate(screen, params={}){
  state.screen = screen;
  state.params = params;
  window.scrollTo({top:0, behavior:'smooth'});
  render();
}
function fairSplit(subtotal){
  const platformFee = Math.round(subtotal*0.08);
  const farmerReceives = subtotal - platformFee;
  const mandiEstimate = Math.round(subtotal*0.62);
  return {platformFee, farmerReceives, mandiEstimate};
}

function renderHeader(){
  const cartCount = state.cart.reduce((s,c)=>s+c.qty,0);
  let roleToggle = '';
  if(state.farmerProfile || state.customerProfile){
    roleToggle = `<div class="role-pill">
      ${state.farmerProfile ? `<button class="${state.currentRole==='farmer'?'active':''}" onclick="switchRole('farmer')">👨\u200d🌾 Farmer</button>` : ''}
      ${state.customerProfile ? `<button class="${state.currentRole==='customer'?'active':''}" onclick="switchRole('customer')">🧺 Customer</button>` : ''}
    </div>`;
  }
  let cartBtn = '';
  if(state.currentRole==='customer'){
    cartBtn = `<button class="cart-btn" onclick="navigate('cart')">🛒 Cart ${cartCount>0?`<span class="cart-badge">${cartCount}</span>`:''}</button>`;
  }
  document.getElementById('headRight').innerHTML = roleToggle + cartBtn;
}
function switchRole(role){
  state.currentRole = role;
  navigate(role==='farmer' ? 'farmerDashboard' : 'marketplace');
}

function renderLanding(){
  return `
  <section class="hero">
    <div class="wrap hero-inner">
      <span class="eyebrow">Farm to Fork, No Middlemen</span>
      <h1>Sell direct. <span>Earn fair.</span><br>Know your farmer.</h1>
      <p class="sub">KisanSetu connects farmers straight to the people who eat what they grow — transparent pricing, real traceability, and a fair cut for the person who actually grew your food.</p>
      <div class="hero-cta">
        <button class="btn btn-primary" onclick="navigate('farmerOnboard')">👨‍🌾 I'm a Farmer</button>
        <button class="btn btn-dark" onclick="navigate('customerOnboard')">🧺 I'm a Customer</button>
      </div>
      <div class="hero-tagline">"Kheti se Bazaar Tak, Seedha aur Samajhdaar" — from field to market, straight and smart.</div>
    </div>
  </section>

  <section class="route wrap">
    <h2>How it works</h2>
    <p class="route-sub">One straight line from soil to your kitchen — every stop tracked, nothing hidden.</p>
    <div class="route-path">
      <div class="stop"><div class="stop-dot">👨‍🌾</div><h4>Farmer registers</h4><p>Simple sign-up with farm &amp; village details</p></div>
      <div class="stop"><div class="stop-dot">📦</div><h4>Lists produce</h4><p>Crop, quantity, harvest date &amp; fair price</p></div>
      <div class="stop"><div class="stop-dot">🔍</div><h4>Customer discovers</h4><p>Browses by crop, practice &amp; farmer story</p></div>
      <div class="stop"><div class="stop-dot">🧾</div><h4>Orders</h4><p>Transparent price split shown before checkout</p></div>
      <div class="stop"><div class="stop-dot">🚚</div><h4>Farmer fulfils</h4><p>Packed and shipped straight from the farm</p></div>
      <div class="stop"><div class="stop-dot">🏠</div><h4>Customer receives</h4><p>Fresh produce, full traceability included</p></div>
    </div>
  </section>

  <section class="impact">
    <div class="wrap impact-grid">
      <div class="impact-col">
        <h3>🌾 For Farmers</h3>
        <ul class="impact-list">
          <li><span class="ic">💰</span><span><strong>Better earning potential</strong> — keep ~92% of the sale price instead of ~60% through traditional mandi chains.</span></li>
          <li><span class="ic">📈</span><span><strong>Direct market access</strong> — list produce in minutes, reach customers beyond your local mandi.</span></li>
          <li><span class="ic">👥</span><span><strong>Direct customer relationship</strong> — build a reputation and repeat buyers through your own farm profile.</span></li>
        </ul>
      </div>
      <div class="impact-col">
        <h3>🧺 For Customers</h3>
        <ul class="impact-list">
          <li><span class="ic">🌱</span><span><strong>Fresh products</strong> — harvested days, not weeks, before it reaches you.</span></li>
          <li><span class="ic">🔍</span><span><strong>Transparent source</strong> — every order carries a traceable farm passport and trace ID.</span></li>
          <li><span class="ic">🤝</span><span><strong>Know your farmer</strong> — see exactly who grew your food and how.</span></li>
          <li><span class="ic">💵</span><span><strong>Fair pricing</strong> — see the exact split between what you pay and what the farmer earns.</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="footer-cta">
    <h2>Ready to cut out the middlemen?</h2>
    <div class="hero-cta" style="margin-top:22px;">
      <button class="btn btn-primary" onclick="navigate('farmerOnboard')">Start Selling</button>
      <button class="btn btn-outline" onclick="navigate('customerOnboard')">Start Buying</button>
    </div>
  </section>
  <footer>KisanSetu — SIH Prototype · Market data, prices and reviews shown are simulated for demonstration.</footer>
  `;
}

function renderFarmerOnboard(){
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('landing')">← Back</button>
    <h2>👨‍🌾 Register as a Farmer</h2>
    <p>Takes under a minute. Basic details only — verification is simplified for this prototype.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="card form-card">
      <div class="field"><label>Full name</label><input type="text" id="fName" placeholder="e.g. Ramesh Yadav" value="Ramesh Yadav"></div>
      <div class="row-2">
        <div class="field"><label>Village</label><input type="text" id="fVillage" placeholder="e.g. Barwani" value="Barwani"></div>
        <div class="field"><label>District / State</label><input type="text" id="fDistrict" placeholder="e.g. Madhya Pradesh" value="Madhya Pradesh"></div>
      </div>
      <div class="row-2">
        <div class="field"><label>Mobile number</label><input type="text" id="fPhone" placeholder="10-digit number" value="98765 43210"></div>
        <div class="field"><label>Farm size (acres)</label><input type="number" id="fSize" placeholder="e.g. 3.5" value="3.5"></div>
      </div>
      <div class="field"><label>Main crop grown</label><input type="text" id="fCrop" placeholder="e.g. Tomato" value="Tomato"></div>
      <div class="field hint">🔒 We'll send a one-time OTP to verify this number (simulated in this prototype).</div>
      <button class="btn btn-leaf btn-block" onclick="submitFarmerOnboard()">Create Farmer Account</button>
    </div>
  </div>
  `;
}
function submitFarmerOnboard(){
  const name = document.getElementById('fName').value.trim() || 'Raghav';
  const village = document.getElementById('fVillage').value.trim() || 'chindipur';
  const district = document.getElementById('fDistrict').value.trim() || 'Uttar Pradesh Pradesh';
  const crop = document.getElementById('fCrop').value.trim() || 'Tomato';
  state.farmerProfile = {id:'you', name, village, district, avatar:'👨\u200d🌾', years:1, rating:5.0, deals:0, bio:`New to KisanSetu, growing ${crop} in ${village}.`};
  if(!farmerOf('you')) state.farmers.push(state.farmerProfile);
  state.currentRole = 'farmer';
  toast(`Welcome, ${name}! Farmer account created.`);
  navigate('farmerDashboard');
}

function renderFarmerDashboard(){
  const fp = state.farmerProfile;
  const myListings = state.products.filter(p=>p.farmerId==='you');
  const myOrders = state.orders.filter(o=>o.farmerId==='you');
  const earnings = myOrders.reduce((s,o)=>{
    const sub = o.items.reduce((a,it)=>a+it.qty*it.price,0);
    return s + fairSplit(sub).farmerReceives;
  },0);
  return `
  <div class="wrap screen-head">
    <h2>Good day, ${fp.name.split(' ')[0]} 👋</h2>
    <p>${fp.village}, ${fp.district} · ${myListings.length} active listing${myListings.length===1?'':'s'}</p>
  </div>
  <div class="wrap">
    <div class="grid-3" style="margin-bottom:26px;">
      <div class="card stat-card"><div class="num">${myListings.length}</div><div class="lbl">Active Listings</div></div>
      <div class="card stat-card"><div class="num">${myOrders.length}</div><div class="lbl">Total Orders</div></div>
      <div class="card stat-card"><div class="num mono">${inr(earnings)}</div><div class="lbl">Earnings so far</div></div>
    </div>
    <div class="grid-2">
      <div class="card action-card" onclick="navigate('farmerListForm')">
        <div class="ic">📦</div><h4>List New Produce</h4><p>Post a crop for sale with harvest details &amp; fair price.</p>
      </div>
      <div class="card action-card" onclick="navigate('farmerListings')">
        <div class="ic">🗂️</div><h4>My Listings</h4><p>View and manage everything you currently have for sale.</p>
      </div>
      <div class="card action-card" onclick="navigate('farmerOrders')">
        <div class="ic">🚚</div><h4>Incoming Orders</h4><p>${myOrders.length} order${myOrders.length===1?'':'s'} to pack &amp; fulfil.</p>
      </div>
      <div class="card action-card" onclick="navigate('marketplace')">
        <div class="ic">🔍</div><h4>Preview Marketplace</h4><p>See exactly what customers see when they find your farm.</p>
      </div>
    </div>
  </div>
  `;
}

const CROP_EMOJIS = [['Tomato','🍅'],['Onion','🧅'],['Wheat','🌾'],['Mango','🥭'],['Potato','🥔'],['Carrot','🥕'],['Rice','🍚'],['Chili','🌶️'],['Banana','🍌'],['Spinach','🥬']];
let pickedEmoji = '🍅';
function renderFarmerListForm(){
  pickedEmoji = '🍅';
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('farmerDashboard')">← Back to dashboard</button>
    <h2>📦 List Your Produce</h2>
    <p>The more detail you add, the more trust customers place in your listing.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="card form-card">
      <div class="field">
        <label>Crop</label>
        <div class="emoji-pick" id="emojiPick"></div>
        <input type="text" id="pCrop" placeholder="e.g. Tomato" style="margin-top:10px;" value="Tomato">
      </div>
      <div class="row-2">
        <div class="field"><label>Quantity</label><input type="number" id="pQty" value="180"></div>
        <div class="field"><label>Unit</label>
          <select id="pUnit"><option>kg</option><option>quintal</option><option>dozen</option><option>crate</option></select>
        </div>
      </div>
      <div class="row-2">
        <div class="field"><label>Price you want to receive (per unit)</label><input type="number" id="pPrice" value="34"></div>
        <div class="field"><label>Harvest date</label><input type="date" id="pDate" value="2026-08-20"></div>
      </div>
      <div class="field">
        <label>Farming practice</label>
        <div class="tag-check" id="practiceTags"></div>
      </div>
      <div class="field"><label>Your farm's story (shown to customers)</label>
        <textarea id="pStory" placeholder="e.g. Picked ripe at dawn, no pesticides used.">Grown with care on our family farm — picked fresh and shipped within a day of harvest.</textarea>
      </div>
      <div id="feePreview" style="margin-bottom:18px;"></div>
      <button class="btn btn-leaf btn-block" onclick="submitListing()">Post Produce</button>
    </div>
  </div>
  `;
}
function paintListFormExtras(){
  const ep = document.getElementById('emojiPick');
  if(ep){
    ep.innerHTML = CROP_EMOJIS.map(([name,em])=>`<button type="button" class="${em===pickedEmoji?'sel':''}" onclick="pickEmoji('${em}','${name}')">${em}</button>`).join('');
  }
  const tags = document.getElementById('practiceTags');
  if(tags){
    const options = ['Organic','Natural Farming','No Pesticides','Traditional Seeds','Rain-fed'];
    tags.innerHTML = options.map((o,i)=>`<label><input type="checkbox" class="practiceCk" value="${o}" ${i<2?'checked':''}><span>${o}</span></label>`).join('');
  }
  updateFeePreview();
}
function pickEmoji(em,name){
  pickedEmoji = em;
  document.getElementById('pCrop').value = name;
  paintListFormExtras();
}
function updateFeePreview(){
  const priceEl = document.getElementById('pPrice');
  const qtyEl = document.getElementById('pQty');
  const box = document.getElementById('feePreview');
  if(!priceEl || !box) return;
  const price = Number(priceEl.value)||0;
  const qty = Number(qtyEl.value)||0;
  const subtotal = price*qty;
  const {platformFee, farmerReceives, mandiEstimate} = fairSplit(subtotal || 1);
  const unit = document.getElementById('pUnit') ? document.getElementById('pUnit').value : 'kg';
  box.innerHTML = `
    <div class="ledger">
      <h4>Estimated payout for this listing</h4>
      <div class="ledger-row"><span>If sold in full (${qty} ${unit} × ${inr(price)})</span><span>${inr(subtotal)}</span></div>
      <div class="ledger-row"><span>KisanSetu platform fee (8%)</span><span>− ${inr(platformFee)}</span></div>
      <div class="ledger-row total"><span>You receive</span><span>${inr(farmerReceives)}</span></div>
      <div class="split-bars">
        <div>
          <div class="split-label"><span>Typical mandi chain</span><span>~${inr(mandiEstimate)}</span></div>
          <div class="split-track"><div class="split-fill sindoor" style="width:${subtotal?Math.round(mandiEstimate/subtotal*100):0}%"></div></div>
        </div>
        <div>
          <div class="split-label"><span>On KisanSetu</span><span>${inr(farmerReceives)}</span></div>
          <div class="split-track"><div class="split-fill leaf" style="width:${subtotal?Math.round(farmerReceives/subtotal*100):0}%"></div></div>
        </div>
      </div>
    </div>`;
}
function submitListing(){
  const crop = document.getElementById('pCrop').value.trim() || 'Produce';
  const qty = Number(document.getElementById('pQty').value)||1;
  const unit = document.getElementById('pUnit').value;
  const price = Number(document.getElementById('pPrice').value)||1;
  const date = document.getElementById('pDate').value || '2026-08-20';
  const story = document.getElementById('pStory').value.trim() || 'Fresh from our farm.';
  const practices = Array.from(document.querySelectorAll('.practiceCk:checked')).map(c=>c.value);
  const id = 'p' + (state.products.length + 1) + Math.floor(Math.random()*99);
  state.products.unshift({id, farmerId:'you', crop, emoji:pickedEmoji, quantity:qty, unit, price, harvestDate:date, practices, story});
  toast(`${crop} listed! It's now live in the marketplace.`);
  navigate('farmerListings');
}

function renderFarmerListings(){
  const mine = state.products.filter(p=>p.farmerId==='you');
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('farmerDashboard')">← Back to dashboard</button>
    <h2>🗂️ My Listings</h2>
    <p>${mine.length} item${mine.length===1?'':'s'} currently visible to customers.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    ${mine.length===0 ? `
      <div class="card empty"><div class="ic">📦</div><p>You haven't listed anything yet.</p>
      <button class="btn btn-leaf" style="margin-top:14px;" onclick="navigate('farmerListForm')">List Your First Produce</button></div>
    ` : `<div class="grid-3">${mine.map(p=>productCard(p)).join('')}</div>`}
    <div style="margin-top:24px;"><button class="btn btn-outline" onclick="navigate('farmerListForm')">+ List Another Item</button></div>
  </div>`;
}

function renderFarmerOrders(){
  const mine = state.orders.filter(o=>o.farmerId==='you').slice().reverse();
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('farmerDashboard')">← Back to dashboard</button>
    <h2>🚚 Incoming Orders</h2>
    <p>Update status as you pack and dispatch — customers see this update live.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    ${mine.length===0 ? `<div class="card empty"><div class="ic">🧺</div><p>No orders yet. Once a customer buys your produce, it'll show up here.</p></div>` :
      mine.map(o=>farmerOrderTicket(o)).join('')}
  </div>`;
}
function farmerOrderTicket(o){
  const subtotal = o.items.reduce((a,it)=>a+it.qty*it.price,0);
  const {farmerReceives} = fairSplit(subtotal);
  const idx = STATUSES.indexOf(o.status);
  const next = STATUSES[idx+1];
  return `
  <div class="order-ticket">
    <div class="oh">
      <div>
        <div class="trace">TRACE ${o.traceId}</div>
        <h4 style="margin-top:4px;">Order for ${o.customerName}</h4>
      </div>
      <span class="status-pill">${o.status}</span>
    </div>
    <div class="muted" style="font-size:13.5px;margin-bottom:10px;">${o.items.map(it=>`${productOf(it.productId)?productOf(it.productId).emoji:'📦'} ${it.qty}${productOf(it.productId)?productOf(it.productId).unit:''} ${productOf(it.productId)?productOf(it.productId).crop:''}`).join(', ')}</div>
    <div class="muted" style="font-size:13px;">Deliver to: ${o.address}</div>
    <div class="muted" style="font-size:13px;">You receive: <strong class="mono">${inr(farmerReceives)}</strong></div>
    ${renderStepper(o.status)}
    ${next ? `<button class="btn btn-leaf btn-sm" style="margin-top:14px;" onclick="advanceOrder('${o.id}')">Mark as "${next}"</button>` : `<div style="margin-top:14px;color:var(--leaf-deep);font-weight:700;font-size:13.5px;">✅ Delivered — cycle complete</div>`}
  </div>`;
}
function advanceOrder(orderId){
  const o = state.orders.find(x=>x.id===orderId);
  if(!o) return;
  const idx = STATUSES.indexOf(o.status);
  if(idx < STATUSES.length-1){
    o.status = STATUSES[idx+1];
    toast(`Order marked "${o.status}"`);
  }
  render();
}
function renderCustomerOnboard(){
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('landing')">← Back</button>
    <h2>🧺 Welcome, Customer</h2>
    <p>Just your name and delivery city — start browsing right away.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="card form-card">
      <div class="field"><label>Your name</label><input type="text" id="cName" value="Priya Sharma"></div>
      <div class="field"><label>Delivery city</label><input type="text" id="cCity" value="Indore"></div>
      <button class="btn btn-dark btn-block" onclick="submitCustomerOnboard()">Browse the Marketplace</button>
    </div>
  </div>`;
}
function submitCustomerOnboard(){
  const name = document.getElementById('cName').value.trim() || 'Priya Sharma';
  const city = document.getElementById('cCity').value.trim() || 'Indore';
  state.customerProfile = {name, city};
  state.currentRole = 'customer';
  toast(`Welcome, ${name.split(' ')[0]}!`);
  navigate('marketplace');
}

let activeFilter = 'All';
let searchTerm = '';
function renderMarketplace(){
  const crops = ['All', ...new Set(state.products.map(p=>p.crop))];
  const filtered = state.products.filter(p=>{
    const matchCrop = activeFilter==='All' || p.crop===activeFilter;
    const matchSearch = !searchTerm || p.crop.toLowerCase().includes(searchTerm.toLowerCase()) || farmerOf(p.farmerId).village.toLowerCase().includes(searchTerm.toLowerCase());
    return matchCrop && matchSearch;
  });
  return `
  <div class="wrap screen-head">
    <h2>🔍 Fresh from the Farm</h2>
    <p>Every listing here is traceable straight back to the farmer who grew it.</p>
  </div>
  <div class="wrap">
    <div class="filter-row">
      <div class="search-box"><input type="text" placeholder="Search crop or village..." value="${searchTerm}" oninput="setSearch(this.value)"></div>
      ${crops.map(c=>`<button class="chip-filter ${c===activeFilter?'active':''}" onclick="setFilter('${c}')">${c}</button>`).join('')}
    </div>
    ${filtered.length===0 ? `<div class="card empty"><div class="ic">🌱</div><p>No produce matches that search.</p></div>` :
      `<div class="grid-3" style="padding-bottom:60px;">${filtered.map(p=>productCard(p)).join('')}</div>`}
  </div>`;
}
function setFilter(c){ activeFilter=c; render(); }
function setSearch(v){ searchTerm=v; render(); }

function productCard(p){
  const f = farmerOf(p.farmerId);
  return `
  <div class="card product-card" onclick="navigate('productDetail',{id:'${p.id}'})">
    <div class="product-photo">${p.emoji}<span class="verified-badge">✓ Verified</span></div>
    <div class="product-body">
      <h4>${p.crop}</h4>
      <div class="product-meta">📍 ${f.village}, ${f.district} · <span class="rating">★ ${f.rating}</span></div>
      <div class="practice-tags">${p.practices.slice(0,2).map(t=>`<span>${t}</span>`).join('')}</div>
      <div class="price-row">
        <div><span class="price">${inr(p.price)}</span> <span class="unit">/ ${p.unit}</span></div>
        <div class="muted" style="font-size:12px;">${p.quantity}${p.unit} avail.</div>
      </div>
    </div>
  </div>`;
}

function renderProductDetail(){
  const p = productOf(state.params.id);
  if(!p) return `<div class="wrap"><p>Product not found.</p></div>`;
  const f = farmerOf(p.farmerId);
  const subtotal = p.price;
  const {platformFee, farmerReceives, mandiEstimate} = fairSplit(subtotal);
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('marketplace')">← Back to marketplace</button>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="passport" style="margin-bottom:24px;">
      <div class="passport-top">
        <div class="passport-avatar">${f.avatar}</div>
        <div>
          <h3>${f.name}</h3>
          <div class="vloc">📍 ${f.village}, ${f.district} · ${f.years} yrs farming · ★ ${f.rating} (${f.deals} deals)</div>
        </div>
        <div class="stamp">VERIFIED<br>FARMER<br>✓</div>
      </div>
      <div class="passport-body">
        <div class="story">"${f.bio}"</div>
        <div class="pp-grid">
          <div class="pp-item"><div class="k">Crop</div><div class="v">${p.emoji} ${p.crop}</div></div>
          <div class="pp-item"><div class="k">Harvest date</div><div class="v">${p.harvestDate}</div></div>
          <div class="pp-item"><div class="k">Available</div><div class="v">${p.quantity} ${p.unit}</div></div>
          <div class="pp-item"><div class="k">Practice</div><div class="v">${p.practices.join(', ')||'—'}</div></div>
          <div class="pp-item"><div class="k">Farm size</div><div class="v">3.5 acres</div></div>
          <div class="pp-item"><div class="k">Trace status</div><div class="v">Full farm-to-door</div></div>
        </div>
        <div class="story" style="border-color:var(--leaf);">${p.story}</div>
      </div>
    </div>

    <div class="grid-2">
      <div class="ledger">
        <h4>Fair price breakdown (per ${p.unit})</h4>
        <div class="ledger-row"><span>You pay</span><span>${inr(subtotal)}</span></div>
        <div class="ledger-row"><span>Platform fee (8%)</span><span>− ${inr(platformFee)}</span></div>
        <div class="ledger-row total"><span>Farmer receives</span><span>${inr(farmerReceives)}</span></div>
        <div class="split-bars">
          <div><div class="split-label"><span>Typical mandi chain gives farmer</span><span>~${Math.round(mandiEstimate/subtotal*100)}%</span></div>
            <div class="split-track"><div class="split-fill sindoor" style="width:${Math.round(mandiEstimate/subtotal*100)}%"></div></div></div>
          <div><div class="split-label"><span>KisanSetu gives farmer</span><span>${Math.round(farmerReceives/subtotal*100)}%</span></div>
            <div class="split-track"><div class="split-fill leaf" style="width:${Math.round(farmerReceives/subtotal*100)}%"></div></div></div>
        </div>
      </div>
      <div class="card" style="padding:22px;display:flex;flex-direction:column;gap:14px;">
        <h4>Add to your basket</h4>
        <div class="field" style="margin-bottom:0;">
          <label>Quantity (${p.unit})</label>
          <input type="number" id="buyQty" value="2" min="1" max="${p.quantity}">
        </div>
        <div class="muted" style="font-size:13px;">Free delivery on orders above ₹300 · flat ₹30 fee otherwise.</div>
        <button class="btn btn-primary btn-block" onclick="addToCartFromDetail('${p.id}')">Add to Cart</button>
        <button class="btn btn-outline btn-block" onclick="navigate('marketplace')">Keep Browsing</button>
      </div>
    </div>
  </div>`;
}
function addToCartFromDetail(pid){
  if(!state.customerProfile){ navigate('customerOnboard'); return; }
  const qty = Number(document.getElementById('buyQty').value)||1;
  addToCart(pid, qty);
}
function addToCart(pid, qty=1){
  const existing = state.cart.find(c=>c.productId===pid);
  if(existing) existing.qty += qty;
  else state.cart.push({productId:pid, qty});
  toast('Added to cart 🛒');
  renderHeader();
}

/* ============================= CART ============================= */
function renderCart(){
  if(state.cart.length===0){
    return `<div class="wrap screen-head"><h2>🛒 Your Cart</h2></div>
    <div class="wrap" style="padding-bottom:70px;"><div class="card empty"><div class="ic">🧺</div><p>Your cart is empty.</p>
    <button class="btn btn-primary" style="margin-top:14px;" onclick="navigate('marketplace')">Browse Marketplace</button></div></div>`;
  }
  const subtotal = state.cart.reduce((s,c)=>s + c.qty*productOf(c.productId).price, 0);
  const delivery = subtotal >= 300 ? 0 : 30;
  const total = subtotal + delivery;
  return `
  <div class="wrap screen-head"><h2>🛒 Your Cart</h2><p>Review before checkout — prices are exactly what the farmer set.</p></div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="card" style="padding:8px 24px;margin-bottom:20px;">
      ${state.cart.map(c=>{
        const p = productOf(c.productId); const f = farmerOf(p.farmerId);
        return `<div class="cart-row">
          <div class="cart-emoji">${p.emoji}</div>
          <div class="cart-info"><h5>${p.crop}</h5><div class="from">from ${f.name}, ${f.village} · ${inr(p.price)}/${p.unit}</div></div>
          <div class="qty-ctrl">
            <button onclick="changeQty('${p.id}',-1)">−</button><span>${c.qty}</span><button onclick="changeQty('${p.id}',1)">+</button>
          </div>
          <div class="cart-price">${inr(p.price*c.qty)}</div>
          <button class="remove-x" onclick="removeFromCart('${p.id}')">✕</button>
        </div>`;
      }).join('')}
    </div>
    <div class="ledger" style="max-width:380px;margin-left:auto;">
      <div class="ledger-row"><span>Subtotal</span><span>${inr(subtotal)}</span></div>
      <div class="ledger-row"><span>Delivery</span><span>${delivery===0?'Free':inr(delivery)}</span></div>
      <div class="ledger-row total"><span>Total</span><span>${inr(total)}</span></div>
    </div>
    <div style="max-width:380px;margin-left:auto;margin-top:16px;display:flex;flex-direction:column;gap:10px;">
      <button class="btn btn-primary btn-block" onclick="navigate('checkout')">Proceed to Checkout</button>
      <button class="btn btn-outline btn-block" onclick="navigate('marketplace')">+ Add More Produce</button>
    </div>
  </div>`;
}
function changeQty(pid, delta){
  const item = state.cart.find(c=>c.productId===pid);
  if(!item) return;
  item.qty += delta;
  if(item.qty<=0) state.cart = state.cart.filter(c=>c.productId!==pid);
  render();
}
function removeFromCart(pid){
  state.cart = state.cart.filter(c=>c.productId!==pid);
  toast('Removed from cart');
  render();
}

function renderCheckout(){
  if(state.cart.length===0){ navigate('cart'); return ''; }
  const subtotal = state.cart.reduce((s,c)=>s + c.qty*productOf(c.productId).price, 0);
  const delivery = subtotal >= 300 ? 0 : 30;
  return `
  <div class="wrap screen-head">
    <button class="back-link" onclick="navigate('cart')">← Back to cart</button>
    <h2>🧾 Checkout</h2>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    <div class="card form-card">
      <div class="field"><label>Delivery address</label>
        <textarea id="addr">${state.customerProfile.name}, ${state.customerProfile.city}</textarea>
      </div>
      <div class="ledger" style="margin-bottom:20px;">
        <div class="ledger-row"><span>Subtotal</span><span>${inr(subtotal)}</span></div>
        <div class="ledger-row"><span>Delivery</span><span>${delivery===0?'Free':inr(delivery)}</span></div>
        <div class="ledger-row total"><span>Total (escrow-secured)</span><span>${inr(subtotal+delivery)}</span></div>
      </div>
      <div class="field hint" style="margin-bottom:20px;">🔒 Payment is held securely and released to the farmer only once delivery is confirmed.</div>
      <button class="btn btn-primary btn-block" onclick="placeOrder()">Place Order &amp; Pay ${inr(subtotal+delivery)}</button>
    </div>
  </div>`;
}
function placeOrder(){
  const address = document.getElementById('addr').value.trim() || state.customerProfile.city;
  const byFarmer = {};
  state.cart.forEach(c=>{
    const p = productOf(c.productId);
    if(!byFarmer[p.farmerId]) byFarmer[p.farmerId] = [];
    byFarmer[p.farmerId].push({productId:c.productId, qty:c.qty, price:p.price});
  });
  Object.keys(byFarmer).forEach(farmerId=>{
    state.orders.push({
      id:'ord' + (state.orders.length+1) + Math.floor(Math.random()*999),
      farmerId, customerName: state.customerProfile.name,
      items: byFarmer[farmerId], status:'Confirmed', address,
      traceId: genTrace(), placedAt: new Date().toISOString()
    });
  });
  state.cart = [];
  toast('Order placed! Payment secured in escrow. 🎉');
  navigate('orderTracking');
}

function renderStepper(status){
  const idx = STATUSES.indexOf(status);
  return `<div class="stepper">
    ${STATUSES.map((s,i)=>`<div class="step ${i<idx?'done':''} ${i===idx?'current':''}">
      <div class="sdot">${i<idx?'✓':i+1}</div><div class="slabel">${s}</div>
    </div>`).join('')}
  </div>`;
}
function renderOrderTracking(){
  const mine = state.orders.filter(o=>o.customerName===state.customerProfile.name).slice().reverse();
  return `
  <div class="wrap screen-head">
    <h2>📦 Your Orders</h2>
    <p>Live status, straight from the farmer's dispatch.</p>
  </div>
  <div class="wrap" style="padding-bottom:70px;">
    ${mine.length===0 ? `<div class="card empty"><div class="ic">📭</div><p>No orders yet.</p>
      <button class="btn btn-primary" style="margin-top:14px;" onclick="navigate('marketplace')">Browse Marketplace</button></div>` :
      mine.map(o=>{
        const f = farmerOf(o.farmerId);
        const subtotal = o.items.reduce((a,it)=>a+it.qty*it.price,0);
        return `<div class="order-ticket">
          <div class="oh">
            <div><div class="trace">TRACE ${o.traceId}</div>
              <h4 style="margin-top:4px;">${o.items.map(it=>`${productOf(it.productId).emoji} ${it.qty}${productOf(it.productId).unit} ${productOf(it.productId).crop}`).join(', ')}</h4>
            </div>
            <span class="status-pill">${o.status}</span>
          </div>
          <div class="muted" style="font-size:13.5px;">From ${f.avatar} <strong>${f.name}</strong>, ${f.village} · <button class="link-btn" onclick="navigate('productDetail',{id:'${o.items[0].productId}'})">View farm passport</button></div>
          <div class="muted" style="font-size:13px;margin-top:2px;">Delivering to: ${o.address}</div>
          <div class="muted" style="font-size:13px;">Total paid: <strong class="mono">${inr(subtotal)}</strong> (escrow-secured)</div>
          ${renderStepper(o.status)}
        </div>`;
      }).join('')}
    <button class="btn btn-outline" onclick="navigate('marketplace')">← Continue Shopping</button>
  </div>`;
}

function render(){
  renderHeader();
  const app = document.getElementById('app');
  switch(state.screen){
    case 'landing': app.innerHTML = renderLanding(); break;
    case 'farmerOnboard': app.innerHTML = renderFarmerOnboard(); break;
    case 'farmerDashboard': app.innerHTML = renderFarmerDashboard(); break;
    case 'farmerListForm': app.innerHTML = renderFarmerListForm(); paintListFormExtras(); attachFeeListeners(); break;
    case 'farmerListings': app.innerHTML = renderFarmerListings(); break;
    case 'farmerOrders': app.innerHTML = renderFarmerOrders(); break;
    case 'customerOnboard': app.innerHTML = renderCustomerOnboard(); break;
    case 'marketplace': app.innerHTML = renderMarketplace(); break;
    case 'productDetail': app.innerHTML = renderProductDetail(); break;
    case 'cart': app.innerHTML = renderCart(); break;
    case 'checkout': app.innerHTML = renderCheckout(); break;
    case 'orderTracking': app.innerHTML = renderOrderTracking(); break;
    default: app.innerHTML = renderLanding();
  }
}
function attachFeeListeners(){
  ['pPrice','pQty','pUnit'].forEach(id=>{
    const el = document.getElementById(id);
    if(el){ el.addEventListener('input', updateFeePreview); el.addEventListener('change', updateFeePreview); }
  });
}

render();