Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>

src/components/PlansSection.tsx

@@ -28,6 +28,7 @@ type PaymentMethod = "card" | "invoice";
 const PlansSection = () => {
   const [employees, setEmployees] = useState(10);
   const [loadingMethod, setLoadingMethod] = useState<PaymentMethod | null>(null);
+  const [showPaymentOptions, setShowPaymentOptions] = useState(false);
 
   const { products, isLoading: productsLoading } = useShopifyProducts(
     "product_type:Abonnemang"
@@ -163,8 +164,20 @@ const PlansSection = () => {
               <div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
             </div>
 
-            {/* Two CTAs — pick payment method, then straight to Shopify checkout */}
+            {!showPaymentOptions ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
+              <button
+                onClick={() => setShowPaymentOptions(true)}
+                disabled={isBusy}
+                className="btn-classic w-full py-4 text-base md:text-lg rounded-sm disabled:opacity-50 mt-2"
+              >
+                Starta abonnemang
+              </button>
+            ) : (
+              <div className="animate-fade-in space-y-3 pt-2">
+                <p className="text-muted-foreground text-sm">
+                  Välj betalningsmetod
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                   <button
                     onClick={() => handleStart("card")}
                     disabled={isBusy}
@@ -194,10 +207,18 @@ const PlansSection = () => {
                     )}
                   </button>
                 </div>
+                <button
+                  onClick={() => setShowPaymentOptions(false)}
+                  className="text-muted-foreground text-xs underline hover:text-foreground"
+                >
+                  ← Tillbaka
+                </button>
                 <p className="text-muted-foreground text-xs">
                   Du slutför beställningen säkert hos Shopify.
                 </p>
               </div>
+            )}
+          </div>
         </div>
       </div>
     </section>