refactor.cjs

const fs = require('fs');

let content = fs.readFileSync('src/app/StorePage.tsx', 'utf8');

// Replace state setters
content = content.replaceAll('setIsCartOpen(true)', "setViewState('checkout')");
content = content.replaceAll('setIsCartOpen(false)', "setViewState('grid')");
content = content.replaceAll('setIsRazorpayOpen(true)', "setViewState('checkout')");
content = content.replaceAll('setIsRazorpayOpen(false)', "setViewState('grid')");

// 1. Extract Cart Content
const cartStartMarker = '<div className="bg-white dark:bg-[#1A1723] w-full max-w-md h-full shadow-2xl border-l border-nivarra-border/20 flex flex-col justify-between p-6 md:p-8 animate-slide-in relative text-left">';
const cartStartIndex = content.indexOf(cartStartMarker);

const cartEndMarker = '          </div>\n        </div>\n      )}\n\n      {/* ======================================= */}\n      {/* MOBILE COLLAPSIBLE FILTER DRAWER */}\n      {/* ======================================= */}';
const cartEndIndex = content.indexOf(cartEndMarker);

if (cartStartIndex === -1 || cartEndIndex === -1) {
  console.error("Cart markers not found");
  process.exit(1);
}

const cartContent = content.substring(cartStartIndex + cartStartMarker.length, cartEndIndex);

// 2. Extract Razorpay Content
const rzpStartMarker = '<div className="bg-[#0f111e] text-white w-full max-w-[480px] rounded-3xl shadow-2xl border border-slate-800 p-6 flex flex-col justify-between overflow-hidden relative font-sans" style={{ maxHeight: \'80vh\' }}>';
const rzpStartIndex = content.indexOf(rzpStartMarker);

const rzpEndMarker = '          </div>\n        </div>\n      )}\n\n    </div>\n  );\n}';
const rzpEndIndex = content.indexOf(rzpEndMarker);

if (rzpStartIndex === -1 || rzpEndIndex === -1) {
  console.error("Razorpay markers not found");
  process.exit(1);
}

const rzpContent = content.substring(rzpStartIndex + rzpStartMarker.length, rzpEndIndex);

// 3. Build new Checkout Layout
const checkoutLayout = `
      {viewState === 'checkout' && (
        <div className="max-w-[1400px] mx-auto px-4 md:px-8 pt-10 pb-16 animate-fade-in min-h-screen">
          <button 
            onClick={() => setViewState('grid')}
            className="flex items-center gap-2 text-nivarra-text-secondary hover:text-nivarra-text-primary transition-colors mb-6 font-bold text-sm bg-transparent border-none cursor-pointer"
          >
            ← Back to Store
          </button>
          <div className="grid grid-cols-1 xl:grid-cols-3 gap-8 items-start h-full">
            <div className="xl:col-span-2 flex flex-col h-full min-h-[600px] bg-white dark:bg-[#1A1723] rounded-3xl border border-nivarra-border shadow-xl p-6 md:p-8 relative text-left">
              ${cartContent}
            </div>
            <div className="xl:col-span-1 flex flex-col h-full min-h-[600px] bg-[#0f111e] text-white rounded-3xl shadow-2xl border border-slate-800 p-6 overflow-hidden relative font-sans">
              ${rzpContent}
            </div>
          </div>
        </div>
      )}
`;

// 4. Remove old blocks
// Remove Razorpay block
const rzpOuterStart = content.lastIndexOf('{/* ======================================= */}\n      {/* 4. SIMULATED PAYMENT GATEWAY MODAL (RAZORPAY) */}\n      {/* ======================================= */}', rzpStartIndex);
content = content.substring(0, rzpOuterStart) + '\n    </div>\n  );\n}\n';

// Remove Cart block
const cartOuterStart = content.lastIndexOf('{/* ======================================= */}\n      {/* SHOPPING CART DRAWER / OVERLAY */}\n      {/* ======================================= */}', cartStartIndex);

// Replace cartOuterStart to cartEndIndex + endMarker length (minus the next section comments which we kept in the marker)
content = content.substring(0, cartOuterStart) + checkoutLayout + '\n\n      {/* ======================================= */}\n      {/* MOBILE COLLAPSIBLE FILTER DRAWER */}\n      {/* ======================================= */}\n' + content.substring(cartEndIndex + cartEndMarker.length);

fs.writeFileSync('src/app/StorePage.tsx', content);
console.log("Refactored successfully.");