fix: move useState before conditional returns, fix yearly total display

app/checkout/page.tsx

@@ -123,6 +123,8 @@ function CheckoutContent() {
   const searchParams = useSearchParams()
   const { user, loading: authLoading } = useAuth()
   const { data: subscription } = useSubscription()
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
 
   const status = searchParams.get('status')
   const plan = searchParams.get('plan')
@@ -170,8 +172,6 @@ function CheckoutContent() {
   const planId = plan!
   const billingInterval = interval as 'month' | 'year'
   const pageviewLimit = Number(limit)
-  const [country, setCountry] = useState('')
-  const [vatId, setVatId] = useState('')
 
   return (
     <div className="flex h-screen overflow-hidden">

components/checkout/PlanSummary.tsx

@@ -158,11 +158,11 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               </div>
             )}
             <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
-              <span>Total /mo</span>
+              <span>Total {isYearly ? '/year' : '/mo'}</span>
               <span>&euro;{vatResult.total_amount}</span>
             </div>
             {isYearly && (
-              <p className="text-xs text-neutral-500">Billed as &euro;{(parseFloat(vatResult.total_amount) * 12).toFixed(2)}/year</p>
+              <p className="text-xs text-neutral-500">&euro;{(parseFloat(vatResult.total_amount) / 12).toFixed(2)}/mo</p>
             )}
           </div>
         ) : null}